@acorex/components 16.20.14 → 16.20.15

package/fesm2022/acorex-components.mjs

@@ -1532,6 +1532,8 @@ class AXPopoverComponent {
     closeMode = 'clickout';
     //
     rtl = AXConfig.get('layout.rtl');
+    //
+    backdropClass = input(null, ...(ngDevMode ? [{ debugName: "backdropClass" }] : []));
     _visible = false;
     get visible() {
         return this._visible;
@@ -1570,12 +1572,13 @@ class AXPopoverComponent {
         this.overlay = this.overlayService.show(this.template, {}, {
             closeOnClickOutside: this.closeMode === 'clickout',
             targetElement: this.targetEl,
+            backdropClass: this.backdropClass(),
             hasBackdrop: this.closeMode === 'clickout',
             position: this.position,
             direction: this.rtl ? 'rtl' : 'ltr',
             onBackdropClick: () => {
                 this._visible = false;
-            }
+            },
         });
         this.overlay.overlayRef.outsidePointerEvents().subscribe((e) => {
             this.onOutSideClick.emit(e);
@@ -1588,12 +1591,18 @@ class AXPopoverComponent {
     }
     ngOnInit() {
         if (this.rtl == null) {
-            this.rtl = window.getComputedStyle(this.ref.nativeElement, null).getPropertyValue('direction') === 'rtl';
+            this.rtl =
+                window
+                    .getComputedStyle(this.ref.nativeElement, null)
+                    .getPropertyValue('direction') === 'rtl';
         }
     }
     ngAfterViewInit() {
         setTimeout(() => {
-            this.targetEl = typeof this.target === 'string' ? document.querySelector(this.target) : this.target;
+            this.targetEl =
+                typeof this.target === 'string'
+                    ? document.querySelector(this.target)
+                    : this.target;
             //
             if (this.closeMode === 'mouseout') {
                 this.targetEl.addEventListener('mouseout', this.close.bind(this));
@@ -1618,7 +1627,7 @@ class AXPopoverComponent {
         return this.visible;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPopoverComponent, deps: [{ token: AXOverlayService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXPopoverComponent, isStandalone: false, selector: "ax-popover", inputs: { target: "target", position: "position", openMode: "openMode", closeMode: "closeMode", rtl: "rtl", visible: "visible" }, outputs: { onOutSideClick: "onOutSideClick" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["tpl"], descendants: true }], ngImport: i0, template: "<ng-template #tpl>\n  <div class=\"ax-popover-container animate__animated animate__fadeIn\">\n    <ng-content></ng-content>\n  </div>\n</ng-template>", styles: [".ax-popover-container .ax-popover-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-border-radius-size);box-shadow:0 5px 10px #0000004d}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.3", type: AXPopoverComponent, isStandalone: false, selector: "ax-popover", inputs: { target: { classPropertyName: "target", publicName: "target", isSignal: false, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: false, isRequired: false, transformFunction: null }, openMode: { classPropertyName: "openMode", publicName: "openMode", isSignal: false, isRequired: false, transformFunction: null }, closeMode: { classPropertyName: "closeMode", publicName: "closeMode", isSignal: false, isRequired: false, transformFunction: null }, rtl: { classPropertyName: "rtl", publicName: "rtl", isSignal: false, isRequired: false, transformFunction: null }, backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onOutSideClick: "onOutSideClick" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["tpl"], descendants: true }], ngImport: i0, template: "<ng-template #tpl>\n  <div class=\"ax-popover-container animate__animated animate__fadeIn\">\n    <ng-content></ng-content>\n  </div>\n</ng-template>", styles: [".ax-popover-container .ax-popover-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-border-radius-size);box-shadow:0 5px 10px #0000004d}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPopoverComponent, decorators: [{
             type: Component,
@@ -2562,7 +2571,7 @@ class AXToolbarSchedulerNavigatorComponent {
     <ax-popover target="#nav" placement="bottom-end" alignment="top-end" #pop>
         <ax-calendar-box (onValueChanged)="onDateChange($event)" [depth]="viewDepth" #cal></ax-calendar-box>
     </ax-popover>
-</div>`, isInline: true, dependencies: [{ kind: "component", type: AXCalendarBoxComponent, selector: "ax-calendar-box", inputs: ["selectedDates", "size", "type", "locale", "dir", "min", "max", "selectableHoliday", "dayStyle", "dayMinMaxResoan", "showTodayButton", "view", "depth", "value"], outputs: ["onValueChanged", "onClick", "valueChange"] }, { kind: "component", type: AXToolbarMenuComponent, selector: "ax-toolbar-menu", inputs: ["menuTemplate", "floatPlacemnet", "selection", "items"], outputs: ["onItemClick"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openMode", "closeMode", "rtl", "visible"], outputs: ["onOutSideClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+</div>`, isInline: true, dependencies: [{ kind: "component", type: AXCalendarBoxComponent, selector: "ax-calendar-box", inputs: ["selectedDates", "size", "type", "locale", "dir", "min", "max", "selectableHoliday", "dayStyle", "dayMinMaxResoan", "showTodayButton", "view", "depth", "value"], outputs: ["onValueChanged", "onClick", "valueChange"] }, { kind: "component", type: AXToolbarMenuComponent, selector: "ax-toolbar-menu", inputs: ["menuTemplate", "floatPlacemnet", "selection", "items"], outputs: ["onItemClick"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openMode", "closeMode", "rtl", "backdropClass", "visible"], outputs: ["onOutSideClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXToolbarSchedulerNavigatorComponent, decorators: [{
             type: Component,
@@ -8079,6 +8088,7 @@ class AXAutoCompleteComponent extends AXBaseComponent {
         this.el = el;
     }
     listContainer;
+    input;
     rowTemplate;
     #effct = effect(() => {
         this.localShowDropdownWhenClick.set(this.showDropdownWhenClick());
@@ -8421,8 +8431,11 @@ class AXAutoCompleteComponent extends AXBaseComponent {
             this.fetch(params);
         }
     }
+    focus() {
+        this.input.focus();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXAutoCompleteComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXAutoCompleteComponent, isStandalone: false, selector: "ax-auto-complete", inputs: { showDropdownWhenClick: { classPropertyName: "showDropdownWhenClick", publicName: "showDropdownWhenClick", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, remoteOperation: { classPropertyName: "remoteOperation", publicName: "remoteOperation", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: true, isRequired: false, transformFunction: null }, showDropDownButton: { classPropertyName: "showDropDownButton", publicName: "showDropDownButton", isSignal: true, isRequired: false, transformFunction: null }, onDemandTranslate: { classPropertyName: "onDemandTranslate", publicName: "onDemandTranslate", isSignal: true, isRequired: false, transformFunction: null }, rtl: { classPropertyName: "rtl", publicName: "rtl", isSignal: true, isRequired: false, transformFunction: null }, dropdownWidth: { classPropertyName: "dropdownWidth", publicName: "dropdownWidth", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, multiLine: { classPropertyName: "multiLine", publicName: "multiLine", isSignal: true, isRequired: false, transformFunction: null }, fitParent: { classPropertyName: "fitParent", publicName: "fitParent", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, textAlign: { classPropertyName: "textAlign", publicName: "textAlign", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, showCheckBox: { classPropertyName: "showCheckBox", publicName: "showCheckBox", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, allowNull: { classPropertyName: "allowNull", publicName: "allowNull", isSignal: true, isRequired: false, transformFunction: null }, disabledCallback: { classPropertyName: "disabledCallback", publicName: "disabledCallback", isSignal: false, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selectedItems: "selectedItemsChange", onValueChanged: "onValueChanged", onItemClick: "onItemClick", onFocus: "onFocus", onOpen: "onOpen", onClose: "onClose", onBlur: "onBlur" }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true }, { propertyName: "_contentDataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }], viewQueries: [{ propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["d"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down\n  #d\n  [readonly]=\"readonly()\"\n  [fitParent]=\"fitParent()\"\n  [disabled]=\"disabled()\"\n  [size]=\"size()\"\n  [showDropDownButton]=\"showDropDownButton()\"\n  (dropdownToggle)=\"dropdownToggleSelecBox()\"\n>\n  <ng-container start>\n    <ng-content select=\"[start]\"> </ng-content>\n  </ng-container>\n  <ng-container header>\n    <ax-text-box\n      #input\n      [textAlign]=\"textAlign()\"\n      [(value)]=\"value\"\n      [disabled]=\"disabled()\"\n      [placeholder]=\"placeholder()\"\n      [size]=\"size()\"\n      (onkey)=\"handleKeyPress($event)\"\n      (click)=\"handleClick()\"\n      (onValueChanged)=\"textChange($event)\"\n      (onFocus)=\"handleFocus($event)\"\n      (onBlur)=\"handleBlur($event)\"\n    ></ax-text-box>\n  </ng-container>\n  <ng-container panel>\n    <div class=\"ax list-container\">\n      <div\n        #listContainer\n        class=\"list-container-items\"\n        (scroll)=\"scrolled($event)\"\n      >\n        @if(resolvedItems().length > 0){ @for (item of resolvedItems(); track\n        $index) {\n        <div\n          class=\"list-item\"\n          [class.focused]=\"$index == currentfocusedIndex()\"\n          [class.selected]=\"isItemSelected(item)\"\n          (click)=\"handleItemClick($event, item)\"\n          (dblclick)=\"handleItemDbClick($event, item)\"\n        >\n          <div style=\"display: flex\">\n            @if (showCheckBox()) {\n            <ax-check-box\n              [size]=\"size()\"\n              [value]=\"isItemSelected(item)\"\n              (onClick)=\"handleItemClick($event, item)\"\n            >\n            </ax-check-box>\n            } @if (rowTemplate) {\n            <div\n              style=\"\n                white-space: nowrap;\n                text-overflow: ellipsis;\n                overflow: hidden;\n                flex: 1;\n              \"\n              [title]=\"item[textField()]\"\n              [ngStyle]=\"\n                showCheckBox() ? { 'padding-inline-start': '0.5rem' } : ''\n              \"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"rowTemplate; context: { $implicit: item }\"\n              >\n              </ng-container>\n            </div>\n            }@else {\n            <div\n              style=\"\n                white-space: nowrap;\n                text-overflow: ellipsis;\n                overflow: hidden;\n                flex: 1;\n              \"\n              [title]=\"item[textField()]\"\n              [ngStyle]=\"\n                showCheckBox() ? { 'padding-inline-start': '0.5rem' } : ''\n              \"\n            >\n              {{ item[textField()] }}\n            </div>\n            }\n          </div>\n        </div>\n        } }@else { @if(showLoading() == true){\n        <div class=\"list-item\">\n          {{ 'common.search' | trans }}\n        </div>\n        }@else {\n        <div class=\"list-item\">\n          {{ 'common.noDataFound' | trans }}\n        </div>\n        } } @if (showLoading()) {\n        <div class=\"ax-pad-sm\" style=\"text-align: center\">\n          <i\n            class=\"far fa-spinner-third fa-pulse fa-2x\"\n            style=\"color: var(--ax-primary-color)\"\n          ></i>\n        </div>\n        }\n      </div>\n    </div></ng-container\n  >\n  <ng-container end>\n    <ng-content select=\"[end]\"> </ng-content>\n  </ng-container>\n</ax-drop-down>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading", "dropdownWidth"], outputs: ["dropdownToggle", "onButtonClick"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXAutoCompleteComponent, isStandalone: false, selector: "ax-auto-complete", inputs: { showDropdownWhenClick: { classPropertyName: "showDropdownWhenClick", publicName: "showDropdownWhenClick", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, remoteOperation: { classPropertyName: "remoteOperation", publicName: "remoteOperation", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: true, isRequired: false, transformFunction: null }, showDropDownButton: { classPropertyName: "showDropDownButton", publicName: "showDropDownButton", isSignal: true, isRequired: false, transformFunction: null }, onDemandTranslate: { classPropertyName: "onDemandTranslate", publicName: "onDemandTranslate", isSignal: true, isRequired: false, transformFunction: null }, rtl: { classPropertyName: "rtl", publicName: "rtl", isSignal: true, isRequired: false, transformFunction: null }, dropdownWidth: { classPropertyName: "dropdownWidth", publicName: "dropdownWidth", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, multiLine: { classPropertyName: "multiLine", publicName: "multiLine", isSignal: true, isRequired: false, transformFunction: null }, fitParent: { classPropertyName: "fitParent", publicName: "fitParent", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, textAlign: { classPropertyName: "textAlign", publicName: "textAlign", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, showCheckBox: { classPropertyName: "showCheckBox", publicName: "showCheckBox", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, allowNull: { classPropertyName: "allowNull", publicName: "allowNull", isSignal: true, isRequired: false, transformFunction: null }, disabledCallback: { classPropertyName: "disabledCallback", publicName: "disabledCallback", isSignal: false, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selectedItems: "selectedItemsChange", onValueChanged: "onValueChanged", onItemClick: "onItemClick", onFocus: "onFocus", onOpen: "onOpen", onClose: "onClose", onBlur: "onBlur" }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true }, { propertyName: "_contentDataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }], viewQueries: [{ propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["d"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down\n  #d\n  [readonly]=\"readonly()\"\n  [fitParent]=\"fitParent()\"\n  [disabled]=\"disabled()\"\n  [size]=\"size()\"\n  [showDropDownButton]=\"showDropDownButton()\"\n  (dropdownToggle)=\"dropdownToggleSelecBox()\"\n>\n  <ng-container start>\n    <ng-content select=\"[start]\"> </ng-content>\n  </ng-container>\n  <ng-container header>\n    <ax-text-box\n      #input\n      [textAlign]=\"textAlign()\"\n      [(value)]=\"value\"\n      [disabled]=\"disabled()\"\n      [placeholder]=\"placeholder()\"\n      [size]=\"size()\"\n      (onkey)=\"handleKeyPress($event)\"\n      (click)=\"handleClick()\"\n      (onValueChanged)=\"textChange($event)\"\n      (onFocus)=\"handleFocus($event)\"\n      (onBlur)=\"handleBlur($event)\"\n    ></ax-text-box>\n  </ng-container>\n  <ng-container panel>\n    <div class=\"ax list-container\">\n      <div\n        #listContainer\n        class=\"list-container-items\"\n        (scroll)=\"scrolled($event)\"\n      >\n        @if(resolvedItems().length > 0){ @for (item of resolvedItems(); track\n        $index) {\n        <div\n          class=\"list-item\"\n          [class.focused]=\"$index == currentfocusedIndex()\"\n          [class.selected]=\"isItemSelected(item)\"\n          (click)=\"handleItemClick($event, item)\"\n          (dblclick)=\"handleItemDbClick($event, item)\"\n        >\n          <div style=\"display: flex\">\n            @if (showCheckBox()) {\n            <ax-check-box\n              [size]=\"size()\"\n              [value]=\"isItemSelected(item)\"\n              (onClick)=\"handleItemClick($event, item)\"\n            >\n            </ax-check-box>\n            } @if (rowTemplate) {\n            <div\n              style=\"\n                white-space: nowrap;\n                text-overflow: ellipsis;\n                overflow: hidden;\n                flex: 1;\n              \"\n              [title]=\"item[textField()]\"\n              [ngStyle]=\"\n                showCheckBox() ? { 'padding-inline-start': '0.5rem' } : ''\n              \"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"rowTemplate; context: { $implicit: item }\"\n              >\n              </ng-container>\n            </div>\n            }@else {\n            <div\n              style=\"\n                white-space: nowrap;\n                text-overflow: ellipsis;\n                overflow: hidden;\n                flex: 1;\n              \"\n              [title]=\"item[textField()]\"\n              [ngStyle]=\"\n                showCheckBox() ? { 'padding-inline-start': '0.5rem' } : ''\n              \"\n            >\n              {{ item[textField()] }}\n            </div>\n            }\n          </div>\n        </div>\n        } }@else { @if(showLoading() == true){\n        <div class=\"list-item\">\n          {{ 'common.search' | trans }}\n        </div>\n        }@else {\n        <div class=\"list-item\">\n          {{ 'common.noDataFound' | trans }}\n        </div>\n        } } @if (showLoading()) {\n        <div class=\"ax-pad-sm\" style=\"text-align: center\">\n          <i\n            class=\"far fa-spinner-third fa-pulse fa-2x\"\n            style=\"color: var(--ax-primary-color)\"\n          ></i>\n        </div>\n        }\n      </div>\n    </div></ng-container\n  >\n  <ng-container end>\n    <ng-content select=\"[end]\"> </ng-content>\n  </ng-container>\n</ax-drop-down>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading", "dropdownWidth"], outputs: ["dropdownToggle", "onButtonClick"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXAutoCompleteComponent, decorators: [{
             type: Component,
@@ -8430,6 +8443,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { listContainer: [{
                 type: ViewChild,
                 args: ['listContainer']
+            }], input: [{
+                type: ViewChild,
+                args: ['input']
             }], rowTemplate: [{
                 type: ContentChild,
                 args: ['rowTemplate', { static: false }]
@@ -12790,7 +12806,7 @@ class AXSearchBarComponent {
         this.searchPopover.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSearchBarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXSearchBarComponent, isStandalone: false, selector: "ax-search-bar", inputs: { showBadge: { classPropertyName: "showBadge", publicName: "showBadge", isSignal: true, isRequired: false, transformFunction: null }, sizeButton: { classPropertyName: "sizeButton", publicName: "sizeButton", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, fitParent: { classPropertyName: "fitParent", publicName: "fitParent", isSignal: false, isRequired: false, transformFunction: null }, popoverWidth: { classPropertyName: "popoverWidth", publicName: "popoverWidth", isSignal: false, isRequired: false, transformFunction: null }, rtl: { classPropertyName: "rtl", publicName: "rtl", isSignal: false, isRequired: false, transformFunction: null }, loadOnInit: { classPropertyName: "loadOnInit", publicName: "loadOnInit", isSignal: false, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: false, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: false, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onValueChange: "onValueChange", onSearchValue: "onSearchValue", onClose: "onClose" }, viewQueries: [{ propertyName: "searchPopover", first: true, predicate: ["searchPop"], descendants: true }, { propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }, { propertyName: "_editors", predicate: AXPropertyEditorRendererDirective, descendants: true }], ngImport: i0, template: "@if (showBadge()) {\n\n<div class=\"ax-search-bar-badge-container\">\n  <ax-button\n    [block]=\"block\"\n    end\n    icon=\"far fa-sliders-h icon\"\n    [type]=\"'primary outline'\"\n    [disabled]=\"disabled\"\n    [size]=\"sizeButton\"\n    [tabIndex]=\"-1\"\n    (click)=\"handleButtonClick()\"\n  >\n  </ax-button>\n\n  @if (_searchCount) {\n\n  <span class=\"search-count\">\n    {{ _searchCount }}\n  </span>\n  }\n</div>\n\n}@else {\n<ax-button\n  [block]=\"block\"\n  end\n  icon=\"far fa-sliders-h icon\"\n  [selected]=\"_searchCount ? true : false\"\n  [type]=\"_searchCount ? 'primary' : 'primary outline'\"\n  [disabled]=\"disabled\"\n  [size]=\"sizeButton\"\n  [tabIndex]=\"-1\"\n  (click)=\"handleButtonClick()\"\n>\n  {{ caption ? caption : ('common.search' | trans) }}\n  @if (_searchCount) {\n  <span class=\"search-count\">{{ _searchCount }}</span>\n  }</ax-button\n>\n}\n\n<ax-popover\n  #searchPop\n  [target]=\"ref\"\n  [rtl]=\"rtl\"\n  [position]=\"{\n    originX: 'end',\n    originY: 'bottom',\n    overlayX: 'end',\n    overlayY: 'top',\n    offsetY: 10\n  }\"\n>\n  <div class=\"panel-box ax-dropdown-container-bordered {{ size }}\">\n    <ax-validation-form #form>\n      @for (item of _items; track item) { @if (item?.groupTitle) {\n      <ax-fieldset [caption]=\"item?.groupTitle\">\n        @for (item of item.rows; track item) {\n        <div class=\"row\">\n          @for (prop of item.items; track prop) { @if (prop.property.visible !=\n          false) {\n          <div class=\"{{ renderCol(prop.property.col) }}\">\n            <div\n              [class.ax-search-bar-required-state]=\"\n                prop.property.editorOptions?.validation?.rules?.length\n              \"\n            >\n              <ax-label>{{ prop.property.title }}</ax-label>\n              <ng-container\n                ax-property-editor-renderer\n                [validationForm]=\"form\"\n                [property]=\"prop\"\n                [context]=\"_context\"\n                (onValueChange)=\"handleValueChange($event)\"\n              ></ng-container>\n            </div>\n          </div>\n          } }\n        </div>\n        }\n      </ax-fieldset>\n      }@else { @for (item of item.rows; track item) {\n      <div class=\"row\">\n        @for (prop of item.items; track prop) { @if (prop.property.visible !=\n        false) {\n        <div class=\"{{ renderCol(prop.property.col) }}\">\n          <div\n            [class.ax-search-bar-required-state]=\"\n              prop.property.editorOptions?.validation?.rules?.length\n            \"\n          >\n            <ax-label>{{ prop.property.title }}</ax-label>\n            <ng-container\n              ax-property-editor-renderer\n              [validationForm]=\"form\"\n              [property]=\"prop\"\n              [context]=\"_context\"\n              (onValueChange)=\"handleValueChange($event)\"\n            ></ng-container>\n          </div>\n        </div>\n        } }\n      </div>\n      } } }\n      <div class=\"footer-button\">\n        <ax-button type=\"blank danger\" (click)=\"clear()\">{{\n          'common.reset' | trans\n        }}</ax-button>\n        <ax-button (click)=\"search()\">{{ 'common.search' | trans }}</ax-button>\n      </div>\n    </ax-validation-form>\n  </div>\n</ax-popover>\n", styles: [".panel-box{padding:1rem}.panel-box.ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-border-radius-size);box-shadow:0 5px 10px #0000004d}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem;flex-direction:row-reverse}.panel-box.sm{width:30vw}.panel-box.md{width:50vw}.panel-box.lg{width:70vw}.panel-box.full{width:80vw}@media all and (min-width: 1280px){.panel-box.sm{width:420px!important}.panel-box.md{width:680px!important}.panel-box.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:700px!important}}@media all and (min-width: 425px) and (max-width: 767px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md,.panel-box.lg{width:460px!important}}@media all and (min-width: 0px) and (max-width: 424px){.panel-box.sm,.panel-box.md,.panel-box.lg{width:100vw;max-height:100vh}}.search-count{background:#fff3;border-radius:50%;color:var(--ax-white-color);padding:.125rem;width:1.75rem;height:1.75rem;font-size:.875rem;display:inline-flex;align-items:center;justify-content:center;margin-inline-start:.5rem}.ax-search-bar-badge-container{position:relative;display:inline-block}.ax-search-bar-badge-container .search-count{background-color:var(--ax-primary-color);color:#fff;border-radius:50%;height:25px;width:25px;position:absolute;left:0;top:0;transform:translate(-30%,-30%)}\n"], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "directive", type: AXPropertyEditorRendererDirective, selector: "[ax-property-editor-renderer]", inputs: ["property", "validationForm", "context", "host", "groupId"], outputs: ["onValueChange"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["size"], outputs: ["clickLabel"] }, { kind: "component", type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openMode", "closeMode", "rtl", "visible"], outputs: ["onOutSideClick"] }, { kind: "component", type: AXFieldsetComponent, selector: "ax-fieldset", inputs: ["size", "caption", "allowCollapse"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXSearchBarComponent, isStandalone: false, selector: "ax-search-bar", inputs: { showBadge: { classPropertyName: "showBadge", publicName: "showBadge", isSignal: true, isRequired: false, transformFunction: null }, sizeButton: { classPropertyName: "sizeButton", publicName: "sizeButton", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, fitParent: { classPropertyName: "fitParent", publicName: "fitParent", isSignal: false, isRequired: false, transformFunction: null }, popoverWidth: { classPropertyName: "popoverWidth", publicName: "popoverWidth", isSignal: false, isRequired: false, transformFunction: null }, rtl: { classPropertyName: "rtl", publicName: "rtl", isSignal: false, isRequired: false, transformFunction: null }, loadOnInit: { classPropertyName: "loadOnInit", publicName: "loadOnInit", isSignal: false, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: false, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: false, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onValueChange: "onValueChange", onSearchValue: "onSearchValue", onClose: "onClose" }, viewQueries: [{ propertyName: "searchPopover", first: true, predicate: ["searchPop"], descendants: true }, { propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }, { propertyName: "_editors", predicate: AXPropertyEditorRendererDirective, descendants: true }], ngImport: i0, template: "@if (showBadge()) {\n\n<div class=\"ax-search-bar-badge-container\">\n  <ax-button\n    [block]=\"block\"\n    end\n    icon=\"far fa-sliders-h icon\"\n    [type]=\"'primary outline'\"\n    [disabled]=\"disabled\"\n    [size]=\"sizeButton\"\n    [tabIndex]=\"-1\"\n    (click)=\"handleButtonClick()\"\n  >\n  </ax-button>\n\n  @if (_searchCount) {\n\n  <span class=\"search-count\">\n    {{ _searchCount }}\n  </span>\n  }\n</div>\n\n}@else {\n<ax-button\n  [block]=\"block\"\n  end\n  icon=\"far fa-sliders-h icon\"\n  [selected]=\"_searchCount ? true : false\"\n  [type]=\"_searchCount ? 'primary' : 'primary outline'\"\n  [disabled]=\"disabled\"\n  [size]=\"sizeButton\"\n  [tabIndex]=\"-1\"\n  (click)=\"handleButtonClick()\"\n>\n  {{ caption ? caption : ('common.search' | trans) }}\n  @if (_searchCount) {\n  <span class=\"search-count\">{{ _searchCount }}</span>\n  }</ax-button\n>\n}\n\n<ax-popover\n  #searchPop\n  [target]=\"ref\"\n  [rtl]=\"rtl\"\n  [position]=\"{\n    originX: 'end',\n    originY: 'bottom',\n    overlayX: 'end',\n    overlayY: 'top',\n    offsetY: 10\n  }\"\n>\n  <div class=\"panel-box ax-dropdown-container-bordered {{ size }}\">\n    <ax-validation-form #form>\n      @for (item of _items; track item) { @if (item?.groupTitle) {\n      <ax-fieldset [caption]=\"item?.groupTitle\">\n        @for (item of item.rows; track item) {\n        <div class=\"row\">\n          @for (prop of item.items; track prop) { @if (prop.property.visible !=\n          false) {\n          <div class=\"{{ renderCol(prop.property.col) }}\">\n            <div\n              [class.ax-search-bar-required-state]=\"\n                prop.property.editorOptions?.validation?.rules?.length\n              \"\n            >\n              <ax-label>{{ prop.property.title }}</ax-label>\n              <ng-container\n                ax-property-editor-renderer\n                [validationForm]=\"form\"\n                [property]=\"prop\"\n                [context]=\"_context\"\n                (onValueChange)=\"handleValueChange($event)\"\n              ></ng-container>\n            </div>\n          </div>\n          } }\n        </div>\n        }\n      </ax-fieldset>\n      }@else { @for (item of item.rows; track item) {\n      <div class=\"row\">\n        @for (prop of item.items; track prop) { @if (prop.property.visible !=\n        false) {\n        <div class=\"{{ renderCol(prop.property.col) }}\">\n          <div\n            [class.ax-search-bar-required-state]=\"\n              prop.property.editorOptions?.validation?.rules?.length\n            \"\n          >\n            <ax-label>{{ prop.property.title }}</ax-label>\n            <ng-container\n              ax-property-editor-renderer\n              [validationForm]=\"form\"\n              [property]=\"prop\"\n              [context]=\"_context\"\n              (onValueChange)=\"handleValueChange($event)\"\n            ></ng-container>\n          </div>\n        </div>\n        } }\n      </div>\n      } } }\n      <div class=\"footer-button\">\n        <ax-button type=\"blank danger\" (click)=\"clear()\">{{\n          'common.reset' | trans\n        }}</ax-button>\n        <ax-button (click)=\"search()\">{{ 'common.search' | trans }}</ax-button>\n      </div>\n    </ax-validation-form>\n  </div>\n</ax-popover>\n", styles: [".panel-box{padding:1rem}.panel-box.ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-border-radius-size);box-shadow:0 5px 10px #0000004d}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem;flex-direction:row-reverse}.panel-box.sm{width:30vw}.panel-box.md{width:50vw}.panel-box.lg{width:70vw}.panel-box.full{width:80vw}@media all and (min-width: 1280px){.panel-box.sm{width:420px!important}.panel-box.md{width:680px!important}.panel-box.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:700px!important}}@media all and (min-width: 425px) and (max-width: 767px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md,.panel-box.lg{width:460px!important}}@media all and (min-width: 0px) and (max-width: 424px){.panel-box.sm,.panel-box.md,.panel-box.lg{width:100vw;max-height:100vh}}.search-count{background:#fff3;border-radius:50%;color:var(--ax-white-color);padding:.125rem;width:1.75rem;height:1.75rem;font-size:.875rem;display:inline-flex;align-items:center;justify-content:center;margin-inline-start:.5rem}.ax-search-bar-badge-container{position:relative;display:inline-block}.ax-search-bar-badge-container .search-count{background-color:var(--ax-primary-color);color:#fff;border-radius:50%;height:25px;width:25px;position:absolute;left:0;top:0;transform:translate(-30%,-30%)}\n"], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "directive", type: AXPropertyEditorRendererDirective, selector: "[ax-property-editor-renderer]", inputs: ["property", "validationForm", "context", "host", "groupId"], outputs: ["onValueChange"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["size"], outputs: ["clickLabel"] }, { kind: "component", type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openMode", "closeMode", "rtl", "backdropClass", "visible"], outputs: ["onOutSideClick"] }, { kind: "component", type: AXFieldsetComponent, selector: "ax-fieldset", inputs: ["size", "caption", "allowCollapse"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSearchBarComponent, decorators: [{
             type: Component,