@acorex/platform 18.0.16 → 18.1.0

package/fesm2022/acorex-platform-layouts.mjs

@@ -1,36 +1,63 @@
-import { AXDialogService, AXDialogModule } from '@acorex/components/dialog';
-import { AXBasePageComponent } from '@acorex/components/page';
-import { AXToastService } from '@acorex/components/toast';
-import * as i2 from '@acorex/core/utils';
-import { AXUnsubscriber } from '@acorex/core/utils';
-import * as i10$1 from '@acorex/platform/common';
-import { AXPSchemaRegistryService, EQ_OPER, isSmallScreen, AXPEntityRegistryService, AXPLayoutService, AXP_MENU_LOADER, AXPLayoutChildDrawerToggle, convertPropertiesToColumns, AXPSchemaModule, AXPCommonWidgetModule, AXPEntityListViewConfigEmpty, AXPWorkflowNavigateAction, getChildDrawer, AXPLayoutChildDrawerClose, AXPStickyDirective, AXPCommonModule, AXMWorkflowErrorHandler, AXPDialogConfirmAction, AXPToastAction } from '@acorex/platform/common';
-import * as i15 from '@angular/cdk/drag-drop';
-import { moveItemInArray, CdkDropList, CdkDrag, CdkDragPlaceholder, CdkDragHandle } from '@angular/cdk/drag-drop';
-import * as i0 from '@angular/core';
-import { inject, signal, computed, Component, ChangeDetectionStrategy, Input, EventEmitter, Output, ViewEncapsulation, ChangeDetectorRef, ViewChild, Injectable, NgModule, InjectionToken } from '@angular/core';
-import { cloneDeep, assign } from 'lodash-es';
-import * as i1 from '@angular/common';
-import { CommonModule, Location } from '@angular/common';
-import * as i1$1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
+import * as i1$3 from '@acorex/components/action-sheet';
+import { AXActionSheetModule } from '@acorex/components/action-sheet';
+import * as i5 from '@acorex/components/badge';
+import { AXBadgeModule } from '@acorex/components/badge';
+import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
 import * as i4 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
 import * as i4$1 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
-import * as i5 from '@acorex/components/badge';
-import { AXBadgeModule } from '@acorex/components/badge';
-import * as i6 from '@acorex/components/popover';
-import { AXPopoverModule } from '@acorex/components/popover';
+import { AXDialogService, AXDialogModule } from '@acorex/components/dialog';
+import * as i11 from '@acorex/components/drawer';
+import { AXDrawerModule } from '@acorex/components/drawer';
+import * as i6 from '@acorex/components/dropdown';
+import { AXDropdownModule } from '@acorex/components/dropdown';
+import * as i2$1 from '@acorex/components/form';
+import { AXFormModule } from '@acorex/components/form';
 import * as i7 from '@acorex/components/image';
 import { AXImageModule } from '@acorex/components/image';
-import * as i8 from '@acorex/components/switch';
+import { AXLoadingModule } from '@acorex/components/loading';
+import * as i6$1 from '@acorex/components/popover';
+import { AXPopoverModule } from '@acorex/components/popover';
+import { AXPopupService } from '@acorex/components/popup';
+import * as i8$1 from '@acorex/components/switch';
 import { AXSwitchModule } from '@acorex/components/switch';
 import * as i9 from '@acorex/components/tabs';
 import { AXTabsModule } from '@acorex/components/tabs';
-import * as i10 from '@acorex/components/select-box';
+import { AXTooltipModule } from '@acorex/components/tooltip';
+import * as i3 from '@acorex/core/platform';
+import { AXPlatform } from '@acorex/core/platform';
+import * as i8 from '@acorex/core/translation';
+import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
+import * as i2 from '@acorex/core/utils';
+import { AXUnsubscriber } from '@acorex/core/utils';
+import * as i14$1 from '@acorex/platform/auth';
+import { AXPSessionService, AXPAuthModule, AXPAuthGuard } from '@acorex/platform/auth';
+import * as i10 from '@acorex/platform/common';
+import { AXPEntityRegistryService, AXPLayoutService, AXPWorkflowNavigateAction, isSmallScreen, getChildDrawer, AXPLayoutChildDrawerClose, AXPLayoutChildDrawerToggle, AXPSchemaModule, AXPCommonWidgetModule, AXPStickyDirective, AXPSchemaRegistryService, EQ_OPER, AXP_MENU_LOADER, convertPropertiesToColumns, AXPEntityListViewConfigEmpty, AXPCommonModule, AXMWorkflowErrorHandler, AXPDialogConfirmAction, AXPToastAction } from '@acorex/platform/common';
+import * as i1$4 from '@acorex/platform/workflow';
+import { createWorkFlowEvent, AXPWorkflowAction, AXPWorkflowFunction, AXPWorkflowService, ofType as ofType$1, AXPWorkflowModule } from '@acorex/platform/workflow';
+import * as i1$1 from '@angular/common';
+import { Location, CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, Injectable, ChangeDetectorRef, signal, Component, ChangeDetectionStrategy, ViewChild, computed, Input, EventEmitter, Output, ViewEncapsulation, NgModule, InjectionToken } from '@angular/core';
+import { ActivatedRoute, Router, RouterModule, RouteReuseStrategy } from '@angular/router';
+import * as i1 from '@ngrx/effects';
+import { ofType } from '@ngrx/effects';
+import { Store } from '@ngrx/store';
+import { cloneDeep, assign } from 'lodash-es';
+import { BehaviorSubject, defaultIfEmpty, switchMap, of, map, first } from 'rxjs';
+import { AXFormatService } from '@acorex/core/format';
+import { AXLoadingDialogService } from '@acorex/components/loading-dialog';
+import { AXBasePageComponent } from '@acorex/components/page';
+import { AXToastService } from '@acorex/components/toast';
+import * as i15 from '@angular/cdk/drag-drop';
+import { moveItemInArray, CdkDropList, CdkDrag, CdkDragPlaceholder, CdkDragHandle } from '@angular/cdk/drag-drop';
+import * as i1$2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i10$1 from '@acorex/components/select-box';
 import { AXSelectBoxComponent, AXSelectBoxModule } from '@acorex/components/select-box';
-import * as i11 from '@acorex/components/text-box';
+import * as i11$1 from '@acorex/components/text-box';
 import { AXTextBoxModule } from '@acorex/components/text-box';
 import * as i7$1 from '@acorex/components/label';
 import { AXLabelModule } from '@acorex/components/label';
@@ -38,556 +65,108 @@ import * as i13 from '@acorex/components/selection-list';
 import { AXSelectionListModule } from '@acorex/components/selection-list';
 import * as i14 from '@acorex/components/dropdown-button';
 import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
-import * as i8$1 from '@acorex/core/translation';
-import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
-import { Store } from '@ngrx/store';
-import { of, first, map, BehaviorSubject, defaultIfEmpty, switchMap } from 'rxjs';
-import { AXPopupService } from '@acorex/components/popup';
-import * as i1$2 from '@acorex/components/action-sheet';
-import { AXActionSheetModule } from '@acorex/components/action-sheet';
-import * as i6$1 from '@acorex/components/data-table';
+import * as i6$2 from '@acorex/components/data-table';
 import { AXDataTableModule } from '@acorex/components/data-table';
-import * as i11$1 from '@acorex/components/drawer';
-import { AXDrawerModule } from '@acorex/components/drawer';
-import * as i3 from '@acorex/core/platform';
-import { AXPlatform } from '@acorex/core/platform';
-import { ActivatedRoute, Router, RouterModule, RouteReuseStrategy } from '@angular/router';
-import * as i1$4 from '@acorex/platform/workflow';
-import { createWorkFlowEvent, AXPWorkflowAction, AXPWorkflowFunction, AXPWorkflowService, ofType, AXPWorkflowModule } from '@acorex/platform/workflow';
-import { AXFormatService } from '@acorex/core/format';
-import { AXLoadingDialogService } from '@acorex/components/loading-dialog';
-import * as i10$2 from '@acorex/components/dropdown';
-import { AXDropdownModule } from '@acorex/components/dropdown';
 import * as i12 from '@acorex/components/search-box';
 import { AXSearchBoxModule } from '@acorex/components/search-box';
-import * as i14$1 from '@acorex/platform/auth';
-import { AXPAuthModule, AXPSessionService, AXPAuthGuard } from '@acorex/platform/auth';
 import { AXCollapseModule } from '@acorex/components/collapse';
 import { AXCommonModule, AXDataSource } from '@acorex/components/common';
-import * as i2$1 from '@acorex/components/form';
-import { AXFormModule } from '@acorex/components/form';
 import { AXListModule } from '@acorex/components/list';
-import { AXLoadingModule } from '@acorex/components/loading';
 import { PortalModule } from '@angular/cdk/portal';
-import * as i1$3 from '@ngrx/effects';
-import { ofType as ofType$1 } from '@ngrx/effects';
-import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
-import { AXTooltipModule } from '@acorex/components/tooltip';
 
-class AXPEntityCreateCustomViewComponent extends AXBasePageComponent {
-    constructor() {
-        super(...arguments);
-        this.schemaRegistry = inject(AXPSchemaRegistryService);
-        this.toastService = inject(AXToastService);
-        this.dialogService = inject(AXDialogService);
-        this.subscriber = inject(AXUnsubscriber);
-        this.mode = 'create';
-        this.selectedView = {};
-        this.showNameInput = signal(false);
-        this.props = signal([]);
-        this.columns = signal([]);
-        this.visibleColumns = computed(() => this.columns().filter((c) => c.visible));
-        this.conditions = signal([]);
-        this.sorts = signal([]);
-        this.selectedConditionNames = [];
-        this.viewNames = [];
-    }
-    ngOnInit() {
-        this.props.set(cloneDeep(this.loader.entity.properties));
-        this.columns.set(cloneDeep(this.selectedView.columns));
-        this.conditions.set(cloneDeep(this.selectedView.conditions));
-        this.sorts.set(cloneDeep(this.selectedView.sorts));
-        this.loader.views$.pipe(this.subscriber.takeUntilDestroy).subscribe((views) => {
-            this.viewNames = views.map((v) => v.name);
-        });
+class AXPEntityCreateLoaderDefault {
+    constructor(config, store, formatService) {
+        this.config = config;
+        this.store = store;
+        this.formatService = formatService;
+        this._data = {};
+        this._currentSection = 'default';
+        this._sections$ = new BehaviorSubject(this.sections);
+        //****************** Properties ******************//
+        this.getProp = (name) => this.entity.properties.find((c) => c.name == name);
+        this.isRequired = (name) => this.getProp(name)?.validationRules?.some(c => c.rule == 'required') || false;
+        this._currentSection = this.sections[0]?.name || 'default';
     }
-    //****************** Columns ******************//
-    updateColumnItem(event, colName) {
-        if (event.isUserInteraction) {
-            this.columns.update((prevCols) => prevCols.map((col) => (col.name === colName ? { ...col, visible: event.value } : col)));
+    get entity() {
+        if (!this._config) {
+            this._config = cloneDeep(this.config);
         }
+        return this._config;
     }
-    //****************** Sorts ******************//
-    updateSortItem(item) {
-        this.sorts.update((prevSorts) => prevSorts.map((sort) => (sort.name === item.name ? { ...sort, dir: sort.dir == 'asc' ? 'desc' : 'asc' } : sort)));
-    }
-    addSortItem() {
-        const sortNames = this.sorts().map((p) => p.name);
-        console.log(this.props(), sortNames);
-        const name = this.props().find((c) => !sortNames.includes(c.name))?.name || this.props()[0].name;
-        this.sorts.update((prevSorts) => [...prevSorts, { name, dir: 'asc' }]);
-    }
-    removeSortItem(item) {
-        this.sorts.update((prevSorts) => prevSorts.filter((sort) => item.name != sort.name));
-    }
-    //****************** Conditions ******************//
-    getSchema(name) {
-        return this.props().find((c) => c.name == name)?.schema ?? '';
-    }
-    getOperators(name) {
-        const schemaName = this.props().find((c) => c.name == name)?.schema ?? '';
-        return this.schemaRegistry.resolve(schemaName)?.filterOptions?.operators ?? [];
+    get data() {
+        return this._data;
     }
-    getDefaultOperator(name) {
-        const schemaName = this.props().find((c) => c.name == name)?.schema ?? '';
-        return this.schemaRegistry.resolve(schemaName)?.filterOptions?.default ?? EQ_OPER;
+    get view() {
+        return this.entity.views.createView;
     }
-    getOperatorTitle(schemaName, oprName) {
-        return this.getOperators(schemaName).find((c) => c.name == oprName)?.title || '';
+    //****************** Sections ******************//
+    get sections() {
+        return this.view.root.sections?.length
+            ? this.view.root.sections
+            : [
+                {
+                    name: 'default',
+                    title: 'Default',
+                    properties: this.view.root.properties,
+                },
+            ];
     }
-    resetSelectedFieldNames() {
-        this.selectedConditionNames = this.conditions().map((c) => c.name);
+    get sections$() {
+        return this._sections$.pipe(defaultIfEmpty([]));
     }
-    addCondition() {
-        const conditions = this.selectedConditionNames.map((c) => {
-            const opr = this.getDefaultOperator(c);
-            return {
-                name: c,
-                operator: opr.name,
-            };
-        });
-        this.conditions.set(conditions);
+    get section$() {
+        return this.sections$.pipe(switchMap((sections) => {
+            const section = sections.find((c) => c.name === this._currentSection) ?? this.sections[0];
+            if (!section.sections?.length) {
+                section.sections = [
+                    {
+                        name: 'default',
+                        title: 'Details',
+                        properties: section.properties,
+                    },
+                ];
+            }
+            return of(section);
+        }));
     }
-    removeCondition(item) {
-        this.conditions.update((prevConditions) => prevConditions.filter((con) => con.name != item.name));
+    get hasSections$() {
+        return this.sections$.pipe(map((c) => c.length > 1));
     }
-    //****************** Common ******************//
-    drop(type, event) {
-        switch (type) {
-            case 'columns':
-                this.columns.update((prevCols) => {
-                    const columns = prevCols;
-                    moveItemInArray(columns, event.previousIndex, event.currentIndex);
-                    return columns;
-                });
-                break;
-            case 'sorts':
-                this.sorts.update((prevSorts) => {
-                    const sorts = prevSorts;
-                    moveItemInArray(sorts, event.previousIndex, event.currentIndex);
-                    return sorts;
-                });
-                break;
-            case 'conditions':
-                this.conditions.update((prevConditions) => {
-                    const conditions = prevConditions;
-                    moveItemInArray(conditions, event.previousIndex, event.currentIndex);
-                    return conditions;
-                });
-                break;
-            default:
-                break;
-        }
+    get isLast$() {
+        return this.sections$.pipe(map((c) => this.sections.length - this.sections.findIndex((c) => c.name == this._currentSection) == 1));
     }
-    changeViewNameToggle() {
-        this.showNameInput.update((prev) => !prev);
+    get isFirst$() {
+        return this.sections$.pipe(map((c) => this.sections.findIndex((c) => c.name == this._currentSection) == 0));
     }
-    generateViewName(title) {
-        return title.replace(/\s+/g, '-').toLowerCase();
+    get currentIndex$() {
+        return this.sections$.pipe(map((c) => this.sections.findIndex((c) => c.name == this._currentSection)));
     }
-    handleApplyClick() {
-        const updatedView = {
-            ...this.selectedView,
-            name: this.generateViewName(this.selectedView.title),
-            conditions: this.conditions(),
-            columns: this.columns(),
-            sorts: this.sorts(),
+    setSection(name) {
+        this._currentSection = name ?? 'default';
+        const updatedSection = this.sections.find((c) => c.name === this._currentSection) || {
+            name: 'default',
+            title: 'Default',
+            properties: this.view.root.properties,
         };
-        if (this.viewNames.includes(updatedView.name) && this.mode == 'create') {
-            this.toastService.show({
-                title: 'Invalid Title',
-                content: 'The title you have chosen already exists. Please choose a different title for your custom view.',
-                color: 'danger',
-                location: 'bottom-center',
-                closeButton: true,
-                timeOut: 3000,
-            });
+        const currentSections = this._sections$.value;
+        const updatedSections = currentSections.map((section) => {
+            if (section.name === updatedSection.name) {
+                return updatedSection;
+            }
+            else {
+                return section;
+            }
+        });
+        this._sections$.next(updatedSections);
+    }
+    next() {
+        const nextIndex = this.sections.findIndex((c) => c.name == this._currentSection) + 1;
+        if (nextIndex >= this.sections.length) {
+            return Promise.resolve();
         }
         else {
-            this.close({ save: true, updatedView });
-        }
-    }
-    handleResetClick() {
-        this.conditions.set(cloneDeep(this.selectedView.conditions));
-        this.columns.set(cloneDeep(this.selectedView.columns));
-        this.sorts.set(cloneDeep(this.selectedView.sorts));
-    }
-    handleDiscardClick() {
-        this.close({ save: false });
-    }
-    handleCancelClick() {
-        this.close({ save: false });
-    }
-    handleDeleteClick() {
-        this.dialogService
-            .confirm('Warning', 'Are you sure want to delete this view?', 'danger', 'horizontal')
-            .then((data) => {
-            if (data.result) {
-                this.close({ delete: true, viewName: this.selectedView.name });
-            }
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityCreateCustomViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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]=\"('entity.columns' | translate | async) ?? 'Columns'\">\n      <ax-suffix>\n        <ax-badge [text]=\"visibleColumns().length.toString()\" color=\"primary\"> </ax-badge>\n      </ax-suffix>\n      <ax-content>\n        <div class=\"ax-flex ax-flex-col ax-gap-4 ax-p-4 ax-select-none ax-h-[400px]\" cdkDropList (cdkDropListDropped)=\"drop('columns', $event)\">\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 class=\"ax-sm\" [(ngModel)]=\"item.visible\" (onValueChanged)=\"updateColumnItem($event, item.name)\"></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\">Please select field(s) that you want to filter</span>\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 class=\"ax-text-xs\" color=\"primary\" [look]=\"'twotone'\" [text]=\"getOperatorTitle(item.name, item.operator)\"></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]=\"'entity.add-field' | translate | async\" 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]=\"'entity.add-field' | translate | async\" 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 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-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 (onClick)=\"addCondition(); conditionsPopover.close()\" class=\"ax-sm\" text=\"Confirm\" color=\"primary\"> </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\">{{ 'entity.no-sort' | translate | async }}</p>\n            <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\">{{ 'entity.ask-sort' | translate | async }}</span>\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\"> </ax-select-box>\n                <ax-button [color]=\"'default'\" class=\"ax-sm\" (click)=\"updateSortItem(item)\">\n                  <ax-icon [class.ax-text-primary]=\"item.dir == 'asc'\" class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"></ax-icon>\n                  <ax-icon [class.ax-text-primary]=\"item.dir == 'desc'\" class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"></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]=\"'entity.add-field' | translate | async\"\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]=\"'entity.add-field' | translate | async\"\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' | translate | async\" (onClick)=\"handleDiscardClick()\">\n    <ax-button-item-list>\n      <ax-button-item [text]=\"('reset' | translate | async) ?? ' '\" (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' | translate | async\" look=\"outline\" (onClick)=\"handleCancelClick()\"></ax-button>\n  }\n  <ax-button [text]=\"mode === 'create' ? ('save' | translate | async) : ('save-changes' | translate | async)\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\n</ax-footer>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "component", type: i4.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i4.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "component", type: i4$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4$1.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }, { kind: "component", type: i4$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i5.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: i6.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i7.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: i8.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "component", type: i9.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i9.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "directive", type: i9.AXTabContentDirective, selector: "[axTabContent]", inputs: ["axTabContent"], exportAs: ["axTabContent"] }, { kind: "component", type: i10.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "component", type: i11.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: i7$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: i13.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "hintField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "component", type: i14.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "directive", type: i15.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], 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", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i15.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i10$1.AXPWidgetFilterRendererComponent, selector: "axp-widget-filter-renderer", inputs: ["value", "operator", "prop", "schema"], outputs: ["valueChange", "operatorChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityCreateCustomViewComponent, decorators: [{
-            type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        {
-                            provide: AXUnsubscriber,
-                        },
-                    ], template: "<ax-header class=\"ax-p-4 ax-flex ax-justify-between ax-border-b\">\n  <div class=\"ax-flex ax-items-center\">\n    @if (showNameInput() && mode==='create') {\n    <div class=\"ax-w-60\">\n      <ax-text-box class=\"ax-sm\" [(ngModel)]=\"selectedView.title\">\n        @if(showNameInput()){\n        <ax-suffix>\n          <ax-button (onClick)=\"changeViewNameToggle()\" look=\"default\">\n            <ax-icon class=\"fa-sodild fas fa-check ax-text-sm\"> </ax-icon>\n          </ax-button>\n        </ax-suffix>\n        }\n      </ax-text-box>\n    </div>\n    }@else {\n    <span class=\"ax-text-lg ax-font-semibold\">{{ selectedView.title }}</span>\n    } @if (mode===\"create\") {\n    <ax-button class=\"ax-xs\" (onClick)=\"changeViewNameToggle()\" color=\"default\">\n      @if(!showNameInput() ){\n      <ax-icon class=\"fa-regular fa-pen ax-text-sm ax-text-neutral-600\"> </ax-icon>\n      }\n    </ax-button>\n    }\n  </div>\n  <ax-close-button></ax-close-button>\n</ax-header>\n<div class=\"ax-p-4\">\n  <ax-tabs [content]=\"contents\" look=\"with-line\">\n    <ax-tab-item [text]=\"('entity.columns' | translate | async) ?? 'Columns'\">\n      <ax-suffix>\n        <ax-badge [text]=\"visibleColumns().length.toString()\" color=\"primary\"> </ax-badge>\n      </ax-suffix>\n      <ax-content>\n        <div class=\"ax-flex ax-flex-col ax-gap-4 ax-p-4 ax-select-none ax-h-[400px]\" cdkDropList (cdkDropListDropped)=\"drop('columns', $event)\">\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 class=\"ax-sm\" [(ngModel)]=\"item.visible\" (onValueChanged)=\"updateColumnItem($event, item.name)\"></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\">Please select field(s) that you want to filter</span>\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 class=\"ax-text-xs\" color=\"primary\" [look]=\"'twotone'\" [text]=\"getOperatorTitle(item.name, item.operator)\"></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]=\"'entity.add-field' | translate | async\" 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]=\"'entity.add-field' | translate | async\" 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 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-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 (onClick)=\"addCondition(); conditionsPopover.close()\" class=\"ax-sm\" text=\"Confirm\" color=\"primary\"> </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\">{{ 'entity.no-sort' | translate | async }}</p>\n            <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\">{{ 'entity.ask-sort' | translate | async }}</span>\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\"> </ax-select-box>\n                <ax-button [color]=\"'default'\" class=\"ax-sm\" (click)=\"updateSortItem(item)\">\n                  <ax-icon [class.ax-text-primary]=\"item.dir == 'asc'\" class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"></ax-icon>\n                  <ax-icon [class.ax-text-primary]=\"item.dir == 'desc'\" class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"></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]=\"'entity.add-field' | translate | async\"\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]=\"'entity.add-field' | translate | async\"\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' | translate | async\" (onClick)=\"handleDiscardClick()\">\n    <ax-button-item-list>\n      <ax-button-item [text]=\"('reset' | translate | async) ?? ' '\" (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' | translate | async\" look=\"outline\" (onClick)=\"handleCancelClick()\"></ax-button>\n  }\n  <ax-button [text]=\"mode === 'create' ? ('save' | translate | async) : ('save-changes' | translate | async)\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\n</ax-footer>\n" }]
-        }], propDecorators: { loader: [{
-                type: Input
-            }], mode: [{
-                type: Input
-            }], selectedView: [{
-                type: Input
-            }] } });
-
-class AXPListViewOptionsColumnsComponent {
-    constructor() {
-        this.store = inject((Store));
-        this.isSM = this.store.select(isSmallScreen());
-        this.columns$ = of([]);
-        this.onClosed = new EventEmitter();
-    }
-    ngOnInit() {
-        this.columns$ = this.loader.displayColumns$;
-    }
-    handleVisibilityChange(e, name) {
-        if (e.isUserInteraction) {
-            this.loader.setColumnVisibility(name, e.value);
-        }
-    }
-    drop(event) {
-        this.columns$.pipe(first()).subscribe((columns) => {
-            moveItemInArray(columns, event.previousIndex, event.currentIndex);
-        });
-    }
-    handleClose() {
-        this.onClosed.emit();
-    }
-    handleResetClick() {
-        this.loader.resetColumns();
-    }
-    handleApplyClick() {
-        this.columns$.pipe(first()).subscribe((data) => {
-            this.loader.updateColumns(data);
-        });
-        this.onClosed.emit();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPListViewOptionsColumnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", 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\">{{ 'entity.columns' | translate | async }}</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 class=\"ax-sm\" [ngModel]=\"item.visible\" (onValueChanged)=\"handleVisibilityChange($event, item.name)\"></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' | translate | async\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\n  <ax-button [text]=\"'reset' | translate | async\" color=\"ghost\" (onClick)=\"handleResetClick()\"></ax-button>\n</ax-footer>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "component", type: i4$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i8.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "directive", type: i15.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], 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", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i15.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8$1.AXTranslatorPipe, name: "translate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", 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\">{{ 'entity.columns' | translate | async }}</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 class=\"ax-sm\" [ngModel]=\"item.visible\" (onValueChanged)=\"handleVisibilityChange($event, item.name)\"></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' | translate | async\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\n  <ax-button [text]=\"'reset' | translate | async\" color=\"ghost\" (onClick)=\"handleResetClick()\"></ax-button>\n</ax-footer>\n" }]
-        }], propDecorators: { loader: [{
-                type: Input
-            }], onClosed: [{
-                type: Output
-            }] } });
-
-class AXPListViewOptionConditionsComponent {
-    constructor() {
-        this.onClosed = new EventEmitter();
-        this.schemaRegistery = inject(AXPSchemaRegistryService);
-        this.popopService = inject(AXPopupService);
-        this.isSM = false;
-        this.props$ = of([]);
-        this.props = [];
-        this.conditions$ = of([]);
-        this.selectedFieldNames = [];
-    }
-    onNameChange(item) {
-        console.log('onName changed!', item);
-    }
-    ngOnInit() {
-        this.props$ = this.loader.properties$.pipe(map((sorts) => sorts.filter((s) => s.canFilter != false)));
-        this.conditions$ = this.loader.conditions$;
-        this.conditions$.pipe(first()).subscribe((initialConditions) => {
-            this.selectedFieldNames = initialConditions.map((i) => i.name);
-        });
-        this.props$.pipe(first()).subscribe((data) => {
-            this.props = data;
-        });
-    }
-    getOperators(name) {
-        const schemaName = this.props.find((c) => c.name == name)?.schema ?? '';
-        return this.schemaRegistery.resolve(schemaName)?.filterOptions?.operators ?? [];
-    }
-    getDefaultOperator(name) {
-        const schemaName = this.props.find((c) => c.name == name)?.schema ?? '';
-        return this.schemaRegistery.resolve(schemaName)?.filterOptions?.default ?? EQ_OPER;
-    }
-    getOperatorTitle(schemaName, oprName) {
-        return this.getOperators(schemaName).find((c) => c.name == oprName)?.title || '';
-    }
-    getSchema(name) {
-        return this.props.find((c) => c.name == name)?.schema ?? '';
-    }
-    drop(event) {
-        this.conditions$.pipe(first()).subscribe((conditions) => {
-            console.log('conditions: ', conditions);
-            moveItemInArray(conditions, event.previousIndex, event.currentIndex);
-        });
-    }
-    handleClose() {
-        this.onClosed.emit();
-    }
-    handleRemoveCondition(item) {
-        this.selectedFieldNames = this.selectedFieldNames.filter((i) => i !== item.name);
-        this.loader.removeCondition(item);
-    }
-    resetSelectedFieldNames() {
-        this.conditions$.pipe(first()).subscribe((initialConditions) => {
-            this.selectedFieldNames = initialConditions.map((i) => i.name);
-        });
-    }
-    handleResetClick() {
-        this.loader.resetConditions();
-    }
-    onConfirmFields() {
-        const fileds = this.selectedFieldNames.map((c) => {
-            const opr = this.getDefaultOperator(c);
-            return {
-                name: c,
-                opr: opr.name,
-            };
-        });
-        this.loader.addCondition(fileds);
-    }
-    handleApplyClick() {
-        this.conditions$.pipe(first()).subscribe((data) => {
-            console.log(data);
-            this.loader.updateConditions(data);
-        });
-        this.onClosed.emit();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPListViewOptionConditionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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]=\"'entity.add-field' | translate | async\" 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]=\"'entity.add-field' | translate | async\" 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' | translate | async\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\n  <ax-button [text]=\"'reset' | translate | async\" color=\"ghost\" (onClick)=\"handleResetClick()\"></ax-button>\n</ax-footer>\n", dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "component", type: i4$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i5.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: i6.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i7.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: i7$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: i13.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "hintField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "directive", type: i15.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], 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", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i15.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i10$1.AXPWidgetFilterRendererComponent, selector: "axp-widget-filter-renderer", inputs: ["value", "operator", "prop", "schema"], outputs: ["valueChange", "operatorChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", 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]=\"'entity.add-field' | translate | async\" 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]=\"'entity.add-field' | translate | async\" 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' | translate | async\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\n  <ax-button [text]=\"'reset' | translate | async\" color=\"ghost\" (onClick)=\"handleResetClick()\"></ax-button>\n</ax-footer>\n" }]
-        }], ctorParameters: () => [], propDecorators: { onClosed: [{
-                type: Output
-            }], loader: [{
-                type: Input
-            }] } });
-
-class AXPListViewOptionFilterOperatorComponent {
-    constructor() {
-        this.visible = false;
-        this.cdr = inject(ChangeDetectorRef);
-        this._items = [];
-        this.valueChange = new EventEmitter();
-    }
-    get items() {
-        return this._items;
-    }
-    set items(v) {
-        this.visible = false;
-        this._items = v;
-        setTimeout(() => {
-            this.visible = true;
-            this.cdr.markForCheck();
-            setTimeout(() => {
-                if (this.selectBox) {
-                    //this.selectBox.defaultValue = this.items[0]?.name;
-                }
-            });
-        });
-    }
-    get value() {
-        return this._value;
-    }
-    set value(v) {
-        this._value = v;
-        this.valueChange.emit(v);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPListViewOptionFilterOperatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPListViewOptionFilterOperatorComponent, selector: "axp-list-view-option-filter-operator", inputs: { items: "items", value: "value" }, outputs: { valueChange: "valueChange" }, host: { styleAttribute: "display: contents;" }, viewQueries: [{ propertyName: "selectBox", first: true, predicate: AXSelectBoxComponent, descendants: true }], ngImport: i0, template: `
-    <ax-select-box
-      valueField="name"
-      [dataSource]="items"
-      textField="title"
-      [(ngModel)]="value"
-      *ngIf="visible"
-    >
-    </ax-select-box>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i10.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPListViewOptionFilterOperatorComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'axp-list-view-option-filter-operator',
-                    template: `
-    <ax-select-box
-      valueField="name"
-      [dataSource]="items"
-      textField="title"
-      [(ngModel)]="value"
-      *ngIf="visible"
-    >
-    </ax-select-box>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { style: 'display: contents;' },
-                }]
-        }], propDecorators: { selectBox: [{
-                type: ViewChild,
-                args: [AXSelectBoxComponent]
-            }], items: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], value: [{
-                type: Input
-            }] } });
-
-class AXPListViewOptionSortingComponent {
-    constructor() {
-        this.isSM = false;
-        this.onClosed = new EventEmitter();
-        this.props$ = of([]);
-        this.sorts$ = of([]);
-    }
-    ngOnInit() {
-        this.props$ = this.loader.properties$.pipe(map((sorts) => sorts.filter((s) => s.canSort != false)));
-        this.loader.sorts$.subscribe((data) => { });
-        this.sorts$ = this.loader.sorts$;
-    }
-    drop(event) {
-        this.sorts$.pipe(first()).subscribe((sorts) => {
-            moveItemInArray(sorts, event.previousIndex, event.currentIndex);
-        });
-    }
-    changeItemSort(item) {
-        item.dir = item.dir == 'asc' ? 'desc' : 'asc';
-    }
-    handleClose() {
-        this.onClosed.emit();
-    }
-    handleResetClick() {
-        this.loader.resetSort();
-    }
-    handleApplyClick() {
-        this.sorts$.pipe(first()).subscribe((data) => {
-            this.loader.updateSort(data);
-        });
-        this.onClosed.emit();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPListViewOptionSortingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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\">{{'entity.sort' | translate | async}}</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-p-4 ax-flex-col ax-justify-center ax-gap-4 ax-select-none\" [class.ax-h-[calc(100vh-310px)]]=\"!(sorts$ | async)?.length\">\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\">{{ 'entity.no-sort' | translate | async }}</p>\n    <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\">{{ 'entity.ask-sort' | translate | async }}</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 [dataSource]=\"(props$ | async) ?? []\" valueField=\"name\" textField=\"title\" [(ngModel)]=\"item.name\"> </ax-select-box>\n        <ax-button [color]=\"'default'\" class=\"ax-sm\" (click)=\"changeItemSort(item)\">\n          <ax-icon [class.ax-text-primary]=\"item.dir == 'asc'\" class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"></ax-icon>\n          <ax-icon [class.ax-text-primary]=\"item.dir == 'desc'\" class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"></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]=\"'entity.add-field' | translate | async\" look=\"blank\" class=\"ax-sm\"></ax-button>\n      }@else {\n      <div class=\"ax-flex ax-justify-center ax-w-full\">\n        <ax-button (onClick)=\"loader.addSort()\" color=\"primary\" [text]=\"'entity.add-field' | translate | async\" look=\"outline\" class=\"ax-md ax-w-56\"></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' | translate | async\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\n  <ax-button [text]=\"'reset' | translate | async\" color=\"ghost\" (onClick)=\"handleResetClick()\"></ax-button>\n</ax-footer>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "component", type: i4$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i7.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: i10.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "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", "cdkDropListElementContainer"], 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", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i15.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8$1.AXTranslatorPipe, name: "translate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", 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\">{{'entity.sort' | translate | async}}</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-p-4 ax-flex-col ax-justify-center ax-gap-4 ax-select-none\" [class.ax-h-[calc(100vh-310px)]]=\"!(sorts$ | async)?.length\">\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\">{{ 'entity.no-sort' | translate | async }}</p>\n    <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\">{{ 'entity.ask-sort' | translate | async }}</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 [dataSource]=\"(props$ | async) ?? []\" valueField=\"name\" textField=\"title\" [(ngModel)]=\"item.name\"> </ax-select-box>\n        <ax-button [color]=\"'default'\" class=\"ax-sm\" (click)=\"changeItemSort(item)\">\n          <ax-icon [class.ax-text-primary]=\"item.dir == 'asc'\" class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"></ax-icon>\n          <ax-icon [class.ax-text-primary]=\"item.dir == 'desc'\" class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"></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]=\"'entity.add-field' | translate | async\" look=\"blank\" class=\"ax-sm\"></ax-button>\n      }@else {\n      <div class=\"ax-flex ax-justify-center ax-w-full\">\n        <ax-button (onClick)=\"loader.addSort()\" color=\"primary\" [text]=\"'entity.add-field' | translate | async\" look=\"outline\" class=\"ax-md ax-w-56\"></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' | translate | async\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\n  <ax-button [text]=\"'reset' | translate | async\" color=\"ghost\" (onClick)=\"handleResetClick()\"></ax-button>\n</ax-footer>\n" }]
-        }], propDecorators: { onClosed: [{
-                type: Output
-            }], loader: [{
-                type: Input
-            }] } });
-
-class AXPEntityCreateLoaderDefault {
-    constructor(config, store, formatService) {
-        this.config = config;
-        this.store = store;
-        this.formatService = formatService;
-        this._data = {};
-        this._currentSection = 'default';
-        this._sections$ = new BehaviorSubject(this.sections);
-        //****************** Properties ******************//
-        this.getProp = (name) => this.entity.properties.find((c) => c.name == name);
-        this.isRequired = (name) => this.getProp(name)?.validationRules?.some(c => c.rule == 'required') || false;
-        this._currentSection = this.sections[0]?.name || 'default';
-    }
-    get entity() {
-        if (!this._config) {
-            this._config = cloneDeep(this.config);
-        }
-        return this._config;
-    }
-    get data() {
-        return this._data;
-    }
-    get view() {
-        return this.entity.views.createView;
-    }
-    //****************** Sections ******************//
-    get sections() {
-        return this.view.root.sections?.length
-            ? this.view.root.sections
-            : [
-                {
-                    name: 'default',
-                    title: 'Default',
-                    properties: this.view.root.properties,
-                },
-            ];
-    }
-    get sections$() {
-        return this._sections$.pipe(defaultIfEmpty([]));
-    }
-    get section$() {
-        return this.sections$.pipe(switchMap((sections) => {
-            const section = sections.find((c) => c.name === this._currentSection) ?? this.sections[0];
-            if (!section.sections?.length) {
-                section.sections = [
-                    {
-                        name: 'default',
-                        title: 'Details',
-                        properties: section.properties,
-                    },
-                ];
-            }
-            return of(section);
-        }));
-    }
-    get hasSections$() {
-        return this.sections$.pipe(map((c) => c.length > 1));
-    }
-    get isLast$() {
-        return this.sections$.pipe(map((c) => this.sections.length - this.sections.findIndex((c) => c.name == this._currentSection) == 1));
-    }
-    get isFirst$() {
-        return this.sections$.pipe(map((c) => this.sections.findIndex((c) => c.name == this._currentSection) == 0));
-    }
-    get currentIndex$() {
-        return this.sections$.pipe(map((c) => this.sections.findIndex((c) => c.name == this._currentSection)));
-    }
-    setSection(name) {
-        this._currentSection = name ?? 'default';
-        const updatedSection = this.sections.find((c) => c.name === this._currentSection) || {
-            name: 'default',
-            title: 'Default',
-            properties: this.view.root.properties,
-        };
-        const currentSections = this._sections$.value;
-        const updatedSections = currentSections.map((section) => {
-            if (section.name === updatedSection.name) {
-                return updatedSection;
-            }
-            else {
-                return section;
-            }
-        });
-        this._sections$.next(updatedSections);
-    }
-    next() {
-        const nextIndex = this.sections.findIndex((c) => c.name == this._currentSection) + 1;
-        if (nextIndex >= this.sections.length) {
-            return Promise.resolve();
-        }
-        else {
-            this.setSection(this.sections[nextIndex].name);
-            return Promise.resolve();
+            this.setSection(this.sections[nextIndex].name);
+            return Promise.resolve();
         }
     }
     back() {
@@ -638,7 +217,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-C2pYReAo.mjs');
+        const com = await import('./acorex-platform-layouts-entity-create-view.component-CPGbLM4C.mjs');
         const result = await this.popupService.open(com.AXPEntityCreateViewComponent, {
             title: this.translateService.translateSync('create-new') + ' ' + entity.title,
             size: this.platform.is('Mobile') || this.platform.is('SM') ? 'full' : 'md',
@@ -842,48 +421,123 @@ const AXPDeleteEntityWorkflow = {
     },
 };
 
-const AXPImportEntityEvent = createWorkFlowEvent('[Entity] Imported!');
-class AXPEntityImportPopupAction extends AXPWorkflowAction {
+class AXPEntityModifyLoaderDefault {
+    constructor(config, selectedData, selectedSection) {
+        this.config = config;
+        this.selectedData = selectedData;
+        this.selectedSection = selectedSection;
+        this._data = {};
+        //****************** Properties ******************//
+        this.getProp = (name) => this.entity.properties.find((c) => c.name == name);
+        this._data = this.selectedData;
+        this._currentSection = this.selectedSection;
+    }
+    get entity() {
+        if (!this._config) {
+            this._config = cloneDeep(this.config);
+        }
+        return this._config;
+    }
+    get data() {
+        return this._data;
+    }
+    get section() {
+        return this._currentSection;
+    }
+    get view() {
+        return this.entity.views.detailView;
+    }
+    //****************** update ******************//
+    async update(values) {
+        if (this._config.commands?.update) {
+            const updated = await this._config.commands?.update(this._data.id, values);
+            Object.assign(this._data, updated);
+            return Promise.resolve();
+        }
+        else {
+            return Promise.reject(`There is not any update commands for '${this.config.name}'`);
+        }
+    }
+}
+class AXPEntityModifyViewLoaderFactory {
+    constructor() {
+        this.entityService = inject(AXPEntityRegistryService);
+        this.layout = inject(AXPLayoutService);
+    }
+    async create(moduleName, entityName, id, section) {
+        this.layout.setNavigationLoading(true);
+        const config = await this.entityService.resolve(moduleName, entityName);
+        if (config.dataSource.byKey) {
+            const data = await config.dataSource.byKey(id);
+            this.layout.setNavigationLoading(false);
+            return new AXPEntityModifyLoaderDefault(config, data, section);
+        }
+        this.layout.setNavigationLoading(false);
+        return Promise.reject('cannot fetch ');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityModifyViewLoaderFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityModifyViewLoaderFactory, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityModifyViewLoaderFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const AXPEntityModifyEvent = createWorkFlowEvent('[Entity] Modified');
+class AXPEntityModifyPopupAction extends AXPWorkflowAction {
     constructor() {
         super(...arguments);
-        this.entityRegistery = inject(AXPEntityRegistryService);
         this.popupService = inject(AXPopupService);
         this.platform = inject(AXPlatform);
+        this.entityRegistery = inject(AXPEntityRegistryService);
+        this.entityCreateFactory = inject(AXPEntityModifyViewLoaderFactory);
     }
     async execute(context) {
-        const { module, entity: entityName } = context.getVariable('payload');
+        const payload = context.getVariable('payload');
+        const { module, entity: entityName, section, id } = payload;
         const entity = await this.entityRegistery.resolve(module, entityName);
-        const com = await import('./acorex-platform-layouts-entity-import-view.component-CZpEcVi9.mjs');
-        const result = await this.popupService.open(com.AXPEntityImportViewComponent, {
-            title: `Import ${entity.title}`,
+        const loader = await this.entityCreateFactory.create(module, entityName, id, section);
+        const com = await import('./acorex-platform-layouts-entity-modify-view.component-Bt4MLEou.mjs');
+        const popup = await this.popupService.open(com.AXPEntityModifyViewComponent, {
+            title: `Modify ${payload.section.title}`,
             size: this.platform.is('Mobile') || this.platform.is('SM') ? 'full' : 'md',
             data: {
+                context: loader.data,
+                loader: loader,
+                properties: payload.section.properties,
                 entity,
             },
         });
-        if (result.data?.save) {
+        context.setOutput('popupResult', false);
+        if (popup.data?.result == true) {
             context.setOutput('popupResult', true);
-            context.setVariable('redirect', result.data.redirect);
+            context.setVariable('updatedData', cloneDeep(popup.data.context));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityImportPopupAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityImportPopupAction }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityModifyPopupAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityModifyPopupAction }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityImportPopupAction, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityModifyPopupAction, decorators: [{
             type: Injectable
         }] });
-class AXPEntityImportSubmittedAction extends AXPWorkflowAction {
+class AXPEntityModifyConfirmedAction extends AXPWorkflowAction {
+    constructor() {
+        super(...arguments);
+        this.entityRegistery = inject(AXPEntityRegistryService);
+    }
     async execute(context) {
-        const { module, entity: entity } = context.getVariable('payload');
-        this.dispatch(AXPImportEntityEvent({ entity, module }));
+        const payload = context.getVariable('payload');
+        const updatedData = context.getVariable('updatedData');
+        const entity = await this.entityRegistery.resolve(payload.module, payload.entity);
+        this.dispatch(AXPEntityModifyEvent({ module: entity.module, entity: entity.name, updateValues: updatedData }));
     }
 }
-const AXPImportEntityWorkflow = {
-    startStepId: 'createPopup',
+const AXPModifyEntityWorkflow = {
+    startStepId: 'modifyPopup',
     steps: {
-        createPopup: {
-            id: 'createPopup',
-            action: 'AXPEntityImportPopupAction',
+        modifyPopup: {
+            id: 'modifyPopup',
+            action: 'AXPEntityModifyPopupAction',
             nextSteps: [
                 {
                     conditions: [{ type: 'SINGLE', expression: 'context.getOutput("popupResult") == true' }],
@@ -896,926 +550,851 @@ const AXPImportEntityWorkflow = {
             action: 'AXPToastAction',
             input: {
                 color: 'success',
-                title: 'Entity Imported',
-                content: 'Your file has been uploaded successfully',
+                title: 'Entity Modified',
+                content: 'Record has been successfully updated.',
             },
             nextSteps: [
                 {
                     conditions: [],
-                    nextStepId: 'importSubmitted',
+                    nextStepId: 'modifyConfirmed',
                 },
             ],
         },
-        importSubmitted: {
-            id: 'importSubmitted',
-            action: 'AXPEntityImportSubmittedAction',
+        modifyConfirmed: {
+            id: 'modifyConfirmed',
+            action: 'AXPEntityModifyConfirmedAction',
+            nextSteps: [
+                {
+                    conditions: [],
+                    nextStepId: '',
+                },
+            ],
         },
     },
 };
 
-class AXPEntityListViewComponent {
-    constructor(actionSheetService, unsubscriber, platform, cdr) {
-        this.actionSheetService = actionSheetService;
-        this.unsubscriber = unsubscriber;
-        this.platform = platform;
-        this.cdr = cdr;
-        this.store = inject((Store));
+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.2.0", ngImport: i0, type: AXPShowQuickViewAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPShowQuickViewAction }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPShowQuickViewAction, decorators: [{
+            type: Injectable
+        }] });
+const AXPShowQuickViewWorkflow = {
+    startStepId: 'showQuickView',
+    steps: {
+        showQuickView: {
+            id: 'showQuickView',
+            action: 'AXPShowQuickViewAction',
+        },
+    },
+};
+
+class AXPShowDetailViewAction extends AXPWorkflowAction {
+    constructor() {
+        super(...arguments);
+        this.navigation = inject(AXPWorkflowNavigateAction);
+        this.sessionService = inject(AXPSessionService);
+    }
+    async execute(context) {
+        const payload = context.getVariable('payload');
+        const id = context.getVariable('id');
+        const newPayload = {
+            commands: `/${this.sessionService.application?.name}/${payload.module}/e/${payload.entity}/${id}/view`,
+        };
+        context.setVariable('payload', newPayload);
+        this.navigation.execute(context);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPShowDetailViewAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPShowDetailViewAction }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPShowDetailViewAction, decorators: [{
+            type: Injectable
+        }] });
+const AXPShowDetailsViewWorkflow = {
+    startStepId: 'showDetailView',
+    steps: {
+        showDetailView: {
+            id: 'showDetailView',
+            action: 'AXPShowDetailViewAction',
+        },
+    },
+};
+
+class AXPShowListViewAction extends AXPWorkflowAction {
+    constructor() {
+        super(...arguments);
+        this.navigation = inject(AXPWorkflowNavigateAction);
+        this.sessionService = inject(AXPSessionService);
+    }
+    async execute(context) {
+        const payload = context.getVariable('payload');
+        const newPayload = {
+            commands: `/${this.sessionService.application?.name}/${payload.module}/e/${payload.entity}/list`,
+        };
+        context.setVariable('payload', newPayload);
+        this.navigation.execute(context);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPShowListViewAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPShowListViewAction }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPShowListViewAction, decorators: [{
+            type: Injectable
+        }] });
+const AXPShowListViewWorkflow = {
+    startStepId: 'showListView',
+    steps: {
+        showListView: {
+            id: 'showListView',
+            action: 'AXPShowListViewAction',
+        },
+    },
+};
+
+class AXPEntityDetailsViewComponent {
+    constructor(actions$, unsubscriber) {
+        this.actions$ = actions$;
+        this.unsubscriber = unsubscriber;
+        this.popupService = inject(AXPopupService);
+        this.sessionService = inject(AXPSessionService);
+        this.activeRoute = inject(ActivatedRoute);
+        this.router = inject(Router);
+        this.location = inject(Location);
+        this.cdr = inject(ChangeDetectorRef);
+        this.platform = inject(AXPlatform);
         this.workflow = inject(AXPWorkflowService);
-        this.layout = inject(AXPLayoutService);
-        this.route = inject(ActivatedRoute);
-        this.manuLoader = inject(AXP_MENU_LOADER);
-        this.loader = this.route.snapshot.data['loader'];
-        this.title = '';
-        this.searchValue = '';
-        this.searchBoxPlaceholder = '';
-        this.searchBoxTitle = '';
-        this.searchBoxCollapsed = true;
-        this.publicViews$ = this.loader.publicViews$;
-        this.customViews$ = this.loader.customViews$;
-        this.hasCustomViews$ = this.loader.hasCustomViews$;
-        this.view$ = this.loader.view$;
-        //
-        this.conditions$ = this.loader.conditions$;
-        this.conditionsCount$ = this.loader.conditionsCount$;
-        //
-        this.columns$ = this.loader.displayColumns$;
-        this.columnsCount$ = this.loader.displayColumnsCount$;
-        //
-        this.sort$ = this.loader.sorts$;
-        this.sortCount$ = this.loader.sortsCount$;
-        //
-        this.dataSource = this.loader.dataSource;
+        this.loader = this.activeRoute.snapshot.data['loader'];
+        this.store = inject((Store));
+        this.isSM = this.store.select(isSmallScreen());
+        this.isOpen = this.store.select(getChildDrawer());
         //
         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.canImport = this.loader.entity.editOptions?.import ?? false;
-        this.popupService = inject(AXPopupService);
-        this.dropdownRowItems = [
-            {
-                text: 'Details',
-                icon: 'fa-solid fa-eye',
-                name: 'edit',
-                divided: true,
-            },
-            {
-                text: 'Delete',
-                icon: 'fa-solid fa-trash-can',
-                name: 'delete',
-                color: 'danger',
-                disabled: !this.canDelete,
-            },
-        ];
-        this.inlineRowItems = [
-            {
-                text: 'View',
-                icon: 'fa-solid  fa-eye',
-                name: 'view',
-                divided: true,
-            },
-        ];
-        this.getDropdownRowItems = (rowData) => {
-            return Promise.resolve(this.dropdownRowItems);
-        };
-        this.getInlineRowItems = (rowData) => {
-            return this.inlineRowItems;
-        };
-        //TODO: namespace, module name issues
-        this.title = this.manuLoader.currentMenuItem()?.text ?? this.loader.entity.formats?.list ?? this.loader.entity.formats?.default ?? 'Title';
         //
-        this.workflow.events$
-            .pipe(ofType(AXPEntityDeletedEvent, AXPEntityCreateEvent, AXPImportEntityEvent), this.unsubscriber.takeUntilDestroy)
-            .subscribe((event) => {
-            if (event.payload.entity == this.loader.entity.name && event.payload.module == this.loader.entity.module) {
-                this.grid.selectedRows = [];
-                this.grid?.refresh();
-            }
+        this.context = signal(cloneDeep(this.loader.data));
+        this.activeRoute.paramMap.pipe(first()).subscribe((c) => {
+            this.setSection(c.get('section'));
         });
         //
-        this.dataSource.onLoadingChanged.pipe(this.unsubscriber.takeUntilDestroy).subscribe((value) => {
-            this.layout.setNavigationLoading(value);
-        });
-        this._getInlineConditionTitles();
-    }
-    ngAfterViewInit() {
-        this.loader.setDefaultView();
-    }
-    _getInlineConditionTitles() {
-        const titles = this.loader.getInlineFilterTitles();
-        this.searchBoxTitle = titles.join(', ');
-        if (titles.length > 2)
-            this.searchBoxPlaceholder = titles.slice(0, 2).join(', ') + ' ...';
-        else
-            this.searchBoxPlaceholder = titles.join(', ');
-    }
-    _handleViewsPopover() {
-        this.actionSheetService.open({ content: this.viewsTemplate });
-    }
-    handleDrawerClick() {
-        this.store.dispatch(AXPLayoutChildDrawerToggle());
-    }
-    toggleSearchBox() {
-        this.searchBoxCollapsed = !this.searchBoxCollapsed;
-    }
-    handleRowDbClick(e) {
-        const d = {
-            component: e.component,
-            name: this.dropdownRowItems[0].name,
-            data: e.data,
-        };
-        this.handleRowCommandClick(d);
-    }
-    async handleRowCommandClick(e) {
-        switch (e.name) {
-            case 'view': {
-                await this.workflow.execute('show-quick-view', {
-                    payload: {
-                        module: this.loader.entity.module,
-                        entity: this.loader.entity.name,
-                        data: e.data,
-                    },
-                });
-                break;
-            }
-            case 'edit': {
-                await this.workflow.execute('show-details', {
+        this.workflow.events$.pipe(ofType(AXPEntityDeletedEvent), this.unsubscriber.takeUntilDestroy).subscribe((event) => {
+            if (event.payload.entity == this.loader.entity.name &&
+                event.payload.module == this.loader.entity.module &&
+                event.payload.id.includes(this.loader.data.id)) {
+                this.workflow.execute('show-list-view', {
                     payload: {
                         module: this.loader.entity.module,
                         entity: this.loader.entity.name,
                     },
-                    id: e.data.id,
                 });
-                break;
             }
-            case 'delete': {
-                await this.workflow.execute('delete-entity', {
-                    module: this.loader.entity.module,
-                    entity: this.loader.entity.name,
-                    ids: [e.data.id],
-                });
-                break;
+        });
+        this.workflow.events$.pipe(ofType(AXPEntityModifyEvent), this.unsubscriber.takeUntilDestroy).subscribe(async (event) => {
+            if (event.payload.entity == this.loader.entity.name &&
+                event.payload.module == this.loader.entity.module &&
+                event.payload.updateValues.id === this.loader.data.id) {
+                await this.loader.update(event.payload.updateValues);
+                this.context.set(cloneDeep(this.loader.data));
             }
-        }
-    }
-    handleCreateClick() {
-        this.workflow.execute('create-entity', {
-            payload: {
-                module: this.loader.entity.module,
-                entity: this.loader.entity.name,
-            },
         });
     }
-    handleImportClick() {
-        this.workflow.execute('import-entity', {
+    handleMenuClick(e, item) {
+        const entity = this.loader.entity;
+        const path = `/${this.sessionService.application?.name}/${entity.module}/e/${entity.name}/${this.loader.data?.id}/view/${item.name}`;
+        this.location.go(path);
+        this.setSection(item.name);
+    }
+    handleCollapsedChange(value) {
+        if (value)
+            this.store.dispatch(AXPLayoutChildDrawerClose());
+    }
+    handleDrawerClick() {
+        this.store.dispatch(AXPLayoutChildDrawerToggle());
+    }
+    setSection(name) {
+        this.loader.setSection(name);
+    }
+    async handleSectionEdit(section) {
+        this.workflow.execute('modify-entity', {
             payload: {
                 module: this.loader.entity.module,
                 entity: this.loader.entity.name,
+                id: this.loader.data.id,
+                section: section,
             },
         });
     }
+    isActive(item) {
+        return item.name == window.location.pathname.split('/').pop();
+    }
     handleCommandClick(command) {
         switch (command) {
             case 'delete':
-                this.workflow.execute('delete-entity', {
-                    module: this.loader.entity.module,
-                    entity: this.loader.entity.name,
-                    ids: this.grid.selectedRows.map((c) => c['id']),
-                });
-                break;
-            default:
-                break;
-        }
-    }
-    clearSelectedItems() {
-        this.grid.selectedRows = [];
-    }
-    closeDrawer(name, collapsed) {
-        if (collapsed != false) {
-            switch (name) {
-                case 'conditions':
-                    this.loader.resetConditions();
-                    break;
-                case 'columns':
-                    this.loader.resetColumns();
-                    break;
-                case 'sorts':
-                    this.loader.resetSort();
-                    break;
-                default:
-                    break;
-            }
-        }
-    }
-    handleChangeSearchValue(e) {
-        if (e.isUserInteraction) {
-            this.loader.handleInlineSearch(e.value);
-        }
-    }
-    async addCustomViewPopup() {
-        const newView = {
-            name: 'custom-view',
-            title: 'Custom View',
-            fixed: false,
-            sorts: [],
-            columns: convertPropertiesToColumns(...this.loader.entity.properties),
-            conditions: [],
-        };
-        const popup = await this.popupService.open(AXPEntityCreateCustomViewComponent, {
-            title: 'Create Custom View',
-            size: this.platform.is('Mobile') || this.platform.is('SM') ? 'full' : 'md',
-            closeOnBackdropClick: true,
-            draggable: false,
-            data: {
-                loader: this.loader,
-                selectedView: newView,
-                mode: 'create',
-            },
-        });
-        if (popup.data?.save == true) {
-            console.log('updatedView: ', popup.data.updatedView);
-            this.loader.createView(popup.data.updatedView);
-        }
-    }
-    async updateViewPopup(e, selectedView) {
-        // (e.nativeEvent as UIEvent).stopPropagation();
-        const popup = await this.popupService.open(AXPEntityCreateCustomViewComponent, {
-            title: 'Modify Custom View',
-            size: this.platform.is('Mobile') || this.platform.is('SM') ? 'full' : 'md',
-            closeOnBackdropClick: true,
-            draggable: false,
-            data: {
-                loader: this.loader,
-                selectedView,
-                mode: 'edit',
-            },
-        });
-        if (popup.data?.delete == true) {
-            this.loader.deleteView(popup.data.viewName);
-        }
-        if (popup.data?.save == true) {
-            console.log('updatedView: ', popup.data.updatedView);
-            this.loader.updateView(popup.data.updatedView);
+                this.workflow.execute('delete-entity', {
+                    module: this.loader.entity.module,
+                    entity: this.loader.entity.name,
+                    ids: [this.loader.data.id],
+                });
+                break;
+            case 'create': {
+                this.workflow.execute('create-entity', {
+                    payload: {
+                        module: this.loader.entity.module,
+                        entity: this.loader.entity.name,
+                    },
+                });
+                break;
+            }
+            default:
+                break;
         }
     }
-    ngOnDestroy() {
-        this.dataSource.reset();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityListViewComponent, deps: [{ token: i1$2.AXActionSheetService }, { token: i2.AXUnsubscriber }, { token: i3.AXPlatform }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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    >\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          <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()\" class=\"ax-text-sm ax-text-primary dark:ax-text-primary-300 ax-underline ax-cursor-pointer\"\n            >Clear Items</span\n          >\n        </div>\n        <div class=\"ax-flex ax-items-center ax-gap-2\">\n          @if(canDelete) {\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\">{{ 'entity.public-view' | translate | async }}</ax-title>\n              <ax-button-item\n                *ngFor=\"let v of publicViews$ | async\"\n                [text]=\"v.title\"\n                [class.ax-bg-on-surface]=\"(view$ | async) == v\"\n                (onClick)=\"loader.setView(v.name)\"\n              ></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\n                *ngFor=\"let v of customViews$ | async\"\n                [text]=\"v.title\"\n                [class.ax-bg-on-surface]=\"(view$ | async) == v\"\n                (onClick)=\"loader.setView(v.name)\"\n              ></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\" 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 (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\" (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\" [placeholder]=\"('widget.lookup.search' | translate | async) + searchBoxPlaceholder\"\n          ><ax-clear-button></ax-clear-button\n        ></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          <ax-button [text]=\"'create-new' | translate | async\" 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]=\"'entity.actions' | translate | async\" 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                @if(canImport){\n                <ax-button-item (onClick)=\"handleImportClick()\" text=\"Import\" class=\"ax-font-semibold\">\n                  <ax-prefix>\n                    <ax-icon icon=\"fa-solid fa-file-import\"> </ax-icon>\n                  </ax-prefix>\n                </ax-button-item>\n                }\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          <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]=\"'entity.actions' | translate | async\" 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\">{{ 'entity.public-view' | translate | async }}</ax-title>\n                  <ax-button-item\n                    *ngFor=\"let v of publicViews$ | async\"\n                    [text]=\"v.title\"\n                    [class.ax-bg-on-surface]=\"(view$ | async) == v\"\n                    (onClick)=\"loader.setView(v.name)\"\n                  ></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\n                    class=\"ax-pe-4 ax-flex ax-justify-between\"\n                    *ngFor=\"let v of customViews$ | async\"\n                    [text]=\"v.title\"\n                    [class.ax-bg-on-surface]=\"(view$ | async) == v\"\n                    (onClick)=\"loader.setView(v.name)\"\n                  >\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()\" 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\">\n              <ax-search-box\n                [title]=\"searchBoxTitle\"\n                [(ngModel)]=\"searchValue\"\n                (onValueChanged)=\"handleChangeSearchValue($event)\"\n                [placeholder]=\"('widget.lookup.search' | translate | async) + searchBoxPlaceholder\"\n                ><ax-clear-button></ax-clear-button\n              ></ax-search-box>\n            </div>\n            }\n          </div>\n\n          <div class=\"ax-flex ax-gap-3\">\n            <ax-button [text]=\"'entity.columns' | translate | async\" 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]=\"'entity.sort' | translate | async\" 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()\" class=\"ax-text-sm ax-text-primary dark:ax-text-primary-300 ax-underline ax-cursor-pointer\"\n              >Clear Items</span\n            >\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\n        #grid\n        [showFooter]=\"false\"\n        class=\"ax-flex-1\"\n        [dataSource]=\"dataSource\"\n        [paging]=\"true\"\n        [fetchDataMode]=\"'manual'\"\n        (onRowDbClick)=\"handleRowDbClick($event)\"\n        [loading]=\"{ enabled: true, animation: true }\"\n      >\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\n          *ngIf=\"col.visible\"\n          [schema]=\"col.schema\"\n          [dataField]=\"col.name\"\n          [caption]=\"col.title\"\n          [options]=\"col.options\"\n          [displayFormat]=\"col.displayFormat\"\n          [width]=\"'180px'\"\n          [allowSorting]=\"false\"\n        >\n        </axp-widget-column-renderer>\n        }\n        <ax-dropdown-command-column\n          fixed=\"end\"\n          [width]=\"'60px'\"\n          [items]=\"getDropdownRowItems\"\n          (onItemClick)=\"handleRowCommandClick($event)\"\n        ></ax-dropdown-command-column>\n        <ax-command-column fixed=\"end\" [width]=\"'60px'\" [items]=\"getInlineRowItems\" (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\" (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>\n", styles: [".cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background:rgba(var(--ax-color-on-surface));padding:.5rem;height:max-content!important}.collapsed-search-box{margin-top:0;height:0px;opacity:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6$1.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "rowTemplate", "emptyTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged"] }, { kind: "component", type: i6$1.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "component", type: i6$1.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i6$1.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "component", type: i4.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i4.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "component", type: i4$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i4$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i5.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: i10$2.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i11$1.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "collapsed", "closeOthers"], outputs: ["locationChange", "modeChange", "collapsedChange"] }, { kind: "component", type: i11$1.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "component", type: i12.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "delayTime"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: i10$1.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["width", "caption", "headerTemplate", "allowSorting", "fixed", "footerTemplate", "cellTemplate", "options", "dataField", "displayFormat", "schema"] }, { kind: "directive", type: i14$1.AXPFeatureDirective, selector: "[feature]", inputs: ["feature", "featureElse"] }, { kind: "component", type: AXPListViewOptionsColumnsComponent, selector: "axp-list-view-option-columns", inputs: ["loader"], outputs: ["onClosed"] }, { kind: "component", type: AXPListViewOptionConditionsComponent, selector: "axp-list-view-option-conditions", inputs: ["loader"], outputs: ["onClosed"] }, { kind: "component", type: AXPListViewOptionSortingComponent, selector: "axp-list-view-option-sorting", inputs: ["loader"], outputs: ["onClosed"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityDetailsViewComponent, deps: [{ token: i1.Actions }, { token: i2.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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 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\n        class=\"ax-flex ax-flex-col ax-pt-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all\"\n        #sticky=\"axpSticky\"\n        [axpSticky]=\"'ax-bg-surface ax-px-6 ax-py-3 -ax-mx-6 ax-shadow-xl'\"\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            @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\n                    [text]=\"('create-new' | translate | async) ?? ' '\"\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                  } @if(canDelete) {\n                  <ax-button-item text=\"Delete\" class=\"ax-font-semibold ax-text-danger\" (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)\" 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=\"{{ 'entity.modify' | translate | async }}\" 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 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 [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\" [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>\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", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "component", type: i4.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i4.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i4$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i6.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$1.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "ngmodule", type: AXActionSheetModule }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i11.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXDialogModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i9.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i9.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXPSchemaModule }, { kind: "component", type: i10.AXPWidgetRendererComponent, selector: "axp-widget-renderer", inputs: ["context", "prop", "mode", "schema"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "translate" }, { kind: "ngmodule", type: 
+                //
+                AXPCommonWidgetModule }, { kind: "directive", type: AXPStickyDirective, selector: "[axpSticky]", inputs: ["axpSticky", "stickyOffset", "stickyParent", "stickyTarget"], outputs: ["isStickyChange"], exportAs: ["axpSticky"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityListViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityDetailsViewComponent, 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    >\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          <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()\" class=\"ax-text-sm ax-text-primary dark:ax-text-primary-300 ax-underline ax-cursor-pointer\"\n            >Clear Items</span\n          >\n        </div>\n        <div class=\"ax-flex ax-items-center ax-gap-2\">\n          @if(canDelete) {\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\">{{ 'entity.public-view' | translate | async }}</ax-title>\n              <ax-button-item\n                *ngFor=\"let v of publicViews$ | async\"\n                [text]=\"v.title\"\n                [class.ax-bg-on-surface]=\"(view$ | async) == v\"\n                (onClick)=\"loader.setView(v.name)\"\n              ></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\n                *ngFor=\"let v of customViews$ | async\"\n                [text]=\"v.title\"\n                [class.ax-bg-on-surface]=\"(view$ | async) == v\"\n                (onClick)=\"loader.setView(v.name)\"\n              ></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\" 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 (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\" (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\" [placeholder]=\"('widget.lookup.search' | translate | async) + searchBoxPlaceholder\"\n          ><ax-clear-button></ax-clear-button\n        ></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          <ax-button [text]=\"'create-new' | translate | async\" 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]=\"'entity.actions' | translate | async\" 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                @if(canImport){\n                <ax-button-item (onClick)=\"handleImportClick()\" text=\"Import\" class=\"ax-font-semibold\">\n                  <ax-prefix>\n                    <ax-icon icon=\"fa-solid fa-file-import\"> </ax-icon>\n                  </ax-prefix>\n                </ax-button-item>\n                }\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          <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]=\"'entity.actions' | translate | async\" 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\">{{ 'entity.public-view' | translate | async }}</ax-title>\n                  <ax-button-item\n                    *ngFor=\"let v of publicViews$ | async\"\n                    [text]=\"v.title\"\n                    [class.ax-bg-on-surface]=\"(view$ | async) == v\"\n                    (onClick)=\"loader.setView(v.name)\"\n                  ></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\n                    class=\"ax-pe-4 ax-flex ax-justify-between\"\n                    *ngFor=\"let v of customViews$ | async\"\n                    [text]=\"v.title\"\n                    [class.ax-bg-on-surface]=\"(view$ | async) == v\"\n                    (onClick)=\"loader.setView(v.name)\"\n                  >\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()\" 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\">\n              <ax-search-box\n                [title]=\"searchBoxTitle\"\n                [(ngModel)]=\"searchValue\"\n                (onValueChanged)=\"handleChangeSearchValue($event)\"\n                [placeholder]=\"('widget.lookup.search' | translate | async) + searchBoxPlaceholder\"\n                ><ax-clear-button></ax-clear-button\n              ></ax-search-box>\n            </div>\n            }\n          </div>\n\n          <div class=\"ax-flex ax-gap-3\">\n            <ax-button [text]=\"'entity.columns' | translate | async\" 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]=\"'entity.sort' | translate | async\" 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()\" class=\"ax-text-sm ax-text-primary dark:ax-text-primary-300 ax-underline ax-cursor-pointer\"\n              >Clear Items</span\n            >\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\n        #grid\n        [showFooter]=\"false\"\n        class=\"ax-flex-1\"\n        [dataSource]=\"dataSource\"\n        [paging]=\"true\"\n        [fetchDataMode]=\"'manual'\"\n        (onRowDbClick)=\"handleRowDbClick($event)\"\n        [loading]=\"{ enabled: true, animation: true }\"\n      >\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\n          *ngIf=\"col.visible\"\n          [schema]=\"col.schema\"\n          [dataField]=\"col.name\"\n          [caption]=\"col.title\"\n          [options]=\"col.options\"\n          [displayFormat]=\"col.displayFormat\"\n          [width]=\"'180px'\"\n          [allowSorting]=\"false\"\n        >\n        </axp-widget-column-renderer>\n        }\n        <ax-dropdown-command-column\n          fixed=\"end\"\n          [width]=\"'60px'\"\n          [items]=\"getDropdownRowItems\"\n          (onItemClick)=\"handleRowCommandClick($event)\"\n        ></ax-dropdown-command-column>\n        <ax-command-column fixed=\"end\" [width]=\"'60px'\" [items]=\"getInlineRowItems\" (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\" (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>\n", 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$2.AXActionSheetService }, { type: i2.AXUnsubscriber }, { type: i3.AXPlatform }, { type: i0.ChangeDetectorRef }], propDecorators: { viewsTemplate: [{
-                type: ViewChild,
-                args: ['viewsTemplate']
-            }], grid: [{
-                type: ViewChild,
-                args: ['grid']
-            }], entityViewDrawer: [{
-                type: ViewChild,
-                args: ['entityViewDrawer']
-            }] } });
-
-class AXPListViewModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPListViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: AXPListViewModule, declarations: [AXPEntityListViewComponent,
-            AXPEntityCreateCustomViewComponent,
-            AXPListViewOptionsColumnsComponent,
-            AXPListViewOptionConditionsComponent,
-            AXPListViewOptionFilterOperatorComponent,
-            AXPListViewOptionSortingComponent], imports: [CommonModule,
-            FormsModule,
-            AXCommonModule,
-            AXDataTableModule,
-            AXButtonModule,
-            AXDecoratorModule,
-            AXBadgeModule,
-            AXDropdownModule,
-            AXPopoverModule,
-            AXImageModule,
-            AXSwitchModule,
-            AXDrawerModule,
-            AXLoadingModule,
-            AXTabsModule,
-            AXSelectBoxModule,
-            AXFormModule,
-            AXListModule,
-            AXTextBoxModule,
-            AXSearchBoxModule,
-            AXLabelModule,
-            AXCollapseModule,
-            AXActionSheetModule,
-            AXSelectionListModule,
-            AXImageModule,
-            AXDialogModule,
-            AXDropdownButtonModule,
-            //
-            CdkDropList,
-            CdkDrag,
-            CdkDragPlaceholder,
-            CdkDragHandle,
-            PortalModule,
-            AXPSchemaModule,
-            AXPCommonWidgetModule,
-            AXPAuthModule,
-            AXTranslationModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPListViewModule, imports: [CommonModule,
-            FormsModule,
-            AXCommonModule,
-            AXDataTableModule,
-            AXButtonModule,
-            AXDecoratorModule,
-            AXBadgeModule,
-            AXDropdownModule,
-            AXPopoverModule,
-            AXImageModule,
-            AXSwitchModule,
-            AXDrawerModule,
-            AXLoadingModule,
-            AXTabsModule,
-            AXSelectBoxModule,
-            AXFormModule,
-            AXListModule,
-            AXTextBoxModule,
-            AXSearchBoxModule,
-            AXLabelModule,
-            AXCollapseModule,
-            AXActionSheetModule,
-            AXSelectionListModule,
-            AXImageModule,
-            AXDialogModule,
-            AXDropdownButtonModule,
-            PortalModule,
-            AXPSchemaModule,
-            AXPCommonWidgetModule,
-            AXPAuthModule,
-            AXTranslationModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPListViewModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
+            args: [{ imports: [
                         CommonModule,
-                        FormsModule,
-                        AXCommonModule,
-                        AXDataTableModule,
+                        RouterModule,
                         AXButtonModule,
                         AXDecoratorModule,
                         AXBadgeModule,
                         AXDropdownModule,
                         AXPopoverModule,
+                        AXFormModule,
                         AXImageModule,
+                        AXActionSheetModule,
                         AXSwitchModule,
                         AXDrawerModule,
+                        AXDialogModule,
                         AXLoadingModule,
                         AXTabsModule,
-                        AXSelectBoxModule,
-                        AXFormModule,
-                        AXListModule,
-                        AXTextBoxModule,
-                        AXSearchBoxModule,
-                        AXLabelModule,
-                        AXCollapseModule,
-                        AXActionSheetModule,
-                        AXSelectionListModule,
-                        AXImageModule,
-                        AXDialogModule,
-                        AXDropdownButtonModule,
-                        //
-                        CdkDropList,
-                        CdkDrag,
-                        CdkDragPlaceholder,
-                        CdkDragHandle,
-                        PortalModule,
+                        AXBadgeModule,
+                        AXButtonModule,
+                        AXSwitchModule,
                         AXPSchemaModule,
-                        AXPCommonWidgetModule,
-                        AXPAuthModule,
+                        AXTooltipModule,
+                        AXBreadcrumbsModule,
                         AXTranslationModule,
-                    ],
-                    declarations: [
-                        AXPEntityListViewComponent,
-                        AXPEntityCreateCustomViewComponent,
-                        AXPListViewOptionsColumnsComponent,
-                        AXPListViewOptionConditionsComponent,
-                        AXPListViewOptionFilterOperatorComponent,
-                        AXPListViewOptionSortingComponent,
-                    ],
-                    providers: [],
-                }]
-        }] });
+                        //
+                        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 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\n        class=\"ax-flex ax-flex-col ax-pt-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all\"\n        #sticky=\"axpSticky\"\n        [axpSticky]=\"'ax-bg-surface ax-px-6 ax-py-3 -ax-mx-6 ax-shadow-xl'\"\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            @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\n                    [text]=\"('create-new' | translate | async) ?? ' '\"\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                  } @if(canDelete) {\n                  <ax-button-item text=\"Delete\" class=\"ax-font-semibold ax-text-danger\" (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)\" 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=\"{{ 'entity.modify' | translate | async }}\" 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 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 [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\" [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>\n" }]
+        }], ctorParameters: () => [{ type: i1.Actions }, { type: i2.AXUnsubscriber }], propDecorators: { drawer: [{
+                type: ViewChild,
+                args: ['drawer']
+            }] } });
 
-class AXPListViewLoaderDefault {
-    constructor(config, schemaService) {
+class AXPEntityDetailLoaderDefault {
+    constructor(config, store, entityData, formatService) {
         this.config = config;
-        this.schemaService = schemaService;
-        this._dataSource = new AXDataSource(this.entity.dataSource);
-        this._inlineFilterItems = [];
-        this._props$ = new BehaviorSubject(this.props);
+        this.store = store;
+        this.entityData = entityData;
+        this.formatService = formatService;
+        this._currentSection = 'default';
+        this._sections$ = new BehaviorSubject(this.sections);
+        //****************** Properties ******************//
         this.getProp = (name) => this.entity.properties.find((c) => c.name == name);
-        //****************** Views ******************//
-        this._currentView = 'default';
-        this._views$ = new BehaviorSubject(this.views);
-        //****************** Columns ******************//
-        this._currentDisplayColumns$ = new BehaviorSubject([]);
-        this._columns$ = new BehaviorSubject(this.columns);
-        //****************** Sort ******************//
-        this._currentSorts$ = new BehaviorSubject([]);
-        //****************** Conditions ******************//
-        this._currentConditions$ = new BehaviorSubject([]);
-        this._inlineFilterItems = this.entity.properties
-            .filter((property) => property.canInlineFilter)
-            .map((item) => {
-            const schema = this.schemaService.resolve(item.schema);
-            return { name: item.name, dataType: schema?.dataType, title: item.title };
+    }
+    get entity() {
+        if (!this._config) {
+            this._config = cloneDeep(this.config);
+        }
+        return this._config;
+    }
+    get data() {
+        return this.entityData;
+    }
+    get view() {
+        return (this.entity.views.detailView ?? this.entity.views.quickView);
+    }
+    //****************** Titles ******************//
+    get title() {
+        const suggestedProps = this.entity.properties.find((c) => ['title', 'name', 'code'].includes(c.name));
+        let suggestedFormat = 'Item #{{id}}';
+        if (suggestedProps)
+            suggestedFormat = `{{${suggestedProps.name}}}`;
+        const title = this.formatService.format(this.entity.formats?.header ?? this.entity.formats?.default ?? suggestedFormat, 'string', this.data);
+        return title;
+    }
+    get sectionTitle() {
+        return `${this.entity.title}`;
+    }
+    //****************** Sections ******************//
+    get sections() {
+        return this.view.root.sections?.length
+            ? this.view.root.sections
+            : [
+                {
+                    name: 'default',
+                    title: 'Default',
+                    properties: this.view.root.properties,
+                },
+            ];
+    }
+    get sections$() {
+        return this._sections$.pipe(defaultIfEmpty([]));
+    }
+    get section$() {
+        return this.sections$.pipe(switchMap((sections) => {
+            const section = sections.find((c) => c.name === this._currentSection) ?? this.sections[0];
+            if (!section.sections?.length) {
+                section.sections = [
+                    {
+                        name: 'default',
+                        title: 'Details',
+                        properties: section.properties,
+                    },
+                ];
+            }
+            return of(section);
+        }));
+    }
+    get hasSections$() {
+        return this.sections$.pipe(map((c) => c.length > 1));
+    }
+    setSection(name) {
+        this._currentSection = name ?? 'default';
+        const updatedSection = this.sections.find((c) => c.name === this._currentSection) || {
+            name: 'default',
+            title: 'Default',
+            properties: this.view.root.properties,
+        };
+        const currentSections = this._sections$.value;
+        const updatedSections = currentSections.map((section) => {
+            if (section.name === updatedSection.name) {
+                return updatedSection;
+            }
+            else {
+                return section;
+            }
         });
+        this._sections$.next(updatedSections);
     }
-    get entity() {
-        if (!this._config) {
-            this._config = cloneDeep(this.config);
+    //****************** Update ******************//
+    async update(values) {
+        assign(this.data, values);
+        this.setSection(this._currentSection);
+    }
+}
+class AXPEntityDetailViewLoaderFactory {
+    constructor() {
+        this.entityService = inject(AXPEntityRegistryService);
+        this.formatService = inject(AXFormatService);
+        this.layout = inject(AXPLayoutService);
+        this.store = inject(Store);
+    }
+    async create(moduleName, entityName, id) {
+        const config = await this.entityService.resolve(moduleName, entityName);
+        this.layout.setNavigationLoading(true);
+        if (config.dataSource.byKey) {
+            const data = await config.dataSource.byKey(id);
+            this.layout.setNavigationLoading(false);
+            return new AXPEntityDetailLoaderDefault(config, this.store, data, this.formatService);
         }
-        return this._config;
+        this.layout.setNavigationLoading(false);
+        return Promise.reject('cannot fetch ');
     }
-    get dataSource() {
-        return this._dataSource;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityDetailViewLoaderFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityDetailViewLoaderFactory, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityDetailViewLoaderFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class AXPEntityCreateCustomViewComponent extends AXBasePageComponent {
+    constructor() {
+        super(...arguments);
+        this.schemaRegistry = inject(AXPSchemaRegistryService);
+        this.toastService = inject(AXToastService);
+        this.dialogService = inject(AXDialogService);
+        this.subscriber = inject(AXUnsubscriber);
+        this.mode = 'create';
+        this.selectedView = {};
+        this.showNameInput = signal(false);
+        this.props = signal([]);
+        this.columns = signal([]);
+        this.visibleColumns = computed(() => this.columns().filter((c) => c.visible));
+        this.conditions = signal([]);
+        this.sorts = signal([]);
+        this.selectedConditionNames = [];
+        this.viewNames = [];
     }
-    //****************** Properties ******************//
-    get props() {
-        return this.entity.properties;
+    ngOnInit() {
+        this.props.set(cloneDeep(this.loader.entity.properties));
+        this.columns.set(cloneDeep(this.selectedView.columns));
+        this.conditions.set(cloneDeep(this.selectedView.conditions));
+        this.sorts.set(cloneDeep(this.selectedView.sorts));
+        this.loader.views$.pipe(this.subscriber.takeUntilDestroy).subscribe((views) => {
+            this.viewNames = views.map((v) => v.name);
+        });
     }
-    get properties$() {
-        return this._props$;
+    //****************** Columns ******************//
+    updateColumnItem(event, colName) {
+        if (event.isUserInteraction) {
+            this.columns.update((prevCols) => prevCols.map((col) => (col.name === colName ? { ...col, visible: event.value } : col)));
+        }
     }
-    get views() {
-        return this.entity.views.list?.views;
+    //****************** Sorts ******************//
+    updateSortItem(item) {
+        this.sorts.update((prevSorts) => prevSorts.map((sort) => (sort.name === item.name ? { ...sort, dir: sort.dir == 'asc' ? 'desc' : 'asc' } : sort)));
     }
-    get views$() {
-        return this._views$;
+    addSortItem() {
+        const sortNames = this.sorts().map((p) => p.name);
+        console.log(this.props(), sortNames);
+        const name = this.props().find((c) => !sortNames.includes(c.name))?.name || this.props()[0].name;
+        this.sorts.update((prevSorts) => [...prevSorts, { name, dir: 'asc' }]);
     }
-    get view$() {
-        return this.views$.pipe(switchMap((views) => {
-            const view = views.find((c) => c.name === this._currentView);
-            if (view) {
-                return of(view);
-            }
-            else if (this.views.length > 0) {
-                return of(this.views[0]);
-            }
-            else {
-                return of(AXPEntityListViewConfigEmpty);
-            }
-        }));
+    removeSortItem(item) {
+        this.sorts.update((prevSorts) => prevSorts.filter((sort) => item.name != sort.name));
     }
-    get publicViews$() {
-        return this.views$.pipe(map((c) => c.filter((v) => v.fixed)));
+    //****************** Conditions ******************//
+    getSchema(name) {
+        return this.props().find((c) => c.name == name)?.schema ?? '';
     }
-    get customViews$() {
-        return this.views$.pipe(map((c) => c.filter((v) => !v.fixed)));
+    getOperators(name) {
+        const schemaName = this.props().find((c) => c.name == name)?.schema ?? '';
+        return this.schemaRegistry.resolve(schemaName)?.filterOptions?.operators ?? [];
     }
-    get hasCustomViews$() {
-        return this.customViews$.pipe(map((c) => c.length > 0));
+    getDefaultOperator(name) {
+        const schemaName = this.props().find((c) => c.name == name)?.schema ?? '';
+        return this.schemaRegistry.resolve(schemaName)?.filterOptions?.default ?? EQ_OPER;
     }
-    setDefaultView() {
-        this.setView(this.views[0].name);
+    getOperatorTitle(schemaName, oprName) {
+        return this.getOperators(schemaName).find((c) => c.name == oprName)?.title || '';
     }
-    setView(name) {
-        let propNames = [];
-        this.properties$.pipe(first()).subscribe((properties) => {
-            propNames = properties.map((p) => p.name);
-        });
-        this._currentView = name;
-        const updatedView = this._views$.value.find((c) => c.name === this._currentView) || AXPEntityListViewConfigEmpty;
-        const currentViews = this._views$.value;
-        const updatedViews = currentViews.map((view) => {
-            if (view.name === updatedView.name) {
-                return updatedView;
-            }
-            else {
-                return view;
-            }
-        });
-        this._currentConditions$.next(cloneDeep(updatedView.conditions.filter((c) => propNames.includes(c.name))));
-        this._currentSorts$.next(cloneDeep(updatedView.sorts.filter((s) => propNames.includes(s.name))));
-        // this._columns$.next(updatedView.columns);
-        this._currentDisplayColumns$.next(cloneDeep(updatedView.columns.filter((c) => propNames.includes(c.name))));
-        this._views$.next(updatedViews);
-        //apply conditions and sorts:
-        this.dataSource.filter({
-            field: null,
-            logic: 'and',
-            operator: null,
-            filters: updatedView.conditions.map((c) => ({
-                field: c.name,
-                value: c.value,
-                operator: { type: c.operator },
-            })),
+    resetSelectedFieldNames() {
+        this.selectedConditionNames = this.conditions().map((c) => c.name);
+    }
+    addCondition() {
+        const conditions = this.selectedConditionNames.map((c) => {
+            const opr = this.getDefaultOperator(c);
+            return {
+                name: c,
+                operator: opr.name,
+            };
         });
-        const convertedSortItems = updatedView.sorts.map((s) => ({
-            field: s.name,
-            dir: s.dir,
-        }));
-        this.dataSource.sort(...convertedSortItems);
-        this.dataSource.refresh();
+        this.conditions.set(conditions);
     }
-    createView(newView) {
-        const currentViews = this._views$.getValue();
-        currentViews.push(newView);
-        this._views$.next(currentViews);
-        this.setView(newView.name);
+    removeCondition(item) {
+        this.conditions.update((prevConditions) => prevConditions.filter((con) => con.name != item.name));
     }
-    updateView(updatedView) {
-        const currentViews = this._views$.getValue().map((view) => (view.name === updatedView.name ? updatedView : view));
-        this._views$.next(currentViews);
-        this.setView(updatedView.name);
+    //****************** Common ******************//
+    drop(type, event) {
+        switch (type) {
+            case 'columns':
+                this.columns.update((prevCols) => {
+                    const columns = prevCols;
+                    moveItemInArray(columns, event.previousIndex, event.currentIndex);
+                    return columns;
+                });
+                break;
+            case 'sorts':
+                this.sorts.update((prevSorts) => {
+                    const sorts = prevSorts;
+                    moveItemInArray(sorts, event.previousIndex, event.currentIndex);
+                    return sorts;
+                });
+                break;
+            case 'conditions':
+                this.conditions.update((prevConditions) => {
+                    const conditions = prevConditions;
+                    moveItemInArray(conditions, event.previousIndex, event.currentIndex);
+                    return conditions;
+                });
+                break;
+            default:
+                break;
+        }
     }
-    deleteView(viewName) {
-        const currentViews = this._views$.getValue().filter((view) => view.name !== viewName);
-        this._views$.next(currentViews);
-        this.setView(this.views[0].name);
+    changeViewNameToggle() {
+        this.showNameInput.update((prev) => !prev);
     }
-    get columns() {
-        return this.entity.properties.map((p) => ({
-            name: p.name,
-            title: p.title,
-            schema: p.schema,
-        }));
+    generateViewName(title) {
+        return title.replace(/\s+/g, '-').toLowerCase();
     }
-    get columns$() {
-        return this._columns$.pipe(defaultIfEmpty([]));
+    handleApplyClick() {
+        const updatedView = {
+            ...this.selectedView,
+            name: this.generateViewName(this.selectedView.title),
+            conditions: this.conditions(),
+            columns: this.columns(),
+            sorts: this.sorts(),
+        };
+        if (this.viewNames.includes(updatedView.name) && this.mode == 'create') {
+            this.toastService.show({
+                title: 'Invalid Title',
+                content: 'The title you have chosen already exists. Please choose a different title for your custom view.',
+                color: 'danger',
+                location: 'bottom-center',
+                closeButton: true,
+                timeOut: 3000,
+            });
+        }
+        else {
+            this.close({ save: true, updatedView });
+        }
+    }
+    handleResetClick() {
+        this.conditions.set(cloneDeep(this.selectedView.conditions));
+        this.columns.set(cloneDeep(this.selectedView.columns));
+        this.sorts.set(cloneDeep(this.selectedView.sorts));
     }
-    get displayColumns$() {
-        return this._currentDisplayColumns$.pipe(defaultIfEmpty([]));
+    handleDiscardClick() {
+        this.close({ save: false });
     }
-    get displayColumnsCount$() {
-        return this.view$.pipe(map((view) => {
-            return view.columns.filter((column) => column.visible).length;
-        }));
+    handleCancelClick() {
+        this.close({ save: false });
     }
-    updateColumns(items) {
-        this.view$.pipe(first()).subscribe((view) => {
-            view.columns = cloneDeep(items);
-            this._views$.next(this._views$.value.map((v) => (v.name === this._currentView ? view : v)));
+    handleDeleteClick() {
+        this.dialogService
+            .confirm('Warning', 'Are you sure want to delete this view?', 'danger', 'horizontal')
+            .then((data) => {
+            if (data.result) {
+                this.close({ delete: true, viewName: this.selectedView.name });
+            }
         });
     }
-    resetColumns() {
-        this.view$.pipe(first()).subscribe((view) => {
-            this._currentDisplayColumns$.next(cloneDeep(view.columns));
-        });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityCreateCustomViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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]=\"('entity.columns' | translate | async) ?? 'Columns'\">\n      <ax-suffix>\n        <ax-badge [text]=\"visibleColumns().length.toString()\" color=\"primary\"> </ax-badge>\n      </ax-suffix>\n      <ax-content>\n        <div class=\"ax-flex ax-flex-col ax-gap-4 ax-p-4 ax-select-none ax-h-[400px]\" cdkDropList (cdkDropListDropped)=\"drop('columns', $event)\">\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 class=\"ax-sm\" [(ngModel)]=\"item.visible\" (onValueChanged)=\"updateColumnItem($event, item.name)\"></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\">Please select field(s) that you want to filter</span>\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 class=\"ax-text-xs\" color=\"primary\" [look]=\"'twotone'\" [text]=\"getOperatorTitle(item.name, item.operator)\"></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]=\"'entity.add-field' | translate | async\" 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]=\"'entity.add-field' | translate | async\" 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 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-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 (onClick)=\"addCondition(); conditionsPopover.close()\" class=\"ax-sm\" text=\"Confirm\" color=\"primary\"> </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\">{{ 'entity.no-sort' | translate | async }}</p>\n            <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\">{{ 'entity.ask-sort' | translate | async }}</span>\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\"> </ax-select-box>\n                <ax-button [color]=\"'default'\" class=\"ax-sm\" (click)=\"updateSortItem(item)\">\n                  <ax-icon [class.ax-text-primary]=\"item.dir == 'asc'\" class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"></ax-icon>\n                  <ax-icon [class.ax-text-primary]=\"item.dir == 'desc'\" class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"></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]=\"'entity.add-field' | translate | async\"\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]=\"'entity.add-field' | translate | async\"\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' | translate | async\" (onClick)=\"handleDiscardClick()\">\n    <ax-button-item-list>\n      <ax-button-item [text]=\"('reset' | translate | async) ?? ' '\" (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' | translate | async\" look=\"outline\" (onClick)=\"handleCancelClick()\"></ax-button>\n  }\n  <ax-button [text]=\"mode === 'create' ? ('save' | translate | async) : ('save-changes' | translate | async)\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\n</ax-footer>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$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", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "component", type: i4.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i4.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "component", type: i4$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4$1.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }, { kind: "component", type: i4$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i5.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: i6$1.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i7.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: i8$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: i10$1.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "component", type: i11$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$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: i13.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "hintField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "component", type: i14.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "directive", type: i15.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], 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", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i15.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i10.AXPWidgetFilterRendererComponent, selector: "axp-widget-filter-renderer", inputs: ["value", "operator", "prop", "schema"], outputs: ["valueChange", "operatorChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityCreateCustomViewComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: AXUnsubscriber,
+                        },
+                    ], template: "<ax-header class=\"ax-p-4 ax-flex ax-justify-between ax-border-b\">\n  <div class=\"ax-flex ax-items-center\">\n    @if (showNameInput() && mode==='create') {\n    <div class=\"ax-w-60\">\n      <ax-text-box class=\"ax-sm\" [(ngModel)]=\"selectedView.title\">\n        @if(showNameInput()){\n        <ax-suffix>\n          <ax-button (onClick)=\"changeViewNameToggle()\" look=\"default\">\n            <ax-icon class=\"fa-sodild fas fa-check ax-text-sm\"> </ax-icon>\n          </ax-button>\n        </ax-suffix>\n        }\n      </ax-text-box>\n    </div>\n    }@else {\n    <span class=\"ax-text-lg ax-font-semibold\">{{ selectedView.title }}</span>\n    } @if (mode===\"create\") {\n    <ax-button class=\"ax-xs\" (onClick)=\"changeViewNameToggle()\" color=\"default\">\n      @if(!showNameInput() ){\n      <ax-icon class=\"fa-regular fa-pen ax-text-sm ax-text-neutral-600\"> </ax-icon>\n      }\n    </ax-button>\n    }\n  </div>\n  <ax-close-button></ax-close-button>\n</ax-header>\n<div class=\"ax-p-4\">\n  <ax-tabs [content]=\"contents\" look=\"with-line\">\n    <ax-tab-item [text]=\"('entity.columns' | translate | async) ?? 'Columns'\">\n      <ax-suffix>\n        <ax-badge [text]=\"visibleColumns().length.toString()\" color=\"primary\"> </ax-badge>\n      </ax-suffix>\n      <ax-content>\n        <div class=\"ax-flex ax-flex-col ax-gap-4 ax-p-4 ax-select-none ax-h-[400px]\" cdkDropList (cdkDropListDropped)=\"drop('columns', $event)\">\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 class=\"ax-sm\" [(ngModel)]=\"item.visible\" (onValueChanged)=\"updateColumnItem($event, item.name)\"></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\">Please select field(s) that you want to filter</span>\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 class=\"ax-text-xs\" color=\"primary\" [look]=\"'twotone'\" [text]=\"getOperatorTitle(item.name, item.operator)\"></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]=\"'entity.add-field' | translate | async\" 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]=\"'entity.add-field' | translate | async\" 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 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-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 (onClick)=\"addCondition(); conditionsPopover.close()\" class=\"ax-sm\" text=\"Confirm\" color=\"primary\"> </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\">{{ 'entity.no-sort' | translate | async }}</p>\n            <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\">{{ 'entity.ask-sort' | translate | async }}</span>\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\"> </ax-select-box>\n                <ax-button [color]=\"'default'\" class=\"ax-sm\" (click)=\"updateSortItem(item)\">\n                  <ax-icon [class.ax-text-primary]=\"item.dir == 'asc'\" class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"></ax-icon>\n                  <ax-icon [class.ax-text-primary]=\"item.dir == 'desc'\" class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"></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]=\"'entity.add-field' | translate | async\"\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]=\"'entity.add-field' | translate | async\"\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' | translate | async\" (onClick)=\"handleDiscardClick()\">\n    <ax-button-item-list>\n      <ax-button-item [text]=\"('reset' | translate | async) ?? ' '\" (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' | translate | async\" look=\"outline\" (onClick)=\"handleCancelClick()\"></ax-button>\n  }\n  <ax-button [text]=\"mode === 'create' ? ('save' | translate | async) : ('save-changes' | translate | async)\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\n</ax-footer>\n" }]
+        }], propDecorators: { loader: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], selectedView: [{
+                type: Input
+            }] } });
+
+class AXPListViewOptionsColumnsComponent {
+    constructor() {
+        this.store = inject((Store));
+        this.isSM = this.store.select(isSmallScreen());
+        this.columns$ = of([]);
+        this.onClosed = new EventEmitter();
     }
-    setColumnVisibility(name, visible) {
-        const updatedColumns = this._currentDisplayColumns$.getValue().map((column) => {
-            if (column.name === name) {
-                return { ...column, visible };
-            }
-            else {
-                return column;
-            }
+    ngOnInit() {
+        this.columns$ = this.loader.displayColumns$;
+    }
+    handleVisibilityChange(e, name) {
+        if (e.isUserInteraction) {
+            this.loader.setColumnVisibility(name, e.value);
+        }
+    }
+    drop(event) {
+        this.columns$.pipe(first()).subscribe((columns) => {
+            moveItemInArray(columns, event.previousIndex, event.currentIndex);
         });
-        this._currentDisplayColumns$.next(updatedColumns);
     }
-    get sorts$() {
-        return this._currentSorts$.pipe(defaultIfEmpty([]));
+    handleClose() {
+        this.onClosed.emit();
     }
-    get sortsCount$() {
-        return this.view$.pipe(map((c) => c.sorts.length));
+    handleResetClick() {
+        this.loader.resetColumns();
     }
-    addSort() {
-        this.view$.pipe(first()).subscribe((view) => {
-            const currentSorts = this._currentSorts$.getValue();
-            const name = view.columns.find((c) => !currentSorts.some((s) => s.name == c.name))?.name ?? '';
-            if (name) {
-                const sorts = [...currentSorts, { name, dir: 'asc' }];
-                this._currentSorts$.next(sorts);
-            }
+    handleApplyClick() {
+        this.columns$.pipe(first()).subscribe((data) => {
+            this.loader.updateColumns(data);
         });
+        this.onClosed.emit();
     }
-    removeSort(item) {
-        const currentSorts = this._currentSorts$.getValue();
-        const sorts = currentSorts.filter((c) => c != item);
-        this._currentSorts$.next(sorts);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPListViewOptionsColumnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", 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\">{{ 'entity.columns' | translate | async }}</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 class=\"ax-sm\" [ngModel]=\"item.visible\" (onValueChanged)=\"handleVisibilityChange($event, item.name)\"></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' | translate | async\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\n  <ax-button [text]=\"'reset' | translate | async\" 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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$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", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "component", type: i4$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i8$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", "cdkDropListElementContainer"], 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", "cdkDragScale"], 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" }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", 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\">{{ 'entity.columns' | translate | async }}</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 class=\"ax-sm\" [ngModel]=\"item.visible\" (onValueChanged)=\"handleVisibilityChange($event, item.name)\"></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' | translate | async\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\n  <ax-button [text]=\"'reset' | translate | async\" color=\"ghost\" (onClick)=\"handleResetClick()\"></ax-button>\n</ax-footer>\n" }]
+        }], propDecorators: { loader: [{
+                type: Input
+            }], onClosed: [{
+                type: Output
+            }] } });
+
+class AXPListViewOptionConditionsComponent {
+    constructor() {
+        this.onClosed = new EventEmitter();
+        this.schemaRegistery = inject(AXPSchemaRegistryService);
+        this.popopService = inject(AXPopupService);
+        this.isSM = false;
+        this.props$ = of([]);
+        this.props = [];
+        this.conditions$ = of([]);
+        this.selectedFieldNames = [];
     }
-    resetSort() {
-        this.view$.pipe(first()).subscribe((view) => {
-            this._currentSorts$.next(cloneDeep(view.sorts));
-        });
+    onNameChange(item) {
+        console.log('onName changed!', item);
     }
-    updateSort(items) {
-        this.view$.pipe(first()).subscribe((view) => {
-            view.sorts = cloneDeep(items);
-            this._views$.next(this._views$.value.map((v) => (v.name === this._currentView ? view : v)));
-            const convertedSortItems = items.map((s) => ({
-                field: s.name,
-                dir: s.dir,
-            }));
-            this.dataSource.sort(...convertedSortItems);
-            this.dataSource.refresh();
+    ngOnInit() {
+        this.props$ = this.loader.properties$.pipe(map((sorts) => sorts.filter((s) => s.canFilter != false)));
+        this.conditions$ = this.loader.conditions$;
+        this.conditions$.pipe(first()).subscribe((initialConditions) => {
+            this.selectedFieldNames = initialConditions.map((i) => i.name);
+        });
+        this.props$.pipe(first()).subscribe((data) => {
+            this.props = data;
         });
     }
-    get conditions$() {
-        return this._currentConditions$.pipe(defaultIfEmpty([]));
-    }
-    get conditionsCount$() {
-        return this.view$.pipe(map((c) => c.conditions.length));
+    getOperators(name) {
+        const schemaName = this.props.find((c) => c.name == name)?.schema ?? '';
+        return this.schemaRegistery.resolve(schemaName)?.filterOptions?.operators ?? [];
     }
-    getInlineFilterTitles() {
-        return this._inlineFilterItems.map((item) => item.title);
+    getDefaultOperator(name) {
+        const schemaName = this.props.find((c) => c.name == name)?.schema ?? '';
+        return this.schemaRegistery.resolve(schemaName)?.filterOptions?.default ?? EQ_OPER;
     }
-    addCondition(selectedFields) {
-        const prevConditions = this._currentConditions$.getValue();
-        const conditionsMap = new Map(prevConditions.map((item) => [item.name, item]));
-        const newFields = selectedFields.map((field) => conditionsMap.get(field.name) || { name: field.name, operator: field.opr });
-        this._currentConditions$.next(newFields);
+    getOperatorTitle(schemaName, oprName) {
+        return this.getOperators(schemaName).find((c) => c.name == oprName)?.title || '';
     }
-    removeCondition(item) {
-        const currentConditions = this._currentConditions$.getValue();
-        const conditions = currentConditions.filter((c) => c != item);
-        this._currentConditions$.next(conditions);
+    getSchema(name) {
+        return this.props.find((c) => c.name == name)?.schema ?? '';
     }
-    updateConditions(items) {
-        this.view$.pipe(first()).subscribe((view) => {
-            view.conditions = cloneDeep(items);
-            this._views$.next(this._views$.value.map((v) => (v.name === this._currentView ? view : v)));
+    drop(event) {
+        this.conditions$.pipe(first()).subscribe((conditions) => {
+            console.log('conditions: ', conditions);
+            moveItemInArray(conditions, event.previousIndex, event.currentIndex);
         });
-        this.applyAllConditions();
     }
-    handleInlineSearch(value) {
-        const inlineConditions = [];
-        this._inlineFilterItems?.forEach((property) => {
-            if (property?.dataType == 'string' || property?.dataType == 'number') {
-                inlineConditions.push({
-                    name: property.name,
-                    value: property.dataType == 'number' ? parseFloat(value) : value,
-                    operator: property.dataType == 'string' ? 'contains' : 'equal',
-                });
-            }
-        });
-        this.view$.pipe(first()).subscribe((view) => {
-            view.inlineConditions = cloneDeep(inlineConditions);
-        });
-        this.applyAllConditions();
+    handleClose() {
+        this.onClosed.emit();
     }
-    applyAllConditions() {
-        const inlineConditions = {
-            field: null,
-            operator: null,
-            logic: 'or',
-            filters: [],
-        };
-        const mainConditions = {
-            field: null,
-            operator: null,
-            logic: 'and',
-            filters: [],
-        };
-        this.view$.pipe(first()).subscribe((view) => {
-            if (view.inlineConditions && view.inlineConditions.length) {
-                view.inlineConditions?.forEach((c) => {
-                    if (c.value) {
-                        inlineConditions.filters?.push({
-                            field: c.name,
-                            operator: { type: c.operator },
-                            value: c.value,
-                        });
-                    }
-                });
-            }
-            if (view.conditions.length) {
-                view.conditions.forEach((c) => {
-                    mainConditions.filters?.push({
-                        field: c.name,
-                        operator: { type: c.operator },
-                        value: c.value,
-                    });
-                });
-            }
-            this.dataSource.filter({
-                field: null,
-                logic: 'and',
-                operator: null,
-                filters: [mainConditions, inlineConditions],
-            });
-            this.dataSource.refresh();
-            this._views$.next(this._views$.value.map((v) => (v.name === this._currentView ? view : v)));
+    handleRemoveCondition(item) {
+        this.selectedFieldNames = this.selectedFieldNames.filter((i) => i !== item.name);
+        this.loader.removeCondition(item);
+    }
+    resetSelectedFieldNames() {
+        this.conditions$.pipe(first()).subscribe((initialConditions) => {
+            this.selectedFieldNames = initialConditions.map((i) => i.name);
         });
     }
-    resetConditions() {
-        this.view$.pipe(first()).subscribe((view) => {
-            this._currentConditions$.next(cloneDeep(view.conditions));
+    handleResetClick() {
+        this.loader.resetConditions();
+    }
+    onConfirmFields() {
+        const fileds = this.selectedFieldNames.map((c) => {
+            const opr = this.getDefaultOperator(c);
+            return {
+                name: c,
+                opr: opr.name,
+            };
         });
+        this.loader.addCondition(fileds);
     }
-}
-const AXP_LISTVIEW_LOADER = new InjectionToken('AXP_LISTVIEW_LOADER');
-class AXPListViewLoaderFactory {
-    constructor() {
-        this.cache = new Map();
-        this.entityService = inject(AXPEntityRegistryService);
-        this.schemaService = inject(AXPSchemaRegistryService);
-        this.layout = inject(AXPLayoutService);
-    }
-    async create(moduleName, entityName) {
-        this.layout.setNavigationLoading(true);
-        const config = await this.entityService.resolve(moduleName, entityName);
-        let result = this.cache.get(config.name);
-        if (result) {
-            this.layout.setNavigationLoading(false);
-            return result;
-        }
-        result = new AXPListViewLoaderDefault(config, this.schemaService);
-        this.cache.set(config.name, result);
-        this.layout.setNavigationLoading(false);
-        return result;
+    handleApplyClick() {
+        this.conditions$.pipe(first()).subscribe((data) => {
+            console.log(data);
+            this.loader.updateConditions(data);
+        });
+        this.onClosed.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPListViewLoaderFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPListViewLoaderFactory, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPListViewOptionConditionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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]=\"'entity.add-field' | translate | async\" 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]=\"'entity.add-field' | translate | async\" 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' | translate | async\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\n  <ax-button [text]=\"'reset' | translate | async\" color=\"ghost\" (onClick)=\"handleResetClick()\"></ax-button>\n</ax-footer>\n", dependencies: [{ kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$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", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "component", type: i4$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i5.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: i6$1.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i7.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: i7$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: i13.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "hintField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "directive", type: i15.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], 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", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i15.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i10.AXPWidgetFilterRendererComponent, selector: "axp-widget-filter-renderer", inputs: ["value", "operator", "prop", "schema"], outputs: ["valueChange", "operatorChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPListViewLoaderFactory, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", 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]=\"'entity.add-field' | translate | async\" 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]=\"'entity.add-field' | translate | async\" 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' | translate | async\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\n  <ax-button [text]=\"'reset' | translate | async\" color=\"ghost\" (onClick)=\"handleResetClick()\"></ax-button>\n</ax-footer>\n" }]
+        }], ctorParameters: () => [], propDecorators: { onClosed: [{
+                type: Output
+            }], loader: [{
+                type: Input
+            }] } });
 
-class AXPEntityQuickViewComponent extends AXBasePageComponent {
-    /**
-     *
-     */
-    constructor(actions$) {
-        super();
-        this.actions$ = actions$;
-        this.store = inject((Store));
-        this.workflow = inject(AXPWorkflowService);
-        this.canDelete = false;
-        this.canCreate = false;
-        this.canUpdate = false;
+class AXPListViewOptionFilterOperatorComponent {
+    constructor() {
+        this.visible = false;
+        this.cdr = inject(ChangeDetectorRef);
+        this._items = [];
+        this.valueChange = new EventEmitter();
     }
-    ngOnInit() {
-        super.ngOnInit();
-        //
-        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;
-        }
+    get items() {
+        return this._items;
     }
-    getProperties(names) {
-        return this.entity.properties.filter((c) => names.includes(c.name));
+    set items(v) {
+        this.visible = false;
+        this._items = v;
+        setTimeout(() => {
+            this.visible = true;
+            this.cdr.markForCheck();
+            setTimeout(() => {
+                if (this.selectBox) {
+                    //this.selectBox.defaultValue = this.items[0]?.name;
+                }
+            });
+        });
     }
-    handleCloseClick() {
-        this.close();
+    get value() {
+        return this._value;
     }
-    handleCommandClick(command) {
-        switch (command) {
-            case 'delete':
-                this.workflow.execute('delete-entity', {
-                    module: this.entity.module,
-                    entity: this.entity.name,
-                    ids: [this.data.id],
-                });
-                this.close();
-                break;
-            case 'details':
-                this.workflow.execute('show-details', {
-                    payload: {
-                        module: this.entity.module,
-                        entity: this.entity.name,
-                    },
-                    id: this.data.id,
-                });
-                this.close();
-                break;
-            default:
-                break;
-        }
+    set value(v) {
+        this._value = v;
+        this.valueChange.emit(v);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityQuickViewComponent, deps: [{ token: i1$3.Actions }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: AXPSchemaModule }, { kind: "component", type: i10$1.AXPWidgetRendererComponent, selector: "axp-widget-renderer", inputs: ["context", "prop", "mode", "schema"] }, { kind: "ngmodule", type: AXPCommonWidgetModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i4$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i4.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i4.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i14.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPListViewOptionFilterOperatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPListViewOptionFilterOperatorComponent, selector: "axp-list-view-option-filter-operator", inputs: { items: "items", value: "value" }, outputs: { valueChange: "valueChange" }, host: { styleAttribute: "display: contents;" }, viewQueries: [{ propertyName: "selectBox", first: true, predicate: AXSelectBoxComponent, descendants: true }], ngImport: i0, template: `
+    <ax-select-box
+      valueField="name"
+      [dataSource]="items"
+      textField="title"
+      [(ngModel)]="value"
+      *ngIf="visible"
+    >
+    </ax-select-box>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i10$1.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityQuickViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPListViewOptionFilterOperatorComponent, decorators: [{
             type: Component,
-            args: [{ encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, AXPSchemaModule, AXPCommonWidgetModule, AXDecoratorModule, AXButtonModule, AXDropdownModule, AXDropdownButtonModule], template: "<div class=\"ax-flex ax-flex-col ax-gap-6 ax-p-4\">\n  <div class=\"ax-flex ax-flex-col ax-gap-2\" *ngIf=\"root.properties?.length\">\n    <div *ngFor=\"let p of getProperties(root.properties)\"\n      class=\"ax-flex ax-p-4 odd:ax-bg-on-surface odd:ax-border-t odd:ax-border-b\">\n      <div class=\"ax-min-w-[10rem] ax-text-gray-500\">\n        <span>{{ p.title }}</span>\n      </div>\n      <div class=\"ax-min-w-[30rem]\">\n        <axp-widget-renderer [schema]=\"p.schema\" [context]=\"data\" [prop]=\"p\"></axp-widget-renderer>\n      </div>\n    </div>\n  </div>\n  <div *ngFor=\"let s of root.sections\"\n    class=\"ax-flex ax-flex-col ax-pb-3 last-of-type:ax-border-none last-of-type:ax-pb-3\">\n    <div class=\"ax-pb-4\">\n      <span class=\"ax-font-bold\">{{ s.title }}</span>\n    </div>\n    <div class=\"ax-flex ax-flex-col\">\n      <div *ngFor=\"let p of getProperties(s.properties)\"\n        class=\"ax-flex ax-flex-col md:ax-flex-row ax-p-3 odd:ax-bg-on-surface odd:ax-border-t odd:ax-border-b\">\n        @if (s.options?.showPropTitle!=false) {\n        <div class=\"ax-min-w-[10rem] ax-text-neutral-500 dark:ax-text-neutral-300 ax-mb-2 md:ax-mb-0\">\n          <span>{{ p.title }}</span>\n        </div>\n        }\n        <div class=\"md:ax-min-w-[30rem]\">\n          <axp-widget-renderer [schema]=\"p.schema\" [context]=\"data\" [prop]=\"p\" [mode]=\"'view'\"></axp-widget-renderer>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<ax-footer>\n  <ax-prefix> </ax-prefix>\n  <ax-suffix>\n    <ax-dropdown-button text=\"Close\" (onClick)=\"handleCloseClick()\">\n      <ax-button-item-list>\n        <ax-button-item text=\"View Details\" (onClick)=\"handleCommandClick('details')\">\n          <ax-prefix>\n            <ax-icon icon=\"fa-solid fa-info-circle\"></ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n        @if(canDelete)\n        {\n        <ax-button-item class=\"ax-text-danger\" text=\"Delete\" (onClick)=\"handleCommandClick('delete')\">\n          <ax-prefix> <ax-icon icon=\"fas fa-trash fa-flip-horizontal\"></ax-icon> </ax-prefix></ax-button-item>\n        }\n      </ax-button-item-list>\n    </ax-dropdown-button>\n  </ax-suffix>\n</ax-footer>" }]
-        }], ctorParameters: () => [{ type: i1$3.Actions }] });
-
-var entityQuickView_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPEntityQuickViewComponent: AXPEntityQuickViewComponent
-});
+            args: [{
+                    selector: 'axp-list-view-option-filter-operator',
+                    template: `
+    <ax-select-box
+      valueField="name"
+      [dataSource]="items"
+      textField="title"
+      [(ngModel)]="value"
+      *ngIf="visible"
+    >
+    </ax-select-box>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { style: 'display: contents;' },
+                }]
+        }], propDecorators: { selectBox: [{
+                type: ViewChild,
+                args: [AXSelectBoxComponent]
+            }], items: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], value: [{
+                type: Input
+            }] } });
 
-class AXPEntityModifyLoaderDefault {
-    constructor(config, selectedData, selectedSection) {
-        this.config = config;
-        this.selectedData = selectedData;
-        this.selectedSection = selectedSection;
-        this._data = {};
-        //****************** Properties ******************//
-        this.getProp = (name) => this.entity.properties.find((c) => c.name == name);
-        this._data = this.selectedData;
-        this._currentSection = this.selectedSection;
-    }
-    get entity() {
-        if (!this._config) {
-            this._config = cloneDeep(this.config);
-        }
-        return this._config;
+class AXPListViewOptionSortingComponent {
+    constructor() {
+        this.isSM = false;
+        this.onClosed = new EventEmitter();
+        this.props$ = of([]);
+        this.sorts$ = of([]);
     }
-    get data() {
-        return this._data;
+    ngOnInit() {
+        this.props$ = this.loader.properties$.pipe(map((sorts) => sorts.filter((s) => s.canSort != false)));
+        this.loader.sorts$.subscribe((data) => { });
+        this.sorts$ = this.loader.sorts$;
     }
-    get section() {
-        return this._currentSection;
+    drop(event) {
+        this.sorts$.pipe(first()).subscribe((sorts) => {
+            moveItemInArray(sorts, event.previousIndex, event.currentIndex);
+        });
     }
-    get view() {
-        return this.entity.views.detailView;
+    changeItemSort(item) {
+        item.dir = item.dir == 'asc' ? 'desc' : 'asc';
     }
-    //****************** update ******************//
-    async update(values) {
-        if (this._config.commands?.update) {
-            const updated = await this._config.commands?.update(this._data.id, values);
-            Object.assign(this._data, updated);
-            return Promise.resolve();
-        }
-        else {
-            return Promise.reject(`There is not any update commands for '${this.config.name}'`);
-        }
+    handleClose() {
+        this.onClosed.emit();
     }
-}
-class AXPEntityModifyViewLoaderFactory {
-    constructor() {
-        this.entityService = inject(AXPEntityRegistryService);
-        this.layout = inject(AXPLayoutService);
+    handleResetClick() {
+        this.loader.resetSort();
     }
-    async create(moduleName, entityName, id, section) {
-        this.layout.setNavigationLoading(true);
-        const config = await this.entityService.resolve(moduleName, entityName);
-        if (config.dataSource.byKey) {
-            const data = await config.dataSource.byKey(id);
-            this.layout.setNavigationLoading(false);
-            return new AXPEntityModifyLoaderDefault(config, data, section);
-        }
-        this.layout.setNavigationLoading(false);
-        return Promise.reject('cannot fetch ');
+    handleApplyClick() {
+        this.sorts$.pipe(first()).subscribe((data) => {
+            this.loader.updateSort(data);
+        });
+        this.onClosed.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityModifyViewLoaderFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityModifyViewLoaderFactory, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPListViewOptionSortingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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\">{{'entity.sort' | translate | async}}</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-p-4 ax-flex-col ax-justify-center ax-gap-4 ax-select-none\" [class.ax-h-[calc(100vh-310px)]]=\"!(sorts$ | async)?.length\">\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\">{{ 'entity.no-sort' | translate | async }}</p>\n    <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\">{{ 'entity.ask-sort' | translate | async }}</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 [dataSource]=\"(props$ | async) ?? []\" valueField=\"name\" textField=\"title\" [(ngModel)]=\"item.name\"> </ax-select-box>\n        <ax-button [color]=\"'default'\" class=\"ax-sm\" (click)=\"changeItemSort(item)\">\n          <ax-icon [class.ax-text-primary]=\"item.dir == 'asc'\" class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"></ax-icon>\n          <ax-icon [class.ax-text-primary]=\"item.dir == 'desc'\" class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"></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]=\"'entity.add-field' | translate | async\" look=\"blank\" class=\"ax-sm\"></ax-button>\n      }@else {\n      <div class=\"ax-flex ax-justify-center ax-w-full\">\n        <ax-button (onClick)=\"loader.addSort()\" color=\"primary\" [text]=\"'entity.add-field' | translate | async\" look=\"outline\" class=\"ax-md ax-w-56\"></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' | translate | async\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\n  <ax-button [text]=\"'reset' | translate | async\" 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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$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", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "component", type: i4$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i7.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: i10$1.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "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", "cdkDropListElementContainer"], 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", "cdkDragScale"], 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" }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityModifyViewLoaderFactory, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", 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\">{{'entity.sort' | translate | async}}</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-p-4 ax-flex-col ax-justify-center ax-gap-4 ax-select-none\" [class.ax-h-[calc(100vh-310px)]]=\"!(sorts$ | async)?.length\">\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\">{{ 'entity.no-sort' | translate | async }}</p>\n    <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\">{{ 'entity.ask-sort' | translate | async }}</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 [dataSource]=\"(props$ | async) ?? []\" valueField=\"name\" textField=\"title\" [(ngModel)]=\"item.name\"> </ax-select-box>\n        <ax-button [color]=\"'default'\" class=\"ax-sm\" (click)=\"changeItemSort(item)\">\n          <ax-icon [class.ax-text-primary]=\"item.dir == 'asc'\" class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"></ax-icon>\n          <ax-icon [class.ax-text-primary]=\"item.dir == 'desc'\" class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"></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]=\"'entity.add-field' | translate | async\" look=\"blank\" class=\"ax-sm\"></ax-button>\n      }@else {\n      <div class=\"ax-flex ax-justify-center ax-w-full\">\n        <ax-button (onClick)=\"loader.addSort()\" color=\"primary\" [text]=\"'entity.add-field' | translate | async\" look=\"outline\" class=\"ax-md ax-w-56\"></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' | translate | async\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\n  <ax-button [text]=\"'reset' | translate | async\" color=\"ghost\" (onClick)=\"handleResetClick()\"></ax-button>\n</ax-footer>\n" }]
+        }], propDecorators: { onClosed: [{
+                type: Output
+            }], loader: [{
+                type: Input
+            }] } });
 
-const AXPEntityModifyEvent = createWorkFlowEvent('[Entity] Modified');
-class AXPEntityModifyPopupAction extends AXPWorkflowAction {
+const AXPImportEntityEvent = createWorkFlowEvent('[Entity] Imported!');
+class AXPEntityImportPopupAction extends AXPWorkflowAction {
     constructor() {
         super(...arguments);
+        this.entityRegistery = inject(AXPEntityRegistryService);
         this.popupService = inject(AXPopupService);
         this.platform = inject(AXPlatform);
-        this.entityRegistery = inject(AXPEntityRegistryService);
-        this.entityCreateFactory = inject(AXPEntityModifyViewLoaderFactory);
     }
     async execute(context) {
-        const payload = context.getVariable('payload');
-        const { module, entity: entityName, section, id } = payload;
+        const { module, entity: entityName } = context.getVariable('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-Bt4MLEou.mjs');
-        const popup = await this.popupService.open(com.AXPEntityModifyViewComponent, {
-            title: `Modify ${payload.section.title}`,
+        const com = await import('./acorex-platform-layouts-entity-import-view.component-CZpEcVi9.mjs');
+        const result = await this.popupService.open(com.AXPEntityImportViewComponent, {
+            title: `Import ${entity.title}`,
             size: this.platform.is('Mobile') || this.platform.is('SM') ? 'full' : 'md',
             data: {
-                context: loader.data,
-                loader: loader,
-                properties: payload.section.properties,
                 entity,
             },
         });
-        context.setOutput('popupResult', false);
-        if (popup.data?.result == true) {
+        if (result.data?.save) {
             context.setOutput('popupResult', true);
-            context.setVariable('updatedData', cloneDeep(popup.data.context));
+            context.setVariable('redirect', result.data.redirect);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityModifyPopupAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityModifyPopupAction }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityImportPopupAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityImportPopupAction }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityModifyPopupAction, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityImportPopupAction, decorators: [{
             type: Injectable
         }] });
-class AXPEntityModifyConfirmedAction extends AXPWorkflowAction {
-    constructor() {
-        super(...arguments);
-        this.entityRegistery = inject(AXPEntityRegistryService);
-    }
+class AXPEntityImportSubmittedAction extends AXPWorkflowAction {
     async execute(context) {
-        const payload = context.getVariable('payload');
-        const updatedData = context.getVariable('updatedData');
-        const entity = await this.entityRegistery.resolve(payload.module, payload.entity);
-        this.dispatch(AXPEntityModifyEvent({ module: entity.module, entity: entity.name, updateValues: updatedData }));
+        const { module, entity: entity } = context.getVariable('payload');
+        this.dispatch(AXPImportEntityEvent({ entity, module }));
     }
 }
-const AXPModifyEntityWorkflow = {
-    startStepId: 'modifyPopup',
+const AXPImportEntityWorkflow = {
+    startStepId: 'createPopup',
     steps: {
-        modifyPopup: {
-            id: 'modifyPopup',
-            action: 'AXPEntityModifyPopupAction',
+        createPopup: {
+            id: 'createPopup',
+            action: 'AXPEntityImportPopupAction',
             nextSteps: [
                 {
                     conditions: [{ type: 'SINGLE', expression: 'context.getOutput("popupResult") == true' }],
@@ -1828,208 +1407,182 @@ const AXPModifyEntityWorkflow = {
             action: 'AXPToastAction',
             input: {
                 color: 'success',
-                title: 'Entity Modified',
-                content: 'Record has been successfully updated.',
+                title: 'Entity Imported',
+                content: 'Your file has been uploaded successfully',
             },
             nextSteps: [
                 {
                     conditions: [],
-                    nextStepId: 'modifyConfirmed',
-                },
-            ],
-        },
-        modifyConfirmed: {
-            id: 'modifyConfirmed',
-            action: 'AXPEntityModifyConfirmedAction',
-            nextSteps: [
-                {
-                    conditions: [],
-                    nextStepId: '',
+                    nextStepId: 'importSubmitted',
                 },
             ],
         },
-    },
-};
-
-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.2.0", ngImport: i0, type: AXPShowQuickViewAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPShowQuickViewAction }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPShowQuickViewAction, decorators: [{
-            type: Injectable
-        }] });
-const AXPShowQuickViewWorkflow = {
-    startStepId: 'showQuickView',
-    steps: {
-        showQuickView: {
-            id: 'showQuickView',
-            action: 'AXPShowQuickViewAction',
-        },
-    },
-};
-
-class AXPShowDetailViewAction extends AXPWorkflowAction {
-    constructor() {
-        super(...arguments);
-        this.navigation = inject(AXPWorkflowNavigateAction);
-        this.sessionService = inject(AXPSessionService);
-    }
-    async execute(context) {
-        const payload = context.getVariable('payload');
-        const id = context.getVariable('id');
-        const newPayload = {
-            commands: `/${this.sessionService.application?.name}/${payload.module}/e/${payload.entity}/${id}/view`,
-        };
-        context.setVariable('payload', newPayload);
-        this.navigation.execute(context);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPShowDetailViewAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPShowDetailViewAction }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPShowDetailViewAction, decorators: [{
-            type: Injectable
-        }] });
-const AXPShowDetailsViewWorkflow = {
-    startStepId: 'showDetailView',
-    steps: {
-        showDetailView: {
-            id: 'showDetailView',
-            action: 'AXPShowDetailViewAction',
-        },
-    },
-};
-
-class AXPShowListViewAction extends AXPWorkflowAction {
-    constructor() {
-        super(...arguments);
-        this.navigation = inject(AXPWorkflowNavigateAction);
-        this.sessionService = inject(AXPSessionService);
-    }
-    async execute(context) {
-        const payload = context.getVariable('payload');
-        const newPayload = {
-            commands: `/${this.sessionService.application?.name}/${payload.entity.module}/e/${payload.entity}/list`,
-        };
-        context.setVariable('payload', newPayload);
-        this.navigation.execute(context);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPShowListViewAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPShowListViewAction }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPShowListViewAction, decorators: [{
-            type: Injectable
-        }] });
-const AXPShowListViewWorkflow = {
-    startStepId: 'showListView',
-    steps: {
-        showListView: {
-            id: 'showListView',
-            action: 'AXPShowListViewAction',
+        importSubmitted: {
+            id: 'importSubmitted',
+            action: 'AXPEntityImportSubmittedAction',
         },
     },
 };
 
-class AXPEntityDetailsViewComponent {
-    constructor(actions$, unsubscriber) {
-        this.actions$ = actions$;
+class AXPEntityListViewComponent {
+    constructor(actionSheetService, unsubscriber, platform, cdr) {
+        this.actionSheetService = actionSheetService;
         this.unsubscriber = unsubscriber;
-        this.popupService = inject(AXPopupService);
-        this.sessionService = inject(AXPSessionService);
-        this.activeRoute = inject(ActivatedRoute);
-        this.router = inject(Router);
-        this.location = inject(Location);
-        this.cdr = inject(ChangeDetectorRef);
-        this.platform = inject(AXPlatform);
-        this.workflow = inject(AXPWorkflowService);
-        this.loader = this.activeRoute.snapshot.data['loader'];
+        this.platform = platform;
+        this.cdr = cdr;
         this.store = inject((Store));
-        this.isSM = this.store.select(isSmallScreen());
-        this.isOpen = this.store.select(getChildDrawer());
+        this.workflow = inject(AXPWorkflowService);
+        this.layout = inject(AXPLayoutService);
+        this.route = inject(ActivatedRoute);
+        this.manuLoader = inject(AXP_MENU_LOADER);
+        this.loader = this.route.snapshot.data['loader'];
+        this.title = '';
+        this.searchValue = '';
+        this.searchBoxPlaceholder = '';
+        this.searchBoxTitle = '';
+        this.searchBoxCollapsed = true;
+        this.publicViews$ = this.loader.publicViews$;
+        this.customViews$ = this.loader.customViews$;
+        this.hasCustomViews$ = this.loader.hasCustomViews$;
+        this.view$ = this.loader.view$;
+        //
+        this.conditions$ = this.loader.conditions$;
+        this.conditionsCount$ = this.loader.conditionsCount$;
+        //
+        this.columns$ = this.loader.displayColumns$;
+        this.columnsCount$ = this.loader.displayColumnsCount$;
+        //
+        this.sort$ = this.loader.sorts$;
+        this.sortCount$ = this.loader.sortsCount$;
+        //
+        this.dataSource = this.loader.dataSource;
         //
         this.canDelete = this.loader.entity.editOptions?.delete ?? true;
         this.canCreate = this.loader.entity.editOptions?.create ?? true;
         this.canUpdate = this.loader.entity.editOptions?.update ?? true;
+        this.canImport = this.loader.entity.editOptions?.import ?? false;
+        this.popupService = inject(AXPopupService);
+        this.dropdownRowItems = [
+            {
+                text: 'Details',
+                icon: 'fa-solid fa-eye',
+                name: 'edit',
+                divided: true,
+            },
+            {
+                text: 'Delete',
+                icon: 'fa-solid fa-trash-can',
+                name: 'delete',
+                color: 'danger',
+                disabled: !this.canDelete,
+            },
+        ];
+        this.inlineRowItems = [
+            {
+                text: 'View',
+                icon: 'fa-solid  fa-eye',
+                name: 'view',
+                divided: true,
+            },
+        ];
+        this.getDropdownRowItems = (rowData) => {
+            return Promise.resolve(this.dropdownRowItems);
+        };
+        this.getInlineRowItems = (rowData) => {
+            return this.inlineRowItems;
+        };
+        //TODO: namespace, module name issues
+        this.title = this.manuLoader.currentMenuItem()?.text ?? this.loader.entity.formats?.list ?? this.loader.entity.formats?.default ?? 'Title';
         //
-        this.context = signal(cloneDeep(this.loader.data));
-        this.activeRoute.paramMap.pipe(first()).subscribe((c) => {
-            this.setSection(c.get('section'));
-        });
-        //
-        this.workflow.events$.pipe(ofType$1(AXPEntityDeletedEvent), this.unsubscriber.takeUntilDestroy).subscribe((event) => {
-            if (event.payload.entity == this.loader.entity.name &&
-                event.payload.module == this.loader.entity.module &&
-                event.payload.id.includes(this.loader.data.id)) {
-                this.workflow.execute('show-list-view', {
-                    payload: {
-                        module: this.loader.entity.module,
-                        entity: this.loader.entity.name,
-                    },
-                });
+        this.workflow.events$
+            .pipe(ofType$1(AXPEntityDeletedEvent, AXPEntityCreateEvent, AXPImportEntityEvent), this.unsubscriber.takeUntilDestroy)
+            .subscribe((event) => {
+            if (event.payload.entity == this.loader.entity.name && event.payload.module == this.loader.entity.module) {
+                this.grid.selectedRows = [];
+                this.grid?.refresh();
             }
         });
-        this.workflow.events$.pipe(ofType$1(AXPEntityModifyEvent), this.unsubscriber.takeUntilDestroy).subscribe(async (event) => {
-            if (event.payload.entity == this.loader.entity.name &&
-                event.payload.module == this.loader.entity.module &&
-                event.payload.updateValues.id === this.loader.data.id) {
-                await this.loader.update(event.payload.updateValues);
-                this.context.set(cloneDeep(this.loader.data));
-            }
+        //
+        this.dataSource.onLoadingChanged.pipe(this.unsubscriber.takeUntilDestroy).subscribe((value) => {
+            this.layout.setNavigationLoading(value);
         });
+        this._getInlineConditionTitles();
     }
-    handleMenuClick(e, item) {
-        const entity = this.loader.entity;
-        const path = `/${this.sessionService.application?.name}/${entity.module}/e/${entity.name}/${this.loader.data?.id}/view/${item.name}`;
-        this.location.go(path);
-        this.setSection(item.name);
+    ngAfterViewInit() {
+        this.loader.setDefaultView();
     }
-    handleCollapsedChange(value) {
-        if (value)
-            this.store.dispatch(AXPLayoutChildDrawerClose());
+    _getInlineConditionTitles() {
+        const titles = this.loader.getInlineFilterTitles();
+        this.searchBoxTitle = titles.join(', ');
+        if (titles.length > 2)
+            this.searchBoxPlaceholder = titles.slice(0, 2).join(', ') + ' ...';
+        else
+            this.searchBoxPlaceholder = titles.join(', ');
+    }
+    _handleViewsPopover() {
+        this.actionSheetService.open({ content: this.viewsTemplate });
     }
     handleDrawerClick() {
         this.store.dispatch(AXPLayoutChildDrawerToggle());
     }
-    setSection(name) {
-        this.loader.setSection(name);
+    toggleSearchBox() {
+        this.searchBoxCollapsed = !this.searchBoxCollapsed;
     }
-    async handleSectionEdit(section) {
-        this.workflow.execute('modify-entity', {
+    handleRowDbClick(e) {
+        const d = {
+            component: e.component,
+            name: this.dropdownRowItems[0].name,
+            data: e.data,
+        };
+        this.handleRowCommandClick(d);
+    }
+    async handleRowCommandClick(e) {
+        switch (e.name) {
+            case 'view': {
+                await this.workflow.execute('show-quick-view', {
+                    payload: {
+                        module: this.loader.entity.module,
+                        entity: this.loader.entity.name,
+                        data: e.data,
+                    },
+                });
+                break;
+            }
+            case 'edit': {
+                await this.workflow.execute('show-details', {
+                    payload: {
+                        module: this.loader.entity.module,
+                        entity: this.loader.entity.name,
+                    },
+                    id: e.data.id,
+                });
+                break;
+            }
+            case 'delete': {
+                await this.workflow.execute('delete-entity', {
+                    module: this.loader.entity.module,
+                    entity: this.loader.entity.name,
+                    ids: [e.data.id],
+                });
+                break;
+            }
+        }
+    }
+    handleCreateClick() {
+        this.workflow.execute('create-entity', {
             payload: {
                 module: this.loader.entity.module,
                 entity: this.loader.entity.name,
-                id: this.loader.data.id,
-                section: section,
             },
         });
     }
-    isActive(item) {
-        return item.name == window.location.pathname.split('/').pop();
+    handleImportClick() {
+        this.workflow.execute('import-entity', {
+            payload: {
+                module: this.loader.entity.module,
+                entity: this.loader.entity.name,
+            },
+        });
     }
     handleCommandClick(command) {
         switch (command) {
@@ -2037,179 +1590,626 @@ class AXPEntityDetailsViewComponent {
                 this.workflow.execute('delete-entity', {
                     module: this.loader.entity.module,
                     entity: this.loader.entity.name,
-                    ids: [this.loader.data.id],
-                });
-                break;
-            case 'create': {
-                this.workflow.execute('create-entity', {
-                    payload: {
-                        module: this.loader.entity.module,
-                        entity: this.loader.entity.name,
-                    },
+                    ids: this.grid.selectedRows.map((c) => c['id']),
                 });
                 break;
-            }
             default:
                 break;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityDetailsViewComponent, deps: [{ token: i1$3.Actions }, { token: i2.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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 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\n        class=\"ax-flex ax-flex-col ax-pt-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all\"\n        #sticky=\"axpSticky\"\n        [axpSticky]=\"'ax-bg-surface ax-px-6 ax-py-3 -ax-mx-6 ax-shadow-xl'\"\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            @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\n                    [text]=\"('create-new' | translate | async) ?? ' '\"\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                  } @if(canDelete) {\n                  <ax-button-item text=\"Delete\" class=\"ax-font-semibold ax-text-danger\" (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)\" 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=\"{{ 'entity.modify' | translate | async }}\" 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 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 [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\" [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>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "component", type: i4.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i4.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i4$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i10$2.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$1.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "ngmodule", type: AXActionSheetModule }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i11$1.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXDialogModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i9.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i9.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXPSchemaModule }, { kind: "component", type: i10$1.AXPWidgetRendererComponent, selector: "axp-widget-renderer", inputs: ["context", "prop", "mode", "schema"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i8$1.AXTranslatorPipe, name: "translate" }, { kind: "ngmodule", type: 
-                //
-                AXPCommonWidgetModule }, { kind: "directive", type: AXPStickyDirective, selector: "[axpSticky]", inputs: ["axpSticky", "stickyOffset", "stickyParent", "stickyTarget"], outputs: ["isStickyChange"], exportAs: ["axpSticky"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    clearSelectedItems() {
+        this.grid.selectedRows = [];
+    }
+    closeDrawer(name, collapsed) {
+        if (collapsed != false) {
+            switch (name) {
+                case 'conditions':
+                    this.loader.resetConditions();
+                    break;
+                case 'columns':
+                    this.loader.resetColumns();
+                    break;
+                case 'sorts':
+                    this.loader.resetSort();
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+    handleChangeSearchValue(e) {
+        if (e.isUserInteraction) {
+            this.loader.handleInlineSearch(e.value);
+        }
+    }
+    async addCustomViewPopup() {
+        const newView = {
+            name: 'custom-view',
+            title: 'Custom View',
+            fixed: false,
+            sorts: [],
+            columns: convertPropertiesToColumns(...this.loader.entity.properties),
+            conditions: [],
+        };
+        const popup = await this.popupService.open(AXPEntityCreateCustomViewComponent, {
+            title: 'Create Custom View',
+            size: this.platform.is('Mobile') || this.platform.is('SM') ? 'full' : 'md',
+            closeOnBackdropClick: true,
+            draggable: false,
+            data: {
+                loader: this.loader,
+                selectedView: newView,
+                mode: 'create',
+            },
+        });
+        if (popup.data?.save == true) {
+            console.log('updatedView: ', popup.data.updatedView);
+            this.loader.createView(popup.data.updatedView);
+        }
+    }
+    async updateViewPopup(e, selectedView) {
+        // (e.nativeEvent as UIEvent).stopPropagation();
+        const popup = await this.popupService.open(AXPEntityCreateCustomViewComponent, {
+            title: 'Modify Custom View',
+            size: this.platform.is('Mobile') || this.platform.is('SM') ? 'full' : 'md',
+            closeOnBackdropClick: true,
+            draggable: false,
+            data: {
+                loader: this.loader,
+                selectedView,
+                mode: 'edit',
+            },
+        });
+        if (popup.data?.delete == true) {
+            this.loader.deleteView(popup.data.viewName);
+        }
+        if (popup.data?.save == true) {
+            console.log('updatedView: ', popup.data.updatedView);
+            this.loader.updateView(popup.data.updatedView);
+        }
+    }
+    ngOnDestroy() {
+        this.dataSource.reset();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityListViewComponent, deps: [{ token: i1$3.AXActionSheetService }, { token: i2.AXUnsubscriber }, { token: i3.AXPlatform }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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    >\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          <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\n            (click)=\"clearSelectedItems()\"\n            class=\"ax-text-sm ax-text-primary dark:ax-text-primary-300 ax-underline ax-cursor-pointer\"\n            >Clear Items</span\n          >\n        </div>\n        <div class=\"ax-flex ax-items-center ax-gap-2\">\n          @if(canDelete) {\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\">{{ 'entity.public-view' | translate | async }}</ax-title>\n              <ax-button-item\n                *ngFor=\"let v of publicViews$ | async\"\n                [text]=\"v.title\"\n                [class.ax-bg-on-surface]=\"(view$ | async) == v\"\n                (onClick)=\"loader.setView(v.name)\"\n              ></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\n                *ngFor=\"let v of customViews$ | async\"\n                [text]=\"v.title\"\n                [class.ax-bg-on-surface]=\"(view$ | async) == v\"\n                (onClick)=\"loader.setView(v.name)\"\n              ></ax-button-item>\n              <ng-container *feature=\"'axp-entity-list-custom-view'\">\n                <ax-divider></ax-divider>\n                <ax-button-item\n                  (onClick)=\"addCustomViewPopup()\"\n                  text=\"Add Custom View\"\n                  class=\"ax-font-semibold ax-text-primary\"\n                ></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 (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\n            [disabled]=\"this.grid?.selectedRows?.length != 0\"\n            color=\"ghost\"\n            (onClick)=\"conditionsDrawer.open()\"\n          >\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\n          [title]=\"searchBoxTitle\"\n          [placeholder]=\"('widget.lookup.search' | translate | async) + searchBoxPlaceholder\"\n          ><ax-clear-button></ax-clear-button\n        ></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          <ax-button [text]=\"'create-new' | translate | async\" color=\"primary\" (onClick)=\"handleCreateClick()\">\n            <ax-prefix>\n              <i class=\"fa-solid fa-add\"></i>\n            </ax-prefix>\n          </ax-button>\n          } @if(canImport){\n          <ax-button [text]=\"'entity.actions' | translate | async\" 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 (onClick)=\"handleImportClick()\" text=\"Import\" class=\"ax-font-semibold\">\n                  <ax-prefix>\n                    <ax-icon icon=\"fa-solid fa-file-import\"> </ax-icon>\n                  </ax-prefix>\n                </ax-button-item>\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          }\n        </div>\n        }@else {\n        <div class=\"ax-flex ax-gap-3\">\n          @if(canDelete) {\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]=\"'entity.actions' | translate | async\" 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\">{{\n                    'entity.public-view' | translate | async\n                  }}</ax-title>\n                  <ax-button-item\n                    *ngFor=\"let v of publicViews$ | async\"\n                    [text]=\"v.title\"\n                    [class.ax-bg-on-surface]=\"(view$ | async) == v\"\n                    (onClick)=\"loader.setView(v.name)\"\n                  ></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\n                    class=\"ax-pe-4 ax-flex ax-justify-between\"\n                    *ngFor=\"let v of customViews$ | async\"\n                    [text]=\"v.title\"\n                    [class.ax-bg-on-surface]=\"(view$ | async) == v\"\n                    (onClick)=\"loader.setView(v.name)\"\n                  >\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\n                      text=\"Add Custom View\"\n                      (onClick)=\"addCustomViewPopup()\"\n                      class=\"ax-font-semibold ax-text-primary\"\n                    ></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\">\n              <ax-search-box\n                [title]=\"searchBoxTitle\"\n                [(ngModel)]=\"searchValue\"\n                (onValueChanged)=\"handleChangeSearchValue($event)\"\n                [placeholder]=\"('widget.lookup.search' | translate | async) + searchBoxPlaceholder\"\n                ><ax-clear-button></ax-clear-button\n              ></ax-search-box>\n            </div>\n            }\n          </div>\n\n          <div class=\"ax-flex ax-gap-3\">\n            <ax-button\n              [text]=\"'entity.columns' | translate | async\"\n              color=\"ghost\"\n              #columns\n              (onClick)=\"columnsDrawer.open()\"\n            >\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]=\"'entity.sort' | translate | async\" 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\n              (click)=\"clearSelectedItems()\"\n              class=\"ax-text-sm ax-text-primary dark:ax-text-primary-300 ax-underline ax-cursor-pointer\"\n              >Clear Items</span\n            >\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\n        #grid\n        [showFooter]=\"false\"\n        class=\"ax-flex-1\"\n        [dataSource]=\"dataSource\"\n        [paging]=\"true\"\n        [fetchDataMode]=\"'manual'\"\n        (onRowDbClick)=\"handleRowDbClick($event)\"\n        [loading]=\"{ enabled: true, animation: true }\"\n      >\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\n          *ngIf=\"col.visible\"\n          [schema]=\"col.schema\"\n          [dataField]=\"col.name\"\n          [caption]=\"col.title\"\n          [options]=\"col.options\"\n          [displayFormat]=\"col.displayFormat\"\n          [width]=\"'180px'\"\n          [allowSorting]=\"false\"\n        >\n        </axp-widget-column-renderer>\n        }\n        <ax-dropdown-command-column\n          fixed=\"end\"\n          [width]=\"'60px'\"\n          [items]=\"getDropdownRowItems\"\n          (onItemClick)=\"handleRowCommandClick($event)\"\n        ></ax-dropdown-command-column>\n        <ax-command-column\n          fixed=\"end\"\n          [width]=\"'60px'\"\n          [items]=\"getInlineRowItems\"\n          (onItemClick)=\"handleRowCommandClick($event)\"\n        ></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\n        [loader]=\"loader\"\n        (onClosed)=\"conditionsDrawer.close()\"\n      ></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>\n", 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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6$2.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "rowTemplate", "emptyTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged"] }, { kind: "component", type: i6$2.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "component", type: i6$2.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i6$2.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "component", type: i4.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i4.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "component", type: i4$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i4$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i5.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: i6.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i11.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "collapsed", "closeOthers"], outputs: ["locationChange", "modeChange", "collapsedChange"] }, { kind: "component", type: i11.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "component", type: i12.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "delayTime"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: i10.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["width", "caption", "headerTemplate", "allowSorting", "fixed", "footerTemplate", "cellTemplate", "options", "dataField", "displayFormat", "schema"] }, { kind: "directive", type: i14$1.AXPFeatureDirective, selector: "[feature]", inputs: ["feature", "featureElse"] }, { kind: "component", type: AXPListViewOptionsColumnsComponent, selector: "axp-list-view-option-columns", inputs: ["loader"], outputs: ["onClosed"] }, { kind: "component", type: AXPListViewOptionConditionsComponent, selector: "axp-list-view-option-conditions", inputs: ["loader"], outputs: ["onClosed"] }, { kind: "component", type: AXPListViewOptionSortingComponent, selector: "axp-list-view-option-sorting", inputs: ["loader"], outputs: ["onClosed"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", 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    >\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          <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\n            (click)=\"clearSelectedItems()\"\n            class=\"ax-text-sm ax-text-primary dark:ax-text-primary-300 ax-underline ax-cursor-pointer\"\n            >Clear Items</span\n          >\n        </div>\n        <div class=\"ax-flex ax-items-center ax-gap-2\">\n          @if(canDelete) {\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\">{{ 'entity.public-view' | translate | async }}</ax-title>\n              <ax-button-item\n                *ngFor=\"let v of publicViews$ | async\"\n                [text]=\"v.title\"\n                [class.ax-bg-on-surface]=\"(view$ | async) == v\"\n                (onClick)=\"loader.setView(v.name)\"\n              ></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\n                *ngFor=\"let v of customViews$ | async\"\n                [text]=\"v.title\"\n                [class.ax-bg-on-surface]=\"(view$ | async) == v\"\n                (onClick)=\"loader.setView(v.name)\"\n              ></ax-button-item>\n              <ng-container *feature=\"'axp-entity-list-custom-view'\">\n                <ax-divider></ax-divider>\n                <ax-button-item\n                  (onClick)=\"addCustomViewPopup()\"\n                  text=\"Add Custom View\"\n                  class=\"ax-font-semibold ax-text-primary\"\n                ></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 (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\n            [disabled]=\"this.grid?.selectedRows?.length != 0\"\n            color=\"ghost\"\n            (onClick)=\"conditionsDrawer.open()\"\n          >\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\n          [title]=\"searchBoxTitle\"\n          [placeholder]=\"('widget.lookup.search' | translate | async) + searchBoxPlaceholder\"\n          ><ax-clear-button></ax-clear-button\n        ></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          <ax-button [text]=\"'create-new' | translate | async\" color=\"primary\" (onClick)=\"handleCreateClick()\">\n            <ax-prefix>\n              <i class=\"fa-solid fa-add\"></i>\n            </ax-prefix>\n          </ax-button>\n          } @if(canImport){\n          <ax-button [text]=\"'entity.actions' | translate | async\" 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 (onClick)=\"handleImportClick()\" text=\"Import\" class=\"ax-font-semibold\">\n                  <ax-prefix>\n                    <ax-icon icon=\"fa-solid fa-file-import\"> </ax-icon>\n                  </ax-prefix>\n                </ax-button-item>\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          }\n        </div>\n        }@else {\n        <div class=\"ax-flex ax-gap-3\">\n          @if(canDelete) {\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]=\"'entity.actions' | translate | async\" 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\">{{\n                    'entity.public-view' | translate | async\n                  }}</ax-title>\n                  <ax-button-item\n                    *ngFor=\"let v of publicViews$ | async\"\n                    [text]=\"v.title\"\n                    [class.ax-bg-on-surface]=\"(view$ | async) == v\"\n                    (onClick)=\"loader.setView(v.name)\"\n                  ></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\n                    class=\"ax-pe-4 ax-flex ax-justify-between\"\n                    *ngFor=\"let v of customViews$ | async\"\n                    [text]=\"v.title\"\n                    [class.ax-bg-on-surface]=\"(view$ | async) == v\"\n                    (onClick)=\"loader.setView(v.name)\"\n                  >\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\n                      text=\"Add Custom View\"\n                      (onClick)=\"addCustomViewPopup()\"\n                      class=\"ax-font-semibold ax-text-primary\"\n                    ></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\">\n              <ax-search-box\n                [title]=\"searchBoxTitle\"\n                [(ngModel)]=\"searchValue\"\n                (onValueChanged)=\"handleChangeSearchValue($event)\"\n                [placeholder]=\"('widget.lookup.search' | translate | async) + searchBoxPlaceholder\"\n                ><ax-clear-button></ax-clear-button\n              ></ax-search-box>\n            </div>\n            }\n          </div>\n\n          <div class=\"ax-flex ax-gap-3\">\n            <ax-button\n              [text]=\"'entity.columns' | translate | async\"\n              color=\"ghost\"\n              #columns\n              (onClick)=\"columnsDrawer.open()\"\n            >\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]=\"'entity.sort' | translate | async\" 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\n              (click)=\"clearSelectedItems()\"\n              class=\"ax-text-sm ax-text-primary dark:ax-text-primary-300 ax-underline ax-cursor-pointer\"\n              >Clear Items</span\n            >\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\n        #grid\n        [showFooter]=\"false\"\n        class=\"ax-flex-1\"\n        [dataSource]=\"dataSource\"\n        [paging]=\"true\"\n        [fetchDataMode]=\"'manual'\"\n        (onRowDbClick)=\"handleRowDbClick($event)\"\n        [loading]=\"{ enabled: true, animation: true }\"\n      >\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\n          *ngIf=\"col.visible\"\n          [schema]=\"col.schema\"\n          [dataField]=\"col.name\"\n          [caption]=\"col.title\"\n          [options]=\"col.options\"\n          [displayFormat]=\"col.displayFormat\"\n          [width]=\"'180px'\"\n          [allowSorting]=\"false\"\n        >\n        </axp-widget-column-renderer>\n        }\n        <ax-dropdown-command-column\n          fixed=\"end\"\n          [width]=\"'60px'\"\n          [items]=\"getDropdownRowItems\"\n          (onItemClick)=\"handleRowCommandClick($event)\"\n        ></ax-dropdown-command-column>\n        <ax-command-column\n          fixed=\"end\"\n          [width]=\"'60px'\"\n          [items]=\"getInlineRowItems\"\n          (onItemClick)=\"handleRowCommandClick($event)\"\n        ></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\n        [loader]=\"loader\"\n        (onClosed)=\"conditionsDrawer.close()\"\n      ></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>\n", 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$3.AXActionSheetService }, { type: i2.AXUnsubscriber }, { type: i3.AXPlatform }, { type: i0.ChangeDetectorRef }], propDecorators: { viewsTemplate: [{
+                type: ViewChild,
+                args: ['viewsTemplate']
+            }], grid: [{
+                type: ViewChild,
+                args: ['grid']
+            }], entityViewDrawer: [{
+                type: ViewChild,
+                args: ['entityViewDrawer']
+            }] } });
+
+class AXPListViewModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPListViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: AXPListViewModule, declarations: [AXPEntityListViewComponent,
+            AXPEntityCreateCustomViewComponent,
+            AXPListViewOptionsColumnsComponent,
+            AXPListViewOptionConditionsComponent,
+            AXPListViewOptionFilterOperatorComponent,
+            AXPListViewOptionSortingComponent], imports: [CommonModule,
+            FormsModule,
+            AXCommonModule,
+            AXDataTableModule,
+            AXButtonModule,
+            AXDecoratorModule,
+            AXBadgeModule,
+            AXDropdownModule,
+            AXPopoverModule,
+            AXImageModule,
+            AXSwitchModule,
+            AXDrawerModule,
+            AXLoadingModule,
+            AXTabsModule,
+            AXSelectBoxModule,
+            AXFormModule,
+            AXListModule,
+            AXTextBoxModule,
+            AXSearchBoxModule,
+            AXLabelModule,
+            AXCollapseModule,
+            AXActionSheetModule,
+            AXSelectionListModule,
+            AXImageModule,
+            AXDialogModule,
+            AXDropdownButtonModule,
+            //
+            CdkDropList,
+            CdkDrag,
+            CdkDragPlaceholder,
+            CdkDragHandle,
+            PortalModule,
+            AXPSchemaModule,
+            AXPCommonWidgetModule,
+            AXPAuthModule,
+            AXTranslationModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPListViewModule, imports: [CommonModule,
+            FormsModule,
+            AXCommonModule,
+            AXDataTableModule,
+            AXButtonModule,
+            AXDecoratorModule,
+            AXBadgeModule,
+            AXDropdownModule,
+            AXPopoverModule,
+            AXImageModule,
+            AXSwitchModule,
+            AXDrawerModule,
+            AXLoadingModule,
+            AXTabsModule,
+            AXSelectBoxModule,
+            AXFormModule,
+            AXListModule,
+            AXTextBoxModule,
+            AXSearchBoxModule,
+            AXLabelModule,
+            AXCollapseModule,
+            AXActionSheetModule,
+            AXSelectionListModule,
+            AXImageModule,
+            AXDialogModule,
+            AXDropdownButtonModule,
+            PortalModule,
+            AXPSchemaModule,
+            AXPCommonWidgetModule,
+            AXPAuthModule,
+            AXTranslationModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityDetailsViewComponent, decorators: [{
-            type: Component,
-            args: [{ imports: [
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPListViewModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
                         CommonModule,
-                        RouterModule,
+                        FormsModule,
+                        AXCommonModule,
+                        AXDataTableModule,
                         AXButtonModule,
                         AXDecoratorModule,
                         AXBadgeModule,
                         AXDropdownModule,
                         AXPopoverModule,
-                        AXFormModule,
                         AXImageModule,
-                        AXActionSheetModule,
                         AXSwitchModule,
                         AXDrawerModule,
-                        AXDialogModule,
                         AXLoadingModule,
                         AXTabsModule,
-                        AXBadgeModule,
-                        AXButtonModule,
-                        AXSwitchModule,
-                        AXPSchemaModule,
-                        AXTooltipModule,
-                        AXBreadcrumbsModule,
-                        AXTranslationModule,
+                        AXSelectBoxModule,
+                        AXFormModule,
+                        AXListModule,
+                        AXTextBoxModule,
+                        AXSearchBoxModule,
+                        AXLabelModule,
+                        AXCollapseModule,
+                        AXActionSheetModule,
+                        AXSelectionListModule,
+                        AXImageModule,
+                        AXDialogModule,
+                        AXDropdownButtonModule,
                         //
+                        CdkDropList,
+                        CdkDrag,
+                        CdkDragPlaceholder,
+                        CdkDragHandle,
+                        PortalModule,
+                        AXPSchemaModule,
                         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 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\n        class=\"ax-flex ax-flex-col ax-pt-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all\"\n        #sticky=\"axpSticky\"\n        [axpSticky]=\"'ax-bg-surface ax-px-6 ax-py-3 -ax-mx-6 ax-shadow-xl'\"\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            @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\n                    [text]=\"('create-new' | translate | async) ?? ' '\"\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                  } @if(canDelete) {\n                  <ax-button-item text=\"Delete\" class=\"ax-font-semibold ax-text-danger\" (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)\" 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=\"{{ 'entity.modify' | translate | async }}\" 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 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 [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\" [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>\n" }]
-        }], ctorParameters: () => [{ type: i1$3.Actions }, { type: i2.AXUnsubscriber }], propDecorators: { drawer: [{
-                type: ViewChild,
-                args: ['drawer']
-            }] } });
+                        AXPAuthModule,
+                        AXTranslationModule,
+                    ],
+                    declarations: [
+                        AXPEntityListViewComponent,
+                        AXPEntityCreateCustomViewComponent,
+                        AXPListViewOptionsColumnsComponent,
+                        AXPListViewOptionConditionsComponent,
+                        AXPListViewOptionFilterOperatorComponent,
+                        AXPListViewOptionSortingComponent,
+                    ],
+                    providers: [],
+                }]
+        }] });
 
-class AXPEntityDetailLoaderDefault {
-    constructor(config, store, entityData, formatService) {
+class AXPListViewLoaderDefault {
+    constructor(config, schemaService) {
         this.config = config;
-        this.store = store;
-        this.entityData = entityData;
-        this.formatService = formatService;
-        this._currentSection = 'default';
-        this._sections$ = new BehaviorSubject(this.sections);
-        //****************** Properties ******************//
+        this.schemaService = schemaService;
+        this._dataSource = new AXDataSource(this.entity.dataSource);
+        this._inlineFilterItems = [];
+        this._props$ = new BehaviorSubject(this.props);
         this.getProp = (name) => this.entity.properties.find((c) => c.name == name);
+        //****************** Views ******************//
+        this._currentView = 'default';
+        this._views$ = new BehaviorSubject(this.views);
+        //****************** Columns ******************//
+        this._currentDisplayColumns$ = new BehaviorSubject([]);
+        this._columns$ = new BehaviorSubject(this.columns);
+        //****************** Sort ******************//
+        this._currentSorts$ = new BehaviorSubject([]);
+        //****************** Conditions ******************//
+        this._currentConditions$ = new BehaviorSubject([]);
+        this._inlineFilterItems = this.entity.properties
+            .filter((property) => property.canInlineFilter)
+            .map((item) => {
+            const schema = this.schemaService.resolve(item.schema);
+            return { name: item.name, dataType: schema?.dataType, title: item.title };
+        });
+    }
+    get entity() {
+        if (!this._config) {
+            this._config = cloneDeep(this.config);
+        }
+        return this._config;
+    }
+    get dataSource() {
+        return this._dataSource;
+    }
+    //****************** Properties ******************//
+    get props() {
+        return this.entity.properties;
+    }
+    get properties$() {
+        return this._props$;
+    }
+    get views() {
+        return this.entity.views.list?.views;
+    }
+    get views$() {
+        return this._views$;
+    }
+    get view$() {
+        return this.views$.pipe(switchMap((views) => {
+            const view = views.find((c) => c.name === this._currentView);
+            if (view) {
+                return of(view);
+            }
+            else if (this.views.length > 0) {
+                return of(this.views[0]);
+            }
+            else {
+                return of(AXPEntityListViewConfigEmpty);
+            }
+        }));
+    }
+    get publicViews$() {
+        return this.views$.pipe(map((c) => c.filter((v) => v.fixed)));
+    }
+    get customViews$() {
+        return this.views$.pipe(map((c) => c.filter((v) => !v.fixed)));
+    }
+    get hasCustomViews$() {
+        return this.customViews$.pipe(map((c) => c.length > 0));
+    }
+    setDefaultView() {
+        this.setView(this.views[0].name);
+    }
+    setView(name) {
+        let propNames = [];
+        this.properties$.pipe(first()).subscribe((properties) => {
+            propNames = properties.map((p) => p.name);
+        });
+        this._currentView = name;
+        const updatedView = this._views$.value.find((c) => c.name === this._currentView) || AXPEntityListViewConfigEmpty;
+        const currentViews = this._views$.value;
+        const updatedViews = currentViews.map((view) => {
+            if (view.name === updatedView.name) {
+                return updatedView;
+            }
+            else {
+                return view;
+            }
+        });
+        this._currentConditions$.next(cloneDeep(updatedView.conditions.filter((c) => propNames.includes(c.name))));
+        this._currentSorts$.next(cloneDeep(updatedView.sorts.filter((s) => propNames.includes(s.name))));
+        // this._columns$.next(updatedView.columns);
+        this._currentDisplayColumns$.next(cloneDeep(updatedView.columns.filter((c) => propNames.includes(c.name))));
+        this._views$.next(updatedViews);
+        //apply conditions and sorts:
+        this.dataSource.filter({
+            field: null,
+            logic: 'and',
+            operator: null,
+            filters: updatedView.conditions.map((c) => ({
+                field: c.name,
+                value: c.value,
+                operator: { type: c.operator },
+            })),
+        });
+        const convertedSortItems = updatedView.sorts.map((s) => ({
+            field: s.name,
+            dir: s.dir,
+        }));
+        this.dataSource.sort(...convertedSortItems);
+        this.dataSource.refresh();
+    }
+    createView(newView) {
+        const currentViews = this._views$.getValue();
+        currentViews.push(newView);
+        this._views$.next(currentViews);
+        this.setView(newView.name);
+    }
+    updateView(updatedView) {
+        const currentViews = this._views$.getValue().map((view) => (view.name === updatedView.name ? updatedView : view));
+        this._views$.next(currentViews);
+        this.setView(updatedView.name);
+    }
+    deleteView(viewName) {
+        const currentViews = this._views$.getValue().filter((view) => view.name !== viewName);
+        this._views$.next(currentViews);
+        this.setView(this.views[0].name);
+    }
+    get columns() {
+        return this.entity.properties.map((p) => ({
+            name: p.name,
+            title: p.title,
+            schema: p.schema,
+        }));
+    }
+    get columns$() {
+        return this._columns$.pipe(defaultIfEmpty([]));
+    }
+    get displayColumns$() {
+        return this._currentDisplayColumns$.pipe(defaultIfEmpty([]));
+    }
+    get displayColumnsCount$() {
+        return this.view$.pipe(map((view) => {
+            return view.columns.filter((column) => column.visible).length;
+        }));
+    }
+    updateColumns(items) {
+        this.view$.pipe(first()).subscribe((view) => {
+            view.columns = cloneDeep(items);
+            this._views$.next(this._views$.value.map((v) => (v.name === this._currentView ? view : v)));
+        });
+    }
+    resetColumns() {
+        this.view$.pipe(first()).subscribe((view) => {
+            this._currentDisplayColumns$.next(cloneDeep(view.columns));
+        });
+    }
+    setColumnVisibility(name, visible) {
+        const updatedColumns = this._currentDisplayColumns$.getValue().map((column) => {
+            if (column.name === name) {
+                return { ...column, visible };
+            }
+            else {
+                return column;
+            }
+        });
+        this._currentDisplayColumns$.next(updatedColumns);
+    }
+    get sorts$() {
+        return this._currentSorts$.pipe(defaultIfEmpty([]));
+    }
+    get sortsCount$() {
+        return this.view$.pipe(map((c) => c.sorts.length));
+    }
+    addSort() {
+        this.view$.pipe(first()).subscribe((view) => {
+            const currentSorts = this._currentSorts$.getValue();
+            const name = view.columns.find((c) => !currentSorts.some((s) => s.name == c.name))?.name ?? '';
+            if (name) {
+                const sorts = [...currentSorts, { name, dir: 'asc' }];
+                this._currentSorts$.next(sorts);
+            }
+        });
     }
-    get entity() {
-        if (!this._config) {
-            this._config = cloneDeep(this.config);
-        }
-        return this._config;
+    removeSort(item) {
+        const currentSorts = this._currentSorts$.getValue();
+        const sorts = currentSorts.filter((c) => c != item);
+        this._currentSorts$.next(sorts);
     }
-    get data() {
-        return this.entityData;
+    resetSort() {
+        this.view$.pipe(first()).subscribe((view) => {
+            this._currentSorts$.next(cloneDeep(view.sorts));
+        });
     }
-    get view() {
-        return (this.entity.views.detailView ?? this.entity.views.quickView);
+    updateSort(items) {
+        this.view$.pipe(first()).subscribe((view) => {
+            view.sorts = cloneDeep(items);
+            this._views$.next(this._views$.value.map((v) => (v.name === this._currentView ? view : v)));
+            const convertedSortItems = items.map((s) => ({
+                field: s.name,
+                dir: s.dir,
+            }));
+            this.dataSource.sort(...convertedSortItems);
+            this.dataSource.refresh();
+        });
     }
-    //****************** Titles ******************//
-    get title() {
-        const suggestedProps = this.entity.properties.find((c) => ['title', 'name', 'code'].includes(c.name));
-        let suggestedFormat = 'Item #{{id}}';
-        if (suggestedProps)
-            suggestedFormat = `{{${suggestedProps.name}}}`;
-        const title = this.formatService.format(this.entity.formats?.header ?? this.entity.formats?.default ?? suggestedFormat, 'string', this.data);
-        return title;
+    get conditions$() {
+        return this._currentConditions$.pipe(defaultIfEmpty([]));
     }
-    get sectionTitle() {
-        return `${this.entity.title}`;
+    get conditionsCount$() {
+        return this.view$.pipe(map((c) => c.conditions.length));
     }
-    //****************** Sections ******************//
-    get sections() {
-        return this.view.root.sections?.length
-            ? this.view.root.sections
-            : [
-                {
-                    name: 'default',
-                    title: 'Default',
-                    properties: this.view.root.properties,
-                },
-            ];
+    getInlineFilterTitles() {
+        return this._inlineFilterItems.map((item) => item.title);
     }
-    get sections$() {
-        return this._sections$.pipe(defaultIfEmpty([]));
+    addCondition(selectedFields) {
+        const prevConditions = this._currentConditions$.getValue();
+        const conditionsMap = new Map(prevConditions.map((item) => [item.name, item]));
+        const newFields = selectedFields.map((field) => conditionsMap.get(field.name) || { name: field.name, operator: field.opr });
+        this._currentConditions$.next(newFields);
     }
-    get section$() {
-        return this.sections$.pipe(switchMap((sections) => {
-            const section = sections.find((c) => c.name === this._currentSection) ?? this.sections[0];
-            if (!section.sections?.length) {
-                section.sections = [
-                    {
-                        name: 'default',
-                        title: 'Details',
-                        properties: section.properties,
-                    },
-                ];
-            }
-            return of(section);
-        }));
+    removeCondition(item) {
+        const currentConditions = this._currentConditions$.getValue();
+        const conditions = currentConditions.filter((c) => c != item);
+        this._currentConditions$.next(conditions);
     }
-    get hasSections$() {
-        return this.sections$.pipe(map((c) => c.length > 1));
+    updateConditions(items) {
+        this.view$.pipe(first()).subscribe((view) => {
+            view.conditions = cloneDeep(items);
+            this._views$.next(this._views$.value.map((v) => (v.name === this._currentView ? view : v)));
+        });
+        this.applyAllConditions();
     }
-    setSection(name) {
-        this._currentSection = name ?? 'default';
-        const updatedSection = this.sections.find((c) => c.name === this._currentSection) || {
-            name: 'default',
-            title: 'Default',
-            properties: this.view.root.properties,
+    handleInlineSearch(value) {
+        const inlineConditions = [];
+        this._inlineFilterItems?.forEach((property) => {
+            if (property?.dataType == 'string' || property?.dataType == 'number') {
+                inlineConditions.push({
+                    name: property.name,
+                    value: property.dataType == 'number' ? parseFloat(value) : value,
+                    operator: property.dataType == 'string' ? 'contains' : 'equal',
+                });
+            }
+        });
+        this.view$.pipe(first()).subscribe((view) => {
+            view.inlineConditions = cloneDeep(inlineConditions);
+        });
+        this.applyAllConditions();
+    }
+    applyAllConditions() {
+        const inlineConditions = {
+            field: null,
+            operator: null,
+            logic: 'or',
+            filters: [],
         };
-        const currentSections = this._sections$.value;
-        const updatedSections = currentSections.map((section) => {
-            if (section.name === updatedSection.name) {
-                return updatedSection;
+        const mainConditions = {
+            field: null,
+            operator: null,
+            logic: 'and',
+            filters: [],
+        };
+        this.view$.pipe(first()).subscribe((view) => {
+            if (view.inlineConditions && view.inlineConditions.length) {
+                view.inlineConditions?.forEach((c) => {
+                    if (c.value) {
+                        inlineConditions.filters?.push({
+                            field: c.name,
+                            operator: { type: c.operator },
+                            value: c.value,
+                        });
+                    }
+                });
             }
-            else {
-                return section;
+            if (view.conditions.length) {
+                view.conditions.forEach((c) => {
+                    mainConditions.filters?.push({
+                        field: c.name,
+                        operator: { type: c.operator },
+                        value: c.value,
+                    });
+                });
             }
+            this.dataSource.filter({
+                field: null,
+                logic: 'and',
+                operator: null,
+                filters: [mainConditions, inlineConditions],
+            });
+            this.dataSource.refresh();
+            this._views$.next(this._views$.value.map((v) => (v.name === this._currentView ? view : v)));
         });
-        this._sections$.next(updatedSections);
     }
-    //****************** Update ******************//
-    async update(values) {
-        assign(this.data, values);
-        this.setSection(this._currentSection);
+    resetConditions() {
+        this.view$.pipe(first()).subscribe((view) => {
+            this._currentConditions$.next(cloneDeep(view.conditions));
+        });
     }
 }
-class AXPEntityDetailViewLoaderFactory {
+const AXP_LISTVIEW_LOADER = new InjectionToken('AXP_LISTVIEW_LOADER');
+class AXPListViewLoaderFactory {
     constructor() {
+        this.cache = new Map();
         this.entityService = inject(AXPEntityRegistryService);
-        this.formatService = inject(AXFormatService);
+        this.schemaService = inject(AXPSchemaRegistryService);
         this.layout = inject(AXPLayoutService);
-        this.store = inject(Store);
     }
-    async create(moduleName, entityName, id) {
-        const config = await this.entityService.resolve(moduleName, entityName);
+    async create(moduleName, entityName) {
         this.layout.setNavigationLoading(true);
-        if (config.dataSource.byKey) {
-            const data = await config.dataSource.byKey(id);
+        const config = await this.entityService.resolve(moduleName, entityName);
+        let result = this.cache.get(config.name);
+        if (result) {
             this.layout.setNavigationLoading(false);
-            return new AXPEntityDetailLoaderDefault(config, this.store, data, this.formatService);
+            return result;
         }
+        result = new AXPListViewLoaderDefault(config, this.schemaService);
+        this.cache.set(config.name, result);
         this.layout.setNavigationLoading(false);
-        return Promise.reject('cannot fetch ');
+        return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityDetailViewLoaderFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityDetailViewLoaderFactory, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPListViewLoaderFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPListViewLoaderFactory, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityDetailViewLoaderFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPListViewLoaderFactory, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
 
+class AXPEntityQuickViewComponent extends AXBasePageComponent {
+    /**
+     *
+     */
+    constructor(actions$) {
+        super();
+        this.actions$ = actions$;
+        this.store = inject((Store));
+        this.workflow = inject(AXPWorkflowService);
+        this.canDelete = false;
+        this.canCreate = false;
+        this.canUpdate = false;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        //
+        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));
+    }
+    handleCloseClick() {
+        this.close();
+    }
+    handleCommandClick(command) {
+        switch (command) {
+            case 'delete':
+                this.workflow.execute('delete-entity', {
+                    module: this.entity.module,
+                    entity: this.entity.name,
+                    ids: [this.data.id],
+                });
+                this.close();
+                break;
+            case 'details':
+                this.workflow.execute('show-details', {
+                    payload: {
+                        module: this.entity.module,
+                        entity: this.entity.name,
+                    },
+                    id: this.data.id,
+                });
+                this.close();
+                break;
+            default:
+                break;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityQuickViewComponent, deps: [{ token: i1.Actions }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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: i10.AXPWidgetRendererComponent, selector: "axp-widget-renderer", inputs: ["context", "prop", "mode", "schema"] }, { kind: "ngmodule", type: AXPCommonWidgetModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i4$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i4.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i4.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i14.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityQuickViewComponent, decorators: [{
+            type: Component,
+            args: [{ encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, AXPSchemaModule, AXPCommonWidgetModule, AXDecoratorModule, AXButtonModule, AXDropdownModule, AXDropdownButtonModule], template: "<div class=\"ax-flex ax-flex-col ax-gap-6 ax-p-4\">\n  <div class=\"ax-flex ax-flex-col ax-gap-2\" *ngIf=\"root.properties?.length\">\n    <div *ngFor=\"let p of getProperties(root.properties)\"\n      class=\"ax-flex ax-p-4 odd:ax-bg-on-surface odd:ax-border-t odd:ax-border-b\">\n      <div class=\"ax-min-w-[10rem] ax-text-gray-500\">\n        <span>{{ p.title }}</span>\n      </div>\n      <div class=\"ax-min-w-[30rem]\">\n        <axp-widget-renderer [schema]=\"p.schema\" [context]=\"data\" [prop]=\"p\"></axp-widget-renderer>\n      </div>\n    </div>\n  </div>\n  <div *ngFor=\"let s of root.sections\"\n    class=\"ax-flex ax-flex-col ax-pb-3 last-of-type:ax-border-none last-of-type:ax-pb-3\">\n    <div class=\"ax-pb-4\">\n      <span class=\"ax-font-bold\">{{ s.title }}</span>\n    </div>\n    <div class=\"ax-flex ax-flex-col\">\n      <div *ngFor=\"let p of getProperties(s.properties)\"\n        class=\"ax-flex ax-flex-col md:ax-flex-row ax-p-3 odd:ax-bg-on-surface odd:ax-border-t odd:ax-border-b\">\n        @if (s.options?.showPropTitle!=false) {\n        <div class=\"ax-min-w-[10rem] ax-text-neutral-500 dark:ax-text-neutral-300 ax-mb-2 md:ax-mb-0\">\n          <span>{{ p.title }}</span>\n        </div>\n        }\n        <div class=\"md:ax-min-w-[30rem]\">\n          <axp-widget-renderer [schema]=\"p.schema\" [context]=\"data\" [prop]=\"p\" [mode]=\"'view'\"></axp-widget-renderer>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<ax-footer>\n  <ax-prefix> </ax-prefix>\n  <ax-suffix>\n    <ax-dropdown-button text=\"Close\" (onClick)=\"handleCloseClick()\">\n      <ax-button-item-list>\n        <ax-button-item text=\"View Details\" (onClick)=\"handleCommandClick('details')\">\n          <ax-prefix>\n            <ax-icon icon=\"fa-solid fa-info-circle\"></ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n        @if(canDelete)\n        {\n        <ax-button-item class=\"ax-text-danger\" text=\"Delete\" (onClick)=\"handleCommandClick('delete')\">\n          <ax-prefix> <ax-icon icon=\"fas fa-trash fa-flip-horizontal\"></ax-icon> </ax-prefix></ax-button-item>\n        }\n      </ax-button-item-list>\n    </ax-dropdown-button>\n  </ax-suffix>\n</ax-footer>" }]
+        }], ctorParameters: () => [{ type: i1.Actions }] });
+
+var entityQuickView_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPEntityQuickViewComponent: AXPEntityQuickViewComponent
+});
+
 class AXPCustomReuseStrategy {
     shouldDetach(route) {
         return false;
@@ -2434,7 +2434,7 @@ const AX_ADMIN_ROUTES = [
 
 class AXPLayoutModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: AXPLayoutModule, imports: [i10$1.AXPCommonModule, i1$4.AXPWorkflowModule], exports: [RouterModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: AXPLayoutModule, imports: [i10.AXPCommonModule, i1$4.AXPWorkflowModule], exports: [RouterModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPLayoutModule, imports: [AXPCommonModule.forChild({ errorHandlers: [AXMWorkflowErrorHandler] }),
             AXPWorkflowModule.forChild({
                 actions: {