@acorex/platform 18.1.5 → 18.1.6

package/esm2022/layouts/lib/admin/entity-layout/entity-list-view/components/entity-custom-view/entity-custom-view.component.mjs

@@ -182,7 +182,7 @@ export 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\">\n  <div class=\"ax-flex ax-items-center\">\n    @if (showNameInput() && mode==='create') {\n    <div class=\"ax-w-60\">\n      <ax-text-box class=\"ax-sm\" [(ngModel)]=\"selectedView.title\">\n        @if(showNameInput()){\n        <ax-suffix>\n          <ax-button (onClick)=\"changeViewNameToggle()\" look=\"default\">\n            <ax-icon class=\"fa-sodild fas fa-check ax-text-sm\"> </ax-icon>\n          </ax-button>\n        </ax-suffix>\n        }\n      </ax-text-box>\n    </div>\n    }@else {\n    <span class=\"ax-text-lg ax-font-semibold\">{{ selectedView.title }}</span>\n    } @if (mode===\"create\") {\n    <ax-button class=\"ax-xs\" (onClick)=\"changeViewNameToggle()\" color=\"default\">\n      @if(!showNameInput() ){\n      <ax-icon class=\"fa-regular fa-pen ax-text-sm ax-text-neutral-600\"> </ax-icon>\n      }\n    </ax-button>\n    }\n  </div>\n  <ax-close-button></ax-close-button>\n</ax-header>\n<div class=\"ax-p-4\">\n  <ax-tabs [content]=\"contents\" look=\"with-line\">\n    <ax-tab-item [text]=\"('entity.columns' | translate | async) ?? 'Columns'\">\n      <ax-suffix>\n        <ax-badge [text]=\"visibleColumns().length.toString()\" color=\"primary\"> </ax-badge>\n      </ax-suffix>\n      <ax-content>\n        <div class=\"ax-flex ax-flex-col ax-gap-4 ax-p-4 ax-select-none ax-h-[400px]\" cdkDropList (cdkDropListDropped)=\"drop('columns', $event)\">\n          <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-overflow-auto ax-pe-2\">\n            <ng-container *ngFor=\"let item of columns()\">\n              <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n                <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\n                  <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\n                  <p class=\"ax-font-medium ax-text-sm\">{{ item.title }}</p>\n                </div>\n                <ax-switch class=\"ax-sm\" [(ngModel)]=\"item.visible\" (onValueChanged)=\"updateColumnItem($event, item.name)\"></ax-switch>\n              </div>\n            </ng-container>\n          </div>\n        </div>\n      </ax-content>\n    </ax-tab-item>\n    <ax-tab-item text=\"Conditions\">\n      <ax-suffix>\n        <ax-badge [text]=\"conditions().length.toString()\" color=\"primary\"> </ax-badge>\n      </ax-suffix>\n      <ax-content>\n        <div\n          class=\"ax-flex ax-flex-col ax-justify-start ax-gap-4 ax-py-4 ax-select-none ax-h-[400px]\"\n          [class.ax-justify-center]=\"!conditions().length\"\n        >\n          @if(!conditions().length){\n          <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\n            <ax-image src=\"assets/documents.svg\"></ax-image>\n            <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">No Filters Selected</p>\n            <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\">Please select field(s) that you want to filter</span>\n          </div>\n          } @else {\n          <div class=\"ax-sorted-list ax-px-4 ax-py-1 ax-overflow-auto\">\n            <div cdkDropList (cdkDropListDropped)=\"drop('conditions', $event)\" class=\"ax-flex ax-flex-col ax-gap-2\">\n              @for(item of conditions(); track item.name ){\n              <div cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n                <div class=\"ax-ms-4 ax-flex ax-items-start ax-gap-2\">\n                  <ax-label>{{ loader.getProp(item.name)?.title }}</ax-label>\n                  @if(getOperatorTitle(item.name,item.operator)){\n                  <ax-badge class=\"ax-text-xs\" color=\"primary\" [look]=\"'twotone'\" [text]=\"getOperatorTitle(item.name, item.operator)\"></ax-badge>\n                  }\n                </div>\n                <div class=\"ax-flex ax-group ax-items-center ax-gap-2\">\n                  <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\n                  <div class=\"ax-w-full\">\n                    <axp-widget-filter-renderer\n                      [schema]=\"getSchema(item.name)\"\n                      [prop]=\"loader.getProp(item.name)\"\n                      [(value)]=\"item.value\"\n                      [(operator)]=\"item.operator\"\n                    >\n                    </axp-widget-filter-renderer>\n                  </div>\n                  <ax-button look=\"blank\" color=\"danger\" class=\"ax-sm\" (onClick)=\"removeCondition(item)\">\n                    <ax-icon class=\"fa-solid fa-trash-can\"></ax-icon>\n                  </ax-button>\n                </div>\n              </div>\n              }\n            </div>\n          </div>\n          }\n          <div class=\"ax-flex ax-gap-2\">\n            <div class=\"ax-w-full\" #addField>\n              @if(conditions().length){\n              <ax-button color=\"primary\" [text]=\"'entity.add-field' | translate | async\" look=\"blank\" class=\"ax-sm\"></ax-button>\n              }@else {\n              <div class=\"ax-flex ax-justify-center ax-w-full\">\n                <ax-button color=\"primary\" [text]=\"'entity.add-field' | translate | async\" look=\"outline\" class=\"ax-md ax-w-56\"></ax-button>\n              </div>\n              }\n              <ax-popover\n                #conditionsPopover\n                [target]=\"addField\"\n                [placement]=\"conditions().length ? 'bottom-start' : 'bottom'\"\n                [offsetY]=\"8\"\n                [openOn]=\"'toggle'\"\n                [closeOn]=\"'clickOut'\"\n                [adaptivityEnabled]=\"true\"\n                (onOpened)=\"resetSelectedFieldNames()\"\n              >\n                <div class=\"ax-bg-surface ax-border ax-border-default ax-rounded-md ax-shadow-md ax-w-full ax-min-w-[250px]\">\n                  <div class=\"ax-border-b-[1px] ax-pb-2 ax-mb-2 ax-p-3\">\n                    <ax-title class=\"ax-font-bold\">Fields</ax-title>\n                  </div>\n                  <div class=\"ax-max-h-48 ax-overflow-auto\">\n                    <ax-selection-list\n                      [valueField]=\"'name'\"\n                      [textField]=\"'title'\"\n                      [(ngModel)]=\"selectedConditionNames\"\n                      [direction]=\"'vertical'\"\n                      [items]=\"props()\"\n                      [multiple]=\"true\"\n                    ></ax-selection-list>\n                  </div>\n                  <div class=\"ax-flex ax-justify-end ax-border-t-[1px] ax-p-3\">\n                    <ax-button (onClick)=\"addCondition(); conditionsPopover.close()\" class=\"ax-sm\" text=\"Confirm\" color=\"primary\"> </ax-button>\n                  </div>\n                </div>\n              </ax-popover>\n            </div>\n          </div>\n        </div>\n      </ax-content>\n    </ax-tab-item>\n    <ax-tab-item text=\"Sorting\">\n      <ax-suffix>\n        <ax-badge [text]=\"sorts().length.toString()\" color=\"primary\"> </ax-badge>\n      </ax-suffix>\n      <ax-content>\n        <div\n          class=\"ax-flex ax-p-4 ax-flex-col ax-justify-start ax-gap-4 ax-select-none ax-overflow-auto ax-h-[400px]\"\n          [class.ax-justify-center]=\"!sorts().length\"\n        >\n          @if(!sorts().length){\n          <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\n            <ax-image src=\"assets/documents.svg\"></ax-image>\n            <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">{{ 'entity.no-sort' | translate | async }}</p>\n            <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\">{{ 'entity.ask-sort' | translate | async }}</span>\n          </div>\n          }@else {\n          <div\n            cdkDropList\n            (cdkDropListDropped)=\"drop('sorts', $event)\"\n            class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-py-1 ax-overflow-auto\"\n          >\n            <ng-container *ngFor=\"let item of sorts()\">\n              <div class=\"ax-flex ax-gap-2 ax-items-center\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n                <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\n                <ax-select-box [dataSource]=\"props()\" valueField=\"name\" textField=\"title\" [(ngModel)]=\"item.name\"> </ax-select-box>\n                <ax-button [color]=\"'default'\" class=\"ax-sm\" (click)=\"updateSortItem(item)\">\n                  <ax-icon [class.ax-text-primary]=\"item.dir == 'asc'\" class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"></ax-icon>\n                  <ax-icon [class.ax-text-primary]=\"item.dir == 'desc'\" class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"></ax-icon>\n                </ax-button>\n\n                <ax-button look=\"blank\" (onClick)=\"removeSortItem(item)\">\n                  <ax-icon class=\"fa-solid fa-trash-can ax-text-danger-500\"></ax-icon>\n                </ax-button>\n              </div>\n            </ng-container>\n          </div>\n          }\n\n          <div class=\"ax-flex ax-gap-2\">\n            <div class=\"ax-w-full\" #addField>\n              @if(sorts().length){\n              <ax-button\n                (onClick)=\"addSortItem()\"\n                color=\"primary\"\n                [text]=\"'entity.add-field' | translate | async\"\n                look=\"blank\"\n                class=\"ax-sm\"\n              ></ax-button>\n              }@else {\n              <div class=\"ax-flex ax-justify-center ax-w-full\">\n                <ax-button\n                  (onClick)=\"addSortItem()\"\n                  color=\"primary\"\n                  [text]=\"'entity.add-field' | translate | async\"\n                  look=\"outline\"\n                  class=\"ax-md ax-w-56\"\n                ></ax-button>\n              </div>\n              }\n            </div>\n          </div>\n        </div>\n      </ax-content>\n    </ax-tab-item>\n  </ax-tabs>\n  <ng-template [axTabContent] #contents=\"axTabContent\"> </ng-template>\n</div>\n<ax-footer class=\"!ax-justify-end\">\n  @if (mode===\"edit\") {\n  <ax-dropdown-button [text]=\"'discard' | translate | async\" (onClick)=\"handleDiscardClick()\">\n    <ax-button-item-list>\n      <ax-button-item [text]=\"('reset' | translate | async) ?? ' '\" (onClick)=\"handleResetClick()\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-solid fa-rotate-left fa-flip-horizontal\"></ax-icon>\n        </ax-prefix>\n      </ax-button-item>\n      <ax-button-item class=\"ax-text-danger\" text=\"Delete\" (onClick)=\"handleDeleteClick()\">\n        <ax-prefix> <ax-icon icon=\"fas fa-trash fa-flip-horizontal\"></ax-icon> </ax-prefix\n      ></ax-button-item>\n    </ax-button-item-list>\n  </ax-dropdown-button>\n  } @else {\n  <ax-button [text]=\"'cancel' | translate | async\" look=\"outline\" (onClick)=\"handleCancelClick()\"></ax-button>\n  }\n  <ax-button [text]=\"mode === 'create' ? ('save' | translate | async) : ('save-changes' | translate | async)\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\n</ax-footer>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: 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: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "component", type: i3.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i3.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "component", type: i4.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }, { kind: "component", type: i4.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i5.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: i6.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i7.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: i8.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "component", type: i9.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i9.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "directive", type: i9.AXTabContentDirective, selector: "[axTabContent]", inputs: ["axTabContent"], exportAs: ["axTabContent"] }, { kind: "component", type: i10.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "component", type: i11.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: i12.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: i13.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "hintField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "component", type: i14.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "directive", type: i15.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i15.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i15.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i16.AXPWidgetFilterRendererComponent, selector: "axp-widget-filter-renderer", inputs: ["value", "operator", "prop", "schema"], outputs: ["valueChange", "operatorChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i17.AXTranslatorPipe, name: "translate" }], 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]=\"('entity.columns' | translate | async) ?? 'Columns'\">\n      <ax-suffix>\n        <ax-badge [text]=\"visibleColumns().length.toString()\" color=\"primary\"> </ax-badge>\n      </ax-suffix>\n      <ax-content>\n        <div class=\"ax-flex ax-flex-col ax-gap-4 ax-p-4 ax-select-none ax-h-[400px]\" cdkDropList (cdkDropListDropped)=\"drop('columns', $event)\">\n          <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-overflow-auto ax-pe-2\">\n            <ng-container *ngFor=\"let item of columns()\">\n              <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n                <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\n                  <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\n                  <p class=\"ax-font-medium ax-text-sm\">{{ item.title }}</p>\n                </div>\n                <ax-switch class=\"ax-sm\" [(ngModel)]=\"item.visible\" (onValueChanged)=\"updateColumnItem($event, item.name)\"></ax-switch>\n              </div>\n            </ng-container>\n          </div>\n        </div>\n      </ax-content>\n    </ax-tab-item>\n    <ax-tab-item text=\"Conditions\">\n      <ax-suffix>\n        <ax-badge [text]=\"conditions().length.toString()\" color=\"primary\"> </ax-badge>\n      </ax-suffix>\n      <ax-content>\n        <div\n          class=\"ax-flex ax-flex-col ax-justify-start ax-gap-4 ax-py-4 ax-select-none ax-h-[400px]\"\n          [class.ax-justify-center]=\"!conditions().length\"\n        >\n          @if(!conditions().length){\n          <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\n            <ax-image src=\"assets/documents.svg\"></ax-image>\n            <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">No Filters Selected</p>\n            <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\">Please select field(s) that you want to filter</span>\n          </div>\n          } @else {\n          <div class=\"ax-sorted-list ax-px-4 ax-py-1 ax-overflow-auto\">\n            <div cdkDropList (cdkDropListDropped)=\"drop('conditions', $event)\" class=\"ax-flex ax-flex-col ax-gap-2\">\n              @for(item of conditions(); track item.name ){\n              <div cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n                <div class=\"ax-ms-4 ax-flex ax-items-start ax-gap-2\">\n                  <ax-label>{{ loader.getProp(item.name)?.title }}</ax-label>\n                  @if(getOperatorTitle(item.name,item.operator)){\n                  <ax-badge class=\"ax-text-xs\" color=\"primary\" [look]=\"'twotone'\" [text]=\"getOperatorTitle(item.name, item.operator)\"></ax-badge>\n                  }\n                </div>\n                <div class=\"ax-flex ax-group ax-items-center ax-gap-2\">\n                  <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\n                  <div class=\"ax-w-full\">\n                    <axp-widget-filter-renderer\n                      [schema]=\"getSchema(item.name)\"\n                      [prop]=\"loader.getProp(item.name)\"\n                      [(value)]=\"item.value\"\n                      [(operator)]=\"item.operator\"\n                    >\n                    </axp-widget-filter-renderer>\n                  </div>\n                  <ax-button look=\"blank\" color=\"danger\" class=\"ax-sm\" (onClick)=\"removeCondition(item)\">\n                    <ax-icon class=\"fa-solid fa-trash-can\"></ax-icon>\n                  </ax-button>\n                </div>\n              </div>\n              }\n            </div>\n          </div>\n          }\n          <div class=\"ax-flex ax-gap-2\">\n            <div class=\"ax-w-full\" #addField>\n              @if(conditions().length){\n              <ax-button color=\"primary\" [text]=\"'entity.add-field' | translate | async\" look=\"blank\" class=\"ax-sm\"></ax-button>\n              }@else {\n              <div class=\"ax-flex ax-justify-center ax-w-full\">\n                <ax-button color=\"primary\" [text]=\"'entity.add-field' | translate | async\" look=\"outline\" class=\"ax-md ax-w-56\"></ax-button>\n              </div>\n              }\n              <ax-popover\n                #conditionsPopover\n                [target]=\"addField\"\n                [placement]=\"conditions().length ? 'bottom-start' : 'bottom'\"\n                [offsetY]=\"8\"\n                [openOn]=\"'toggle'\"\n                [closeOn]=\"'clickOut'\"\n                [adaptivityEnabled]=\"true\"\n                (onOpened)=\"resetSelectedFieldNames()\"\n              >\n                <div class=\"ax-bg-surface ax-border ax-border-default ax-rounded-md ax-shadow-md ax-w-full ax-min-w-[250px]\">\n                  <div class=\"ax-border-b-[1px] ax-pb-2 ax-mb-2 ax-p-3\">\n                    <ax-title class=\"ax-font-bold\">Fields</ax-title>\n                  </div>\n                  <div class=\"ax-max-h-48 ax-overflow-auto\">\n                    <ax-selection-list\n                      [valueField]=\"'name'\"\n                      [textField]=\"'title'\"\n                      [(ngModel)]=\"selectedConditionNames\"\n                      [direction]=\"'vertical'\"\n                      [items]=\"props()\"\n                      [multiple]=\"true\"\n                    ></ax-selection-list>\n                  </div>\n                  <div class=\"ax-flex ax-justify-end ax-border-t-[1px] ax-p-3\">\n                    <ax-button (onClick)=\"addCondition(); conditionsPopover.close()\" class=\"ax-sm\" text=\"Confirm\" color=\"primary\"> </ax-button>\n                  </div>\n                </div>\n              </ax-popover>\n            </div>\n          </div>\n        </div>\n      </ax-content>\n    </ax-tab-item>\n    <ax-tab-item text=\"Sorting\">\n      <ax-suffix>\n        <ax-badge [text]=\"sorts().length.toString()\" color=\"primary\"> </ax-badge>\n      </ax-suffix>\n      <ax-content>\n        <div\n          class=\"ax-flex ax-p-4 ax-flex-col ax-justify-start ax-gap-4 ax-select-none ax-overflow-auto ax-h-[400px]\"\n          [class.ax-justify-center]=\"!sorts().length\"\n        >\n          @if(!sorts().length){\n          <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\n            <ax-image src=\"assets/documents.svg\"></ax-image>\n            <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">{{ 'entity.no-sort' | translate | async }}</p>\n            <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\">{{ 'entity.ask-sort' | translate | async }}</span>\n          </div>\n          }@else {\n          <div\n            cdkDropList\n            (cdkDropListDropped)=\"drop('sorts', $event)\"\n            class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-py-1 ax-overflow-auto\"\n          >\n            <ng-container *ngFor=\"let item of sorts()\">\n              <div class=\"ax-flex ax-gap-2 ax-items-center\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n                <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\n                <ax-select-box [dataSource]=\"props()\" valueField=\"name\" textField=\"title\" [(ngModel)]=\"item.name\"> </ax-select-box>\n                <ax-button [color]=\"'default'\" class=\"ax-sm\" (click)=\"updateSortItem(item)\">\n                  <ax-icon [class.ax-text-primary]=\"item.dir == 'asc'\" class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"></ax-icon>\n                  <ax-icon [class.ax-text-primary]=\"item.dir == 'desc'\" class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"></ax-icon>\n                </ax-button>\n\n                <ax-button look=\"blank\" (onClick)=\"removeSortItem(item)\">\n                  <ax-icon class=\"fa-solid fa-trash-can ax-text-danger-500\"></ax-icon>\n                </ax-button>\n              </div>\n            </ng-container>\n          </div>\n          }\n\n          <div class=\"ax-flex ax-gap-2\">\n            <div class=\"ax-w-full\" #addField>\n              @if(sorts().length){\n              <ax-button\n                (onClick)=\"addSortItem()\"\n                color=\"primary\"\n                [text]=\"'entity.add-field' | translate | async\"\n                look=\"blank\"\n                class=\"ax-sm\"\n              ></ax-button>\n              }@else {\n              <div class=\"ax-flex ax-justify-center ax-w-full\">\n                <ax-button\n                  (onClick)=\"addSortItem()\"\n                  color=\"primary\"\n                  [text]=\"'entity.add-field' | translate | async\"\n                  look=\"outline\"\n                  class=\"ax-md ax-w-56\"\n                ></ax-button>\n              </div>\n              }\n            </div>\n          </div>\n        </div>\n      </ax-content>\n    </ax-tab-item>\n  </ax-tabs>\n  <ng-template [axTabContent] #contents=\"axTabContent\"> </ng-template>\n</div>\n<ax-footer class=\"!ax-justify-end\">\n  @if (mode===\"edit\") {\n  <ax-dropdown-button [text]=\"'discard' | translate | async\" (onClick)=\"handleDiscardClick()\">\n    <ax-button-item-list>\n      <ax-button-item [text]=\"('reset' | translate | async) ?? ' '\" (onClick)=\"handleResetClick()\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-solid fa-rotate-left fa-flip-horizontal\"></ax-icon>\n        </ax-prefix>\n      </ax-button-item>\n      <ax-button-item class=\"ax-text-danger\" text=\"Delete\" (onClick)=\"handleDeleteClick()\">\n        <ax-prefix> <ax-icon icon=\"fas fa-trash fa-flip-horizontal\"></ax-icon> </ax-prefix\n      ></ax-button-item>\n    </ax-button-item-list>\n  </ax-dropdown-button>\n  } @else {\n  <ax-button [text]=\"'cancel' | translate | async\" look=\"outline\" (onClick)=\"handleCancelClick()\"></ax-button>\n  }\n  <ax-button [text]=\"mode === 'create' ? ('save' | translate | async) : ('save-changes' | translate | async)\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\n</ax-footer>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: 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: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "component", type: i3.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i3.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "component", type: i4.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }, { kind: "component", type: i4.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", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i7.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: i8.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "component", type: i9.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i9.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "directive", type: i9.AXTabContentDirective, selector: "[axTabContent]", inputs: ["axTabContent"], exportAs: ["axTabContent"] }, { kind: "component", type: i10.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "component", type: i11.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: i12.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: i13.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "hintField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "component", type: i14.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "directive", type: i15.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i15.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i15.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i16.AXPWidgetFilterRendererComponent, selector: "axp-widget-filter-renderer", inputs: ["value", "operator", "prop", "schema"], outputs: ["valueChange", "operatorChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i17.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityCreateCustomViewComponent, decorators: [{
             type: Component,

package/esm2022/layouts/lib/admin/entity-layout/entity-list-view/components/list-view-option-conditions/list-view-option-conditions.component.mjs

@@ -93,7 +93,7 @@ export class AXPListViewOptionConditionsComponent {
         this.onClosed.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPListViewOptionConditionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPListViewOptionConditionsComponent, selector: "axp-list-view-option-conditions", inputs: { loader: "loader" }, outputs: { onClosed: "onClosed" }, ngImport: i0, template: "<ax-header class=\"ax-flex ax-items-center\">\n  <h2 class=\"ax-text-xl ax-font-bold\">Filters</h2>\n  <ax-button (onClick)=\"handleClose()\" [look]=\"'blank'\">\n    <ax-icon class=\"fa-solid fa-close ax-text-neutral-400 ax-text-xl\"> </ax-icon>\n  </ax-button>\n</ax-header>\n<div\n  class=\"ax-flex ax-flex-col ax-justify-center ax-gap-4 ax-py-4 ax-select-none\"\n  [class.ax-h-[calc(100vh-310px)]]=\"!(conditions$ | async)?.length\"\n>\n  @if(!(conditions$ | async)?.length){\n  <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\n    <ax-image src=\"assets/documents.svg\"></ax-image>\n    <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">No Filters Selected</p>\n    <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\">Please select field(s) that you want to filter</span>\n  </div>\n  } @else {\n  <div class=\"ax-sorted-list ax-max-h-[calc(100vh-310px)] ax-px-4 ax-py-1 ax-overflow-auto\">\n    <div cdkDropList (cdkDropListDropped)=\"drop($event)\" class=\"ax-flex ax-flex-col ax-gap-2\">\n      @for(item of conditions$ | async; track item.name ){\n      <div cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n        <div class=\"ax-ms-4 ax-flex ax-items-start ax-gap-2\">\n          <ax-label>{{ loader.getProp(item.name)?.title }}</ax-label>\n          @if(getOperatorTitle(item.name,item.operator)){\n          <ax-badge\n            class=\"ax-text-xs\"\n            color=\"primary\"\n            [look]=\"'twotone'\"\n            [text]=\"getOperatorTitle(item.name, item.operator)\"\n          ></ax-badge>\n          }\n        </div>\n        <div class=\"ax-flex ax-group ax-items-center ax-gap-2\">\n          <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\n          <div class=\"ax-w-full\">\n            <!-- <ax-text-box [(ngModel)]=\"item.value\"></ax-text-box> -->\n            <axp-widget-filter-renderer\n              [schema]=\"getSchema(item.name)\"\n              [prop]=\"loader.getProp(item.name)\"\n              [(value)]=\"item.value\"\n              [(operator)]=\"item.operator\"\n            >\n            </axp-widget-filter-renderer>\n          </div>\n          <ax-button look=\"blank\" color=\"danger\" class=\"ax-sm\" (onClick)=\"handleRemoveCondition(item)\">\n            <ax-icon class=\"fa-solid fa-trash-can\"></ax-icon>\n          </ax-button>\n        </div>\n      </div>\n      }\n    </div>\n  </div>\n  }\n  <div class=\"ax-flex ax-gap-2\">\n    <div class=\"ax-w-full\" #addField>\n      @if((conditions$ | async)?.length){\n      <ax-button color=\"primary\" [text]=\"'entity.add-field' | translate | async\" look=\"blank\" class=\"ax-sm\"></ax-button>\n      }@else {\n      <div class=\"ax-flex ax-justify-center ax-w-full\">\n        <ax-button color=\"primary\" [text]=\"'entity.add-field' | translate | async\" look=\"outline\" class=\"ax-md ax-w-56\"></ax-button>\n      </div>\n      }\n    </div>\n    <ax-popover\n      #fieldsPopover\n      [target]=\"addField\"\n      [openOn]=\"'toggle'\"\n      [closeOn]=\"'clickOut'\"\n      [adaptivityEnabled]=\"true\"\n      (onOpened)=\"resetSelectedFieldNames()\"\n      [offsetX]=\"15\"\n    >\n      <div class=\"ax-bg-surface ax-border ax-border-default ax-rounded-md ax-shadow-md ax-w-full ax-min-w-[250px]\">\n        <div class=\"ax-border-b-[1px] ax-pb-2 ax-mb-2 ax-p-3\">\n          <ax-title class=\"ax-font-bold\">Fields</ax-title>\n        </div>\n        <div class=\"ax-max-h-72 2xl:ax-max-h-80 ax-overflow-auto\">\n          <ax-selection-list\n            [valueField]=\"'name'\"\n            [textField]=\"'title'\"\n            [(ngModel)]=\"selectedFieldNames\"\n            [direction]=\"'vertical'\"\n            [items]=\"props\"\n            [multiple]=\"true\"\n          ></ax-selection-list>\n        </div>\n        <div class=\"ax-flex ax-justify-end ax-border-t-[1px] ax-p-3\">\n          <ax-button (onClick)=\"onConfirmFields(); fieldsPopover.close()\" class=\"ax-sm\" text=\"Confirm\" color=\"primary\">\n          </ax-button>\n        </div>\n      </div>\n    </ax-popover>\n  </div>\n</div>\n<ax-footer class=\"!ax-justify-start ax-absolute ax-bottom-0 ax-w-full\">\n  <ax-button [text]=\"'apply' | translate | async\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\n  <ax-button [text]=\"'reset' | translate | async\" color=\"ghost\" (onClick)=\"handleResetClick()\"></ax-button>\n</ax-footer>\n", dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i4.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: i5.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i6.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: i7.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: i8.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: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i9.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i9.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i10.AXPWidgetFilterRendererComponent, selector: "axp-widget-filter-renderer", inputs: ["value", "operator", "prop", "schema"], outputs: ["valueChange", "operatorChange"] }, { kind: "pipe", type: i11.AsyncPipe, name: "async" }, { kind: "pipe", type: i12.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPListViewOptionConditionsComponent, selector: "axp-list-view-option-conditions", inputs: { loader: "loader" }, outputs: { onClosed: "onClosed" }, ngImport: i0, template: "<ax-header class=\"ax-flex ax-items-center\">\n  <h2 class=\"ax-text-xl ax-font-bold\">Filters</h2>\n  <ax-button (onClick)=\"handleClose()\" [look]=\"'blank'\">\n    <ax-icon class=\"fa-solid fa-close ax-text-neutral-400 ax-text-xl\"> </ax-icon>\n  </ax-button>\n</ax-header>\n<div\n  class=\"ax-flex ax-flex-col ax-justify-center ax-gap-4 ax-py-4 ax-select-none\"\n  [class.ax-h-[calc(100vh-310px)]]=\"!(conditions$ | async)?.length\"\n>\n  @if(!(conditions$ | async)?.length){\n  <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center\">\n    <ax-image src=\"assets/documents.svg\"></ax-image>\n    <p class=\"ax-mt-6 ax-mb-1 ax-font-bold\">No Filters Selected</p>\n    <span class=\"ax-text-neutral-400 ax-text-sm md:ax-text-md\">Please select field(s) that you want to filter</span>\n  </div>\n  } @else {\n  <div class=\"ax-sorted-list ax-max-h-[calc(100vh-310px)] ax-px-4 ax-py-1 ax-overflow-auto\">\n    <div cdkDropList (cdkDropListDropped)=\"drop($event)\" class=\"ax-flex ax-flex-col ax-gap-2\">\n      @for(item of conditions$ | async; track item.name ){\n      <div cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n        <div class=\"ax-ms-4 ax-flex ax-items-start ax-gap-2\">\n          <ax-label>{{ loader.getProp(item.name)?.title }}</ax-label>\n          @if(getOperatorTitle(item.name,item.operator)){\n          <ax-badge\n            class=\"ax-text-xs\"\n            color=\"primary\"\n            [look]=\"'twotone'\"\n            [text]=\"getOperatorTitle(item.name, item.operator)\"\n          ></ax-badge>\n          }\n        </div>\n        <div class=\"ax-flex ax-group ax-items-center ax-gap-2\">\n          <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\" cdkDragHandle></ax-icon>\n          <div class=\"ax-w-full\">\n            <!-- <ax-text-box [(ngModel)]=\"item.value\"></ax-text-box> -->\n            <axp-widget-filter-renderer\n              [schema]=\"getSchema(item.name)\"\n              [prop]=\"loader.getProp(item.name)\"\n              [(value)]=\"item.value\"\n              [(operator)]=\"item.operator\"\n            >\n            </axp-widget-filter-renderer>\n          </div>\n          <ax-button look=\"blank\" color=\"danger\" class=\"ax-sm\" (onClick)=\"handleRemoveCondition(item)\">\n            <ax-icon class=\"fa-solid fa-trash-can\"></ax-icon>\n          </ax-button>\n        </div>\n      </div>\n      }\n    </div>\n  </div>\n  }\n  <div class=\"ax-flex ax-gap-2\">\n    <div class=\"ax-w-full\" #addField>\n      @if((conditions$ | async)?.length){\n      <ax-button color=\"primary\" [text]=\"'entity.add-field' | translate | async\" look=\"blank\" class=\"ax-sm\"></ax-button>\n      }@else {\n      <div class=\"ax-flex ax-justify-center ax-w-full\">\n        <ax-button color=\"primary\" [text]=\"'entity.add-field' | translate | async\" look=\"outline\" class=\"ax-md ax-w-56\"></ax-button>\n      </div>\n      }\n    </div>\n    <ax-popover\n      #fieldsPopover\n      [target]=\"addField\"\n      [openOn]=\"'toggle'\"\n      [closeOn]=\"'clickOut'\"\n      [adaptivityEnabled]=\"true\"\n      (onOpened)=\"resetSelectedFieldNames()\"\n      [offsetX]=\"15\"\n    >\n      <div class=\"ax-bg-surface ax-border ax-border-default ax-rounded-md ax-shadow-md ax-w-full ax-min-w-[250px]\">\n        <div class=\"ax-border-b-[1px] ax-pb-2 ax-mb-2 ax-p-3\">\n          <ax-title class=\"ax-font-bold\">Fields</ax-title>\n        </div>\n        <div class=\"ax-max-h-72 2xl:ax-max-h-80 ax-overflow-auto\">\n          <ax-selection-list\n            [valueField]=\"'name'\"\n            [textField]=\"'title'\"\n            [(ngModel)]=\"selectedFieldNames\"\n            [direction]=\"'vertical'\"\n            [items]=\"props\"\n            [multiple]=\"true\"\n          ></ax-selection-list>\n        </div>\n        <div class=\"ax-flex ax-justify-end ax-border-t-[1px] ax-p-3\">\n          <ax-button (onClick)=\"onConfirmFields(); fieldsPopover.close()\" class=\"ax-sm\" text=\"Confirm\" color=\"primary\">\n          </ax-button>\n        </div>\n      </div>\n    </ax-popover>\n  </div>\n</div>\n<ax-footer class=\"!ax-justify-start ax-absolute ax-bottom-0 ax-w-full\">\n  <ax-button [text]=\"'apply' | translate | async\" color=\"primary\" (onClick)=\"handleApplyClick()\"></ax-button>\n  <ax-button [text]=\"'reset' | translate | async\" color=\"ghost\" (onClick)=\"handleResetClick()\"></ax-button>\n</ax-footer>\n", dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i4.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: i5.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i6.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: i7.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: i8.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: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i9.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i9.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i10.AXPWidgetFilterRendererComponent, selector: "axp-widget-filter-renderer", inputs: ["value", "operator", "prop", "schema"], outputs: ["valueChange", "operatorChange"] }, { kind: "pipe", type: i11.AsyncPipe, name: "async" }, { kind: "pipe", type: i12.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPListViewOptionConditionsComponent, decorators: [{
             type: Component,