npm - @acorex/platform - Versions diffs - 18.0.4 → 18.0.6 - Mend

@acorex/platform 18.0.4 → 18.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (614) hide show

package/fesm2022/acorex-platform-layouts.mjs CHANGED Viewed

@@ -230,7 +230,7 @@ class AXPEntityCreateCustomViewComponent extends AXBasePageComponent {
             {
                 provide: AXUnsubscriber,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<ax-header class=\"ax-p-4 ax-flex ax-justify-between ax-border-b\">\r\n  <div class=\"ax-flex ax-items-center\">\r\n    @if (showNameInput() && mode==='create') {\r\n    <div class=\"ax-w-60\">\r\n      <ax-text-box class=\"ax-sm\" [(ngModel)]=\"selectedView.title\">\r\n        @if(showNameInput()){\r\n        <ax-suffix>\r\n          <ax-button (onClick)=\"changeViewNameToggle()\" look=\"default\">\r\n            <ax-icon class=\"fa-sodild fas fa-check ax-text-sm\"> </ax-icon>\r\n          </ax-button>\r\n        </ax-suffix>\r\n        }\r\n      </ax-text-box>\r\n    </div>\r\n    }@else {\r\n    <span class=\"ax-text-lg ax-font-semibold\">{{ selectedView.title }}</span>\r\n    } @if (mode===\"create\") {\r\n    <ax-button class=\"ax-xs\" (onClick)=\"changeViewNameToggle()\" color=\"default\">\r\n      @if(!showNameInput() ){\r\n      <ax-icon class=\"fa-regular fa-pen ax-text-sm ax-text-neutral-600\"> </ax-icon>\r\n      }\r\n    </ax-button>\r\n    }\r\n  </div>\r\n  <ax-close-button></ax-close-button>\r\n</ax-header>\r\n<div class=\"ax-p-4\">\r\n  <ax-tabs [content]=\"contents\" look=\"with-line\">\r\n    <ax-tab-item text=\"Columns\">\r\n      <ax-suffix>\r\n        <ax-badge [text]=\"visibleColumns().length.toString()\" color=\"primary\"> </ax-badge>\r\n      </ax-suffix>\r\n      <ax-content>\r\n        <div\r\n          class=\"ax-flex ax-flex-col ax-gap-4 ax-p-4 ax-select-none ax-h-[400px]\"\r\n          cdkDropList\r\n          (cdkDropListDropped)=\"drop('columns', $event)\"\r\n        >\r\n          <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-overflow-auto ax-pe-2\">\r\n            <ng-container *ngFor=\"let item of columns()\">\r\n              <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\r\n                <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\r\n                  <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\r\n                  <p class=\"ax-font-medium ax-text-sm\">{{ item.title }}</p>\r\n                </div>\r\n                <ax-switch\r\n                  class=\"ax-sm\"\r\n                  [(ngModel)]=\"item.visible\"\r\n                  (onValueChanged)=\"updateColumnItem($event, item.name)\"\r\n                ></ax-switch>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </ax-content>\r\n    </ax-tab-item>\r\n    <ax-tab-item text=\"Conditions\">\r\n      <ax-suffix>\r\n        <ax-badge [text]=\"conditions().length.toString()\" color=\"primary\"> </ax-badge>\r\n      </ax-suffix>\r\n      <ax-content>\r\n        <div\r\n          class=\"ax-flex ax-flex-col ax-justify-start ax-gap-4 ax-py-4 ax-select-none ax-h-[400px]\"\r\n          [class.ax-justify-center]=\"!conditions().length\"\r\n        >\r\n          @if(!conditions().length){\r\n          <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\r\n            <ax-image src=\"assets/documents.svg\"></ax-image>\r\n            <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">No Filters Selected</p>\r\n            <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\"\r\n              >Please select field(s) that you want to filter</span\r\n            >\r\n          </div>\r\n          } @else {\r\n          <div class=\"ax-sorted-list ax-px-4 ax-py-1 ax-overflow-auto\">\r\n            <div cdkDropList (cdkDropListDropped)=\"drop('conditions', $event)\" class=\"ax-flex ax-flex-col ax-gap-2\">\r\n              @for(item of conditions(); track item.name ){\r\n              <div cdkDrag cdkDragBoundary=\".ax-sorted-list\">\r\n                <div class=\"ax-ms-4 ax-flex ax-items-start ax-gap-2\">\r\n                  <ax-label>{{ loader.getProp(item.name)?.title }}</ax-label>\r\n                  @if(getOperatorTitle(item.name,item.operator)){\r\n                  <ax-badge\r\n                    class=\"ax-text-xs\"\r\n                    color=\"primary\"\r\n                    [look]=\"'twotone'\"\r\n                    [text]=\"getOperatorTitle(item.name, item.operator)\"\r\n                  ></ax-badge>\r\n                  }\r\n                </div>\r\n                <div class=\"ax-flex ax-group ax-items-center ax-gap-2\">\r\n                  <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\r\n                  <div class=\"ax-w-full\">\r\n                    <axp-widget-filter-renderer\r\n                      [schema]=\"getSchema(item.name)\"\r\n                      [prop]=\"loader.getProp(item.name)\"\r\n                      [(value)]=\"item.value\"\r\n                      [(operator)]=\"item.operator\"\r\n                    >\r\n                    </axp-widget-filter-renderer>\r\n                  </div>\r\n                  <ax-button look=\"blank\" color=\"danger\" class=\"ax-sm\" (onClick)=\"removeCondition(item)\">\r\n                    <ax-icon class=\"fa-solid fa-trash-can\"></ax-icon>\r\n                  </ax-button>\r\n                </div>\r\n              </div>\r\n              }\r\n            </div>\r\n          </div>\r\n          }\r\n          <div class=\"ax-flex ax-gap-2\">\r\n            <div class=\"ax-w-full\" #addField>\r\n              @if(conditions().length){\r\n              <ax-button color=\"primary\" text=\"Add field\" look=\"blank\" class=\"ax-sm\"></ax-button>\r\n              }@else {\r\n              <div class=\"ax-flex ax-justify-center ax-w-full\">\r\n                <ax-button color=\"primary\" text=\"Add field\" look=\"outline\" class=\"ax-md ax-w-56\"></ax-button>\r\n              </div>\r\n              }\r\n              <ax-popover\r\n                #conditionsPopover\r\n                [target]=\"addField\"\r\n                [placement]=\"conditions().length ? 'bottom-start' : 'bottom'\"\r\n                [offsetY]=\"8\"\r\n                [openOn]=\"'toggle'\"\r\n                [closeOn]=\"'clickOut'\"\r\n                [adaptivityEnabled]=\"true\"\r\n                (onOpened)=\"resetSelectedFieldNames()\"\r\n              >\r\n                <div\r\n                  class=\"ax-bg-surface ax-border ax-border-default ax-rounded-md ax-shadow-md ax-w-full ax-min-w-[250px]\"\r\n                >\r\n                  <div class=\"ax-border-b-[1px] ax-pb-2 ax-mb-2 ax-p-3\">\r\n                    <ax-title class=\"ax-font-bold\">Fields</ax-title>\r\n                  </div>\r\n                  <div class=\"ax-max-h-48 ax-overflow-auto\">\r\n                    <ax-selection-list\r\n                      [valueField]=\"'name'\"\r\n                      [textField]=\"'title'\"\r\n                      [(ngModel)]=\"selectedConditionNames\"\r\n                      [direction]=\"'vertical'\"\r\n                      [items]=\"props()\"\r\n                      [multiple]=\"true\"\r\n                    ></ax-selection-list>\r\n                  </div>\r\n                  <div class=\"ax-flex ax-justify-end ax-border-t-[1px] ax-p-3\">\r\n                    <ax-button\r\n                      (onClick)=\"addCondition(); conditionsPopover.close()\"\r\n                      class=\"ax-sm\"\r\n                      text=\"Confirm\"\r\n                      color=\"primary\"\r\n                    >\r\n                    </ax-button>\r\n                  </div>\r\n                </div>\r\n              </ax-popover>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ax-content>\r\n    </ax-tab-item>\r\n    <ax-tab-item text=\"Sorting\">\r\n      <ax-suffix>\r\n        <ax-badge [text]=\"sorts().length.toString()\" color=\"primary\"> </ax-badge>\r\n      </ax-suffix>\r\n      <ax-content>\r\n        <div\r\n          class=\"ax-flex ax-p-4 ax-flex-col ax-justify-start ax-gap-4 ax-select-none ax-overflow-auto ax-h-[400px]\"\r\n          [class.ax-justify-center]=\"!sorts().length\"\r\n        >\r\n          @if(!sorts().length){\r\n          <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\r\n            <ax-image src=\"assets/documents.svg\"></ax-image>\r\n            <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">No Sorts Selected</p>\r\n            <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\"\r\n              >Please select field(s) that you want to sort</span\r\n            >\r\n          </div>\r\n          }@else {\r\n          <div\r\n            cdkDropList\r\n            (cdkDropListDropped)=\"drop('sorts', $event)\"\r\n            class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-py-1 ax-overflow-auto\"\r\n          >\r\n            <ng-container *ngFor=\"let item of sorts()\">\r\n              <div class=\"ax-flex ax-gap-2 ax-items-center\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\r\n                <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\r\n                <ax-select-box [dataSource]=\"props()\" valueField=\"name\" textField=\"title\" [(ngModel)]=\"item.name\">\r\n                </ax-select-box>\r\n                <ax-button [color]=\"'default'\" class=\"ax-sm\" (click)=\"updateSortItem(item)\">\r\n                  <ax-icon\r\n                    [class.ax-text-primary]=\"item.dir == 'asc'\"\r\n                    class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"\r\n                  ></ax-icon>\r\n                  <ax-icon\r\n                    [class.ax-text-primary]=\"item.dir == 'desc'\"\r\n                    class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"\r\n                  ></ax-icon>\r\n                </ax-button>\r\n\r\n                <ax-button look=\"blank\" (onClick)=\"removeSortItem(item)\">\r\n                  <ax-icon class=\"fa-solid fa-trash-can ax-text-danger-500\"></ax-icon>\r\n                </ax-button>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n          }\r\n\r\n          <div class=\"ax-flex ax-gap-2\">\r\n            <div class=\"ax-w-full\" #addField>\r\n              @if(sorts().length){\r\n              <ax-button\r\n                (onClick)=\"addSortItem()\"\r\n                color=\"primary\"\r\n                text=\"Add field\"\r\n                look=\"blank\"\r\n                class=\"ax-sm\"\r\n              ></ax-button>\r\n              }@else {\r\n              <div class=\"ax-flex ax-justify-center ax-w-full\">\r\n                <ax-button\r\n                  (onClick)=\"addSortItem()\"\r\n                  color=\"primary\"\r\n                  text=\"Add field\"\r\n                  look=\"outline\"\r\n                  class=\"ax-md ax-w-56\"\r\n                ></ax-button>\r\n              </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ax-content>\r\n    </ax-tab-item>\r\n  </ax-tabs>\r\n  <ng-template [axTabContent] #contents=\"axTabContent\"> </ng-template>\r\n</div>\r\n<ax-footer class=\"!ax-justify-end\">\r\n  @if (mode===\"edit\") {\r\n  <ax-dropdown-button text=\"Discard\" (onClick)=\"handleDiscardClick()\">\r\n    <ax-button-item-list>\r\n      <ax-button-item text=\"Reset\" (onClick)=\"handleResetClick()\">\r\n        <ax-prefix>\r\n          <ax-icon icon=\"fa-solid fa-rotate-left fa-flip-horizontal\"></ax-icon>\r\n        </ax-prefix>\r\n      </ax-button-item>\r\n      <ax-button-item class=\"ax-text-danger\" text=\"Delete\" (onClick)=\"handleDeleteClick()\">\r\n        <ax-prefix> <ax-icon icon=\"fas fa-trash fa-flip-horizontal\"></ax-icon> </ax-prefix\r\n      ></ax-button-item>\r\n    </ax-button-item-list>\r\n  </ax-dropdown-button>\r\n  } @else {\r\n  <ax-button text=\"Cancel\" look=\"outline\" (onClick)=\"handleCancelClick()\"></ax-button>\r\n  }\r\n  <ax-button\r\n    [text]=\"mode === 'create' ? 'Save' : 'Save Changes'\"\r\n    color=\"primary\"\r\n    (onClick)=\"handleApplyClick()\"\r\n  ></ax-button>\r\n</ax-footer>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i4.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i4.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "component", type: i4$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4$1.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }, { kind: "component", type: i4$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i5.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: i6.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i7.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: i8.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "component", type: i9.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i9.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "directive", type: i9.AXTabContentDirective, selector: "[axTabContent]", inputs: ["axTabContent"], exportAs: ["axTabContent"] }, { kind: "component", type: i10.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "component", type: i11.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: i7$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: i13.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "hintField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "component", type: i14.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "directive", type: i15.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i15.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i15.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i10$1.AXPWidgetFilterRendererComponent, selector: "axp-widget-filter-renderer", inputs: ["value", "operator", "prop", "schema"], outputs: ["valueChange", "operatorChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "<ax-header class=\"ax-p-4 ax-flex ax-justify-between ax-border-b\">\n  <div class=\"ax-flex ax-items-center\">\n    @if (showNameInput() && mode==='create') {\n    <div class=\"ax-w-60\">\n      <ax-text-box class=\"ax-sm\" [(ngModel)]=\"selectedView.title\">\n        @if(showNameInput()){\n        <ax-suffix>\n          <ax-button (onClick)=\"changeViewNameToggle()\" look=\"default\">\n            <ax-icon class=\"fa-sodild fas fa-check ax-text-sm\"> </ax-icon>\n          </ax-button>\n        </ax-suffix>\n        }\n      </ax-text-box>\n    </div>\n    }@else {\n    <span class=\"ax-text-lg ax-font-semibold\">{{ selectedView.title }}</span>\n    } @if (mode===\"create\") {\n    <ax-button class=\"ax-xs\" (onClick)=\"changeViewNameToggle()\" color=\"default\">\n      @if(!showNameInput() ){\n      <ax-icon class=\"fa-regular fa-pen ax-text-sm ax-text-neutral-600\"> </ax-icon>\n      }\n    </ax-button>\n    }\n  </div>\n  <ax-close-button></ax-close-button>\n</ax-header>\n<div class=\"ax-p-4\">\n  <ax-tabs [content]=\"contents\" look=\"with-line\">\n    <ax-tab-item text=\"Columns\">\n      <ax-suffix>\n        <ax-badge [text]=\"visibleColumns().length.toString()\" color=\"primary\"> </ax-badge>\n      </ax-suffix>\n      <ax-content>\n        <div\n          class=\"ax-flex ax-flex-col ax-gap-4 ax-p-4 ax-select-none ax-h-[400px]\"\n          cdkDropList\n          (cdkDropListDropped)=\"drop('columns', $event)\"\n        >\n          <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-overflow-auto ax-pe-2\">\n            <ng-container *ngFor=\"let item of columns()\">\n              <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n                <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\n                  <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\n                  <p class=\"ax-font-medium ax-text-sm\">{{ item.title }}</p>\n                </div>\n                <ax-switch\n                  class=\"ax-sm\"\n                  [(ngModel)]=\"item.visible\"\n                  (onValueChanged)=\"updateColumnItem($event, item.name)\"\n                ></ax-switch>\n              </div>\n            </ng-container>\n          </div>\n        </div>\n      </ax-content>\n    </ax-tab-item>\n    <ax-tab-item text=\"Conditions\">\n      <ax-suffix>\n        <ax-badge [text]=\"conditions().length.toString()\" color=\"primary\"> </ax-badge>\n      </ax-suffix>\n      <ax-content>\n        <div\n          class=\"ax-flex ax-flex-col ax-justify-start ax-gap-4 ax-py-4 ax-select-none ax-h-[400px]\"\n          [class.ax-justify-center]=\"!conditions().length\"\n        >\n          @if(!conditions().length){\n          <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\n            <ax-image src=\"assets/documents.svg\"></ax-image>\n            <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">No Filters Selected</p>\n            <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\"\n              >Please select field(s) that you want to filter</span\n            >\n          </div>\n          } @else {\n          <div class=\"ax-sorted-list ax-px-4 ax-py-1 ax-overflow-auto\">\n            <div cdkDropList (cdkDropListDropped)=\"drop('conditions', $event)\" class=\"ax-flex ax-flex-col ax-gap-2\">\n              @for(item of conditions(); track item.name ){\n              <div cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n                <div class=\"ax-ms-4 ax-flex ax-items-start ax-gap-2\">\n                  <ax-label>{{ loader.getProp(item.name)?.title }}</ax-label>\n                  @if(getOperatorTitle(item.name,item.operator)){\n                  <ax-badge\n                    class=\"ax-text-xs\"\n                    color=\"primary\"\n                    [look]=\"'twotone'\"\n                    [text]=\"getOperatorTitle(item.name, item.operator)\"\n                  ></ax-badge>\n                  }\n                </div>\n                <div class=\"ax-flex ax-group ax-items-center ax-gap-2\">\n                  <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\n                  <div class=\"ax-w-full\">\n                    <axp-widget-filter-renderer\n                      [schema]=\"getSchema(item.name)\"\n                      [prop]=\"loader.getProp(item.name)\"\n                      [(value)]=\"item.value\"\n                      [(operator)]=\"item.operator\"\n                    >\n                    </axp-widget-filter-renderer>\n                  </div>\n                  <ax-button look=\"blank\" color=\"danger\" class=\"ax-sm\" (onClick)=\"removeCondition(item)\">\n                    <ax-icon class=\"fa-solid fa-trash-can\"></ax-icon>\n                  </ax-button>\n                </div>\n              </div>\n              }\n            </div>\n          </div>\n          }\n          <div class=\"ax-flex ax-gap-2\">\n            <div class=\"ax-w-full\" #addField>\n              @if(conditions().length){\n              <ax-button color=\"primary\" text=\"Add field\" look=\"blank\" class=\"ax-sm\"></ax-button>\n              }@else {\n              <div class=\"ax-flex ax-justify-center ax-w-full\">\n                <ax-button color=\"primary\" text=\"Add field\" look=\"outline\" class=\"ax-md ax-w-56\"></ax-button>\n              </div>\n              }\n              <ax-popover\n                #conditionsPopover\n                [target]=\"addField\"\n                [placement]=\"conditions().length ? 'bottom-start' : 'bottom'\"\n                [offsetY]=\"8\"\n                [openOn]=\"'toggle'\"\n                [closeOn]=\"'clickOut'\"\n                [adaptivityEnabled]=\"true\"\n                (onOpened)=\"resetSelectedFieldNames()\"\n              >\n                <div\n                  class=\"ax-bg-surface ax-border ax-border-default ax-rounded-md ax-shadow-md ax-w-full ax-min-w-[250px]\"\n                >\n                  <div class=\"ax-border-b-[1px] ax-pb-2 ax-mb-2 ax-p-3\">\n                    <ax-title class=\"ax-font-bold\">Fields</ax-title>\n                  </div>\n                  <div class=\"ax-max-h-48 ax-overflow-auto\">\n                    <ax-selection-list\n                      [valueField]=\"'name'\"\n                      [textField]=\"'title'\"\n                      [(ngModel)]=\"selectedConditionNames\"\n                      [direction]=\"'vertical'\"\n                      [items]=\"props()\"\n                      [multiple]=\"true\"\n                    ></ax-selection-list>\n                  </div>\n                  <div class=\"ax-flex ax-justify-end ax-border-t-[1px] ax-p-3\">\n                    <ax-button\n                      (onClick)=\"addCondition(); conditionsPopover.close()\"\n                      class=\"ax-sm\"\n                      text=\"Confirm\"\n                      color=\"primary\"\n                    >\n                    </ax-button>\n                  </div>\n                </div>\n              </ax-popover>\n            </div>\n          </div>\n        </div>\n      </ax-content>\n    </ax-tab-item>\n    <ax-tab-item text=\"Sorting\">\n      <ax-suffix>\n        <ax-badge [text]=\"sorts().length.toString()\" color=\"primary\"> </ax-badge>\n      </ax-suffix>\n      <ax-content>\n        <div\n          class=\"ax-flex ax-p-4 ax-flex-col ax-justify-start ax-gap-4 ax-select-none ax-overflow-auto ax-h-[400px]\"\n          [class.ax-justify-center]=\"!sorts().length\"\n        >\n          @if(!sorts().length){\n          <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\n            <ax-image src=\"assets/documents.svg\"></ax-image>\n            <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">No Sorts Selected</p>\n            <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\"\n              >Please select field(s) that you want to sort</span\n            >\n          </div>\n          }@else {\n          <div\n            cdkDropList\n            (cdkDropListDropped)=\"drop('sorts', $event)\"\n            class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-py-1 ax-overflow-auto\"\n          >\n            <ng-container *ngFor=\"let item of sorts()\">\n              <div class=\"ax-flex ax-gap-2 ax-items-center\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n                <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\n                <ax-select-box [dataSource]=\"props()\" valueField=\"name\" textField=\"title\" [(ngModel)]=\"item.name\">\n                </ax-select-box>\n                <ax-button [color]=\"'default'\" class=\"ax-sm\" (click)=\"updateSortItem(item)\">\n                  <ax-icon\n                    [class.ax-text-primary]=\"item.dir == 'asc'\"\n                    class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"\n                  ></ax-icon>\n                  <ax-icon\n                    [class.ax-text-primary]=\"item.dir == 'desc'\"\n                    class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"\n                  ></ax-icon>\n                </ax-button>\n\n                <ax-button look=\"blank\" (onClick)=\"removeSortItem(item)\">\n                  <ax-icon class=\"fa-solid fa-trash-can ax-text-danger-500\"></ax-icon>\n                </ax-button>\n              </div>\n            </ng-container>\n          </div>\n          }\n\n          <div class=\"ax-flex ax-gap-2\">\n            <div class=\"ax-w-full\" #addField>\n              @if(sorts().length){\n              <ax-button\n                (onClick)=\"addSortItem()\"\n                color=\"primary\"\n                text=\"Add field\"\n                look=\"blank\"\n                class=\"ax-sm\"\n              ></ax-button>\n              }@else {\n              <div class=\"ax-flex ax-justify-center ax-w-full\">\n                <ax-button\n                  (onClick)=\"addSortItem()\"\n                  color=\"primary\"\n                  text=\"Add field\"\n                  look=\"outline\"\n                  class=\"ax-md ax-w-56\"\n                ></ax-button>\n              </div>\n              }\n            </div>\n          </div>\n        </div>\n      </ax-content>\n    </ax-tab-item>\n  </ax-tabs>\n  <ng-template [axTabContent] #contents=\"axTabContent\"> </ng-template>\n</div>\n<ax-footer class=\"!ax-justify-end\">\n  @if (mode===\"edit\") {\n  <ax-dropdown-button text=\"Discard\" (onClick)=\"handleDiscardClick()\">\n    <ax-button-item-list>\n      <ax-button-item text=\"Reset\" (onClick)=\"handleResetClick()\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-solid fa-rotate-left fa-flip-horizontal\"></ax-icon>\n        </ax-prefix>\n      </ax-button-item>\n      <ax-button-item class=\"ax-text-danger\" text=\"Delete\" (onClick)=\"handleDeleteClick()\">\n        <ax-prefix> <ax-icon icon=\"fas fa-trash fa-flip-horizontal\"></ax-icon> </ax-prefix\n      ></ax-button-item>\n    </ax-button-item-list>\n  </ax-dropdown-button>\n  } @else {\n  <ax-button text=\"Cancel\" look=\"outline\" (onClick)=\"handleCancelClick()\"></ax-button>\n  }\n  <ax-button\n    [text]=\"mode === 'create' ? 'Save' : 'Save Changes'\"\n    color=\"primary\"\n    (onClick)=\"handleApplyClick()\"\n  ></ax-button>\n</ax-footer>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "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", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "component", type: i11.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: i7$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: i13.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "hintField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "component", type: i14.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "directive", type: i15.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i15.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i15.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i10$1.AXPWidgetFilterRendererComponent, selector: "axp-widget-filter-renderer", inputs: ["value", "operator", "prop", "schema"], outputs: ["valueChange", "operatorChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityCreateCustomViewComponent, decorators: [{
             type: Component,
@@ -238,7 +238,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                         {
                             provide: AXUnsubscriber,
                         },
-                    ], template: "<ax-header class=\"ax-p-4 ax-flex ax-justify-between ax-border-b\">\r\n  <div class=\"ax-flex ax-items-center\">\r\n    @if (showNameInput() && mode==='create') {\r\n    <div class=\"ax-w-60\">\r\n      <ax-text-box class=\"ax-sm\" [(ngModel)]=\"selectedView.title\">\r\n        @if(showNameInput()){\r\n        <ax-suffix>\r\n          <ax-button (onClick)=\"changeViewNameToggle()\" look=\"default\">\r\n            <ax-icon class=\"fa-sodild fas fa-check ax-text-sm\"> </ax-icon>\r\n          </ax-button>\r\n        </ax-suffix>\r\n        }\r\n      </ax-text-box>\r\n    </div>\r\n    }@else {\r\n    <span class=\"ax-text-lg ax-font-semibold\">{{ selectedView.title }}</span>\r\n    } @if (mode===\"create\") {\r\n    <ax-button class=\"ax-xs\" (onClick)=\"changeViewNameToggle()\" color=\"default\">\r\n      @if(!showNameInput() ){\r\n      <ax-icon class=\"fa-regular fa-pen ax-text-sm ax-text-neutral-600\"> </ax-icon>\r\n      }\r\n    </ax-button>\r\n    }\r\n  </div>\r\n  <ax-close-button></ax-close-button>\r\n</ax-header>\r\n<div class=\"ax-p-4\">\r\n  <ax-tabs [content]=\"contents\" look=\"with-line\">\r\n    <ax-tab-item text=\"Columns\">\r\n      <ax-suffix>\r\n        <ax-badge [text]=\"visibleColumns().length.toString()\" color=\"primary\"> </ax-badge>\r\n      </ax-suffix>\r\n      <ax-content>\r\n        <div\r\n          class=\"ax-flex ax-flex-col ax-gap-4 ax-p-4 ax-select-none ax-h-[400px]\"\r\n          cdkDropList\r\n          (cdkDropListDropped)=\"drop('columns', $event)\"\r\n        >\r\n          <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-overflow-auto ax-pe-2\">\r\n            <ng-container *ngFor=\"let item of columns()\">\r\n              <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\r\n                <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\r\n                  <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\r\n                  <p class=\"ax-font-medium ax-text-sm\">{{ item.title }}</p>\r\n                </div>\r\n                <ax-switch\r\n                  class=\"ax-sm\"\r\n                  [(ngModel)]=\"item.visible\"\r\n                  (onValueChanged)=\"updateColumnItem($event, item.name)\"\r\n                ></ax-switch>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </ax-content>\r\n    </ax-tab-item>\r\n    <ax-tab-item text=\"Conditions\">\r\n      <ax-suffix>\r\n        <ax-badge [text]=\"conditions().length.toString()\" color=\"primary\"> </ax-badge>\r\n      </ax-suffix>\r\n      <ax-content>\r\n        <div\r\n          class=\"ax-flex ax-flex-col ax-justify-start ax-gap-4 ax-py-4 ax-select-none ax-h-[400px]\"\r\n          [class.ax-justify-center]=\"!conditions().length\"\r\n        >\r\n          @if(!conditions().length){\r\n          <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\r\n            <ax-image src=\"assets/documents.svg\"></ax-image>\r\n            <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">No Filters Selected</p>\r\n            <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\"\r\n              >Please select field(s) that you want to filter</span\r\n            >\r\n          </div>\r\n          } @else {\r\n          <div class=\"ax-sorted-list ax-px-4 ax-py-1 ax-overflow-auto\">\r\n            <div cdkDropList (cdkDropListDropped)=\"drop('conditions', $event)\" class=\"ax-flex ax-flex-col ax-gap-2\">\r\n              @for(item of conditions(); track item.name ){\r\n              <div cdkDrag cdkDragBoundary=\".ax-sorted-list\">\r\n                <div class=\"ax-ms-4 ax-flex ax-items-start ax-gap-2\">\r\n                  <ax-label>{{ loader.getProp(item.name)?.title }}</ax-label>\r\n                  @if(getOperatorTitle(item.name,item.operator)){\r\n                  <ax-badge\r\n                    class=\"ax-text-xs\"\r\n                    color=\"primary\"\r\n                    [look]=\"'twotone'\"\r\n                    [text]=\"getOperatorTitle(item.name, item.operator)\"\r\n                  ></ax-badge>\r\n                  }\r\n                </div>\r\n                <div class=\"ax-flex ax-group ax-items-center ax-gap-2\">\r\n                  <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\r\n                  <div class=\"ax-w-full\">\r\n                    <axp-widget-filter-renderer\r\n                      [schema]=\"getSchema(item.name)\"\r\n                      [prop]=\"loader.getProp(item.name)\"\r\n                      [(value)]=\"item.value\"\r\n                      [(operator)]=\"item.operator\"\r\n                    >\r\n                    </axp-widget-filter-renderer>\r\n                  </div>\r\n                  <ax-button look=\"blank\" color=\"danger\" class=\"ax-sm\" (onClick)=\"removeCondition(item)\">\r\n                    <ax-icon class=\"fa-solid fa-trash-can\"></ax-icon>\r\n                  </ax-button>\r\n                </div>\r\n              </div>\r\n              }\r\n            </div>\r\n          </div>\r\n          }\r\n          <div class=\"ax-flex ax-gap-2\">\r\n            <div class=\"ax-w-full\" #addField>\r\n              @if(conditions().length){\r\n              <ax-button color=\"primary\" text=\"Add field\" look=\"blank\" class=\"ax-sm\"></ax-button>\r\n              }@else {\r\n              <div class=\"ax-flex ax-justify-center ax-w-full\">\r\n                <ax-button color=\"primary\" text=\"Add field\" look=\"outline\" class=\"ax-md ax-w-56\"></ax-button>\r\n              </div>\r\n              }\r\n              <ax-popover\r\n                #conditionsPopover\r\n                [target]=\"addField\"\r\n                [placement]=\"conditions().length ? 'bottom-start' : 'bottom'\"\r\n                [offsetY]=\"8\"\r\n                [openOn]=\"'toggle'\"\r\n                [closeOn]=\"'clickOut'\"\r\n                [adaptivityEnabled]=\"true\"\r\n                (onOpened)=\"resetSelectedFieldNames()\"\r\n              >\r\n                <div\r\n                  class=\"ax-bg-surface ax-border ax-border-default ax-rounded-md ax-shadow-md ax-w-full ax-min-w-[250px]\"\r\n                >\r\n                  <div class=\"ax-border-b-[1px] ax-pb-2 ax-mb-2 ax-p-3\">\r\n                    <ax-title class=\"ax-font-bold\">Fields</ax-title>\r\n                  </div>\r\n                  <div class=\"ax-max-h-48 ax-overflow-auto\">\r\n                    <ax-selection-list\r\n                      [valueField]=\"'name'\"\r\n                      [textField]=\"'title'\"\r\n                      [(ngModel)]=\"selectedConditionNames\"\r\n                      [direction]=\"'vertical'\"\r\n                      [items]=\"props()\"\r\n                      [multiple]=\"true\"\r\n                    ></ax-selection-list>\r\n                  </div>\r\n                  <div class=\"ax-flex ax-justify-end ax-border-t-[1px] ax-p-3\">\r\n                    <ax-button\r\n                      (onClick)=\"addCondition(); conditionsPopover.close()\"\r\n                      class=\"ax-sm\"\r\n                      text=\"Confirm\"\r\n                      color=\"primary\"\r\n                    >\r\n                    </ax-button>\r\n                  </div>\r\n                </div>\r\n              </ax-popover>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ax-content>\r\n    </ax-tab-item>\r\n    <ax-tab-item text=\"Sorting\">\r\n      <ax-suffix>\r\n        <ax-badge [text]=\"sorts().length.toString()\" color=\"primary\"> </ax-badge>\r\n      </ax-suffix>\r\n      <ax-content>\r\n        <div\r\n          class=\"ax-flex ax-p-4 ax-flex-col ax-justify-start ax-gap-4 ax-select-none ax-overflow-auto ax-h-[400px]\"\r\n          [class.ax-justify-center]=\"!sorts().length\"\r\n        >\r\n          @if(!sorts().length){\r\n          <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\r\n            <ax-image src=\"assets/documents.svg\"></ax-image>\r\n            <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">No Sorts Selected</p>\r\n            <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\"\r\n              >Please select field(s) that you want to sort</span\r\n            >\r\n          </div>\r\n          }@else {\r\n          <div\r\n            cdkDropList\r\n            (cdkDropListDropped)=\"drop('sorts', $event)\"\r\n            class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-py-1 ax-overflow-auto\"\r\n          >\r\n            <ng-container *ngFor=\"let item of sorts()\">\r\n              <div class=\"ax-flex ax-gap-2 ax-items-center\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\r\n                <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\r\n                <ax-select-box [dataSource]=\"props()\" valueField=\"name\" textField=\"title\" [(ngModel)]=\"item.name\">\r\n                </ax-select-box>\r\n                <ax-button [color]=\"'default'\" class=\"ax-sm\" (click)=\"updateSortItem(item)\">\r\n                  <ax-icon\r\n                    [class.ax-text-primary]=\"item.dir == 'asc'\"\r\n                    class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"\r\n                  ></ax-icon>\r\n                  <ax-icon\r\n                    [class.ax-text-primary]=\"item.dir == 'desc'\"\r\n                    class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"\r\n                  ></ax-icon>\r\n                </ax-button>\r\n\r\n                <ax-button look=\"blank\" (onClick)=\"removeSortItem(item)\">\r\n                  <ax-icon class=\"fa-solid fa-trash-can ax-text-danger-500\"></ax-icon>\r\n                </ax-button>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n          }\r\n\r\n          <div class=\"ax-flex ax-gap-2\">\r\n            <div class=\"ax-w-full\" #addField>\r\n              @if(sorts().length){\r\n              <ax-button\r\n                (onClick)=\"addSortItem()\"\r\n                color=\"primary\"\r\n                text=\"Add field\"\r\n                look=\"blank\"\r\n                class=\"ax-sm\"\r\n              ></ax-button>\r\n              }@else {\r\n              <div class=\"ax-flex ax-justify-center ax-w-full\">\r\n                <ax-button\r\n                  (onClick)=\"addSortItem()\"\r\n                  color=\"primary\"\r\n                  text=\"Add field\"\r\n                  look=\"outline\"\r\n                  class=\"ax-md ax-w-56\"\r\n                ></ax-button>\r\n              </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ax-content>\r\n    </ax-tab-item>\r\n  </ax-tabs>\r\n  <ng-template [axTabContent] #contents=\"axTabContent\"> </ng-template>\r\n</div>\r\n<ax-footer class=\"!ax-justify-end\">\r\n  @if (mode===\"edit\") {\r\n  <ax-dropdown-button text=\"Discard\" (onClick)=\"handleDiscardClick()\">\r\n    <ax-button-item-list>\r\n      <ax-button-item text=\"Reset\" (onClick)=\"handleResetClick()\">\r\n        <ax-prefix>\r\n          <ax-icon icon=\"fa-solid fa-rotate-left fa-flip-horizontal\"></ax-icon>\r\n        </ax-prefix>\r\n      </ax-button-item>\r\n      <ax-button-item class=\"ax-text-danger\" text=\"Delete\" (onClick)=\"handleDeleteClick()\">\r\n        <ax-prefix> <ax-icon icon=\"fas fa-trash fa-flip-horizontal\"></ax-icon> </ax-prefix\r\n      ></ax-button-item>\r\n    </ax-button-item-list>\r\n  </ax-dropdown-button>\r\n  } @else {\r\n  <ax-button text=\"Cancel\" look=\"outline\" (onClick)=\"handleCancelClick()\"></ax-button>\r\n  }\r\n  <ax-button\r\n    [text]=\"mode === 'create' ? 'Save' : 'Save Changes'\"\r\n    color=\"primary\"\r\n    (onClick)=\"handleApplyClick()\"\r\n  ></ax-button>\r\n</ax-footer>\r\n" }]
+                    ], template: "<ax-header class=\"ax-p-4 ax-flex ax-justify-between ax-border-b\">\n  <div class=\"ax-flex ax-items-center\">\n    @if (showNameInput() && mode==='create') {\n    <div class=\"ax-w-60\">\n      <ax-text-box class=\"ax-sm\" [(ngModel)]=\"selectedView.title\">\n        @if(showNameInput()){\n        <ax-suffix>\n          <ax-button (onClick)=\"changeViewNameToggle()\" look=\"default\">\n            <ax-icon class=\"fa-sodild fas fa-check ax-text-sm\"> </ax-icon>\n          </ax-button>\n        </ax-suffix>\n        }\n      </ax-text-box>\n    </div>\n    }@else {\n    <span class=\"ax-text-lg ax-font-semibold\">{{ selectedView.title }}</span>\n    } @if (mode===\"create\") {\n    <ax-button class=\"ax-xs\" (onClick)=\"changeViewNameToggle()\" color=\"default\">\n      @if(!showNameInput() ){\n      <ax-icon class=\"fa-regular fa-pen ax-text-sm ax-text-neutral-600\"> </ax-icon>\n      }\n    </ax-button>\n    }\n  </div>\n  <ax-close-button></ax-close-button>\n</ax-header>\n<div class=\"ax-p-4\">\n  <ax-tabs [content]=\"contents\" look=\"with-line\">\n    <ax-tab-item text=\"Columns\">\n      <ax-suffix>\n        <ax-badge [text]=\"visibleColumns().length.toString()\" color=\"primary\"> </ax-badge>\n      </ax-suffix>\n      <ax-content>\n        <div\n          class=\"ax-flex ax-flex-col ax-gap-4 ax-p-4 ax-select-none ax-h-[400px]\"\n          cdkDropList\n          (cdkDropListDropped)=\"drop('columns', $event)\"\n        >\n          <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-overflow-auto ax-pe-2\">\n            <ng-container *ngFor=\"let item of columns()\">\n              <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n                <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\n                  <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\n                  <p class=\"ax-font-medium ax-text-sm\">{{ item.title }}</p>\n                </div>\n                <ax-switch\n                  class=\"ax-sm\"\n                  [(ngModel)]=\"item.visible\"\n                  (onValueChanged)=\"updateColumnItem($event, item.name)\"\n                ></ax-switch>\n              </div>\n            </ng-container>\n          </div>\n        </div>\n      </ax-content>\n    </ax-tab-item>\n    <ax-tab-item text=\"Conditions\">\n      <ax-suffix>\n        <ax-badge [text]=\"conditions().length.toString()\" color=\"primary\"> </ax-badge>\n      </ax-suffix>\n      <ax-content>\n        <div\n          class=\"ax-flex ax-flex-col ax-justify-start ax-gap-4 ax-py-4 ax-select-none ax-h-[400px]\"\n          [class.ax-justify-center]=\"!conditions().length\"\n        >\n          @if(!conditions().length){\n          <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\n            <ax-image src=\"assets/documents.svg\"></ax-image>\n            <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">No Filters Selected</p>\n            <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\"\n              >Please select field(s) that you want to filter</span\n            >\n          </div>\n          } @else {\n          <div class=\"ax-sorted-list ax-px-4 ax-py-1 ax-overflow-auto\">\n            <div cdkDropList (cdkDropListDropped)=\"drop('conditions', $event)\" class=\"ax-flex ax-flex-col ax-gap-2\">\n              @for(item of conditions(); track item.name ){\n              <div cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n                <div class=\"ax-ms-4 ax-flex ax-items-start ax-gap-2\">\n                  <ax-label>{{ loader.getProp(item.name)?.title }}</ax-label>\n                  @if(getOperatorTitle(item.name,item.operator)){\n                  <ax-badge\n                    class=\"ax-text-xs\"\n                    color=\"primary\"\n                    [look]=\"'twotone'\"\n                    [text]=\"getOperatorTitle(item.name, item.operator)\"\n                  ></ax-badge>\n                  }\n                </div>\n                <div class=\"ax-flex ax-group ax-items-center ax-gap-2\">\n                  <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\n                  <div class=\"ax-w-full\">\n                    <axp-widget-filter-renderer\n                      [schema]=\"getSchema(item.name)\"\n                      [prop]=\"loader.getProp(item.name)\"\n                      [(value)]=\"item.value\"\n                      [(operator)]=\"item.operator\"\n                    >\n                    </axp-widget-filter-renderer>\n                  </div>\n                  <ax-button look=\"blank\" color=\"danger\" class=\"ax-sm\" (onClick)=\"removeCondition(item)\">\n                    <ax-icon class=\"fa-solid fa-trash-can\"></ax-icon>\n                  </ax-button>\n                </div>\n              </div>\n              }\n            </div>\n          </div>\n          }\n          <div class=\"ax-flex ax-gap-2\">\n            <div class=\"ax-w-full\" #addField>\n              @if(conditions().length){\n              <ax-button color=\"primary\" text=\"Add field\" look=\"blank\" class=\"ax-sm\"></ax-button>\n              }@else {\n              <div class=\"ax-flex ax-justify-center ax-w-full\">\n                <ax-button color=\"primary\" text=\"Add field\" look=\"outline\" class=\"ax-md ax-w-56\"></ax-button>\n              </div>\n              }\n              <ax-popover\n                #conditionsPopover\n                [target]=\"addField\"\n                [placement]=\"conditions().length ? 'bottom-start' : 'bottom'\"\n                [offsetY]=\"8\"\n                [openOn]=\"'toggle'\"\n                [closeOn]=\"'clickOut'\"\n                [adaptivityEnabled]=\"true\"\n                (onOpened)=\"resetSelectedFieldNames()\"\n              >\n                <div\n                  class=\"ax-bg-surface ax-border ax-border-default ax-rounded-md ax-shadow-md ax-w-full ax-min-w-[250px]\"\n                >\n                  <div class=\"ax-border-b-[1px] ax-pb-2 ax-mb-2 ax-p-3\">\n                    <ax-title class=\"ax-font-bold\">Fields</ax-title>\n                  </div>\n                  <div class=\"ax-max-h-48 ax-overflow-auto\">\n                    <ax-selection-list\n                      [valueField]=\"'name'\"\n                      [textField]=\"'title'\"\n                      [(ngModel)]=\"selectedConditionNames\"\n                      [direction]=\"'vertical'\"\n                      [items]=\"props()\"\n                      [multiple]=\"true\"\n                    ></ax-selection-list>\n                  </div>\n                  <div class=\"ax-flex ax-justify-end ax-border-t-[1px] ax-p-3\">\n                    <ax-button\n                      (onClick)=\"addCondition(); conditionsPopover.close()\"\n                      class=\"ax-sm\"\n                      text=\"Confirm\"\n                      color=\"primary\"\n                    >\n                    </ax-button>\n                  </div>\n                </div>\n              </ax-popover>\n            </div>\n          </div>\n        </div>\n      </ax-content>\n    </ax-tab-item>\n    <ax-tab-item text=\"Sorting\">\n      <ax-suffix>\n        <ax-badge [text]=\"sorts().length.toString()\" color=\"primary\"> </ax-badge>\n      </ax-suffix>\n      <ax-content>\n        <div\n          class=\"ax-flex ax-p-4 ax-flex-col ax-justify-start ax-gap-4 ax-select-none ax-overflow-auto ax-h-[400px]\"\n          [class.ax-justify-center]=\"!sorts().length\"\n        >\n          @if(!sorts().length){\n          <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\n            <ax-image src=\"assets/documents.svg\"></ax-image>\n            <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">No Sorts Selected</p>\n            <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\"\n              >Please select field(s) that you want to sort</span\n            >\n          </div>\n          }@else {\n          <div\n            cdkDropList\n            (cdkDropListDropped)=\"drop('sorts', $event)\"\n            class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-py-1 ax-overflow-auto\"\n          >\n            <ng-container *ngFor=\"let item of sorts()\">\n              <div class=\"ax-flex ax-gap-2 ax-items-center\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n                <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\n                <ax-select-box [dataSource]=\"props()\" valueField=\"name\" textField=\"title\" [(ngModel)]=\"item.name\">\n                </ax-select-box>\n                <ax-button [color]=\"'default'\" class=\"ax-sm\" (click)=\"updateSortItem(item)\">\n                  <ax-icon\n                    [class.ax-text-primary]=\"item.dir == 'asc'\"\n                    class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"\n                  ></ax-icon>\n                  <ax-icon\n                    [class.ax-text-primary]=\"item.dir == 'desc'\"\n                    class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"\n                  ></ax-icon>\n                </ax-button>\n\n                <ax-button look=\"blank\" (onClick)=\"removeSortItem(item)\">\n                  <ax-icon class=\"fa-solid fa-trash-can ax-text-danger-500\"></ax-icon>\n                </ax-button>\n              </div>\n            </ng-container>\n          </div>\n          }\n\n          <div class=\"ax-flex ax-gap-2\">\n            <div class=\"ax-w-full\" #addField>\n              @if(sorts().length){\n              <ax-button\n                (onClick)=\"addSortItem()\"\n                color=\"primary\"\n                text=\"Add field\"\n                look=\"blank\"\n                class=\"ax-sm\"\n              ></ax-button>\n              }@else {\n              <div class=\"ax-flex ax-justify-center ax-w-full\">\n                <ax-button\n                  (onClick)=\"addSortItem()\"\n                  color=\"primary\"\n                  text=\"Add field\"\n                  look=\"outline\"\n                  class=\"ax-md ax-w-56\"\n                ></ax-button>\n              </div>\n              }\n            </div>\n          </div>\n        </div>\n      </ax-content>\n    </ax-tab-item>\n  </ax-tabs>\n  <ng-template [axTabContent] #contents=\"axTabContent\"> </ng-template>\n</div>\n<ax-footer class=\"!ax-justify-end\">\n  @if (mode===\"edit\") {\n  <ax-dropdown-button text=\"Discard\" (onClick)=\"handleDiscardClick()\">\n    <ax-button-item-list>\n      <ax-button-item text=\"Reset\" (onClick)=\"handleResetClick()\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-solid fa-rotate-left fa-flip-horizontal\"></ax-icon>\n        </ax-prefix>\n      </ax-button-item>\n      <ax-button-item class=\"ax-text-danger\" text=\"Delete\" (onClick)=\"handleDeleteClick()\">\n        <ax-prefix> <ax-icon icon=\"fas fa-trash fa-flip-horizontal\"></ax-icon> </ax-prefix\n      ></ax-button-item>\n    </ax-button-item-list>\n  </ax-dropdown-button>\n  } @else {\n  <ax-button text=\"Cancel\" look=\"outline\" (onClick)=\"handleCancelClick()\"></ax-button>\n  }\n  <ax-button\n    [text]=\"mode === 'create' ? 'Save' : 'Save Changes'\"\n    color=\"primary\"\n    (onClick)=\"handleApplyClick()\"\n  ></ax-button>\n</ax-footer>\n" }]
         }], propDecorators: { loader: [{
                 type: Input
             }], mode: [{
@@ -280,11 +280,11 @@ class AXPListViewOptionsColumnsComponent {
         this.onClosed.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPListViewOptionsColumnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: AXPListViewOptionsColumnsComponent, selector: "axp-list-view-option-columns", inputs: { loader: "loader" }, outputs: { onClosed: "onClosed" }, ngImport: i0, template: "<ax-header class=\"ax-flex ax-items-center\">\r\n  <h2 class=\"ax-text-xl ax-font-bold\">Columns</h2>\r\n  <ax-button (onClick)=\"handleClose()\" [look]=\"'blank'\">\r\n    <ax-icon class=\"fa-solid fa-close ax-text-neutral-400 ax-text-xl\"> </ax-icon>\r\n  </ax-button>\r\n</ax-header>\r\n<div class=\"ax-flex ax-flex-col ax-gap-4 ax-p-4 ax-select-none\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n  <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-max-h-[calc(100vh-280px)] ax-overflow-auto\">\r\n    <ng-container *ngFor=\"let item of columns$ | async\">\r\n      <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\r\n        <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\r\n          <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\r\n          <p class=\"ax-font-medium ax-text-sm\">{{ item.title }}</p>\r\n        </div>\r\n        <ax-switch\r\n          class=\"ax-sm\"\r\n          [ngModel]=\"item.visible\"\r\n          (onValueChanged)=\"handleVisibilityChange($event, item.name)\"\r\n        ></ax-switch>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n<ax-footer class=\"!ax-justify-start ax-absolute ax-bottom-0 ax-w-full\">\r\n  <ax-button text=\"Apply\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\r\n  <ax-button text=\"Reset\" color=\"ghost\" (onClick)=\"handleResetClick()\"></ax-button>\r\n</ax-footer>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i4$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i8.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "directive", type: i15.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i15.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i15.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: AXPListViewOptionsColumnsComponent, selector: "axp-list-view-option-columns", inputs: { loader: "loader" }, outputs: { onClosed: "onClosed" }, ngImport: i0, template: "<ax-header class=\"ax-flex ax-items-center\">\n  <h2 class=\"ax-text-xl ax-font-bold\">Columns</h2>\n  <ax-button (onClick)=\"handleClose()\" [look]=\"'blank'\">\n    <ax-icon class=\"fa-solid fa-close ax-text-neutral-400 ax-text-xl\"> </ax-icon>\n  </ax-button>\n</ax-header>\n<div class=\"ax-flex ax-flex-col ax-gap-4 ax-p-4 ax-select-none\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n  <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-max-h-[calc(100vh-280px)] ax-overflow-auto\">\n    <ng-container *ngFor=\"let item of columns$ | async\">\n      <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n        <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\n          <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\n          <p class=\"ax-font-medium ax-text-sm\">{{ item.title }}</p>\n        </div>\n        <ax-switch\n          class=\"ax-sm\"\n          [ngModel]=\"item.visible\"\n          (onValueChanged)=\"handleVisibilityChange($event, item.name)\"\n        ></ax-switch>\n      </div>\n    </ng-container>\n  </div>\n</div>\n<ax-footer class=\"!ax-justify-start ax-absolute ax-bottom-0 ax-w-full\">\n  <ax-button text=\"Apply\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\n  <ax-button text=\"Reset\" color=\"ghost\" (onClick)=\"handleResetClick()\"></ax-button>\n</ax-footer>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "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"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i15.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i15.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPListViewOptionsColumnsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-list-view-option-columns', template: "<ax-header class=\"ax-flex ax-items-center\">\r\n  <h2 class=\"ax-text-xl ax-font-bold\">Columns</h2>\r\n  <ax-button (onClick)=\"handleClose()\" [look]=\"'blank'\">\r\n    <ax-icon class=\"fa-solid fa-close ax-text-neutral-400 ax-text-xl\"> </ax-icon>\r\n  </ax-button>\r\n</ax-header>\r\n<div class=\"ax-flex ax-flex-col ax-gap-4 ax-p-4 ax-select-none\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n  <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-max-h-[calc(100vh-280px)] ax-overflow-auto\">\r\n    <ng-container *ngFor=\"let item of columns$ | async\">\r\n      <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\r\n        <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\r\n          <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\r\n          <p class=\"ax-font-medium ax-text-sm\">{{ item.title }}</p>\r\n        </div>\r\n        <ax-switch\r\n          class=\"ax-sm\"\r\n          [ngModel]=\"item.visible\"\r\n          (onValueChanged)=\"handleVisibilityChange($event, item.name)\"\r\n        ></ax-switch>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n<ax-footer class=\"!ax-justify-start ax-absolute ax-bottom-0 ax-w-full\">\r\n  <ax-button text=\"Apply\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\r\n  <ax-button text=\"Reset\" color=\"ghost\" (onClick)=\"handleResetClick()\"></ax-button>\r\n</ax-footer>\r\n" }]
+            args: [{ selector: 'axp-list-view-option-columns', template: "<ax-header class=\"ax-flex ax-items-center\">\n  <h2 class=\"ax-text-xl ax-font-bold\">Columns</h2>\n  <ax-button (onClick)=\"handleClose()\" [look]=\"'blank'\">\n    <ax-icon class=\"fa-solid fa-close ax-text-neutral-400 ax-text-xl\"> </ax-icon>\n  </ax-button>\n</ax-header>\n<div class=\"ax-flex ax-flex-col ax-gap-4 ax-p-4 ax-select-none\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n  <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-max-h-[calc(100vh-280px)] ax-overflow-auto\">\n    <ng-container *ngFor=\"let item of columns$ | async\">\n      <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n        <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\n          <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\n          <p class=\"ax-font-medium ax-text-sm\">{{ item.title }}</p>\n        </div>\n        <ax-switch\n          class=\"ax-sm\"\n          [ngModel]=\"item.visible\"\n          (onValueChanged)=\"handleVisibilityChange($event, item.name)\"\n        ></ax-switch>\n      </div>\n    </ng-container>\n  </div>\n</div>\n<ax-footer class=\"!ax-justify-start ax-absolute ax-bottom-0 ax-w-full\">\n  <ax-button text=\"Apply\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\n  <ax-button text=\"Reset\" color=\"ghost\" (onClick)=\"handleResetClick()\"></ax-button>\n</ax-footer>\n" }]
         }], propDecorators: { loader: [{
                 type: Input
             }], onClosed: [{
@@ -368,11 +368,11 @@ class AXPListViewOptionConditionsComponent {
         this.onClosed.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPListViewOptionConditionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AXPListViewOptionConditionsComponent, selector: "axp-list-view-option-conditions", inputs: { loader: "loader" }, outputs: { onClosed: "onClosed" }, ngImport: i0, template: "<ax-header class=\"ax-flex ax-items-center\">\r\n  <h2 class=\"ax-text-xl ax-font-bold\">Filters</h2>\r\n  <ax-button (onClick)=\"handleClose()\" [look]=\"'blank'\">\r\n    <ax-icon class=\"fa-solid fa-close ax-text-neutral-400 ax-text-xl\"> </ax-icon>\r\n  </ax-button>\r\n</ax-header>\r\n<div\r\n  class=\"ax-flex ax-flex-col ax-justify-center ax-gap-4 ax-py-4 ax-select-none\"\r\n  [class.ax-h-[calc(100vh-310px)]]=\"!(conditions$ | async)?.length\"\r\n>\r\n  @if(!(conditions$ | async)?.length){\r\n  <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\r\n    <ax-image src=\"assets/documents.svg\"></ax-image>\r\n    <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">No Filters Selected</p>\r\n    <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\">Please select field(s) that you want to filter</span>\r\n  </div>\r\n  } @else {\r\n  <div class=\"ax-sorted-list ax-max-h-[calc(100vh-310px)] ax-px-4 ax-py-1 ax-overflow-auto\">\r\n    <div cdkDropList (cdkDropListDropped)=\"drop($event)\" class=\"ax-flex ax-flex-col ax-gap-2\">\r\n      @for(item of conditions$ | async; track item.name ){\r\n      <div cdkDrag cdkDragBoundary=\".ax-sorted-list\">\r\n        <div class=\"ax-ms-4 ax-flex ax-items-start ax-gap-2\">\r\n          <ax-label>{{ loader.getProp(item.name)?.title }}</ax-label>\r\n          @if(getOperatorTitle(item.name,item.operator)){\r\n          <ax-badge\r\n            class=\"ax-text-xs\"\r\n            color=\"primary\"\r\n            [look]=\"'twotone'\"\r\n            [text]=\"getOperatorTitle(item.name, item.operator)\"\r\n          ></ax-badge>\r\n          }\r\n        </div>\r\n        <div class=\"ax-flex ax-group ax-items-center ax-gap-2\">\r\n          <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\r\n          <div class=\"ax-w-full\">\r\n            <!-- <ax-text-box [(ngModel)]=\"item.value\"></ax-text-box> -->\r\n            <axp-widget-filter-renderer\r\n              [schema]=\"getSchema(item.name)\"\r\n              [prop]=\"loader.getProp(item.name)\"\r\n              [(value)]=\"item.value\"\r\n              [(operator)]=\"item.operator\"\r\n            >\r\n            </axp-widget-filter-renderer>\r\n          </div>\r\n          <ax-button look=\"blank\" color=\"danger\" class=\"ax-sm\" (onClick)=\"handleRemoveCondition(item)\">\r\n            <ax-icon class=\"fa-solid fa-trash-can\"></ax-icon>\r\n          </ax-button>\r\n        </div>\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n  <div class=\"ax-flex ax-gap-2\">\r\n    <div class=\"ax-w-full\" #addField>\r\n      @if((conditions$ | async)?.length){\r\n      <ax-button color=\"primary\" text=\"Add field\" look=\"blank\" class=\"ax-sm\"></ax-button>\r\n      }@else {\r\n      <div class=\"ax-flex ax-justify-center ax-w-full\">\r\n        <ax-button color=\"primary\" text=\"Add field\" look=\"outline\" class=\"ax-md ax-w-56\"></ax-button>\r\n      </div>\r\n      }\r\n    </div>\r\n    <ax-popover\r\n      #fieldsPopover\r\n      [target]=\"addField\"\r\n      [openOn]=\"'toggle'\"\r\n      [closeOn]=\"'clickOut'\"\r\n      [adaptivityEnabled]=\"true\"\r\n      (onOpened)=\"resetSelectedFieldNames()\"\r\n      [offsetX]=\"15\"\r\n    >\r\n      <div class=\"ax-bg-surface ax-border ax-border-default ax-rounded-md ax-shadow-md ax-w-full ax-min-w-[250px]\">\r\n        <div class=\"ax-border-b-[1px] ax-pb-2 ax-mb-2 ax-p-3\">\r\n          <ax-title class=\"ax-font-bold\">Fields</ax-title>\r\n        </div>\r\n        <div class=\"ax-max-h-72 2xl:ax-max-h-80 ax-overflow-auto\">\r\n          <ax-selection-list\r\n            [valueField]=\"'name'\"\r\n            [textField]=\"'title'\"\r\n            [(ngModel)]=\"selectedFieldNames\"\r\n            [direction]=\"'vertical'\"\r\n            [items]=\"props\"\r\n            [multiple]=\"true\"\r\n          ></ax-selection-list>\r\n        </div>\r\n        <div class=\"ax-flex ax-justify-end ax-border-t-[1px] ax-p-3\">\r\n          <ax-button (onClick)=\"onConfirmFields(); fieldsPopover.close()\" class=\"ax-sm\" text=\"Confirm\" color=\"primary\">\r\n          </ax-button>\r\n        </div>\r\n      </div>\r\n    </ax-popover>\r\n  </div>\r\n</div>\r\n<ax-footer class=\"!ax-justify-start ax-absolute ax-bottom-0 ax-w-full\">\r\n  <ax-button text=\"Apply\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\r\n  <ax-button text=\"Reset\" color=\"ghost\" (onClick)=\"handleResetClick()\"></ax-button>\r\n</ax-footer>\r\n", dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i4$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i5.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: i6.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i7.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: i7$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: i13.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "hintField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "directive", type: i15.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i15.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i15.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i10$1.AXPWidgetFilterRendererComponent, selector: "axp-widget-filter-renderer", inputs: ["value", "operator", "prop", "schema"], outputs: ["valueChange", "operatorChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AXPListViewOptionConditionsComponent, selector: "axp-list-view-option-conditions", inputs: { loader: "loader" }, outputs: { onClosed: "onClosed" }, ngImport: i0, template: "<ax-header class=\"ax-flex ax-items-center\">\n  <h2 class=\"ax-text-xl ax-font-bold\">Filters</h2>\n  <ax-button (onClick)=\"handleClose()\" [look]=\"'blank'\">\n    <ax-icon class=\"fa-solid fa-close ax-text-neutral-400 ax-text-xl\"> </ax-icon>\n  </ax-button>\n</ax-header>\n<div\n  class=\"ax-flex ax-flex-col ax-justify-center ax-gap-4 ax-py-4 ax-select-none\"\n  [class.ax-h-[calc(100vh-310px)]]=\"!(conditions$ | async)?.length\"\n>\n  @if(!(conditions$ | async)?.length){\n  <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\n    <ax-image src=\"assets/documents.svg\"></ax-image>\n    <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">No Filters Selected</p>\n    <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\">Please select field(s) that you want to filter</span>\n  </div>\n  } @else {\n  <div class=\"ax-sorted-list ax-max-h-[calc(100vh-310px)] ax-px-4 ax-py-1 ax-overflow-auto\">\n    <div cdkDropList (cdkDropListDropped)=\"drop($event)\" class=\"ax-flex ax-flex-col ax-gap-2\">\n      @for(item of conditions$ | async; track item.name ){\n      <div cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n        <div class=\"ax-ms-4 ax-flex ax-items-start ax-gap-2\">\n          <ax-label>{{ loader.getProp(item.name)?.title }}</ax-label>\n          @if(getOperatorTitle(item.name,item.operator)){\n          <ax-badge\n            class=\"ax-text-xs\"\n            color=\"primary\"\n            [look]=\"'twotone'\"\n            [text]=\"getOperatorTitle(item.name, item.operator)\"\n          ></ax-badge>\n          }\n        </div>\n        <div class=\"ax-flex ax-group ax-items-center ax-gap-2\">\n          <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\n          <div class=\"ax-w-full\">\n            <!-- <ax-text-box [(ngModel)]=\"item.value\"></ax-text-box> -->\n            <axp-widget-filter-renderer\n              [schema]=\"getSchema(item.name)\"\n              [prop]=\"loader.getProp(item.name)\"\n              [(value)]=\"item.value\"\n              [(operator)]=\"item.operator\"\n            >\n            </axp-widget-filter-renderer>\n          </div>\n          <ax-button look=\"blank\" color=\"danger\" class=\"ax-sm\" (onClick)=\"handleRemoveCondition(item)\">\n            <ax-icon class=\"fa-solid fa-trash-can\"></ax-icon>\n          </ax-button>\n        </div>\n      </div>\n      }\n    </div>\n  </div>\n  }\n  <div class=\"ax-flex ax-gap-2\">\n    <div class=\"ax-w-full\" #addField>\n      @if((conditions$ | async)?.length){\n      <ax-button color=\"primary\" text=\"Add field\" look=\"blank\" class=\"ax-sm\"></ax-button>\n      }@else {\n      <div class=\"ax-flex ax-justify-center ax-w-full\">\n        <ax-button color=\"primary\" text=\"Add field\" look=\"outline\" class=\"ax-md ax-w-56\"></ax-button>\n      </div>\n      }\n    </div>\n    <ax-popover\n      #fieldsPopover\n      [target]=\"addField\"\n      [openOn]=\"'toggle'\"\n      [closeOn]=\"'clickOut'\"\n      [adaptivityEnabled]=\"true\"\n      (onOpened)=\"resetSelectedFieldNames()\"\n      [offsetX]=\"15\"\n    >\n      <div class=\"ax-bg-surface ax-border ax-border-default ax-rounded-md ax-shadow-md ax-w-full ax-min-w-[250px]\">\n        <div class=\"ax-border-b-[1px] ax-pb-2 ax-mb-2 ax-p-3\">\n          <ax-title class=\"ax-font-bold\">Fields</ax-title>\n        </div>\n        <div class=\"ax-max-h-72 2xl:ax-max-h-80 ax-overflow-auto\">\n          <ax-selection-list\n            [valueField]=\"'name'\"\n            [textField]=\"'title'\"\n            [(ngModel)]=\"selectedFieldNames\"\n            [direction]=\"'vertical'\"\n            [items]=\"props\"\n            [multiple]=\"true\"\n          ></ax-selection-list>\n        </div>\n        <div class=\"ax-flex ax-justify-end ax-border-t-[1px] ax-p-3\">\n          <ax-button (onClick)=\"onConfirmFields(); fieldsPopover.close()\" class=\"ax-sm\" text=\"Confirm\" color=\"primary\">\n          </ax-button>\n        </div>\n      </div>\n    </ax-popover>\n  </div>\n</div>\n<ax-footer class=\"!ax-justify-start ax-absolute ax-bottom-0 ax-w-full\">\n  <ax-button text=\"Apply\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\n  <ax-button text=\"Reset\" color=\"ghost\" (onClick)=\"handleResetClick()\"></ax-button>\n</ax-footer>\n", dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "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"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i15.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i15.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i10$1.AXPWidgetFilterRendererComponent, selector: "axp-widget-filter-renderer", inputs: ["value", "operator", "prop", "schema"], outputs: ["valueChange", "operatorChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPListViewOptionConditionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-list-view-option-conditions', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ax-header class=\"ax-flex ax-items-center\">\r\n  <h2 class=\"ax-text-xl ax-font-bold\">Filters</h2>\r\n  <ax-button (onClick)=\"handleClose()\" [look]=\"'blank'\">\r\n    <ax-icon class=\"fa-solid fa-close ax-text-neutral-400 ax-text-xl\"> </ax-icon>\r\n  </ax-button>\r\n</ax-header>\r\n<div\r\n  class=\"ax-flex ax-flex-col ax-justify-center ax-gap-4 ax-py-4 ax-select-none\"\r\n  [class.ax-h-[calc(100vh-310px)]]=\"!(conditions$ | async)?.length\"\r\n>\r\n  @if(!(conditions$ | async)?.length){\r\n  <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\r\n    <ax-image src=\"assets/documents.svg\"></ax-image>\r\n    <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">No Filters Selected</p>\r\n    <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\">Please select field(s) that you want to filter</span>\r\n  </div>\r\n  } @else {\r\n  <div class=\"ax-sorted-list ax-max-h-[calc(100vh-310px)] ax-px-4 ax-py-1 ax-overflow-auto\">\r\n    <div cdkDropList (cdkDropListDropped)=\"drop($event)\" class=\"ax-flex ax-flex-col ax-gap-2\">\r\n      @for(item of conditions$ | async; track item.name ){\r\n      <div cdkDrag cdkDragBoundary=\".ax-sorted-list\">\r\n        <div class=\"ax-ms-4 ax-flex ax-items-start ax-gap-2\">\r\n          <ax-label>{{ loader.getProp(item.name)?.title }}</ax-label>\r\n          @if(getOperatorTitle(item.name,item.operator)){\r\n          <ax-badge\r\n            class=\"ax-text-xs\"\r\n            color=\"primary\"\r\n            [look]=\"'twotone'\"\r\n            [text]=\"getOperatorTitle(item.name, item.operator)\"\r\n          ></ax-badge>\r\n          }\r\n        </div>\r\n        <div class=\"ax-flex ax-group ax-items-center ax-gap-2\">\r\n          <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\r\n          <div class=\"ax-w-full\">\r\n            <!-- <ax-text-box [(ngModel)]=\"item.value\"></ax-text-box> -->\r\n            <axp-widget-filter-renderer\r\n              [schema]=\"getSchema(item.name)\"\r\n              [prop]=\"loader.getProp(item.name)\"\r\n              [(value)]=\"item.value\"\r\n              [(operator)]=\"item.operator\"\r\n            >\r\n            </axp-widget-filter-renderer>\r\n          </div>\r\n          <ax-button look=\"blank\" color=\"danger\" class=\"ax-sm\" (onClick)=\"handleRemoveCondition(item)\">\r\n            <ax-icon class=\"fa-solid fa-trash-can\"></ax-icon>\r\n          </ax-button>\r\n        </div>\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n  <div class=\"ax-flex ax-gap-2\">\r\n    <div class=\"ax-w-full\" #addField>\r\n      @if((conditions$ | async)?.length){\r\n      <ax-button color=\"primary\" text=\"Add field\" look=\"blank\" class=\"ax-sm\"></ax-button>\r\n      }@else {\r\n      <div class=\"ax-flex ax-justify-center ax-w-full\">\r\n        <ax-button color=\"primary\" text=\"Add field\" look=\"outline\" class=\"ax-md ax-w-56\"></ax-button>\r\n      </div>\r\n      }\r\n    </div>\r\n    <ax-popover\r\n      #fieldsPopover\r\n      [target]=\"addField\"\r\n      [openOn]=\"'toggle'\"\r\n      [closeOn]=\"'clickOut'\"\r\n      [adaptivityEnabled]=\"true\"\r\n      (onOpened)=\"resetSelectedFieldNames()\"\r\n      [offsetX]=\"15\"\r\n    >\r\n      <div class=\"ax-bg-surface ax-border ax-border-default ax-rounded-md ax-shadow-md ax-w-full ax-min-w-[250px]\">\r\n        <div class=\"ax-border-b-[1px] ax-pb-2 ax-mb-2 ax-p-3\">\r\n          <ax-title class=\"ax-font-bold\">Fields</ax-title>\r\n        </div>\r\n        <div class=\"ax-max-h-72 2xl:ax-max-h-80 ax-overflow-auto\">\r\n          <ax-selection-list\r\n            [valueField]=\"'name'\"\r\n            [textField]=\"'title'\"\r\n            [(ngModel)]=\"selectedFieldNames\"\r\n            [direction]=\"'vertical'\"\r\n            [items]=\"props\"\r\n            [multiple]=\"true\"\r\n          ></ax-selection-list>\r\n        </div>\r\n        <div class=\"ax-flex ax-justify-end ax-border-t-[1px] ax-p-3\">\r\n          <ax-button (onClick)=\"onConfirmFields(); fieldsPopover.close()\" class=\"ax-sm\" text=\"Confirm\" color=\"primary\">\r\n          </ax-button>\r\n        </div>\r\n      </div>\r\n    </ax-popover>\r\n  </div>\r\n</div>\r\n<ax-footer class=\"!ax-justify-start ax-absolute ax-bottom-0 ax-w-full\">\r\n  <ax-button text=\"Apply\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\r\n  <ax-button text=\"Reset\" color=\"ghost\" (onClick)=\"handleResetClick()\"></ax-button>\r\n</ax-footer>\r\n" }]
+            args: [{ selector: 'axp-list-view-option-conditions', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ax-header class=\"ax-flex ax-items-center\">\n  <h2 class=\"ax-text-xl ax-font-bold\">Filters</h2>\n  <ax-button (onClick)=\"handleClose()\" [look]=\"'blank'\">\n    <ax-icon class=\"fa-solid fa-close ax-text-neutral-400 ax-text-xl\"> </ax-icon>\n  </ax-button>\n</ax-header>\n<div\n  class=\"ax-flex ax-flex-col ax-justify-center ax-gap-4 ax-py-4 ax-select-none\"\n  [class.ax-h-[calc(100vh-310px)]]=\"!(conditions$ | async)?.length\"\n>\n  @if(!(conditions$ | async)?.length){\n  <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\n    <ax-image src=\"assets/documents.svg\"></ax-image>\n    <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">No Filters Selected</p>\n    <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\">Please select field(s) that you want to filter</span>\n  </div>\n  } @else {\n  <div class=\"ax-sorted-list ax-max-h-[calc(100vh-310px)] ax-px-4 ax-py-1 ax-overflow-auto\">\n    <div cdkDropList (cdkDropListDropped)=\"drop($event)\" class=\"ax-flex ax-flex-col ax-gap-2\">\n      @for(item of conditions$ | async; track item.name ){\n      <div cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n        <div class=\"ax-ms-4 ax-flex ax-items-start ax-gap-2\">\n          <ax-label>{{ loader.getProp(item.name)?.title }}</ax-label>\n          @if(getOperatorTitle(item.name,item.operator)){\n          <ax-badge\n            class=\"ax-text-xs\"\n            color=\"primary\"\n            [look]=\"'twotone'\"\n            [text]=\"getOperatorTitle(item.name, item.operator)\"\n          ></ax-badge>\n          }\n        </div>\n        <div class=\"ax-flex ax-group ax-items-center ax-gap-2\">\n          <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\n          <div class=\"ax-w-full\">\n            <!-- <ax-text-box [(ngModel)]=\"item.value\"></ax-text-box> -->\n            <axp-widget-filter-renderer\n              [schema]=\"getSchema(item.name)\"\n              [prop]=\"loader.getProp(item.name)\"\n              [(value)]=\"item.value\"\n              [(operator)]=\"item.operator\"\n            >\n            </axp-widget-filter-renderer>\n          </div>\n          <ax-button look=\"blank\" color=\"danger\" class=\"ax-sm\" (onClick)=\"handleRemoveCondition(item)\">\n            <ax-icon class=\"fa-solid fa-trash-can\"></ax-icon>\n          </ax-button>\n        </div>\n      </div>\n      }\n    </div>\n  </div>\n  }\n  <div class=\"ax-flex ax-gap-2\">\n    <div class=\"ax-w-full\" #addField>\n      @if((conditions$ | async)?.length){\n      <ax-button color=\"primary\" text=\"Add field\" look=\"blank\" class=\"ax-sm\"></ax-button>\n      }@else {\n      <div class=\"ax-flex ax-justify-center ax-w-full\">\n        <ax-button color=\"primary\" text=\"Add field\" look=\"outline\" class=\"ax-md ax-w-56\"></ax-button>\n      </div>\n      }\n    </div>\n    <ax-popover\n      #fieldsPopover\n      [target]=\"addField\"\n      [openOn]=\"'toggle'\"\n      [closeOn]=\"'clickOut'\"\n      [adaptivityEnabled]=\"true\"\n      (onOpened)=\"resetSelectedFieldNames()\"\n      [offsetX]=\"15\"\n    >\n      <div class=\"ax-bg-surface ax-border ax-border-default ax-rounded-md ax-shadow-md ax-w-full ax-min-w-[250px]\">\n        <div class=\"ax-border-b-[1px] ax-pb-2 ax-mb-2 ax-p-3\">\n          <ax-title class=\"ax-font-bold\">Fields</ax-title>\n        </div>\n        <div class=\"ax-max-h-72 2xl:ax-max-h-80 ax-overflow-auto\">\n          <ax-selection-list\n            [valueField]=\"'name'\"\n            [textField]=\"'title'\"\n            [(ngModel)]=\"selectedFieldNames\"\n            [direction]=\"'vertical'\"\n            [items]=\"props\"\n            [multiple]=\"true\"\n          ></ax-selection-list>\n        </div>\n        <div class=\"ax-flex ax-justify-end ax-border-t-[1px] ax-p-3\">\n          <ax-button (onClick)=\"onConfirmFields(); fieldsPopover.close()\" class=\"ax-sm\" text=\"Confirm\" color=\"primary\">\n          </ax-button>\n        </div>\n      </div>\n    </ax-popover>\n  </div>\n</div>\n<ax-footer class=\"!ax-justify-start ax-absolute ax-bottom-0 ax-w-full\">\n  <ax-button text=\"Apply\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\n  <ax-button text=\"Reset\" color=\"ghost\" (onClick)=\"handleResetClick()\"></ax-button>\n</ax-footer>\n" }]
         }], ctorParameters: () => [], propDecorators: { onClosed: [{
                 type: Output
             }], loader: [{
@@ -410,30 +410,30 @@ class AXPListViewOptionFilterOperatorComponent {
         this.valueChange.emit(v);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPListViewOptionFilterOperatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: AXPListViewOptionFilterOperatorComponent, selector: "axp-list-view-option-filter-operator", inputs: { items: "items", value: "value" }, outputs: { valueChange: "valueChange" }, host: { styleAttribute: "display: contents;" }, viewQueries: [{ propertyName: "selectBox", first: true, predicate: AXSelectBoxComponent, descendants: true }], ngImport: i0, template: `
-    <ax-select-box
-      valueField="name"
-      [dataSource]="items"
-      textField="title"
-      [(ngModel)]="value"
-      *ngIf="visible"
-    >
-    </ax-select-box>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: AXPListViewOptionFilterOperatorComponent, selector: "axp-list-view-option-filter-operator", inputs: { items: "items", value: "value" }, outputs: { valueChange: "valueChange" }, host: { styleAttribute: "display: contents;" }, viewQueries: [{ propertyName: "selectBox", first: true, predicate: AXSelectBoxComponent, descendants: true }], ngImport: i0, template: `
+    <ax-select-box
+      valueField="name"
+      [dataSource]="items"
+      textField="title"
+      [(ngModel)]="value"
+      *ngIf="visible"
+    >
+    </ax-select-box>
   `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i10.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: 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>
+                    template: `
+    <ax-select-box
+      valueField="name"
+      [dataSource]="items"
+      textField="title"
+      [(ngModel)]="value"
+      *ngIf="visible"
+    >
+    </ax-select-box>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { style: 'display: contents;' },
@@ -482,11 +482,11 @@ class AXPListViewOptionSortingComponent {
         this.onClosed.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPListViewOptionSortingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AXPListViewOptionSortingComponent, selector: "axp-list-view-option-sorting", inputs: { loader: "loader" }, outputs: { onClosed: "onClosed" }, ngImport: i0, template: "<ax-header class=\"ax-flex ax-items-center\">\r\n  <h2 class=\"ax-text-xl ax-font-bold\">Sorts</h2>\r\n  <ax-button (onClick)=\"handleClose()\" [look]=\"'blank'\">\r\n    <ax-icon class=\"fa-solid fa-close ax-text-neutral-400 ax-text-xl\"> </ax-icon>\r\n  </ax-button>\r\n</ax-header>\r\n<div\r\n  class=\"ax-flex ax-p-4 ax-flex-col ax-justify-center ax-gap-4 ax-select-none\"\r\n  [class.ax-h-[calc(100vh-310px)]]=\"!(sorts$ | async)?.length\"\r\n>\r\n  @if(!(sorts$ | async)?.length){\r\n  <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\r\n    <ax-image src=\"assets/documents.svg\"></ax-image>\r\n    <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">No Sorts Selected</p>\r\n    <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\">Please select field(s) that you want to sort</span>\r\n  </div>\r\n  }\r\n  <div\r\n    cdkDropList\r\n    (cdkDropListDropped)=\"drop($event)\"\r\n    class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-py-1 ax-max-h-[calc(100vh-310px)] ax-overflow-auto\"\r\n  >\r\n    <ng-container *ngFor=\"let item of sorts$ | async\">\r\n      <div class=\"ax-flex ax-gap-2 ax-items-center\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\r\n        <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\r\n        <ax-select-box\r\n          [dataSource]=\"(props$ | async) ?? []\"\r\n          valueField=\"name\"\r\n          textField=\"title\"\r\n          [(ngModel)]=\"item.name\"\r\n        >\r\n        </ax-select-box>\r\n        <ax-button [color]=\"'default'\" class=\"ax-sm\" (click)=\"changeItemSort(item)\">\r\n          <ax-icon\r\n            [class.ax-text-primary]=\"item.dir == 'asc'\"\r\n            class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"\r\n          ></ax-icon>\r\n          <ax-icon\r\n            [class.ax-text-primary]=\"item.dir == 'desc'\"\r\n            class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"\r\n          ></ax-icon>\r\n        </ax-button>\r\n\r\n        <ax-button look=\"blank\" (onClick)=\"loader.removeSort(item)\">\r\n          <ax-icon class=\"fa-solid fa-trash-can ax-text-danger-500\"></ax-icon>\r\n        </ax-button>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <div class=\"ax-flex ax-gap-2\">\r\n    <div class=\"ax-w-full\" #addField>\r\n      @if((sorts$ | async)?.length){\r\n      <ax-button (onClick)=\"loader.addSort()\" color=\"primary\" text=\"Add field\" look=\"blank\" class=\"ax-sm\"></ax-button>\r\n      }@else {\r\n      <div class=\"ax-flex ax-justify-center ax-w-full\">\r\n        <ax-button\r\n          (onClick)=\"loader.addSort()\"\r\n          color=\"primary\"\r\n          text=\"Add field\"\r\n          look=\"outline\"\r\n          class=\"ax-md ax-w-56\"\r\n        ></ax-button>\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n<ax-footer class=\"!ax-justify-start ax-absolute ax-bottom-0 ax-w-full\">\r\n  <ax-button text=\"Apply\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\r\n  <ax-button text=\"Reset\" color=\"ghost\" (onClick)=\"handleResetClick()\"></ax-button>\r\n</ax-footer>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i4$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i7.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: i10.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "directive", type: i15.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i15.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i15.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AXPListViewOptionSortingComponent, selector: "axp-list-view-option-sorting", inputs: { loader: "loader" }, outputs: { onClosed: "onClosed" }, ngImport: i0, template: "<ax-header class=\"ax-flex ax-items-center\">\n  <h2 class=\"ax-text-xl ax-font-bold\">Sorts</h2>\n  <ax-button (onClick)=\"handleClose()\" [look]=\"'blank'\">\n    <ax-icon class=\"fa-solid fa-close ax-text-neutral-400 ax-text-xl\"> </ax-icon>\n  </ax-button>\n</ax-header>\n<div\n  class=\"ax-flex ax-p-4 ax-flex-col ax-justify-center ax-gap-4 ax-select-none\"\n  [class.ax-h-[calc(100vh-310px)]]=\"!(sorts$ | async)?.length\"\n>\n  @if(!(sorts$ | async)?.length){\n  <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\n    <ax-image src=\"assets/documents.svg\"></ax-image>\n    <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">No Sorts Selected</p>\n    <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\">Please select field(s) that you want to sort</span>\n  </div>\n  }\n  <div\n    cdkDropList\n    (cdkDropListDropped)=\"drop($event)\"\n    class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-py-1 ax-max-h-[calc(100vh-310px)] ax-overflow-auto\"\n  >\n    <ng-container *ngFor=\"let item of sorts$ | async\">\n      <div class=\"ax-flex ax-gap-2 ax-items-center\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n        <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\n        <ax-select-box\n          [dataSource]=\"(props$ | async) ?? []\"\n          valueField=\"name\"\n          textField=\"title\"\n          [(ngModel)]=\"item.name\"\n        >\n        </ax-select-box>\n        <ax-button [color]=\"'default'\" class=\"ax-sm\" (click)=\"changeItemSort(item)\">\n          <ax-icon\n            [class.ax-text-primary]=\"item.dir == 'asc'\"\n            class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"\n          ></ax-icon>\n          <ax-icon\n            [class.ax-text-primary]=\"item.dir == 'desc'\"\n            class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"\n          ></ax-icon>\n        </ax-button>\n\n        <ax-button look=\"blank\" (onClick)=\"loader.removeSort(item)\">\n          <ax-icon class=\"fa-solid fa-trash-can ax-text-danger-500\"></ax-icon>\n        </ax-button>\n      </div>\n    </ng-container>\n  </div>\n\n  <div class=\"ax-flex ax-gap-2\">\n    <div class=\"ax-w-full\" #addField>\n      @if((sorts$ | async)?.length){\n      <ax-button (onClick)=\"loader.addSort()\" color=\"primary\" text=\"Add field\" look=\"blank\" class=\"ax-sm\"></ax-button>\n      }@else {\n      <div class=\"ax-flex ax-justify-center ax-w-full\">\n        <ax-button\n          (onClick)=\"loader.addSort()\"\n          color=\"primary\"\n          text=\"Add field\"\n          look=\"outline\"\n          class=\"ax-md ax-w-56\"\n        ></ax-button>\n      </div>\n      }\n    </div>\n  </div>\n</div>\n<ax-footer class=\"!ax-justify-start ax-absolute ax-bottom-0 ax-w-full\">\n  <ax-button text=\"Apply\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\n  <ax-button text=\"Reset\" color=\"ghost\" (onClick)=\"handleResetClick()\"></ax-button>\n</ax-footer>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "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", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "directive", type: i15.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i15.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i15.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPListViewOptionSortingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-list-view-option-sorting', template: "<ax-header class=\"ax-flex ax-items-center\">\r\n  <h2 class=\"ax-text-xl ax-font-bold\">Sorts</h2>\r\n  <ax-button (onClick)=\"handleClose()\" [look]=\"'blank'\">\r\n    <ax-icon class=\"fa-solid fa-close ax-text-neutral-400 ax-text-xl\"> </ax-icon>\r\n  </ax-button>\r\n</ax-header>\r\n<div\r\n  class=\"ax-flex ax-p-4 ax-flex-col ax-justify-center ax-gap-4 ax-select-none\"\r\n  [class.ax-h-[calc(100vh-310px)]]=\"!(sorts$ | async)?.length\"\r\n>\r\n  @if(!(sorts$ | async)?.length){\r\n  <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\r\n    <ax-image src=\"assets/documents.svg\"></ax-image>\r\n    <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">No Sorts Selected</p>\r\n    <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\">Please select field(s) that you want to sort</span>\r\n  </div>\r\n  }\r\n  <div\r\n    cdkDropList\r\n    (cdkDropListDropped)=\"drop($event)\"\r\n    class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-py-1 ax-max-h-[calc(100vh-310px)] ax-overflow-auto\"\r\n  >\r\n    <ng-container *ngFor=\"let item of sorts$ | async\">\r\n      <div class=\"ax-flex ax-gap-2 ax-items-center\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\r\n        <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\r\n        <ax-select-box\r\n          [dataSource]=\"(props$ | async) ?? []\"\r\n          valueField=\"name\"\r\n          textField=\"title\"\r\n          [(ngModel)]=\"item.name\"\r\n        >\r\n        </ax-select-box>\r\n        <ax-button [color]=\"'default'\" class=\"ax-sm\" (click)=\"changeItemSort(item)\">\r\n          <ax-icon\r\n            [class.ax-text-primary]=\"item.dir == 'asc'\"\r\n            class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"\r\n          ></ax-icon>\r\n          <ax-icon\r\n            [class.ax-text-primary]=\"item.dir == 'desc'\"\r\n            class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"\r\n          ></ax-icon>\r\n        </ax-button>\r\n\r\n        <ax-button look=\"blank\" (onClick)=\"loader.removeSort(item)\">\r\n          <ax-icon class=\"fa-solid fa-trash-can ax-text-danger-500\"></ax-icon>\r\n        </ax-button>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <div class=\"ax-flex ax-gap-2\">\r\n    <div class=\"ax-w-full\" #addField>\r\n      @if((sorts$ | async)?.length){\r\n      <ax-button (onClick)=\"loader.addSort()\" color=\"primary\" text=\"Add field\" look=\"blank\" class=\"ax-sm\"></ax-button>\r\n      }@else {\r\n      <div class=\"ax-flex ax-justify-center ax-w-full\">\r\n        <ax-button\r\n          (onClick)=\"loader.addSort()\"\r\n          color=\"primary\"\r\n          text=\"Add field\"\r\n          look=\"outline\"\r\n          class=\"ax-md ax-w-56\"\r\n        ></ax-button>\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n<ax-footer class=\"!ax-justify-start ax-absolute ax-bottom-0 ax-w-full\">\r\n  <ax-button text=\"Apply\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\r\n  <ax-button text=\"Reset\" color=\"ghost\" (onClick)=\"handleResetClick()\"></ax-button>\r\n</ax-footer>\r\n" }]
+            args: [{ selector: 'axp-list-view-option-sorting', template: "<ax-header class=\"ax-flex ax-items-center\">\n  <h2 class=\"ax-text-xl ax-font-bold\">Sorts</h2>\n  <ax-button (onClick)=\"handleClose()\" [look]=\"'blank'\">\n    <ax-icon class=\"fa-solid fa-close ax-text-neutral-400 ax-text-xl\"> </ax-icon>\n  </ax-button>\n</ax-header>\n<div\n  class=\"ax-flex ax-p-4 ax-flex-col ax-justify-center ax-gap-4 ax-select-none\"\n  [class.ax-h-[calc(100vh-310px)]]=\"!(sorts$ | async)?.length\"\n>\n  @if(!(sorts$ | async)?.length){\n  <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\n    <ax-image src=\"assets/documents.svg\"></ax-image>\n    <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">No Sorts Selected</p>\n    <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\">Please select field(s) that you want to sort</span>\n  </div>\n  }\n  <div\n    cdkDropList\n    (cdkDropListDropped)=\"drop($event)\"\n    class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-py-1 ax-max-h-[calc(100vh-310px)] ax-overflow-auto\"\n  >\n    <ng-container *ngFor=\"let item of sorts$ | async\">\n      <div class=\"ax-flex ax-gap-2 ax-items-center\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n        <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\n        <ax-select-box\n          [dataSource]=\"(props$ | async) ?? []\"\n          valueField=\"name\"\n          textField=\"title\"\n          [(ngModel)]=\"item.name\"\n        >\n        </ax-select-box>\n        <ax-button [color]=\"'default'\" class=\"ax-sm\" (click)=\"changeItemSort(item)\">\n          <ax-icon\n            [class.ax-text-primary]=\"item.dir == 'asc'\"\n            class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"\n          ></ax-icon>\n          <ax-icon\n            [class.ax-text-primary]=\"item.dir == 'desc'\"\n            class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"\n          ></ax-icon>\n        </ax-button>\n\n        <ax-button look=\"blank\" (onClick)=\"loader.removeSort(item)\">\n          <ax-icon class=\"fa-solid fa-trash-can ax-text-danger-500\"></ax-icon>\n        </ax-button>\n      </div>\n    </ng-container>\n  </div>\n\n  <div class=\"ax-flex ax-gap-2\">\n    <div class=\"ax-w-full\" #addField>\n      @if((sorts$ | async)?.length){\n      <ax-button (onClick)=\"loader.addSort()\" color=\"primary\" text=\"Add field\" look=\"blank\" class=\"ax-sm\"></ax-button>\n      }@else {\n      <div class=\"ax-flex ax-justify-center ax-w-full\">\n        <ax-button\n          (onClick)=\"loader.addSort()\"\n          color=\"primary\"\n          text=\"Add field\"\n          look=\"outline\"\n          class=\"ax-md ax-w-56\"\n        ></ax-button>\n      </div>\n      }\n    </div>\n  </div>\n</div>\n<ax-footer class=\"!ax-justify-start ax-absolute ax-bottom-0 ax-w-full\">\n  <ax-button text=\"Apply\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\n  <ax-button text=\"Reset\" color=\"ghost\" (onClick)=\"handleResetClick()\"></ax-button>\n</ax-footer>\n" }]
         }], propDecorators: { onClosed: [{
                 type: Output
             }], loader: [{
@@ -635,7 +635,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-fkKPKxlb.mjs');
+        const com = await import('./acorex-platform-layouts-entity-create-view.component-Bxkv579D.mjs');
         const result = await this.popupService.open(com.AXPEntityCreateViewComponent, {
             title: `Create New ${entity.title}`,
             size: this.platform.is('Mobile') || this.platform.is('SM') ? 'full' : 'md',
@@ -1076,11 +1076,11 @@ class AXPEntityListViewComponent {
         this.dataSource.reset();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityListViewComponent, deps: [{ token: i1$1.AXActionSheetService }, { token: i2$1.AXUnsubscriber }, { token: i3.AXPlatform }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AXPEntityListViewComponent, selector: "ng-component", providers: [AXUnsubscriber], viewQueries: [{ propertyName: "viewsTemplate", first: true, predicate: ["viewsTemplate"], descendants: true }, { propertyName: "grid", first: true, predicate: ["grid"], descendants: true }, { propertyName: "entityViewDrawer", first: true, predicate: ["entityViewDrawer"], descendants: true }], ngImport: i0, template: "<ax-drawer-container>\r\n  <!-- <ax-drawer #drawer location=\"start\" [collapsed]=\"true\" [mode]=\"platform.is('SM') ? 'overlay' : 'push'\">\r\n    <ax-content class=\"ax-w-64 ax-border-e\">\r\n      <div class=\"ax-p-6 ax-py-4 ax-gap-6 ax-flex ax-flex-col\">\r\n        <p class=\"ax-text-2xl ax-font-bold\">Folders</p>\r\n        <ax-side-menu>\r\n          <ng-container *ngFor=\"let node of menuItems\" [ngTemplateOutlet]=\"sideMenu\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: node }\">\r\n          </ng-container>\r\n        </ax-side-menu>\r\n        <ng-template #sideMenu let-item>\r\n          <ax-side-menu-item [text]=\"item.text\">\r\n            <ax-prefix>\r\n              <ax-icon class=\"fa-solid fa-folder ax-text-warning-500\"></ax-icon>\r\n            </ax-prefix>\r\n            <ng-container *ngIf=\"item.children\">\r\n              <ng-container *ngFor=\"let child of item.children\" [ngTemplateOutlet]=\"sideMenu\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: child }\">\r\n              </ng-container>\r\n            </ng-container>\r\n          </ax-side-menu-item>\r\n        </ng-template>\r\n      </div>\r\n    </ax-content>\r\n  </ax-drawer> -->\r\n  <ax-content class=\"ax-flex ax-flex-col ax-overflow-hidden\">\r\n    <div\r\n      class=\"ax-flex ax-flex-col ax-gap-0 md:ax-gap-4 ax-px-4 ax-py-3 md:ax-py-4 md:ax-px-6 ax-bg-surface ax-border-b md:ax-border-0 md:ax-bg-default\">\r\n      @if(platform.is('MD')){\r\n      <div class=\"ax-flex ax-justify-between ax-mb-4\">\r\n        @if(this.grid?.selectedRows?.length==0){\r\n        <div class=\"ax-text-xl ax-font-bold\">{{ title }}</div>\r\n        <div class=\"ax-flex ax-items-center ax-gap-2\">\r\n          @if(canCreate)\r\n          {\r\n          <ax-button color=\"primary\" class=\"ax-sm\" (onClick)=\"handleCreateClick()\">\r\n            <ax-icon class=\"fa-solid fa-add\"></ax-icon>\r\n          </ax-button>\r\n          }\r\n          <ax-button color=\"ghost\" class=\"ax-sm\" #more>\r\n            <ax-icon class=\"fa-solid fa-ellipsis-vertical\"> </ax-icon>\r\n            <ax-dropdown-panel [adaptivityEnabled]=\"true\">\r\n              <ax-button-item-list>\r\n                <ax-button-item text=\"Export\" class=\"ax-font-semibold\">\r\n                  <ax-prefix>\r\n                    <ax-icon icon=\"fa-solid fa-file-export\"> </ax-icon>\r\n                  </ax-prefix>\r\n                </ax-button-item>\r\n              </ax-button-item-list>\r\n            </ax-dropdown-panel>\r\n          </ax-button>\r\n        </div>\r\n        }@else {\r\n        <div class=\"ax-flex ax-items-center ax-gap-3\">\r\n          <span class=\"ax-text-xl ax-font-bold\"> {{ this.grid?.selectedRows?.length }} Items Selected </span>\r\n          <span (click)=\"clearSelectedItems()\"\r\n            class=\"ax-text-sm ax-text-primary dark:ax-text-primary-300 ax-underline ax-cursor-pointer\">Clear\r\n            Items</span>\r\n        </div>\r\n        <div class=\"ax-flex ax-items-center ax-gap-2\">\r\n          @if(canDelete)\r\n          {\r\n          <ax-button color=\"danger\" class=\"ax-sm\" (onClick)=\"handleCommandClick('delete')\">\r\n            <ax-icon class=\"fa-solid fa-trash\"> </ax-icon>\r\n          </ax-button>\r\n          }\r\n          <ax-button color=\"ghost\" class=\"ax-sm\" #more>\r\n            <ax-icon class=\"fa-solid fa-ellipsis-vertical\"> </ax-icon>\r\n          </ax-button>\r\n        </div>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"ax-flex ax-items-center ax-justify-between\">\r\n        <ax-button [disabled]=\"this.grid?.selectedRows?.length != 0\" [text]=\"(view$ | async)?.title\" color=\"ghost\">\r\n          <ax-icon class=\"fa-solid fa-eye ax-text-neutral-400\"> </ax-icon>\r\n          <ax-suffix>\r\n            <i class=\"fa-solid fa-caret-down\"></i>\r\n          </ax-suffix>\r\n          <ax-dropdown-panel [adaptivityEnabled]=\"true\">\r\n            <ax-button-item-list class=\"ax-bg-surface\">\r\n              <ax-title class=\"ax-font-bold ax-opacity-100\">Public Views</ax-title>\r\n              <ax-button-item *ngFor=\"let v of publicViews$ | async\" [text]=\"v.title\"\r\n                [class.ax-bg-on-surface]=\"(view$ | async) == v\" (onClick)=\"loader.setView(v.name)\"></ax-button-item>\r\n              <ax-title class=\"ax-font-bold ax-opacity-100\" *ngIf=\"hasCustomViews$ | async\">Created by me</ax-title>\r\n              <ax-button-item *ngFor=\"let v of customViews$ | async\" [text]=\"v.title\"\r\n                [class.ax-bg-on-surface]=\"(view$ | async) == v\" (onClick)=\"loader.setView(v.name)\"></ax-button-item>\r\n              <ng-container *feature=\"'axp-entity-list-custom-view'\">\r\n                <ax-divider></ax-divider>\r\n                <ax-button-item (onClick)=\"addCustomViewPopup()\" text=\"Add Custom View\"\r\n                  class=\"ax-font-semibold ax-text-primary\"></ax-button-item>\r\n              </ng-container>\r\n            </ax-button-item-list>\r\n          </ax-dropdown-panel>\r\n        </ax-button>\r\n        <div class=\"ax-flex ax-gap-2\">\r\n          @if(searchBoxTitle){\r\n          <ax-button *feature=\"'axp-entity-list-quick-search'\" (onClick)=\"toggleSearchBox()\"\r\n            [disabled]=\"this.grid?.selectedRows?.length != 0\" color=\"ghost\">\r\n            <ax-icon class=\"fa-solid fa-search ax-text-neutral-400\"> </ax-icon>\r\n          </ax-button>\r\n          }\r\n          <ax-button [disabled]=\"this.grid?.selectedRows?.length != 0\" color=\"ghost\" (onClick)=\"columnsDrawer.open()\">\r\n            <ax-icon class=\"fa-solid fa-bars ax-text-neutral-400\"> </ax-icon>\r\n          </ax-button>\r\n          <ax-button [disabled]=\"this.grid?.selectedRows?.length != 0\" color=\"ghost\"\r\n            (onClick)=\"conditionsDrawer.open()\">\r\n            <ax-icon class=\"fa-solid fa-sliders ax-text-neutral-400\"> </ax-icon>\r\n            @if ((conditionsCount$ | async)) {\r\n            <ax-suffix>\r\n              <ax-badge [color]=\"'primary'\"></ax-badge>\r\n            </ax-suffix>\r\n            }\r\n          </ax-button>\r\n          <ax-button [disabled]=\"this.grid?.selectedRows?.length != 0\" color=\"ghost\" (onClick)=\"sortsDrawer.open()\">\r\n            <ax-icon class=\"fa-solid fa-bars-sort ax-text-neutral-400\"> </ax-icon>\r\n            @if ((sortCount$ | async)) {\r\n            <ax-suffix>\r\n              <ax-badge [color]=\"'primary'\"></ax-badge>\r\n            </ax-suffix>\r\n            }\r\n          </ax-button>\r\n        </div>\r\n      </div>\r\n      <div *feature=\"'axp-entity-list-quick-search'\" [class.collapsed-search-box]=\"searchBoxCollapsed\"\r\n        class=\"ax-transition-all ax-mt-4\">\r\n        <ax-search-box [title]=\"searchBoxTitle\"\r\n          [placeholder]=\"'Search on ' + searchBoxPlaceholder\"><ax-clear-button></ax-clear-button></ax-search-box>\r\n      </div>\r\n      } @else {\r\n      <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-3\">\r\n        <div class=\"ax-text-xl md:ax-text-3xl ax-font-bold ax-mb-2\">{{ title }}</div>\r\n        @if(this.grid?.selectedRows?.length==0){\r\n        <div class=\"ax-flex ax-gap-3\">\r\n          @if(canCreate)\r\n          {\r\n          <ax-button text=\"Create New\" color=\"primary\" (onClick)=\"handleCreateClick()\">\r\n            <ax-prefix>\r\n              <i class=\"fa-solid fa-add\"></i>\r\n            </ax-prefix>\r\n          </ax-button>\r\n          }\r\n          <ax-button text=\"Actions\" color=\"ghost\">\r\n            <ax-prefix>\r\n              <i class=\"fa-solid fa-ellipsis-vertical\"></i>\r\n            </ax-prefix>\r\n            <ax-dropdown-panel [adaptivityEnabled]=\"true\">\r\n              <ax-button-item-list>\r\n                <ax-button-item text=\"Export\" class=\"ax-font-semibold\">\r\n                  <ax-prefix>\r\n                    <ax-icon icon=\"fa-solid fa-file-export\"> </ax-icon>\r\n                  </ax-prefix>\r\n                </ax-button-item>\r\n              </ax-button-item-list>\r\n            </ax-dropdown-panel>\r\n          </ax-button>\r\n        </div>\r\n        }@else {\r\n        <div class=\"ax-flex ax-gap-3\">\r\n          @if(canDelete)\r\n          {\r\n          <ax-button text=\"Delete Items\" color=\"danger\" (onClick)=\"handleCommandClick('delete')\">\r\n            <ax-prefix>\r\n              <i class=\"fa-solid fa-trash\"></i>\r\n            </ax-prefix>\r\n          </ax-button>\r\n          }\r\n          <ax-button text=\"Actions\" color=\"ghost\">\r\n            <ax-prefix>\r\n              <i class=\"fa-solid fa-ellipsis-vertical\"></i>\r\n            </ax-prefix>\r\n          </ax-button>\r\n        </div>\r\n        }\r\n      </div>\r\n      <div class=\"ax-flex ax-items-center ax-justify-between\">\r\n        <!-----------------------  View Mode   --------------------->\r\n        @if(this.grid?.selectedRows?.length==0) {\r\n        <div class=\"ax-flex ax-w-full ax-justify-between ax-gap-3\">\r\n          <div class=\"ax-flex ax-gap-3\">\r\n            <ax-button [text]=\"(view$ | async)?.title\" #views color=\"ghost\">\r\n              <ax-prefix>\r\n                <i class=\"fa-solid fa-eye\"></i>\r\n              </ax-prefix>\r\n              <ax-suffix>\r\n                <i class=\"fa-solid fa-caret-down\"></i>\r\n              </ax-suffix>\r\n              <ax-dropdown-panel [adaptivityEnabled]=\"true\">\r\n                <ax-button-item-list class=\"ax-bg-surface\">\r\n                  <ax-title class=\"ax-font-bold ax-opacity-100\">Public Views</ax-title>\r\n                  <ax-button-item *ngFor=\"let v of publicViews$ | async\" [text]=\"v.title\"\r\n                    [class.ax-bg-on-surface]=\"(view$ | async) == v\" (onClick)=\"loader.setView(v.name)\"></ax-button-item>\r\n                  <ax-title class=\"ax-font-bold ax-opacity-100\" *ngIf=\"hasCustomViews$ | async\">Created by me</ax-title>\r\n                  <ax-button-item class=\"ax-pe-4 ax-flex ax-justify-between\" *ngFor=\"let v of customViews$ | async\"\r\n                    [text]=\"v.title\" [class.ax-bg-on-surface]=\"(view$ | async) == v\" (onClick)=\"loader.setView(v.name)\">\r\n                    <ax-suffix>\r\n                      <ax-button (onClick)=\"updateViewPopup($event, v)\" class=\"ax-xs\" look=\"none\">\r\n                        <ax-icon class=\"far fa-edit\"> </ax-icon>\r\n                      </ax-button>\r\n                    </ax-suffix>\r\n                  </ax-button-item>\r\n                  <ng-container *feature=\"'axp-entity-list-custom-view'\">\r\n                    <ax-divider></ax-divider>\r\n                    <ax-button-item text=\"Add Custom View\" (onClick)=\"addCustomViewPopup()\"\r\n                      class=\"ax-font-semibold ax-text-primary\"></ax-button-item>\r\n                  </ng-container>\r\n                </ax-button-item-list>\r\n              </ax-dropdown-panel>\r\n            </ax-button>\r\n            @if(searchBoxTitle){\r\n            <div class=\"ax-w-72\" *feature=\"'axp-entity-list-quick-search'\">\r\n              <ax-search-box [title]=\"searchBoxTitle\" [(ngModel)]=\"searchValue\"\r\n                (onValueChanged)=\"handleChangeSearchValue($event)\"\r\n                [placeholder]=\"'Search on ' + searchBoxPlaceholder\"><ax-clear-button></ax-clear-button></ax-search-box>\r\n            </div>\r\n            }\r\n          </div>\r\n\r\n          <div class=\"ax-flex ax-gap-3\">\r\n            <ax-button text=\"Columns\" color=\"ghost\" #columns (onClick)=\"columnsDrawer.open()\">\r\n              <ax-prefix>\r\n                <i class=\"fa-solid fa-bars\"></i>\r\n              </ax-prefix>\r\n              <ax-suffix>\r\n                <ax-badge text=\"{{ columnsCount$ | async }}\" color=\"primary\"></ax-badge>\r\n              </ax-suffix>\r\n            </ax-button>\r\n            <ax-button text=\"Filters\" color=\"ghost\" (onClick)=\"conditionsDrawer.open()\" #conditions>\r\n              <ax-prefix>\r\n                <i class=\"fa-solid fa-sliders\"></i>\r\n              </ax-prefix>\r\n              <ax-suffix>\r\n                <ax-badge text=\"{{ conditionsCount$ | async }}\" color=\"primary\"></ax-badge>\r\n              </ax-suffix>\r\n            </ax-button>\r\n            <ax-button text=\"Sort\" color=\"ghost\" (onClick)=\"sortsDrawer.open()\">\r\n              <ax-prefix>\r\n                <i class=\"fa-solid fa-bars-sort\"></i>\r\n              </ax-prefix>\r\n              <ax-suffix *ngIf=\"(sortCount$ | async)! > 0\">\r\n                <ax-badge text=\"{{ sortCount$ | async }}\" color=\"primary\"></ax-badge>\r\n              </ax-suffix>\r\n            </ax-button>\r\n          </div>\r\n        </div>\r\n\r\n        } @else{\r\n        <!-----------------------  Selection Mode   --------------------->\r\n        <div>\r\n          <div class=\"ax-flex ax-gap-3 ax-items-center ax-h-10\">\r\n            <span class=\"ax-text-xl ax-font-bold\"> {{ this.grid?.selectedRows?.length }} Items Selected </span>\r\n            <span (click)=\"clearSelectedItems()\"\r\n              class=\"ax-text-sm ax-text-primary dark:ax-text-primary-300 ax-underline ax-cursor-pointer\">Clear\r\n              Items</span>\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n    <div class=\"ax-flex-1 ax-px-6 ax-py-4 ax-flex ax-overflow-auto\">\r\n      <ax-data-table #grid [showFooter]=\"false\" class=\"ax-flex-1\" [dataSource]=\"dataSource\" [paging]=\"true\"\r\n        [fetchDataMode]=\"'manual'\" (onRowDbClick)=\"handleRowDbClick($event)\"\r\n        [loading]=\"{ enabled: true, animation: true }\">\r\n        <!-- <ax-index-column *ngIf=\"!platform.is('SM')\" [width]=\"'85px'\"></ax-index-column> -->\r\n        <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\r\n        @for(col of (columns$ | async);track col.name) {\r\n        <axp-widget-column-renderer *ngIf=\"col.visible\" [schema]=\"col.schema\" [dataField]=\"col.name\"\r\n          [caption]=\"col.title\" [options]=\"col.options\" [displayFormat]=\"col.displayFormat\" width=\"180px\"\r\n          [allowSorting]=\"false\">\r\n        </axp-widget-column-renderer>\r\n        }\r\n        <ax-dropdown-command-column fixed=\"end\" [width]=\"'60px'\" [items]=\"getDropdownRowItems\"\r\n          (onItemClick)=\"handleRowCommandClick($event)\"></ax-dropdown-command-column>\r\n        <ax-command-column fixed=\"end\" [width]=\"'60px'\" [items]=\"getInlineRowItems\"\r\n          (onItemClick)=\"handleRowCommandClick($event)\"></ax-command-column>\r\n      </ax-data-table>\r\n    </div>\r\n  </ax-content>\r\n  <ax-drawer (collapsedChange)=\"closeDrawer('columns', $event)\" #columnsDrawer location=\"end\" [mode]=\"'overlay'\">\r\n    <ax-content class=\"ax-w-[85vw] md:ax-w-[45vw] lg:ax-w-[35vw] 2xl:ax-w-[20vw] ax-border-e\">\r\n      <axp-list-view-option-columns [loader]=\"loader\" (onClosed)=\"columnsDrawer.close()\"></axp-list-view-option-columns>\r\n    </ax-content>\r\n  </ax-drawer>\r\n  <ax-drawer (collapsedChange)=\"closeDrawer('conditions', $event)\" #conditionsDrawer location=\"end\" [mode]=\"'overlay'\">\r\n    <ax-content class=\"ax-w-[85vw] md:ax-w-[45vw] lg:ax-w-[35vw] 2xl:ax-w-[25vw] ax-border-e\">\r\n      <axp-list-view-option-conditions [loader]=\"loader\"\r\n        (onClosed)=\"conditionsDrawer.close()\"></axp-list-view-option-conditions>\r\n    </ax-content>\r\n  </ax-drawer>\r\n  <ax-drawer (collapsedChange)=\"closeDrawer('sorts', $event)\" #sortsDrawer location=\"end\" [mode]=\"'overlay'\">\r\n    <ax-content class=\"ax-w-[85vw] md:ax-w-[45vw] lg:ax-w-[35vw] 2xl:ax-w-[20vw] ax-border-e\">\r\n      <axp-list-view-option-sorting (onClosed)=\"sortsDrawer.close()\" [loader]=\"loader\"></axp-list-view-option-sorting>\r\n    </ax-content>\r\n  </ax-drawer>\r\n</ax-drawer-container>", styles: [".cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background:rgba(var(--ax-color-on-surface));padding:.5rem;height:max-content!important}.collapsed-search-box{margin-top:0;height:0px;opacity:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6$1.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "rowTemplate", "emptyTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged"] }, { kind: "component", type: i6$1.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "component", type: i6$1.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i6$1.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i4.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i4.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "component", type: i4$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i4$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i5.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: i10$2.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i11$1.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "collapsed"], outputs: ["locationChange", "modeChange", "collapsedChange"] }, { kind: "component", type: i11$1.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "component", type: i12.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "delayTime"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: i10$1.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["width", "caption", "headerTemplate", "allowSorting", "fixed", "footerTemplate", "cellTemplate", "options", "dataField", "displayFormat", "schema"] }, { kind: "directive", type: i14$1.AXPFeatureDirective, selector: "[feature]", inputs: ["feature", "featureElse"] }, { kind: "component", type: AXPListViewOptionsColumnsComponent, selector: "axp-list-view-option-columns", inputs: ["loader"], outputs: ["onClosed"] }, { kind: "component", type: AXPListViewOptionConditionsComponent, selector: "axp-list-view-option-conditions", inputs: ["loader"], outputs: ["onClosed"] }, { kind: "component", type: AXPListViewOptionSortingComponent, selector: "axp-list-view-option-sorting", inputs: ["loader"], outputs: ["onClosed"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AXPEntityListViewComponent, selector: "ng-component", providers: [AXUnsubscriber], viewQueries: [{ propertyName: "viewsTemplate", first: true, predicate: ["viewsTemplate"], descendants: true }, { propertyName: "grid", first: true, predicate: ["grid"], descendants: true }, { propertyName: "entityViewDrawer", first: true, predicate: ["entityViewDrawer"], descendants: true }], ngImport: i0, template: "<ax-drawer-container>\n  <!-- <ax-drawer #drawer location=\"start\" [collapsed]=\"true\" [mode]=\"platform.is('SM') ? 'overlay' : 'push'\">\n    <ax-content class=\"ax-w-64 ax-border-e\">\n      <div class=\"ax-p-6 ax-py-4 ax-gap-6 ax-flex ax-flex-col\">\n        <p class=\"ax-text-2xl ax-font-bold\">Folders</p>\n        <ax-side-menu>\n          <ng-container *ngFor=\"let node of menuItems\" [ngTemplateOutlet]=\"sideMenu\"\n            [ngTemplateOutletContext]=\"{ $implicit: node }\">\n          </ng-container>\n        </ax-side-menu>\n        <ng-template #sideMenu let-item>\n          <ax-side-menu-item [text]=\"item.text\">\n            <ax-prefix>\n              <ax-icon class=\"fa-solid fa-folder ax-text-warning-500\"></ax-icon>\n            </ax-prefix>\n            <ng-container *ngIf=\"item.children\">\n              <ng-container *ngFor=\"let child of item.children\" [ngTemplateOutlet]=\"sideMenu\"\n                [ngTemplateOutletContext]=\"{ $implicit: child }\">\n              </ng-container>\n            </ng-container>\n          </ax-side-menu-item>\n        </ng-template>\n      </div>\n    </ax-content>\n  </ax-drawer> -->\n  <ax-content class=\"ax-flex ax-flex-col ax-overflow-hidden\">\n    <div\n      class=\"ax-flex ax-flex-col ax-gap-0 md:ax-gap-4 ax-px-4 ax-py-3 md:ax-py-4 md:ax-px-6 ax-bg-surface ax-border-b md:ax-border-0 md:ax-bg-default\"\n    >\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\">Public Views</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 *feature=\"'axp-entity-list-quick-search'\" [class.collapsed-search-box]=\"searchBoxCollapsed\" class=\"ax-transition-all ax-mt-4\">\n        <ax-search-box [title]=\"searchBoxTitle\" [placeholder]=\"'Search on ' + 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\" color=\"primary\" (onClick)=\"handleCreateClick()\">\n            <ax-prefix>\n              <i class=\"fa-solid fa-add\"></i>\n            </ax-prefix>\n          </ax-button>\n          }\n          <ax-button text=\"Actions\" color=\"ghost\">\n            <ax-prefix>\n              <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n            </ax-prefix>\n            <ax-dropdown-panel [adaptivityEnabled]=\"true\">\n              <ax-button-item-list>\n                <ax-button-item text=\"Export\" class=\"ax-font-semibold\">\n                  <ax-prefix>\n                    <ax-icon icon=\"fa-solid fa-file-export\"> </ax-icon>\n                  </ax-prefix>\n                </ax-button-item>\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n        </div>\n        }@else {\n        <div class=\"ax-flex ax-gap-3\">\n          @if(canDelete) {\n          <ax-button text=\"Delete Items\" color=\"danger\" (onClick)=\"handleCommandClick('delete')\">\n            <ax-prefix>\n              <i class=\"fa-solid fa-trash\"></i>\n            </ax-prefix>\n          </ax-button>\n          }\n          <ax-button text=\"Actions\" color=\"ghost\">\n            <ax-prefix>\n              <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n            </ax-prefix>\n          </ax-button>\n        </div>\n        }\n      </div>\n      <div class=\"ax-flex ax-items-center ax-justify-between\">\n        <!-----------------------  View Mode   --------------------->\n        @if(this.grid?.selectedRows?.length==0) {\n        <div class=\"ax-flex ax-w-full ax-justify-between ax-gap-3\">\n          <div class=\"ax-flex ax-gap-3\">\n            <ax-button [text]=\"(view$ | async)?.title\" #views color=\"ghost\">\n              <ax-prefix>\n                <i class=\"fa-solid fa-eye\"></i>\n              </ax-prefix>\n              <ax-suffix>\n                <i class=\"fa-solid fa-caret-down\"></i>\n              </ax-suffix>\n              <ax-dropdown-panel [adaptivityEnabled]=\"true\">\n                <ax-button-item-list class=\"ax-bg-surface\">\n                  <ax-title class=\"ax-font-bold ax-opacity-100\">Public Views</ax-title>\n                  <ax-button-item\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]=\"'Search on ' + 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=\"Columns\" color=\"ghost\" #columns (onClick)=\"columnsDrawer.open()\">\n              <ax-prefix>\n                <i class=\"fa-solid fa-bars\"></i>\n              </ax-prefix>\n              <ax-suffix>\n                <ax-badge text=\"{{ columnsCount$ | async }}\" color=\"primary\"></ax-badge>\n              </ax-suffix>\n            </ax-button>\n            <ax-button text=\"Filters\" color=\"ghost\" (onClick)=\"conditionsDrawer.open()\" #conditions>\n              <ax-prefix>\n                <i class=\"fa-solid fa-sliders\"></i>\n              </ax-prefix>\n              <ax-suffix>\n                <ax-badge text=\"{{ conditionsCount$ | async }}\" color=\"primary\"></ax-badge>\n              </ax-suffix>\n            </ax-button>\n            <ax-button text=\"Sort\" color=\"ghost\" (onClick)=\"sortsDrawer.open()\">\n              <ax-prefix>\n                <i class=\"fa-solid fa-bars-sort\"></i>\n              </ax-prefix>\n              <ax-suffix *ngIf=\"(sortCount$ | async)! > 0\">\n                <ax-badge text=\"{{ sortCount$ | async }}\" color=\"primary\"></ax-badge>\n              </ax-suffix>\n            </ax-button>\n          </div>\n        </div>\n\n        } @else{\n        <!-----------------------  Selection Mode   --------------------->\n        <div>\n          <div class=\"ax-flex ax-gap-3 ax-items-center ax-h-10\">\n            <span class=\"ax-text-xl ax-font-bold\"> {{ this.grid?.selectedRows?.length }} Items Selected </span>\n            <span (click)=\"clearSelectedItems()\" 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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6$1.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "rowTemplate", "emptyTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged"] }, { kind: "component", type: i6$1.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "component", type: i6$1.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i6$1.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "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"], outputs: ["locationChange", "modeChange", "collapsedChange"] }, { kind: "component", type: i11$1.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "component", type: i12.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "delayTime"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: i10$1.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["width", "caption", "headerTemplate", "allowSorting", "fixed", "footerTemplate", "cellTemplate", "options", "dataField", "displayFormat", "schema"] }, { kind: "directive", type: i14$1.AXPFeatureDirective, selector: "[feature]", inputs: ["feature", "featureElse"] }, { kind: "component", type: AXPListViewOptionsColumnsComponent, selector: "axp-list-view-option-columns", inputs: ["loader"], outputs: ["onClosed"] }, { kind: "component", type: AXPListViewOptionConditionsComponent, selector: "axp-list-view-option-conditions", inputs: ["loader"], outputs: ["onClosed"] }, { kind: "component", type: AXPListViewOptionSortingComponent, selector: "axp-list-view-option-sorting", inputs: ["loader"], outputs: ["onClosed"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityListViewComponent, decorators: [{
             type: Component,
-            args: [{ encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [AXUnsubscriber], template: "<ax-drawer-container>\r\n  <!-- <ax-drawer #drawer location=\"start\" [collapsed]=\"true\" [mode]=\"platform.is('SM') ? 'overlay' : 'push'\">\r\n    <ax-content class=\"ax-w-64 ax-border-e\">\r\n      <div class=\"ax-p-6 ax-py-4 ax-gap-6 ax-flex ax-flex-col\">\r\n        <p class=\"ax-text-2xl ax-font-bold\">Folders</p>\r\n        <ax-side-menu>\r\n          <ng-container *ngFor=\"let node of menuItems\" [ngTemplateOutlet]=\"sideMenu\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: node }\">\r\n          </ng-container>\r\n        </ax-side-menu>\r\n        <ng-template #sideMenu let-item>\r\n          <ax-side-menu-item [text]=\"item.text\">\r\n            <ax-prefix>\r\n              <ax-icon class=\"fa-solid fa-folder ax-text-warning-500\"></ax-icon>\r\n            </ax-prefix>\r\n            <ng-container *ngIf=\"item.children\">\r\n              <ng-container *ngFor=\"let child of item.children\" [ngTemplateOutlet]=\"sideMenu\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: child }\">\r\n              </ng-container>\r\n            </ng-container>\r\n          </ax-side-menu-item>\r\n        </ng-template>\r\n      </div>\r\n    </ax-content>\r\n  </ax-drawer> -->\r\n  <ax-content class=\"ax-flex ax-flex-col ax-overflow-hidden\">\r\n    <div\r\n      class=\"ax-flex ax-flex-col ax-gap-0 md:ax-gap-4 ax-px-4 ax-py-3 md:ax-py-4 md:ax-px-6 ax-bg-surface ax-border-b md:ax-border-0 md:ax-bg-default\">\r\n      @if(platform.is('MD')){\r\n      <div class=\"ax-flex ax-justify-between ax-mb-4\">\r\n        @if(this.grid?.selectedRows?.length==0){\r\n        <div class=\"ax-text-xl ax-font-bold\">{{ title }}</div>\r\n        <div class=\"ax-flex ax-items-center ax-gap-2\">\r\n          @if(canCreate)\r\n          {\r\n          <ax-button color=\"primary\" class=\"ax-sm\" (onClick)=\"handleCreateClick()\">\r\n            <ax-icon class=\"fa-solid fa-add\"></ax-icon>\r\n          </ax-button>\r\n          }\r\n          <ax-button color=\"ghost\" class=\"ax-sm\" #more>\r\n            <ax-icon class=\"fa-solid fa-ellipsis-vertical\"> </ax-icon>\r\n            <ax-dropdown-panel [adaptivityEnabled]=\"true\">\r\n              <ax-button-item-list>\r\n                <ax-button-item text=\"Export\" class=\"ax-font-semibold\">\r\n                  <ax-prefix>\r\n                    <ax-icon icon=\"fa-solid fa-file-export\"> </ax-icon>\r\n                  </ax-prefix>\r\n                </ax-button-item>\r\n              </ax-button-item-list>\r\n            </ax-dropdown-panel>\r\n          </ax-button>\r\n        </div>\r\n        }@else {\r\n        <div class=\"ax-flex ax-items-center ax-gap-3\">\r\n          <span class=\"ax-text-xl ax-font-bold\"> {{ this.grid?.selectedRows?.length }} Items Selected </span>\r\n          <span (click)=\"clearSelectedItems()\"\r\n            class=\"ax-text-sm ax-text-primary dark:ax-text-primary-300 ax-underline ax-cursor-pointer\">Clear\r\n            Items</span>\r\n        </div>\r\n        <div class=\"ax-flex ax-items-center ax-gap-2\">\r\n          @if(canDelete)\r\n          {\r\n          <ax-button color=\"danger\" class=\"ax-sm\" (onClick)=\"handleCommandClick('delete')\">\r\n            <ax-icon class=\"fa-solid fa-trash\"> </ax-icon>\r\n          </ax-button>\r\n          }\r\n          <ax-button color=\"ghost\" class=\"ax-sm\" #more>\r\n            <ax-icon class=\"fa-solid fa-ellipsis-vertical\"> </ax-icon>\r\n          </ax-button>\r\n        </div>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"ax-flex ax-items-center ax-justify-between\">\r\n        <ax-button [disabled]=\"this.grid?.selectedRows?.length != 0\" [text]=\"(view$ | async)?.title\" color=\"ghost\">\r\n          <ax-icon class=\"fa-solid fa-eye ax-text-neutral-400\"> </ax-icon>\r\n          <ax-suffix>\r\n            <i class=\"fa-solid fa-caret-down\"></i>\r\n          </ax-suffix>\r\n          <ax-dropdown-panel [adaptivityEnabled]=\"true\">\r\n            <ax-button-item-list class=\"ax-bg-surface\">\r\n              <ax-title class=\"ax-font-bold ax-opacity-100\">Public Views</ax-title>\r\n              <ax-button-item *ngFor=\"let v of publicViews$ | async\" [text]=\"v.title\"\r\n                [class.ax-bg-on-surface]=\"(view$ | async) == v\" (onClick)=\"loader.setView(v.name)\"></ax-button-item>\r\n              <ax-title class=\"ax-font-bold ax-opacity-100\" *ngIf=\"hasCustomViews$ | async\">Created by me</ax-title>\r\n              <ax-button-item *ngFor=\"let v of customViews$ | async\" [text]=\"v.title\"\r\n                [class.ax-bg-on-surface]=\"(view$ | async) == v\" (onClick)=\"loader.setView(v.name)\"></ax-button-item>\r\n              <ng-container *feature=\"'axp-entity-list-custom-view'\">\r\n                <ax-divider></ax-divider>\r\n                <ax-button-item (onClick)=\"addCustomViewPopup()\" text=\"Add Custom View\"\r\n                  class=\"ax-font-semibold ax-text-primary\"></ax-button-item>\r\n              </ng-container>\r\n            </ax-button-item-list>\r\n          </ax-dropdown-panel>\r\n        </ax-button>\r\n        <div class=\"ax-flex ax-gap-2\">\r\n          @if(searchBoxTitle){\r\n          <ax-button *feature=\"'axp-entity-list-quick-search'\" (onClick)=\"toggleSearchBox()\"\r\n            [disabled]=\"this.grid?.selectedRows?.length != 0\" color=\"ghost\">\r\n            <ax-icon class=\"fa-solid fa-search ax-text-neutral-400\"> </ax-icon>\r\n          </ax-button>\r\n          }\r\n          <ax-button [disabled]=\"this.grid?.selectedRows?.length != 0\" color=\"ghost\" (onClick)=\"columnsDrawer.open()\">\r\n            <ax-icon class=\"fa-solid fa-bars ax-text-neutral-400\"> </ax-icon>\r\n          </ax-button>\r\n          <ax-button [disabled]=\"this.grid?.selectedRows?.length != 0\" color=\"ghost\"\r\n            (onClick)=\"conditionsDrawer.open()\">\r\n            <ax-icon class=\"fa-solid fa-sliders ax-text-neutral-400\"> </ax-icon>\r\n            @if ((conditionsCount$ | async)) {\r\n            <ax-suffix>\r\n              <ax-badge [color]=\"'primary'\"></ax-badge>\r\n            </ax-suffix>\r\n            }\r\n          </ax-button>\r\n          <ax-button [disabled]=\"this.grid?.selectedRows?.length != 0\" color=\"ghost\" (onClick)=\"sortsDrawer.open()\">\r\n            <ax-icon class=\"fa-solid fa-bars-sort ax-text-neutral-400\"> </ax-icon>\r\n            @if ((sortCount$ | async)) {\r\n            <ax-suffix>\r\n              <ax-badge [color]=\"'primary'\"></ax-badge>\r\n            </ax-suffix>\r\n            }\r\n          </ax-button>\r\n        </div>\r\n      </div>\r\n      <div *feature=\"'axp-entity-list-quick-search'\" [class.collapsed-search-box]=\"searchBoxCollapsed\"\r\n        class=\"ax-transition-all ax-mt-4\">\r\n        <ax-search-box [title]=\"searchBoxTitle\"\r\n          [placeholder]=\"'Search on ' + searchBoxPlaceholder\"><ax-clear-button></ax-clear-button></ax-search-box>\r\n      </div>\r\n      } @else {\r\n      <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-3\">\r\n        <div class=\"ax-text-xl md:ax-text-3xl ax-font-bold ax-mb-2\">{{ title }}</div>\r\n        @if(this.grid?.selectedRows?.length==0){\r\n        <div class=\"ax-flex ax-gap-3\">\r\n          @if(canCreate)\r\n          {\r\n          <ax-button text=\"Create New\" color=\"primary\" (onClick)=\"handleCreateClick()\">\r\n            <ax-prefix>\r\n              <i class=\"fa-solid fa-add\"></i>\r\n            </ax-prefix>\r\n          </ax-button>\r\n          }\r\n          <ax-button text=\"Actions\" color=\"ghost\">\r\n            <ax-prefix>\r\n              <i class=\"fa-solid fa-ellipsis-vertical\"></i>\r\n            </ax-prefix>\r\n            <ax-dropdown-panel [adaptivityEnabled]=\"true\">\r\n              <ax-button-item-list>\r\n                <ax-button-item text=\"Export\" class=\"ax-font-semibold\">\r\n                  <ax-prefix>\r\n                    <ax-icon icon=\"fa-solid fa-file-export\"> </ax-icon>\r\n                  </ax-prefix>\r\n                </ax-button-item>\r\n              </ax-button-item-list>\r\n            </ax-dropdown-panel>\r\n          </ax-button>\r\n        </div>\r\n        }@else {\r\n        <div class=\"ax-flex ax-gap-3\">\r\n          @if(canDelete)\r\n          {\r\n          <ax-button text=\"Delete Items\" color=\"danger\" (onClick)=\"handleCommandClick('delete')\">\r\n            <ax-prefix>\r\n              <i class=\"fa-solid fa-trash\"></i>\r\n            </ax-prefix>\r\n          </ax-button>\r\n          }\r\n          <ax-button text=\"Actions\" color=\"ghost\">\r\n            <ax-prefix>\r\n              <i class=\"fa-solid fa-ellipsis-vertical\"></i>\r\n            </ax-prefix>\r\n          </ax-button>\r\n        </div>\r\n        }\r\n      </div>\r\n      <div class=\"ax-flex ax-items-center ax-justify-between\">\r\n        <!-----------------------  View Mode   --------------------->\r\n        @if(this.grid?.selectedRows?.length==0) {\r\n        <div class=\"ax-flex ax-w-full ax-justify-between ax-gap-3\">\r\n          <div class=\"ax-flex ax-gap-3\">\r\n            <ax-button [text]=\"(view$ | async)?.title\" #views color=\"ghost\">\r\n              <ax-prefix>\r\n                <i class=\"fa-solid fa-eye\"></i>\r\n              </ax-prefix>\r\n              <ax-suffix>\r\n                <i class=\"fa-solid fa-caret-down\"></i>\r\n              </ax-suffix>\r\n              <ax-dropdown-panel [adaptivityEnabled]=\"true\">\r\n                <ax-button-item-list class=\"ax-bg-surface\">\r\n                  <ax-title class=\"ax-font-bold ax-opacity-100\">Public Views</ax-title>\r\n                  <ax-button-item *ngFor=\"let v of publicViews$ | async\" [text]=\"v.title\"\r\n                    [class.ax-bg-on-surface]=\"(view$ | async) == v\" (onClick)=\"loader.setView(v.name)\"></ax-button-item>\r\n                  <ax-title class=\"ax-font-bold ax-opacity-100\" *ngIf=\"hasCustomViews$ | async\">Created by me</ax-title>\r\n                  <ax-button-item class=\"ax-pe-4 ax-flex ax-justify-between\" *ngFor=\"let v of customViews$ | async\"\r\n                    [text]=\"v.title\" [class.ax-bg-on-surface]=\"(view$ | async) == v\" (onClick)=\"loader.setView(v.name)\">\r\n                    <ax-suffix>\r\n                      <ax-button (onClick)=\"updateViewPopup($event, v)\" class=\"ax-xs\" look=\"none\">\r\n                        <ax-icon class=\"far fa-edit\"> </ax-icon>\r\n                      </ax-button>\r\n                    </ax-suffix>\r\n                  </ax-button-item>\r\n                  <ng-container *feature=\"'axp-entity-list-custom-view'\">\r\n                    <ax-divider></ax-divider>\r\n                    <ax-button-item text=\"Add Custom View\" (onClick)=\"addCustomViewPopup()\"\r\n                      class=\"ax-font-semibold ax-text-primary\"></ax-button-item>\r\n                  </ng-container>\r\n                </ax-button-item-list>\r\n              </ax-dropdown-panel>\r\n            </ax-button>\r\n            @if(searchBoxTitle){\r\n            <div class=\"ax-w-72\" *feature=\"'axp-entity-list-quick-search'\">\r\n              <ax-search-box [title]=\"searchBoxTitle\" [(ngModel)]=\"searchValue\"\r\n                (onValueChanged)=\"handleChangeSearchValue($event)\"\r\n                [placeholder]=\"'Search on ' + searchBoxPlaceholder\"><ax-clear-button></ax-clear-button></ax-search-box>\r\n            </div>\r\n            }\r\n          </div>\r\n\r\n          <div class=\"ax-flex ax-gap-3\">\r\n            <ax-button text=\"Columns\" color=\"ghost\" #columns (onClick)=\"columnsDrawer.open()\">\r\n              <ax-prefix>\r\n                <i class=\"fa-solid fa-bars\"></i>\r\n              </ax-prefix>\r\n              <ax-suffix>\r\n                <ax-badge text=\"{{ columnsCount$ | async }}\" color=\"primary\"></ax-badge>\r\n              </ax-suffix>\r\n            </ax-button>\r\n            <ax-button text=\"Filters\" color=\"ghost\" (onClick)=\"conditionsDrawer.open()\" #conditions>\r\n              <ax-prefix>\r\n                <i class=\"fa-solid fa-sliders\"></i>\r\n              </ax-prefix>\r\n              <ax-suffix>\r\n                <ax-badge text=\"{{ conditionsCount$ | async }}\" color=\"primary\"></ax-badge>\r\n              </ax-suffix>\r\n            </ax-button>\r\n            <ax-button text=\"Sort\" color=\"ghost\" (onClick)=\"sortsDrawer.open()\">\r\n              <ax-prefix>\r\n                <i class=\"fa-solid fa-bars-sort\"></i>\r\n              </ax-prefix>\r\n              <ax-suffix *ngIf=\"(sortCount$ | async)! > 0\">\r\n                <ax-badge text=\"{{ sortCount$ | async }}\" color=\"primary\"></ax-badge>\r\n              </ax-suffix>\r\n            </ax-button>\r\n          </div>\r\n        </div>\r\n\r\n        } @else{\r\n        <!-----------------------  Selection Mode   --------------------->\r\n        <div>\r\n          <div class=\"ax-flex ax-gap-3 ax-items-center ax-h-10\">\r\n            <span class=\"ax-text-xl ax-font-bold\"> {{ this.grid?.selectedRows?.length }} Items Selected </span>\r\n            <span (click)=\"clearSelectedItems()\"\r\n              class=\"ax-text-sm ax-text-primary dark:ax-text-primary-300 ax-underline ax-cursor-pointer\">Clear\r\n              Items</span>\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n    <div class=\"ax-flex-1 ax-px-6 ax-py-4 ax-flex ax-overflow-auto\">\r\n      <ax-data-table #grid [showFooter]=\"false\" class=\"ax-flex-1\" [dataSource]=\"dataSource\" [paging]=\"true\"\r\n        [fetchDataMode]=\"'manual'\" (onRowDbClick)=\"handleRowDbClick($event)\"\r\n        [loading]=\"{ enabled: true, animation: true }\">\r\n        <!-- <ax-index-column *ngIf=\"!platform.is('SM')\" [width]=\"'85px'\"></ax-index-column> -->\r\n        <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\r\n        @for(col of (columns$ | async);track col.name) {\r\n        <axp-widget-column-renderer *ngIf=\"col.visible\" [schema]=\"col.schema\" [dataField]=\"col.name\"\r\n          [caption]=\"col.title\" [options]=\"col.options\" [displayFormat]=\"col.displayFormat\" width=\"180px\"\r\n          [allowSorting]=\"false\">\r\n        </axp-widget-column-renderer>\r\n        }\r\n        <ax-dropdown-command-column fixed=\"end\" [width]=\"'60px'\" [items]=\"getDropdownRowItems\"\r\n          (onItemClick)=\"handleRowCommandClick($event)\"></ax-dropdown-command-column>\r\n        <ax-command-column fixed=\"end\" [width]=\"'60px'\" [items]=\"getInlineRowItems\"\r\n          (onItemClick)=\"handleRowCommandClick($event)\"></ax-command-column>\r\n      </ax-data-table>\r\n    </div>\r\n  </ax-content>\r\n  <ax-drawer (collapsedChange)=\"closeDrawer('columns', $event)\" #columnsDrawer location=\"end\" [mode]=\"'overlay'\">\r\n    <ax-content class=\"ax-w-[85vw] md:ax-w-[45vw] lg:ax-w-[35vw] 2xl:ax-w-[20vw] ax-border-e\">\r\n      <axp-list-view-option-columns [loader]=\"loader\" (onClosed)=\"columnsDrawer.close()\"></axp-list-view-option-columns>\r\n    </ax-content>\r\n  </ax-drawer>\r\n  <ax-drawer (collapsedChange)=\"closeDrawer('conditions', $event)\" #conditionsDrawer location=\"end\" [mode]=\"'overlay'\">\r\n    <ax-content class=\"ax-w-[85vw] md:ax-w-[45vw] lg:ax-w-[35vw] 2xl:ax-w-[25vw] ax-border-e\">\r\n      <axp-list-view-option-conditions [loader]=\"loader\"\r\n        (onClosed)=\"conditionsDrawer.close()\"></axp-list-view-option-conditions>\r\n    </ax-content>\r\n  </ax-drawer>\r\n  <ax-drawer (collapsedChange)=\"closeDrawer('sorts', $event)\" #sortsDrawer location=\"end\" [mode]=\"'overlay'\">\r\n    <ax-content class=\"ax-w-[85vw] md:ax-w-[45vw] lg:ax-w-[35vw] 2xl:ax-w-[20vw] ax-border-e\">\r\n      <axp-list-view-option-sorting (onClosed)=\"sortsDrawer.close()\" [loader]=\"loader\"></axp-list-view-option-sorting>\r\n    </ax-content>\r\n  </ax-drawer>\r\n</ax-drawer-container>", styles: [".cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background:rgba(var(--ax-color-on-surface));padding:.5rem;height:max-content!important}.collapsed-search-box{margin-top:0;height:0px;opacity:0}\n"] }]
+            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\">Public Views</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 *feature=\"'axp-entity-list-quick-search'\" [class.collapsed-search-box]=\"searchBoxCollapsed\" class=\"ax-transition-all ax-mt-4\">\n        <ax-search-box [title]=\"searchBoxTitle\" [placeholder]=\"'Search on ' + 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\" color=\"primary\" (onClick)=\"handleCreateClick()\">\n            <ax-prefix>\n              <i class=\"fa-solid fa-add\"></i>\n            </ax-prefix>\n          </ax-button>\n          }\n          <ax-button text=\"Actions\" color=\"ghost\">\n            <ax-prefix>\n              <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n            </ax-prefix>\n            <ax-dropdown-panel [adaptivityEnabled]=\"true\">\n              <ax-button-item-list>\n                <ax-button-item text=\"Export\" class=\"ax-font-semibold\">\n                  <ax-prefix>\n                    <ax-icon icon=\"fa-solid fa-file-export\"> </ax-icon>\n                  </ax-prefix>\n                </ax-button-item>\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n        </div>\n        }@else {\n        <div class=\"ax-flex ax-gap-3\">\n          @if(canDelete) {\n          <ax-button text=\"Delete Items\" color=\"danger\" (onClick)=\"handleCommandClick('delete')\">\n            <ax-prefix>\n              <i class=\"fa-solid fa-trash\"></i>\n            </ax-prefix>\n          </ax-button>\n          }\n          <ax-button text=\"Actions\" color=\"ghost\">\n            <ax-prefix>\n              <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n            </ax-prefix>\n          </ax-button>\n        </div>\n        }\n      </div>\n      <div class=\"ax-flex ax-items-center ax-justify-between\">\n        <!-----------------------  View Mode   --------------------->\n        @if(this.grid?.selectedRows?.length==0) {\n        <div class=\"ax-flex ax-w-full ax-justify-between ax-gap-3\">\n          <div class=\"ax-flex ax-gap-3\">\n            <ax-button [text]=\"(view$ | async)?.title\" #views color=\"ghost\">\n              <ax-prefix>\n                <i class=\"fa-solid fa-eye\"></i>\n              </ax-prefix>\n              <ax-suffix>\n                <i class=\"fa-solid fa-caret-down\"></i>\n              </ax-suffix>\n              <ax-dropdown-panel [adaptivityEnabled]=\"true\">\n                <ax-button-item-list class=\"ax-bg-surface\">\n                  <ax-title class=\"ax-font-bold ax-opacity-100\">Public Views</ax-title>\n                  <ax-button-item\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]=\"'Search on ' + 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=\"Columns\" color=\"ghost\" #columns (onClick)=\"columnsDrawer.open()\">\n              <ax-prefix>\n                <i class=\"fa-solid fa-bars\"></i>\n              </ax-prefix>\n              <ax-suffix>\n                <ax-badge text=\"{{ columnsCount$ | async }}\" color=\"primary\"></ax-badge>\n              </ax-suffix>\n            </ax-button>\n            <ax-button text=\"Filters\" color=\"ghost\" (onClick)=\"conditionsDrawer.open()\" #conditions>\n              <ax-prefix>\n                <i class=\"fa-solid fa-sliders\"></i>\n              </ax-prefix>\n              <ax-suffix>\n                <ax-badge text=\"{{ conditionsCount$ | async }}\" color=\"primary\"></ax-badge>\n              </ax-suffix>\n            </ax-button>\n            <ax-button text=\"Sort\" color=\"ghost\" (onClick)=\"sortsDrawer.open()\">\n              <ax-prefix>\n                <i class=\"fa-solid fa-bars-sort\"></i>\n              </ax-prefix>\n              <ax-suffix *ngIf=\"(sortCount$ | async)! > 0\">\n                <ax-badge text=\"{{ sortCount$ | async }}\" color=\"primary\"></ax-badge>\n              </ax-suffix>\n            </ax-button>\n          </div>\n        </div>\n\n        } @else{\n        <!-----------------------  Selection Mode   --------------------->\n        <div>\n          <div class=\"ax-flex ax-gap-3 ax-items-center ax-h-10\">\n            <span class=\"ax-text-xl ax-font-bold\"> {{ this.grid?.selectedRows?.length }} Items Selected </span>\n            <span (click)=\"clearSelectedItems()\" 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$1.AXActionSheetService }, { type: i2$1.AXUnsubscriber }, { type: i3.AXPlatform }, { type: i0.ChangeDetectorRef }], propDecorators: { viewsTemplate: [{
                 type: ViewChild,
                 args: ['viewsTemplate']
@@ -1599,11 +1599,11 @@ class AXPEntityQuickViewComponent extends AXBasePageComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityQuickViewComponent, deps: [{ token: i1$2.Actions }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AXPEntityQuickViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-flex-col ax-gap-6 ax-p-4\">\r\n  <div class=\"ax-flex ax-flex-col ax-gap-2\" *ngIf=\"root.properties?.length\">\r\n    <div *ngFor=\"let p of getProperties(root.properties)\"\r\n      class=\"ax-flex ax-p-4 odd:ax-bg-on-surface odd:ax-border-t odd:ax-border-b\">\r\n      <div class=\"ax-min-w-[10rem] ax-text-gray-500\">\r\n        <span>{{ p.title }}</span>\r\n      </div>\r\n      <div class=\"ax-min-w-[30rem]\">\r\n        <axp-widget-renderer [schema]=\"p.schema\" [context]=\"data\" [prop]=\"p\"></axp-widget-renderer>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngFor=\"let s of root.sections\"\r\n    class=\"ax-flex ax-flex-col ax-pb-3 last-of-type:ax-border-none last-of-type:ax-pb-3\">\r\n    <div class=\"ax-pb-4\">\r\n      <span class=\"ax-font-bold\">{{ s.title }}</span>\r\n    </div>\r\n    <div class=\"ax-flex ax-flex-col\">\r\n      <div *ngFor=\"let p of getProperties(s.properties)\"\r\n        class=\"ax-flex ax-flex-col md:ax-flex-row ax-p-3 odd:ax-bg-on-surface odd:ax-border-t odd:ax-border-b\">\r\n        @if (s.options?.showPropTitle!=false) {\r\n        <div class=\"ax-min-w-[10rem] ax-text-neutral-500 dark:ax-text-neutral-300 ax-mb-2 md:ax-mb-0\">\r\n          <span>{{ p.title }}</span>\r\n        </div>\r\n        }\r\n        <div class=\"md:ax-min-w-[30rem]\">\r\n          <axp-widget-renderer [schema]=\"p.schema\" [context]=\"data\" [prop]=\"p\" [mode]=\"'view'\"></axp-widget-renderer>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n<ax-footer>\r\n  <ax-prefix> </ax-prefix>\r\n  <ax-suffix>\r\n    <ax-dropdown-button text=\"Close\" (onClick)=\"handleCloseClick()\">\r\n      <ax-button-item-list>\r\n        <ax-button-item text=\"View Details\" (onClick)=\"handleCommandClick('details')\">\r\n          <ax-prefix>\r\n            <ax-icon icon=\"fa-solid fa-info-circle\"></ax-icon>\r\n          </ax-prefix>\r\n        </ax-button-item>\r\n        @if(canDelete)\r\n        {\r\n        <ax-button-item class=\"ax-text-danger\" text=\"Delete\" (onClick)=\"handleCommandClick('delete')\">\r\n          <ax-prefix> <ax-icon icon=\"fas fa-trash fa-flip-horizontal\"></ax-icon> </ax-prefix></ax-button-item>\r\n        }\r\n      </ax-button-item-list>\r\n    </ax-dropdown-button>\r\n  </ax-suffix>\r\n</ax-footer>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: AXPSchemaModule }, { kind: "component", type: i10$1.AXPWidgetRendererComponent, selector: "axp-widget-renderer", inputs: ["context", "prop", "mode", "schema"] }, { kind: "ngmodule", type: AXPCommonWidgetModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i4$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i4.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i4.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i14.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AXPEntityQuickViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-flex-col ax-gap-6 ax-p-4\">\n  <div class=\"ax-flex ax-flex-col ax-gap-2\" *ngIf=\"root.properties?.length\">\n    <div *ngFor=\"let p of getProperties(root.properties)\"\n      class=\"ax-flex ax-p-4 odd:ax-bg-on-surface odd:ax-border-t odd:ax-border-b\">\n      <div class=\"ax-min-w-[10rem] ax-text-gray-500\">\n        <span>{{ p.title }}</span>\n      </div>\n      <div class=\"ax-min-w-[30rem]\">\n        <axp-widget-renderer [schema]=\"p.schema\" [context]=\"data\" [prop]=\"p\"></axp-widget-renderer>\n      </div>\n    </div>\n  </div>\n  <div *ngFor=\"let s of root.sections\"\n    class=\"ax-flex ax-flex-col ax-pb-3 last-of-type:ax-border-none last-of-type:ax-pb-3\">\n    <div class=\"ax-pb-4\">\n      <span class=\"ax-font-bold\">{{ s.title }}</span>\n    </div>\n    <div class=\"ax-flex ax-flex-col\">\n      <div *ngFor=\"let p of getProperties(s.properties)\"\n        class=\"ax-flex ax-flex-col md:ax-flex-row ax-p-3 odd:ax-bg-on-surface odd:ax-border-t odd:ax-border-b\">\n        @if (s.options?.showPropTitle!=false) {\n        <div class=\"ax-min-w-[10rem] ax-text-neutral-500 dark:ax-text-neutral-300 ax-mb-2 md:ax-mb-0\">\n          <span>{{ p.title }}</span>\n        </div>\n        }\n        <div class=\"md:ax-min-w-[30rem]\">\n          <axp-widget-renderer [schema]=\"p.schema\" [context]=\"data\" [prop]=\"p\" [mode]=\"'view'\"></axp-widget-renderer>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<ax-footer>\n  <ax-prefix> </ax-prefix>\n  <ax-suffix>\n    <ax-dropdown-button text=\"Close\" (onClick)=\"handleCloseClick()\">\n      <ax-button-item-list>\n        <ax-button-item text=\"View Details\" (onClick)=\"handleCommandClick('details')\">\n          <ax-prefix>\n            <ax-icon icon=\"fa-solid fa-info-circle\"></ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n        @if(canDelete)\n        {\n        <ax-button-item class=\"ax-text-danger\" text=\"Delete\" (onClick)=\"handleCommandClick('delete')\">\n          <ax-prefix> <ax-icon icon=\"fas fa-trash fa-flip-horizontal\"></ax-icon> </ax-prefix></ax-button-item>\n        }\n      </ax-button-item-list>\n    </ax-dropdown-button>\n  </ax-suffix>\n</ax-footer>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: AXPSchemaModule }, { kind: "component", type: i10$1.AXPWidgetRendererComponent, selector: "axp-widget-renderer", inputs: ["context", "prop", "mode", "schema"] }, { kind: "ngmodule", type: AXPCommonWidgetModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i4$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i4.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i4.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i14.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityQuickViewComponent, decorators: [{
             type: Component,
-            args: [{ encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, AXPSchemaModule, AXPCommonWidgetModule, AXDecoratorModule, AXButtonModule, AXDropdownModule, AXDropdownButtonModule], template: "<div class=\"ax-flex ax-flex-col ax-gap-6 ax-p-4\">\r\n  <div class=\"ax-flex ax-flex-col ax-gap-2\" *ngIf=\"root.properties?.length\">\r\n    <div *ngFor=\"let p of getProperties(root.properties)\"\r\n      class=\"ax-flex ax-p-4 odd:ax-bg-on-surface odd:ax-border-t odd:ax-border-b\">\r\n      <div class=\"ax-min-w-[10rem] ax-text-gray-500\">\r\n        <span>{{ p.title }}</span>\r\n      </div>\r\n      <div class=\"ax-min-w-[30rem]\">\r\n        <axp-widget-renderer [schema]=\"p.schema\" [context]=\"data\" [prop]=\"p\"></axp-widget-renderer>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngFor=\"let s of root.sections\"\r\n    class=\"ax-flex ax-flex-col ax-pb-3 last-of-type:ax-border-none last-of-type:ax-pb-3\">\r\n    <div class=\"ax-pb-4\">\r\n      <span class=\"ax-font-bold\">{{ s.title }}</span>\r\n    </div>\r\n    <div class=\"ax-flex ax-flex-col\">\r\n      <div *ngFor=\"let p of getProperties(s.properties)\"\r\n        class=\"ax-flex ax-flex-col md:ax-flex-row ax-p-3 odd:ax-bg-on-surface odd:ax-border-t odd:ax-border-b\">\r\n        @if (s.options?.showPropTitle!=false) {\r\n        <div class=\"ax-min-w-[10rem] ax-text-neutral-500 dark:ax-text-neutral-300 ax-mb-2 md:ax-mb-0\">\r\n          <span>{{ p.title }}</span>\r\n        </div>\r\n        }\r\n        <div class=\"md:ax-min-w-[30rem]\">\r\n          <axp-widget-renderer [schema]=\"p.schema\" [context]=\"data\" [prop]=\"p\" [mode]=\"'view'\"></axp-widget-renderer>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n<ax-footer>\r\n  <ax-prefix> </ax-prefix>\r\n  <ax-suffix>\r\n    <ax-dropdown-button text=\"Close\" (onClick)=\"handleCloseClick()\">\r\n      <ax-button-item-list>\r\n        <ax-button-item text=\"View Details\" (onClick)=\"handleCommandClick('details')\">\r\n          <ax-prefix>\r\n            <ax-icon icon=\"fa-solid fa-info-circle\"></ax-icon>\r\n          </ax-prefix>\r\n        </ax-button-item>\r\n        @if(canDelete)\r\n        {\r\n        <ax-button-item class=\"ax-text-danger\" text=\"Delete\" (onClick)=\"handleCommandClick('delete')\">\r\n          <ax-prefix> <ax-icon icon=\"fas fa-trash fa-flip-horizontal\"></ax-icon> </ax-prefix></ax-button-item>\r\n        }\r\n      </ax-button-item-list>\r\n    </ax-dropdown-button>\r\n  </ax-suffix>\r\n</ax-footer>" }]
+            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$2.Actions }] });
 var entityQuickView_component = /*#__PURE__*/Object.freeze({
@@ -1687,7 +1687,7 @@ class AXPEntityModifyPopupAction extends AXPWorkflowAction {
         const { module, entity: entityName, section, id } = payload;
         const entity = await this.entityRegistery.resolve(module, entityName);
         const loader = await this.entityCreateFactory.create(module, entityName, id, section);
-        const com = await import('./acorex-platform-layouts-entity-modify-view.component-D1h1xORH.mjs');
+        const com = await import('./acorex-platform-layouts-entity-modify-view.component-C-dS2HFl.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',
@@ -1966,7 +1966,7 @@ class AXPEntityDetailsViewComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityDetailsViewComponent, deps: [{ token: i1$2.Actions }, { token: i2$1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AXPEntityDetailsViewComponent, isStandalone: true, selector: "ng-component", providers: [AXUnsubscriber], viewQueries: [{ propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true }], ngImport: i0, template: "<ax-drawer-container>\r\n  <!-- <ax-drawer #drawer location=\"start\" [collapsed]=\"!(isOpen | async)\" [mode]=\" (isSM | async) ? 'overlay' : 'push'\"\r\n    *ngIf=\"loader.hasSections$ | async\" (collapsedChange)=\"handleCollapsedChange($event)\">\r\n    <ax-content class=\"ax-border-e ax-p-6 ax-w-64\">\r\n      <p class=\"ax-text-xl ax-font-bold ax-mb-6\">{{loader.sectionTitle}}</p>\r\n      <ax-tabs look=\"with-line\" location=\"start\">\r\n        @for(tab of (loader.sections$ | async); track tab.name)\r\n        {\r\n        <ax-tab-item [text]=\"tab.title\" [active]=\"isActive(tab)\" (onClick)=\"handleMenuClick($event,tab)\"\r\n          [disabled]=\"editForm.context\">\r\n        </ax-tab-item>\r\n        }\r\n      </ax-tabs>\r\n    </ax-content>\r\n  </ax-drawer> -->\r\n  <ax-content #content class=\"ax-overflow-x-hidden\">\r\n    <div\r\n      class=\"ax-flex ax-flex-col ax-gap-4 ax-min-h-full ax-px-4 ax-pb-4 md:ax-px-6 ax-bg-surface   ax-border-b md:ax-border-0 md:ax-bg-default\">\r\n      <div class=\"ax-flex ax-flex-col ax-pt-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all\" #sticky=\"axpSticky\"\r\n        [axpSticky]=\"'ax-bg-surface ax-px-6 ax-py-3 -ax-mx-6 ax-shadow-xl'\" [stickyParent]=\"content.getHostElement()\">\r\n        <!-------- Begin Toolbar  -------->\r\n        <div class=\"ax-flex ax-justify-between ax-items-center\">\r\n          <!-------- Begin Title  -------->\r\n          <div class=\"ax-flex ax-gap-1 ax-items-center\">\r\n            <!-- <ax-button class=\"lg:ax-hidden\">\r\n              <ax-icon class=\"fa-solid fa-chevron-left\"></ax-icon>\r\n            </ax-button> -->\r\n            <div class=\"ax-flex ax-flex-col ax-gap-2\">\r\n              <div class=\"ax-text-xl md:ax-text-3xl ax-font-bold\">{{ loader.title }}</div>\r\n              <!-- <ax-breadcrumbs class=\"child:ax-font-normal child:ax-text-neutral-400\">\r\n                <ng-template #divider>\r\n                  <i class=\"fa-solid fa-chevron-right ax-text-xs ax-mx-2\"></i>\r\n                </ng-template>\r\n                <ax-breadcrumbs-item>\r\n                  <a>Home</a>\r\n                </ax-breadcrumbs-item>\r\n                <ax-breadcrumbs-item>\r\n                  <a>{{ loader.entity.title }}</a>\r\n                </ax-breadcrumbs-item>\r\n                <ax-breadcrumbs-item [active]=\"true\" class=\"!ax-font-semibold !ax-text-neutral-600\">\r\n                  {{ loader.title }}\r\n                </ax-breadcrumbs-item>\r\n              </ax-breadcrumbs> -->\r\n            </div>\r\n          </div>\r\n          <!-------- Finish Title  -------->\r\n          <!--------------------------------------------------------------->\r\n          <!-- Begin Action Menu  -->\r\n          <div class=\"ax-flex ax-items-center ax-gap-3\">\r\n            @if(canCreate || canUpdate) {\r\n            <ax-button [text]=\"(isSM | async) ? null : 'Actions'\" color=\"ghost\">\r\n              <ax-prefix>\r\n                <i class=\"fa-solid fa-ellipsis-vertical\"></i>\r\n              </ax-prefix>\r\n              <ax-dropdown-panel>\r\n                <ax-button-item-list>\r\n                  <!-- <ax-button-item text=\"Share\" class=\"ax-font-semibold\">\r\n                    <ax-prefix>\r\n                      <ax-icon icon=\"fa-solid fa-share\"> </ax-icon>\r\n                    </ax-prefix>\r\n                  </ax-button-item> \r\n                  <ax-divider></ax-divider>-->\r\n                  @if(canCreate) {\r\n                  <ax-button-item text=\"Create New One\" class=\"ax-font-semibold ax-text-primary\"\r\n                    (onClick)=\"handleCommandClick('create')\">\r\n                    <ax-prefix>\r\n                      <ax-icon icon=\"fa-solid fa-add\"> </ax-icon>\r\n                    </ax-prefix>\r\n                  </ax-button-item>\r\n                  } @if(canDelete) {\r\n                  <ax-button-item text=\"Delete\" class=\"ax-font-semibold ax-text-danger\"\r\n                    (onClick)=\"handleCommandClick('delete')\">\r\n                    <ax-prefix>\r\n                      <ax-icon icon=\"fa-solid fa-trash\"> </ax-icon>\r\n                    </ax-prefix>\r\n                  </ax-button-item>\r\n                  }\r\n                </ax-button-item-list>\r\n              </ax-dropdown-panel>\r\n            </ax-button>\r\n            }\r\n          </div>\r\n          <!-- Finish Action Menu  -->\r\n        </div>\r\n        <!----- Finish Toolbar  ----->\r\n        <!--------------------------------------------------------------->\r\n        <!-- Begin Section Tab Items  -->\r\n        @if((loader.hasSections$| async)) {\r\n        <ax-tabs look=\"with-line\" location=\"bottom\" class=\"ax-mt-2\">\r\n          @for(tab of (loader.sections$ | async); track tab.name) {\r\n          <ax-tab-item [text]=\"tab.title\" [active]=\"isActive(tab)\" (onClick)=\"handleMenuClick($event, tab)\"\r\n            class=\"first:!ax-ms-0\"> </ax-tab-item>\r\n          }\r\n        </ax-tabs>\r\n        }\r\n        <!-- Finish Section Tab Items  -->\r\n      </div>\r\n      @for(section of (loader.section$ | async)?.sections; track section.name) {\r\n      <ax-form #form>\r\n        <div class=\"ax-card ax-shadow-md\">\r\n          <div class=\"ax-card-header\">\r\n            <p>{{ section.title }}</p>\r\n            @if(canUpdate) {\r\n            <ax-button text=\"Modify\" class=\"ax-sm\" color=\"primary\" (onClick)=\"handleSectionEdit(section)\">\r\n              <ax-icon class=\"fa-solid fa-pen\"> </ax-icon>\r\n            </ax-button>\r\n            }\r\n          </div>\r\n          <div class=\"ax-card-body ax-divide-y ax-divide-gray-100 dark:ax-divide-gray-700 !ax-gap-0\">\r\n            <ng-container *ngFor=\"let name of section.properties\">\r\n              <ng-container *ngIf=\"loader.getProp(name) as prop\">\r\n                <div class=\"ax-grid md:ax-grid-cols-12 ax-gap-2 ax-py-4 first:ax-pt-0 last:ax-pb-0\">\r\n                  @if(section.options?.showPropTitle!=false){\r\n                  <div\r\n                    class=\"ax-col-span-12 md:ax-col-span-3 lg:ax-col-span-2 ax-flex ax-items-center md:ax-items-start ax-justify-between\">\r\n                    <div class=\"ax-flex ax-flex-col ax-items-start\">\r\n                      <span class=\"ax-font-semibold\">{{ prop.title }}</span>\r\n                      <!-- @if(prop.description) {\r\n                      <i\r\n                        class=\"fa-solid fa-circle-info fa-sm ax-text-neutral-500 dark:ax-text-neutral-400 ax-cursor-pointer\"\r\n                        [axTooltip]=\"prop.description\"\r\n                        [axTooltipPlacement]=\"'end'\"\r\n                      ></i>\r\n                      } -->\r\n                      @if(prop.description) {\r\n                      <span class=\"ax-text-neutral-500 ax-text-xs\">{{ prop.description }}</span>\r\n                      }\r\n                    </div>\r\n                  </div>\r\n                  }\r\n                  <div\r\n                    [class]=\"section.options?.showPropTitle == false ? 'ax-col-span-12' : 'ax-col-span-12 md:ax-col-span-9 lg:ax-col-span-10'\">\r\n                    <axp-widget-renderer [schema]=\"prop.schema\" [context]=\"context()\" [prop]=\"prop\"\r\n                      [mode]=\"'view'\"></axp-widget-renderer>\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </ax-form>\r\n      }\r\n    </div>\r\n  </ax-content>\r\n</ax-drawer-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i4.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i4.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i4$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i10$2.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$2.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "ngmodule", type: AXActionSheetModule }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i11$1.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXDialogModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i9.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i9.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXPSchemaModule }, { kind: "component", type: i10$1.AXPWidgetRendererComponent, selector: "axp-widget-renderer", inputs: ["context", "prop", "mode", "schema"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "ngmodule", type:
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AXPEntityDetailsViewComponent, isStandalone: true, selector: "ng-component", providers: [AXUnsubscriber], viewQueries: [{ propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true }], ngImport: i0, template: "<ax-drawer-container>\n  <!-- <ax-drawer #drawer location=\"start\" [collapsed]=\"!(isOpen | async)\" [mode]=\" (isSM | async) ? 'overlay' : 'push'\"\n    *ngIf=\"loader.hasSections$ | async\" (collapsedChange)=\"handleCollapsedChange($event)\">\n    <ax-content class=\"ax-border-e ax-p-6 ax-w-64\">\n      <p class=\"ax-text-xl ax-font-bold ax-mb-6\">{{loader.sectionTitle}}</p>\n      <ax-tabs look=\"with-line\" location=\"start\">\n        @for(tab of (loader.sections$ | async); track tab.name)\n        {\n        <ax-tab-item [text]=\"tab.title\" [active]=\"isActive(tab)\" (onClick)=\"handleMenuClick($event,tab)\"\n          [disabled]=\"editForm.context\">\n        </ax-tab-item>\n        }\n      </ax-tabs>\n    </ax-content>\n  </ax-drawer> -->\n  <ax-content #content class=\"ax-overflow-x-hidden\">\n    <div\n      class=\"ax-flex ax-flex-col ax-gap-4 ax-min-h-full ax-px-4 ax-pb-4 md:ax-px-6 ax-bg-surface   ax-border-b md:ax-border-0 md:ax-bg-default\">\n      <div class=\"ax-flex ax-flex-col ax-pt-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all\" #sticky=\"axpSticky\"\n        [axpSticky]=\"'ax-bg-surface ax-px-6 ax-py-3 -ax-mx-6 ax-shadow-xl'\" [stickyParent]=\"content.getHostElement()\">\n        <!-------- Begin Toolbar  -------->\n        <div class=\"ax-flex ax-justify-between ax-items-center\">\n          <!-------- Begin Title  -------->\n          <div class=\"ax-flex ax-gap-1 ax-items-center\">\n            <!-- <ax-button class=\"lg:ax-hidden\">\n              <ax-icon class=\"fa-solid fa-chevron-left\"></ax-icon>\n            </ax-button> -->\n            <div class=\"ax-flex ax-flex-col ax-gap-2\">\n              <div class=\"ax-text-xl md:ax-text-3xl ax-font-bold\">{{ loader.title }}</div>\n              <!-- <ax-breadcrumbs class=\"child:ax-font-normal child:ax-text-neutral-400\">\n                <ng-template #divider>\n                  <i class=\"fa-solid fa-chevron-right ax-text-xs ax-mx-2\"></i>\n                </ng-template>\n                <ax-breadcrumbs-item>\n                  <a>Home</a>\n                </ax-breadcrumbs-item>\n                <ax-breadcrumbs-item>\n                  <a>{{ loader.entity.title }}</a>\n                </ax-breadcrumbs-item>\n                <ax-breadcrumbs-item [active]=\"true\" class=\"!ax-font-semibold !ax-text-neutral-600\">\n                  {{ loader.title }}\n                </ax-breadcrumbs-item>\n              </ax-breadcrumbs> -->\n            </div>\n          </div>\n          <!-------- Finish Title  -------->\n          <!--------------------------------------------------------------->\n          <!-- Begin Action Menu  -->\n          <div class=\"ax-flex ax-items-center ax-gap-3\">\n            @if(canCreate || canUpdate) {\n            <ax-button [text]=\"(isSM | async) ? null : 'Actions'\" color=\"ghost\">\n              <ax-prefix>\n                <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n              </ax-prefix>\n              <ax-dropdown-panel>\n                <ax-button-item-list>\n                  <!-- <ax-button-item text=\"Share\" class=\"ax-font-semibold\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-share\"> </ax-icon>\n                    </ax-prefix>\n                  </ax-button-item> \n                  <ax-divider></ax-divider>-->\n                  @if(canCreate) {\n                  <ax-button-item text=\"Create New One\" class=\"ax-font-semibold ax-text-primary\"\n                    (onClick)=\"handleCommandClick('create')\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-add\"> </ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                  } @if(canDelete) {\n                  <ax-button-item text=\"Delete\" class=\"ax-font-semibold ax-text-danger\"\n                    (onClick)=\"handleCommandClick('delete')\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-trash\"> </ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-button>\n            }\n          </div>\n          <!-- Finish Action Menu  -->\n        </div>\n        <!----- Finish Toolbar  ----->\n        <!--------------------------------------------------------------->\n        <!-- Begin Section Tab Items  -->\n        @if((loader.hasSections$| async)) {\n        <ax-tabs look=\"with-line\" location=\"bottom\" class=\"ax-mt-2\">\n          @for(tab of (loader.sections$ | async); track tab.name) {\n          <ax-tab-item [text]=\"tab.title\" [active]=\"isActive(tab)\" (onClick)=\"handleMenuClick($event, tab)\"\n            class=\"first:!ax-ms-0\"> </ax-tab-item>\n          }\n        </ax-tabs>\n        }\n        <!-- Finish Section Tab Items  -->\n      </div>\n      @for(section of (loader.section$ | async)?.sections; track section.name) {\n      <ax-form #form>\n        <div class=\"ax-card ax-shadow-md\">\n          <div class=\"ax-card-header\">\n            <p>{{ section.title }}</p>\n            @if(canUpdate) {\n            <ax-button text=\"Modify\" class=\"ax-sm\" color=\"primary\" (onClick)=\"handleSectionEdit(section)\">\n              <ax-icon class=\"fa-solid fa-pen\"> </ax-icon>\n            </ax-button>\n            }\n          </div>\n          <div class=\"ax-card-body ax-divide-y ax-divide-gray-100 dark:ax-divide-gray-700 !ax-gap-0\">\n            <ng-container *ngFor=\"let name of section.properties\">\n              <ng-container *ngIf=\"loader.getProp(name) as prop\">\n                <div class=\"ax-grid md:ax-grid-cols-12 ax-gap-2 ax-py-4 first:ax-pt-0 last:ax-pb-0\">\n                  @if(section.options?.showPropTitle!=false){\n                  <div\n                    class=\"ax-col-span-12 md:ax-col-span-3 lg:ax-col-span-2 ax-flex ax-items-center md:ax-items-start ax-justify-between\">\n                    <div class=\"ax-flex ax-flex-col ax-items-start\">\n                      <span class=\"ax-font-semibold\">{{ prop.title }}</span>\n                      <!-- @if(prop.description) {\n                      <i\n                        class=\"fa-solid fa-circle-info fa-sm ax-text-neutral-500 dark:ax-text-neutral-400 ax-cursor-pointer\"\n                        [axTooltip]=\"prop.description\"\n                        [axTooltipPlacement]=\"'end'\"\n                      ></i>\n                      } -->\n                      @if(prop.description) {\n                      <span class=\"ax-text-neutral-500 ax-text-xs\">{{ prop.description }}</span>\n                      }\n                    </div>\n                  </div>\n                  }\n                  <div\n                    [class]=\"section.options?.showPropTitle == false ? 'ax-col-span-12' : 'ax-col-span-12 md:ax-col-span-9 lg:ax-col-span-10'\">\n                    <axp-widget-renderer [schema]=\"prop.schema\" [context]=\"context()\" [prop]=\"prop\"\n                      [mode]=\"'view'\"></axp-widget-renderer>\n                  </div>\n                </div>\n              </ng-container>\n            </ng-container>\n          </div>\n        </div>\n      </ax-form>\n      }\n    </div>\n  </ax-content>\n</ax-drawer-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.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", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "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$2.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "ngmodule", type: AXActionSheetModule }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i11$1.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXDialogModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i9.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i9.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXPSchemaModule }, { kind: "component", type: i10$1.AXPWidgetRendererComponent, selector: "axp-widget-renderer", inputs: ["context", "prop", "mode", "schema"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "ngmodule", type:
                 //
                 AXPCommonWidgetModule }, { kind: "directive", type: AXPStickyDirective, selector: "[axpSticky]", inputs: ["axpSticky", "stickyOffset", "stickyParent", "stickyTarget"], outputs: ["isStickyChange"], exportAs: ["axpSticky"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -1997,7 +1997,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                         //
                         AXPCommonWidgetModule,
                         AXPStickyDirective,
-                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [AXUnsubscriber], template: "<ax-drawer-container>\r\n  <!-- <ax-drawer #drawer location=\"start\" [collapsed]=\"!(isOpen | async)\" [mode]=\" (isSM | async) ? 'overlay' : 'push'\"\r\n    *ngIf=\"loader.hasSections$ | async\" (collapsedChange)=\"handleCollapsedChange($event)\">\r\n    <ax-content class=\"ax-border-e ax-p-6 ax-w-64\">\r\n      <p class=\"ax-text-xl ax-font-bold ax-mb-6\">{{loader.sectionTitle}}</p>\r\n      <ax-tabs look=\"with-line\" location=\"start\">\r\n        @for(tab of (loader.sections$ | async); track tab.name)\r\n        {\r\n        <ax-tab-item [text]=\"tab.title\" [active]=\"isActive(tab)\" (onClick)=\"handleMenuClick($event,tab)\"\r\n          [disabled]=\"editForm.context\">\r\n        </ax-tab-item>\r\n        }\r\n      </ax-tabs>\r\n    </ax-content>\r\n  </ax-drawer> -->\r\n  <ax-content #content class=\"ax-overflow-x-hidden\">\r\n    <div\r\n      class=\"ax-flex ax-flex-col ax-gap-4 ax-min-h-full ax-px-4 ax-pb-4 md:ax-px-6 ax-bg-surface   ax-border-b md:ax-border-0 md:ax-bg-default\">\r\n      <div class=\"ax-flex ax-flex-col ax-pt-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all\" #sticky=\"axpSticky\"\r\n        [axpSticky]=\"'ax-bg-surface ax-px-6 ax-py-3 -ax-mx-6 ax-shadow-xl'\" [stickyParent]=\"content.getHostElement()\">\r\n        <!-------- Begin Toolbar  -------->\r\n        <div class=\"ax-flex ax-justify-between ax-items-center\">\r\n          <!-------- Begin Title  -------->\r\n          <div class=\"ax-flex ax-gap-1 ax-items-center\">\r\n            <!-- <ax-button class=\"lg:ax-hidden\">\r\n              <ax-icon class=\"fa-solid fa-chevron-left\"></ax-icon>\r\n            </ax-button> -->\r\n            <div class=\"ax-flex ax-flex-col ax-gap-2\">\r\n              <div class=\"ax-text-xl md:ax-text-3xl ax-font-bold\">{{ loader.title }}</div>\r\n              <!-- <ax-breadcrumbs class=\"child:ax-font-normal child:ax-text-neutral-400\">\r\n                <ng-template #divider>\r\n                  <i class=\"fa-solid fa-chevron-right ax-text-xs ax-mx-2\"></i>\r\n                </ng-template>\r\n                <ax-breadcrumbs-item>\r\n                  <a>Home</a>\r\n                </ax-breadcrumbs-item>\r\n                <ax-breadcrumbs-item>\r\n                  <a>{{ loader.entity.title }}</a>\r\n                </ax-breadcrumbs-item>\r\n                <ax-breadcrumbs-item [active]=\"true\" class=\"!ax-font-semibold !ax-text-neutral-600\">\r\n                  {{ loader.title }}\r\n                </ax-breadcrumbs-item>\r\n              </ax-breadcrumbs> -->\r\n            </div>\r\n          </div>\r\n          <!-------- Finish Title  -------->\r\n          <!--------------------------------------------------------------->\r\n          <!-- Begin Action Menu  -->\r\n          <div class=\"ax-flex ax-items-center ax-gap-3\">\r\n            @if(canCreate || canUpdate) {\r\n            <ax-button [text]=\"(isSM | async) ? null : 'Actions'\" color=\"ghost\">\r\n              <ax-prefix>\r\n                <i class=\"fa-solid fa-ellipsis-vertical\"></i>\r\n              </ax-prefix>\r\n              <ax-dropdown-panel>\r\n                <ax-button-item-list>\r\n                  <!-- <ax-button-item text=\"Share\" class=\"ax-font-semibold\">\r\n                    <ax-prefix>\r\n                      <ax-icon icon=\"fa-solid fa-share\"> </ax-icon>\r\n                    </ax-prefix>\r\n                  </ax-button-item> \r\n                  <ax-divider></ax-divider>-->\r\n                  @if(canCreate) {\r\n                  <ax-button-item text=\"Create New One\" class=\"ax-font-semibold ax-text-primary\"\r\n                    (onClick)=\"handleCommandClick('create')\">\r\n                    <ax-prefix>\r\n                      <ax-icon icon=\"fa-solid fa-add\"> </ax-icon>\r\n                    </ax-prefix>\r\n                  </ax-button-item>\r\n                  } @if(canDelete) {\r\n                  <ax-button-item text=\"Delete\" class=\"ax-font-semibold ax-text-danger\"\r\n                    (onClick)=\"handleCommandClick('delete')\">\r\n                    <ax-prefix>\r\n                      <ax-icon icon=\"fa-solid fa-trash\"> </ax-icon>\r\n                    </ax-prefix>\r\n                  </ax-button-item>\r\n                  }\r\n                </ax-button-item-list>\r\n              </ax-dropdown-panel>\r\n            </ax-button>\r\n            }\r\n          </div>\r\n          <!-- Finish Action Menu  -->\r\n        </div>\r\n        <!----- Finish Toolbar  ----->\r\n        <!--------------------------------------------------------------->\r\n        <!-- Begin Section Tab Items  -->\r\n        @if((loader.hasSections$| async)) {\r\n        <ax-tabs look=\"with-line\" location=\"bottom\" class=\"ax-mt-2\">\r\n          @for(tab of (loader.sections$ | async); track tab.name) {\r\n          <ax-tab-item [text]=\"tab.title\" [active]=\"isActive(tab)\" (onClick)=\"handleMenuClick($event, tab)\"\r\n            class=\"first:!ax-ms-0\"> </ax-tab-item>\r\n          }\r\n        </ax-tabs>\r\n        }\r\n        <!-- Finish Section Tab Items  -->\r\n      </div>\r\n      @for(section of (loader.section$ | async)?.sections; track section.name) {\r\n      <ax-form #form>\r\n        <div class=\"ax-card ax-shadow-md\">\r\n          <div class=\"ax-card-header\">\r\n            <p>{{ section.title }}</p>\r\n            @if(canUpdate) {\r\n            <ax-button text=\"Modify\" class=\"ax-sm\" color=\"primary\" (onClick)=\"handleSectionEdit(section)\">\r\n              <ax-icon class=\"fa-solid fa-pen\"> </ax-icon>\r\n            </ax-button>\r\n            }\r\n          </div>\r\n          <div class=\"ax-card-body ax-divide-y ax-divide-gray-100 dark:ax-divide-gray-700 !ax-gap-0\">\r\n            <ng-container *ngFor=\"let name of section.properties\">\r\n              <ng-container *ngIf=\"loader.getProp(name) as prop\">\r\n                <div class=\"ax-grid md:ax-grid-cols-12 ax-gap-2 ax-py-4 first:ax-pt-0 last:ax-pb-0\">\r\n                  @if(section.options?.showPropTitle!=false){\r\n                  <div\r\n                    class=\"ax-col-span-12 md:ax-col-span-3 lg:ax-col-span-2 ax-flex ax-items-center md:ax-items-start ax-justify-between\">\r\n                    <div class=\"ax-flex ax-flex-col ax-items-start\">\r\n                      <span class=\"ax-font-semibold\">{{ prop.title }}</span>\r\n                      <!-- @if(prop.description) {\r\n                      <i\r\n                        class=\"fa-solid fa-circle-info fa-sm ax-text-neutral-500 dark:ax-text-neutral-400 ax-cursor-pointer\"\r\n                        [axTooltip]=\"prop.description\"\r\n                        [axTooltipPlacement]=\"'end'\"\r\n                      ></i>\r\n                      } -->\r\n                      @if(prop.description) {\r\n                      <span class=\"ax-text-neutral-500 ax-text-xs\">{{ prop.description }}</span>\r\n                      }\r\n                    </div>\r\n                  </div>\r\n                  }\r\n                  <div\r\n                    [class]=\"section.options?.showPropTitle == false ? 'ax-col-span-12' : 'ax-col-span-12 md:ax-col-span-9 lg:ax-col-span-10'\">\r\n                    <axp-widget-renderer [schema]=\"prop.schema\" [context]=\"context()\" [prop]=\"prop\"\r\n                      [mode]=\"'view'\"></axp-widget-renderer>\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </ax-form>\r\n      }\r\n    </div>\r\n  </ax-content>\r\n</ax-drawer-container>" }]
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [AXUnsubscriber], template: "<ax-drawer-container>\n  <!-- <ax-drawer #drawer location=\"start\" [collapsed]=\"!(isOpen | async)\" [mode]=\" (isSM | async) ? 'overlay' : 'push'\"\n    *ngIf=\"loader.hasSections$ | async\" (collapsedChange)=\"handleCollapsedChange($event)\">\n    <ax-content class=\"ax-border-e ax-p-6 ax-w-64\">\n      <p class=\"ax-text-xl ax-font-bold ax-mb-6\">{{loader.sectionTitle}}</p>\n      <ax-tabs look=\"with-line\" location=\"start\">\n        @for(tab of (loader.sections$ | async); track tab.name)\n        {\n        <ax-tab-item [text]=\"tab.title\" [active]=\"isActive(tab)\" (onClick)=\"handleMenuClick($event,tab)\"\n          [disabled]=\"editForm.context\">\n        </ax-tab-item>\n        }\n      </ax-tabs>\n    </ax-content>\n  </ax-drawer> -->\n  <ax-content #content class=\"ax-overflow-x-hidden\">\n    <div\n      class=\"ax-flex ax-flex-col ax-gap-4 ax-min-h-full ax-px-4 ax-pb-4 md:ax-px-6 ax-bg-surface   ax-border-b md:ax-border-0 md:ax-bg-default\">\n      <div class=\"ax-flex ax-flex-col ax-pt-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all\" #sticky=\"axpSticky\"\n        [axpSticky]=\"'ax-bg-surface ax-px-6 ax-py-3 -ax-mx-6 ax-shadow-xl'\" [stickyParent]=\"content.getHostElement()\">\n        <!-------- Begin Toolbar  -------->\n        <div class=\"ax-flex ax-justify-between ax-items-center\">\n          <!-------- Begin Title  -------->\n          <div class=\"ax-flex ax-gap-1 ax-items-center\">\n            <!-- <ax-button class=\"lg:ax-hidden\">\n              <ax-icon class=\"fa-solid fa-chevron-left\"></ax-icon>\n            </ax-button> -->\n            <div class=\"ax-flex ax-flex-col ax-gap-2\">\n              <div class=\"ax-text-xl md:ax-text-3xl ax-font-bold\">{{ loader.title }}</div>\n              <!-- <ax-breadcrumbs class=\"child:ax-font-normal child:ax-text-neutral-400\">\n                <ng-template #divider>\n                  <i class=\"fa-solid fa-chevron-right ax-text-xs ax-mx-2\"></i>\n                </ng-template>\n                <ax-breadcrumbs-item>\n                  <a>Home</a>\n                </ax-breadcrumbs-item>\n                <ax-breadcrumbs-item>\n                  <a>{{ loader.entity.title }}</a>\n                </ax-breadcrumbs-item>\n                <ax-breadcrumbs-item [active]=\"true\" class=\"!ax-font-semibold !ax-text-neutral-600\">\n                  {{ loader.title }}\n                </ax-breadcrumbs-item>\n              </ax-breadcrumbs> -->\n            </div>\n          </div>\n          <!-------- Finish Title  -------->\n          <!--------------------------------------------------------------->\n          <!-- Begin Action Menu  -->\n          <div class=\"ax-flex ax-items-center ax-gap-3\">\n            @if(canCreate || canUpdate) {\n            <ax-button [text]=\"(isSM | async) ? null : 'Actions'\" color=\"ghost\">\n              <ax-prefix>\n                <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n              </ax-prefix>\n              <ax-dropdown-panel>\n                <ax-button-item-list>\n                  <!-- <ax-button-item text=\"Share\" class=\"ax-font-semibold\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-share\"> </ax-icon>\n                    </ax-prefix>\n                  </ax-button-item> \n                  <ax-divider></ax-divider>-->\n                  @if(canCreate) {\n                  <ax-button-item text=\"Create New One\" class=\"ax-font-semibold ax-text-primary\"\n                    (onClick)=\"handleCommandClick('create')\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-add\"> </ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                  } @if(canDelete) {\n                  <ax-button-item text=\"Delete\" class=\"ax-font-semibold ax-text-danger\"\n                    (onClick)=\"handleCommandClick('delete')\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-solid fa-trash\"> </ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-button>\n            }\n          </div>\n          <!-- Finish Action Menu  -->\n        </div>\n        <!----- Finish Toolbar  ----->\n        <!--------------------------------------------------------------->\n        <!-- Begin Section Tab Items  -->\n        @if((loader.hasSections$| async)) {\n        <ax-tabs look=\"with-line\" location=\"bottom\" class=\"ax-mt-2\">\n          @for(tab of (loader.sections$ | async); track tab.name) {\n          <ax-tab-item [text]=\"tab.title\" [active]=\"isActive(tab)\" (onClick)=\"handleMenuClick($event, tab)\"\n            class=\"first:!ax-ms-0\"> </ax-tab-item>\n          }\n        </ax-tabs>\n        }\n        <!-- Finish Section Tab Items  -->\n      </div>\n      @for(section of (loader.section$ | async)?.sections; track section.name) {\n      <ax-form #form>\n        <div class=\"ax-card ax-shadow-md\">\n          <div class=\"ax-card-header\">\n            <p>{{ section.title }}</p>\n            @if(canUpdate) {\n            <ax-button text=\"Modify\" class=\"ax-sm\" color=\"primary\" (onClick)=\"handleSectionEdit(section)\">\n              <ax-icon class=\"fa-solid fa-pen\"> </ax-icon>\n            </ax-button>\n            }\n          </div>\n          <div class=\"ax-card-body ax-divide-y ax-divide-gray-100 dark:ax-divide-gray-700 !ax-gap-0\">\n            <ng-container *ngFor=\"let name of section.properties\">\n              <ng-container *ngIf=\"loader.getProp(name) as prop\">\n                <div class=\"ax-grid md:ax-grid-cols-12 ax-gap-2 ax-py-4 first:ax-pt-0 last:ax-pb-0\">\n                  @if(section.options?.showPropTitle!=false){\n                  <div\n                    class=\"ax-col-span-12 md:ax-col-span-3 lg:ax-col-span-2 ax-flex ax-items-center md:ax-items-start ax-justify-between\">\n                    <div class=\"ax-flex ax-flex-col ax-items-start\">\n                      <span class=\"ax-font-semibold\">{{ prop.title }}</span>\n                      <!-- @if(prop.description) {\n                      <i\n                        class=\"fa-solid fa-circle-info fa-sm ax-text-neutral-500 dark:ax-text-neutral-400 ax-cursor-pointer\"\n                        [axTooltip]=\"prop.description\"\n                        [axTooltipPlacement]=\"'end'\"\n                      ></i>\n                      } -->\n                      @if(prop.description) {\n                      <span class=\"ax-text-neutral-500 ax-text-xs\">{{ prop.description }}</span>\n                      }\n                    </div>\n                  </div>\n                  }\n                  <div\n                    [class]=\"section.options?.showPropTitle == false ? 'ax-col-span-12' : 'ax-col-span-12 md:ax-col-span-9 lg:ax-col-span-10'\">\n                    <axp-widget-renderer [schema]=\"prop.schema\" [context]=\"context()\" [prop]=\"prop\"\n                      [mode]=\"'view'\"></axp-widget-renderer>\n                  </div>\n                </div>\n              </ng-container>\n            </ng-container>\n          </div>\n        </div>\n      </ax-form>\n      }\n    </div>\n  </ax-content>\n</ax-drawer-container>" }]
         }], ctorParameters: () => [{ type: i1$2.Actions }, { type: i2$1.AXUnsubscriber }], propDecorators: { drawer: [{
                 type: ViewChild,
                 args: ['drawer']
@@ -2153,7 +2153,7 @@ class AXPEntityModifySectionPopupAction extends AXPWorkflowAction {
         const { module, entity: entityName, section, id } = payload;
         const entity = await this.entityRegistery.resolve(module, entityName);
         const loader = await this.entityCreateFactory.create(module, entityName, id, section);
-        const com = await import('./acorex-platform-layouts-entity-modify-view.component-D1h1xORH.mjs');
+        const com = await import('./acorex-platform-layouts-entity-modify-view.component-C-dS2HFl.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',