@acorex/components 16.19.21 → 16.19.23

package/fesm2022/acorex-components.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { ElementRef, Input, Inject, Optional, Component, Injectable, EventEmitter, Output, Directive, ContentChild, ViewChild, TemplateRef, HostListener, ViewEncapsulation, NgModule, ChangeDetectionStrategy, Attribute, ContentChildren, input, ViewChildren, output, inject, ChangeDetectorRef, model, contentChild, afterNextRender, contentChildren, NO_ERRORS_SCHEMA, ViewContainerRef, HostBinding } from '@angular/core';
+import { ElementRef, Input, Inject, Optional, Component, Injectable, EventEmitter, Output, Directive, ContentChild, ViewChild, TemplateRef, HostListener, ViewEncapsulation, NgModule, ChangeDetectionStrategy, Attribute, ContentChildren, input, ViewChildren, output, inject, ChangeDetectorRef, model, contentChild, afterNextRender, contentChildren, NO_ERRORS_SCHEMA, ViewContainerRef, HostBinding, signal, effect } from '@angular/core';
 import * as i1$2 from '@acorex/core';
-import { AXTranslator, AXHtmlUtil, AXConfig, AXDateTime, AXDateTimeRange, AXCoreModule, AXTranslatorModule, AXObjectUtil, AXScrollModule, setPropByPath, AXColorUtil } from '@acorex/core';
+import { AXTranslator, AXHtmlUtil, AXConfig, AXDateTime, AXDateTimeRange, AXCoreModule, AXTranslatorModule, AXPlatform, AXObjectUtil, AXScrollModule, setPropByPath, AXColorUtil } from '@acorex/core';
 import * as i1 from '@angular/cdk/overlay';
 import { OverlayContainer, Overlay, OverlayModule } from '@angular/cdk/overlay';
 import * as i1$3 from '@angular/cdk/portal';
@@ -986,19 +986,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 args: ['document:keydown.escape', ['$event']]
             }] } });
 
-const COMPONENT$8 = [AXButtonComponent];
-const MODULES$8 = [CommonModule];
+const COMPONENT$9 = [AXButtonComponent];
+const MODULES$9 = [CommonModule];
 class AXButtonModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: AXButtonModule, declarations: [AXButtonComponent], imports: [CommonModule], exports: [AXButtonComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXButtonModule, imports: [MODULES$8] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXButtonModule, imports: [MODULES$9] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXButtonModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$8],
-                    imports: [...MODULES$8],
-                    exports: [...COMPONENT$8],
+                    declarations: [...COMPONENT$9],
+                    imports: [...MODULES$9],
+                    exports: [...COMPONENT$9],
                     providers: [],
                 }]
         }] });
@@ -4217,6 +4217,9 @@ class AXDatePickerComponent extends AXValidatableComponent {
         if (e.value) {
             this.text = e.value.replace(/\//g, '');
         }
+        else {
+            this.clearTextBox();
+        }
         if (this.text &&
             this.text.indexOf('_') === -1 &&
             this.text?.length == 8 &&
@@ -4436,7 +4439,8 @@ class AXDatePickerComponent extends AXValidatableComponent {
     }
     setLoadingToClear = false;
     handleKeyPress(e) {
-        if (e.key === 'Backspace' && e.type === 'keydown') {
+        if ((e.key === 'Backspace' && e.type === 'keydown') ||
+            (e.key === 'Delete' && e.type === 'keydown')) {
             this.clearTextBox();
             this.setLoadingToClear = true;
         }
@@ -6441,25 +6445,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 }]
         }] });
 
-const COMPONENT$7 = [AXFormGroupComponent, AXFormLableDirective];
-const MODULES$7 = [CommonModule];
+const COMPONENT$8 = [AXFormGroupComponent, AXFormLableDirective];
+const MODULES$8 = [CommonModule];
 class AXFormGroupModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXFormGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: AXFormGroupModule, declarations: [AXFormGroupComponent, AXFormLableDirective], imports: [CommonModule], exports: [AXFormGroupComponent, AXFormLableDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXFormGroupModule, imports: [MODULES$7] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXFormGroupModule, imports: [MODULES$8] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXFormGroupModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$7],
-                    imports: [...MODULES$7],
-                    exports: [...COMPONENT$7],
+                    declarations: [...COMPONENT$8],
+                    imports: [...MODULES$8],
+                    exports: [...COMPONENT$8],
                     providers: [],
                 }]
         }] });
 
-const COMPONENT$6 = [AXTextBoxComponent];
-const MODULES$6 = [
+const COMPONENT$7 = [AXTextBoxComponent];
+const MODULES$7 = [
     CommonModule,
     AXButtonModule,
     NgxMaskDirective,
@@ -6480,26 +6484,26 @@ class AXTextBoxModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXTextBoxModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$6],
-                    imports: [...MODULES$6],
-                    exports: [...COMPONENT$6],
+                    declarations: [...COMPONENT$7],
+                    imports: [...MODULES$7],
+                    exports: [...COMPONENT$7],
                     providers: [provideNgxMask()],
                 }]
         }] });
 
-const COMPONENT$5 = [AXDropdownComponent];
-const MODULES$5 = [CommonModule, AXFormGroupModule, AXTextBoxModule, AXButtonModule, AXPopoverModule, OverlayModule];
+const COMPONENT$6 = [AXDropdownComponent];
+const MODULES$6 = [CommonModule, AXFormGroupModule, AXTextBoxModule, AXButtonModule, AXPopoverModule, OverlayModule];
 class AXDropdownModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: AXDropdownModule, declarations: [AXDropdownComponent], imports: [CommonModule, AXFormGroupModule, AXTextBoxModule, AXButtonModule, AXPopoverModule, OverlayModule], exports: [AXDropdownComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXDropdownModule, imports: [MODULES$5] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXDropdownModule, imports: [MODULES$6] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXDropdownModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$5],
-                    imports: [...MODULES$5],
-                    exports: [...COMPONENT$5],
+                    declarations: [...COMPONENT$6],
+                    imports: [...MODULES$6],
+                    exports: [...COMPONENT$6],
                     providers: [],
                 }]
         }] });
@@ -7645,19 +7649,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }] });
 
-const COMPONENT$4 = [AXDrawerComponent, AXDrawerContainerComponent, AXDecoratorContentComponent];
-const MODULES$4 = [CommonModule];
+const COMPONENT$5 = [AXDrawerComponent, AXDrawerContainerComponent, AXDecoratorContentComponent];
+const MODULES$5 = [CommonModule];
 class AXDrawerModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: AXDrawerModule, declarations: [AXDrawerComponent, AXDrawerContainerComponent, AXDecoratorContentComponent], imports: [CommonModule], exports: [AXDrawerComponent, AXDrawerContainerComponent, AXDecoratorContentComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXDrawerModule, imports: [MODULES$4] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXDrawerModule, imports: [MODULES$5] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXDrawerModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$4],
-                    imports: [...MODULES$4],
-                    exports: [...COMPONENT$4],
+                    declarations: [...COMPONENT$5],
+                    imports: [...MODULES$5],
+                    exports: [...COMPONENT$5],
                     providers: [],
                 }]
         }] });
@@ -7731,19 +7735,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 }]
         }] });
 
-const COMPONENT$3 = [AXLabelComponent];
-const MODULES$3 = [CommonModule];
+const COMPONENT$4 = [AXLabelComponent];
+const MODULES$4 = [CommonModule];
 class AXLabelModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: AXLabelModule, declarations: [AXLabelComponent], imports: [CommonModule], exports: [AXLabelComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXLabelModule, imports: [MODULES$3] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXLabelModule, imports: [MODULES$4] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXLabelModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$3],
-                    imports: [...MODULES$3],
-                    exports: [...COMPONENT$3],
+                    declarations: [...COMPONENT$4],
+                    imports: [...MODULES$4],
+                    exports: [...COMPONENT$4],
                     providers: [],
                 }]
         }] });
@@ -7804,6 +7808,154 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 }]
         }] });
 
+class AXSideMenuComponent {
+    items = input();
+    itemsSignal = signal([]);
+    itemsPromise;
+    platformService = inject(AXPlatform);
+    isRtl = this.platformService.isRtl();
+    elementRef = inject(ElementRef);
+    textField = input('text');
+    valueField = input('id');
+    expandedField = input('expand');
+    childrenField = input('children');
+    hasChildField = input('hasChild');
+    disableField = input('disabled');
+    onMenuItemClick = output();
+    onParentItemClick = output();
+    isActiveItem = null;
+    get resolvedItems() {
+        return this.itemsSignal();
+    }
+    #effect = effect(() => {
+        const itemsInput = this.items();
+        if (typeof itemsInput === 'function') {
+            const result = itemsInput();
+            if (result instanceof Promise) {
+                this.itemsPromise = (options) => itemsInput(options);
+                this.fetchData();
+            }
+            else {
+                this.itemsSignal.set(result);
+                this.itemsPromise = null;
+            }
+        }
+        else {
+            this.itemsSignal.set(itemsInput);
+            this.itemsPromise = null;
+        }
+    });
+    handleParentItemClick(event, item) {
+        if (this.isNodeLoading(item[this.valueField()]) ||
+            item[this.disableField()]) {
+            return;
+        }
+        item[this.expandedField()] = !item[this.expandedField()];
+        if (!item[this.childrenField()] && item[this.hasChildField()]) {
+            this.setNodeLoading(item[this.valueField()], true);
+            this.fetchData(item);
+        }
+        this.onParentItemClick.emit({
+            component: this,
+            htmlElement: this.elementRef.nativeElement,
+            htmlEvent: event,
+            data: item,
+        });
+    }
+    handleItemClick(event, item) {
+        if (this.isNodeLoading(item[this.valueField()]) ||
+            item[this.disableField()]) {
+            return;
+        }
+        this.isActiveItem = item;
+        this.onMenuItemClick.emit({
+            component: this,
+            htmlElement: this.elementRef.nativeElement,
+            htmlEvent: event,
+            data: item,
+        });
+    }
+    fetchData(selectedNode) {
+        this.itemsPromise(selectedNode?.[this.valueField()])
+            .then((data) => {
+            if (Array.isArray(data)) {
+                if (selectedNode?.[this.valueField()]) {
+                    this.findNode(selectedNode[this.valueField()], data, this.itemsSignal());
+                }
+                else {
+                    const hasChildExpand = data.filter((child) => child[this.expandedField()]);
+                    hasChildExpand.forEach((child) => {
+                        this.fetchData(child);
+                    });
+                    this.itemsSignal.set(data);
+                }
+            }
+        })
+            .finally(() => {
+            this.setNodeLoading(selectedNode?.[this.valueField()], false);
+        });
+    }
+    findNode(parentId, _children, source) {
+        if (source.length) {
+            source.forEach((element) => {
+                if (element[this.valueField()] == parentId) {
+                    element[this.childrenField()] = _children;
+                }
+                else {
+                    if (element?.[this.childrenField()])
+                        this.findNode(parentId, _children, element[this.childrenField()]);
+                }
+            });
+        }
+    }
+    loadingState = signal({});
+    isNodeLoading(nodeId) {
+        return this.loadingState()[nodeId] || false;
+    }
+    setNodeLoading(nodeId, isLoading) {
+        this.loadingState.update((state) => ({
+            ...state,
+            [nodeId]: isLoading,
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXSideMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AXSideMenuComponent, isStandalone: false, selector: "ax-side-menu", inputs: { items: { classPropertyName: "items", publicName: "items", 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 }, expandedField: { classPropertyName: "expandedField", publicName: "expandedField", isSignal: true, isRequired: false, transformFunction: null }, childrenField: { classPropertyName: "childrenField", publicName: "childrenField", isSignal: true, isRequired: false, transformFunction: null }, hasChildField: { classPropertyName: "hasChildField", publicName: "hasChildField", isSignal: true, isRequired: false, transformFunction: null }, disableField: { classPropertyName: "disableField", publicName: "disableField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onMenuItemClick: "onMenuItemClick", onParentItemClick: "onParentItemClick" }, ngImport: i0, template: "<div class=\"ax-side-menu-container noselect-side-menu\">\n  @for (item of resolvedItems; track $index) {\n  <div\n    class=\"ax-side-menu-parent-item\"\n    [class.ax-side-menu-state-disabled]=\"item[disableField()]\"\n    [class.ax-side-menu-parent-item-active-state]=\"item[expandedField()]\"\n    (click)=\"handleParentItemClick($event, item)\"\n  >\n    @if (item[childrenField()]?.length || item[hasChildField()] &&\n    !isNodeLoading(item[valueField()])) {\n    <span\n      [ngClass]=\"{\n        fas: true,\n        'fa-chevron-down': !!item[expandedField()],\n        'fa-chevron-right': !item[expandedField()] && !isRtl,\n        'fa-chevron-left': !item[expandedField()] && isRtl\n      }\"\n    ></span>\n    }@else if(isNodeLoading(item[valueField()])) {\n    <i class=\"far fa-circle-notch fa-spin icon\"></i>\n    }\n    <span>{{ item[textField()] }}</span>\n  </div>\n\n  <div\n    class=\"ax-side-menu-children\"\n    [@expandCollapse]=\"item[expandedField()] ? 'expanded' : 'collapsed'\"\n  >\n    @for (child of item[childrenField()]; track $index) {\n    <div\n      class=\"ax-side-menu-child-item\"\n      [class.ax-side-menu-state-disabled]=\"child[disableField()]\"\n      [class.ax-child-active-state]=\"child === isActiveItem\"\n      (click)=\"handleItemClick($event, child)\"\n    >\n      <span>\n        {{ child[textField()] }}\n      </span>\n    </div>\n    }\n  </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
+            trigger('expandCollapse', [
+                state('expanded', style({ height: '*', opacity: 1, overflow: 'hidden' })),
+                state('collapsed', style({ height: '0px', opacity: 0, overflow: 'hidden' })),
+                transition('expanded <=> collapsed', animate('300ms ease')),
+            ]),
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXSideMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-side-menu', standalone: false, animations: [
+                        trigger('expandCollapse', [
+                            state('expanded', style({ height: '*', opacity: 1, overflow: 'hidden' })),
+                            state('collapsed', style({ height: '0px', opacity: 0, overflow: 'hidden' })),
+                            transition('expanded <=> collapsed', animate('300ms ease')),
+                        ]),
+                    ], template: "<div class=\"ax-side-menu-container noselect-side-menu\">\n  @for (item of resolvedItems; track $index) {\n  <div\n    class=\"ax-side-menu-parent-item\"\n    [class.ax-side-menu-state-disabled]=\"item[disableField()]\"\n    [class.ax-side-menu-parent-item-active-state]=\"item[expandedField()]\"\n    (click)=\"handleParentItemClick($event, item)\"\n  >\n    @if (item[childrenField()]?.length || item[hasChildField()] &&\n    !isNodeLoading(item[valueField()])) {\n    <span\n      [ngClass]=\"{\n        fas: true,\n        'fa-chevron-down': !!item[expandedField()],\n        'fa-chevron-right': !item[expandedField()] && !isRtl,\n        'fa-chevron-left': !item[expandedField()] && isRtl\n      }\"\n    ></span>\n    }@else if(isNodeLoading(item[valueField()])) {\n    <i class=\"far fa-circle-notch fa-spin icon\"></i>\n    }\n    <span>{{ item[textField()] }}</span>\n  </div>\n\n  <div\n    class=\"ax-side-menu-children\"\n    [@expandCollapse]=\"item[expandedField()] ? 'expanded' : 'collapsed'\"\n  >\n    @for (child of item[childrenField()]; track $index) {\n    <div\n      class=\"ax-side-menu-child-item\"\n      [class.ax-side-menu-state-disabled]=\"child[disableField()]\"\n      [class.ax-child-active-state]=\"child === isActiveItem\"\n      (click)=\"handleItemClick($event, child)\"\n    >\n      <span>\n        {{ child[textField()] }}\n      </span>\n    </div>\n    }\n  </div>\n  }\n</div>\n" }]
+        }] });
+
+const COMPONENT$3 = [AXSideMenuComponent];
+const MODULES$3 = [CommonModule, AXTranslatorModule, AXLoadingModule];
+class AXSideMenuModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXSideMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: AXSideMenuModule, declarations: [AXSideMenuComponent], imports: [CommonModule, AXTranslatorModule, AXLoadingModule], exports: [AXSideMenuComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXSideMenuModule, imports: [MODULES$3] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXSideMenuModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...COMPONENT$3],
+                    imports: [...MODULES$3],
+                    exports: [...COMPONENT$3],
+                    providers: [],
+                    schemas: [NO_ERRORS_SCHEMA],
+                }]
+        }] });
+
 class AXNumberBoxComponent extends AXBaseTextComponent {
     cdr;
     min = null;
@@ -8589,19 +8741,19 @@ class AXPasswordBoxComponent extends AXBaseTextComponent {
     constructor(cdr, ref) {
         super(cdr, ref);
         this.cdr = cdr;
+        afterNextRender(() => {
+            if (this.allowAutocomplete()) {
+                this.type = 'password';
+            }
+            else {
+                this.type = 'text';
+                this.getInputElement()?.classList.add('ax-password-mask');
+            }
+        });
     }
     allowAutocomplete = input(false);
     type = 'text';
     eyeIcon = 'far fa-eye';
-    ngAfterViewInit() {
-        if (this.allowAutocomplete()) {
-            this.type = 'password';
-        }
-        else {
-            this.type = 'text';
-            this.getInputElement()?.classList.add('ax-password-mask');
-        }
-    }
     handleShowPassword() {
         if (this.allowAutocomplete()) {
             if (this.type === 'password') {
@@ -9309,7 +9461,7 @@ class AXSelectBoxComponent extends AXValidatableComponent {
                 }
                 else {
                     if (this.items.length == 0) {
-                        this.items = data.items;
+                        this.items = data.items || [];
                     }
                     else {
                         data.items.forEach((item) => {
@@ -13606,6 +13758,7 @@ class AXSearchBarSelectBoxEditorComponent extends AXProperyEditorComponent {
     remoteOperation = false;
     returnAllData = false;
     validation;
+    placeholder = '';
     selectBox;
     _filter;
     get filter() {
@@ -13652,11 +13805,11 @@ class AXSearchBarSelectBoxEditorComponent extends AXProperyEditorComponent {
         });
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXSearchBarSelectBoxEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AXSearchBarSelectBoxEditorComponent, isStandalone: false, selector: "ng-component", viewQueries: [{ propertyName: "selectBox", first: true, predicate: AXSelectBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-select-box [mode]=\"mode\" [textField]=\"textField\" [valueField]=\"valueField\" [remoteOperation]=\"remoteOperation\"\n    [selectedItems]=\"value\" [allowSearch]=\"allowSearch\" [allowNull]=\"allowNull\" [readonly]=\"readonly\"\n    [disabled]=\"disabled\" (selectionChanged)=\"handleValueChange($event)\">\n    <ax-data-source [provideData]=\"provideData\">\n    </ax-data-source>\n    <ax-validation [rules]=\"validation?.rules\">\n    </ax-validation>\n</ax-select-box>", dependencies: [{ kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "fitParent", "dropdownWidth", "multiLine", "onDemandTranslate", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { kind: "component", type: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { kind: "component", type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AXSearchBarSelectBoxEditorComponent, isStandalone: false, selector: "ng-component", viewQueries: [{ propertyName: "selectBox", first: true, predicate: AXSelectBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-select-box\n  [mode]=\"mode\"\n  [textField]=\"textField\"\n  [valueField]=\"valueField\"\n  [remoteOperation]=\"remoteOperation\"\n  [selectedItems]=\"value\"\n  [allowSearch]=\"allowSearch\"\n  [placeholder]=\"placeholder\"\n  [allowNull]=\"allowNull\"\n  [readonly]=\"readonly\"\n  [disabled]=\"disabled\"\n  (selectionChanged)=\"handleValueChange($event)\"\n>\n  <ax-data-source [provideData]=\"provideData\"> </ax-data-source>\n  <ax-validation [rules]=\"validation?.rules\"> </ax-validation>\n</ax-select-box>\n", dependencies: [{ kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "fitParent", "dropdownWidth", "multiLine", "onDemandTranslate", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { kind: "component", type: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { kind: "component", type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXSearchBarSelectBoxEditorComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, template: "<ax-select-box [mode]=\"mode\" [textField]=\"textField\" [valueField]=\"valueField\" [remoteOperation]=\"remoteOperation\"\n    [selectedItems]=\"value\" [allowSearch]=\"allowSearch\" [allowNull]=\"allowNull\" [readonly]=\"readonly\"\n    [disabled]=\"disabled\" (selectionChanged)=\"handleValueChange($event)\">\n    <ax-data-source [provideData]=\"provideData\">\n    </ax-data-source>\n    <ax-validation [rules]=\"validation?.rules\">\n    </ax-validation>\n</ax-select-box>" }]
+            args: [{ standalone: false, template: "<ax-select-box\n  [mode]=\"mode\"\n  [textField]=\"textField\"\n  [valueField]=\"valueField\"\n  [remoteOperation]=\"remoteOperation\"\n  [selectedItems]=\"value\"\n  [allowSearch]=\"allowSearch\"\n  [placeholder]=\"placeholder\"\n  [allowNull]=\"allowNull\"\n  [readonly]=\"readonly\"\n  [disabled]=\"disabled\"\n  (selectionChanged)=\"handleValueChange($event)\"\n>\n  <ax-data-source [provideData]=\"provideData\"> </ax-data-source>\n  <ax-validation [rules]=\"validation?.rules\"> </ax-validation>\n</ax-select-box>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { selectBox: [{
                 type: ViewChild,
                 args: [AXSelectBoxComponent, { static: false }]
@@ -18019,5 +18172,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXAccordionComponent, AXAccordionModule, AXAsyncEventArgs, AXBaseButtonComponent, AXBaseComponent, AXBaseDropdownComponent, AXBaseEvent, AXBaseInputChangeEvent, AXBasePageComponent, AXBasePopupPageComponent, AXBaseTextComponent, AXButtonComponent, AXButtonModule, AXCalendarBoxComponent, AXCalendarBoxModule, AXCheckBoxComponent, AXCheckBoxItemClick, AXCheckBoxModule, AXColorBoxComponent, AXColorPickerComponent, AXColorPickerModule, AXColorPropertyEditorComponent, AXColorPropertyEditorModule, AXConditionalColorPropertyEditorComponent, AXConditionalColorPropertyEditorModule, AXContextMenuComponent, AXContextMenuDirective, AXContextMenuItemClickEvent, AXContextMenuModule, AXDataEvent, AXDataListComponent, AXDataPickerChangeEvent, AXDataSourceComponent, AXDataSourceModule, AXDataSourceRead, AXDataSourceReceivedEvent, AXDataSourceReceivedResult, AXDatePickerComponent, AXDatePickerModule, AXDecoratorContentComponent, AXDialogAlertResult, AXDialogComponent, AXDialogConfirmResult, AXDialogModule, AXDialogResult, AXDialogService, AXDrawerComponent, AXDrawerContainerComponent, AXDrawerModule, AXDropdownComponent, AXDropdownModule, AXEvent, AXFieldsetComponent, AXFieldsetModule, AXFilterColumnComponent, AXFilterColumnDateComponent, AXFilterColumnNumberComponent, AXFilterColumnSelectionComponent, AXFilterColumnStringComponent, AXFilterModule, AXFilterPanelComponent, AXFormGroupComponent, AXFormGroupModule, AXFormLableDirective, AXHtmlEvent, AXLabelComponent, AXLabelModule, AXListComponent, AXListModule, AXLoadingIndicatorComponent, AXLoadingModule, AXLoadingPanelComponent, AXLoadingService, AXMenu2Component, AXMenuComponent, AXMenuItemClickEvent, AXMenuItemComponent, AXMenuModule, AXNumberBoxComponent, AXNumberBoxModule, AXOverlayService, AXPageCloseEvent, AXPageClosedPromise, AXPageClosing, AXPageComponent, AXPageContentComponent, AXPageFooterComponent, AXPageModule, AXPageResult, AXPanelBoxComponent, AXPanelBoxModule, AXPasswordBoxComponent, AXPasswordBoxModule, AXPopoverComponent, AXPopoverModule, AXPopupComponent, AXPopupModule, AXPopupService, AXProgressBarComponent, AXProgressBarModule, AXPropertyDecorator, AXPropertyDecorators, AXPropertyEditorRendererDirective, AXProperyEditorComponent, AXProppertyEditorModule, AXQueryBuilderComponent, AXQueryBuilderControl, AXQueryBuilderField, AXQueryBuilderGroup, AXQueryBuilderGroupEvent, AXQueryBuilderModule, AXQueryBuilderPopup, AXQueryBuilderRule, AXQueryBuilderRuleEvent, AXQueryBuilderService, AXRangePropertyEditorComponent, AXRangePropertyEditorModule, AXSchedulerAgendaViewComponent, AXSchedulerBaseViewComponent, AXSchedulerComponent, AXSchedulerDayTimeViewComponent, AXSchedulerEventChangeArgs, AXSchedulerModule, AXSchedulerMonthViewComponent, AXSchedulerTimelineViewComponent, AXSchedulerViewProperty, AXSchedulerViewsProperty, AXSearchBarComponent, AXSearchBarModule, AXSearchBoxComponent, AXSearchBoxModule, AXSelectBox2Component, AXSelectBoxComponent, AXSelectBoxModule, AXSelectBoxPropertyEditorComponent, AXSelectBoxPropertyEditorModule, AXSelectBoxSelectionChangedEvent, AXSelectBoxValueChangedEvent, AXSelectionListComponent, AXSelectionListModule, AXSwitchComponent, AXSwitchModule, AXTabComponent, AXTabPageHostComponent, AXTabPageModule, AXTabPageRendererComponent, AXTabPageService, AXTabStripChangedEvent, AXTabStripComponent, AXTabStripModule, AXTabViewComponent, AXTabViewModule, AXTextAreaComponent, AXTextAreaModule, AXTextBoxComponent, AXTextBoxModule, AXTextPropertyEditorComponent, AXTextPropertyEditorModule, AXTimePickerChangedEvent, AXTimePickerComponent, AXTimePickerItemChangedEvent, AXTimePickerModule, AXToastMessageComponent, AXToastModule, AXToastService, AXToastWrapperComponent, AXToolbarButtonGroupComponent, AXToolbarComponent, AXToolbarFilterViewComponent, AXToolbarItem, AXToolbarListViewComponent, AXToolbarMenuComponent, AXToolbarModule, AXToolbarSchedulerNavigatorComponent, AXToolbarSchedulerViewsComponent, AXToolbarSearchComponent, AXToolbarTitleComponent, AXTooltipDirective, AXTooltipModule, AXTreeSideMenuComponent, AXTreeSideMenuItemClick, AXTreeSideMenuItemData, AXTreeSideMenuItemMovedEvent, AXTreeSideMenuModule, AXTreeSideMenuNode, AXTreeSideMenuSelectionChangedEvent, AXTreeViewComponent, AXTreeViewItemClick, AXTreeViewItemData, AXTreeViewItemMovedEvent, AXTreeViewModule, AXTreeViewNode, AXTreeViewselectionChangedEvent, AXTreeViewseletedKeyFieldsChangedEvent, AXUploadFileComponent, AXUploadFileModule, AXValidatableComponent, AXValidation, AXValidationComponent, AXValidationFormComponent, AXValidationModule, AXValidationRuleComponent, AXValidationRules, AXValueEvent, DynamicTabsDirective, TAB_META_KEY, propertyEditor };
+export { AXAccordionComponent, AXAccordionModule, AXAsyncEventArgs, AXBaseButtonComponent, AXBaseComponent, AXBaseDropdownComponent, AXBaseEvent, AXBaseInputChangeEvent, AXBasePageComponent, AXBasePopupPageComponent, AXBaseTextComponent, AXButtonComponent, AXButtonModule, AXCalendarBoxComponent, AXCalendarBoxModule, AXCheckBoxComponent, AXCheckBoxItemClick, AXCheckBoxModule, AXColorBoxComponent, AXColorPickerComponent, AXColorPickerModule, AXColorPropertyEditorComponent, AXColorPropertyEditorModule, AXConditionalColorPropertyEditorComponent, AXConditionalColorPropertyEditorModule, AXContextMenuComponent, AXContextMenuDirective, AXContextMenuItemClickEvent, AXContextMenuModule, AXDataEvent, AXDataListComponent, AXDataPickerChangeEvent, AXDataSourceComponent, AXDataSourceModule, AXDataSourceRead, AXDataSourceReceivedEvent, AXDataSourceReceivedResult, AXDatePickerComponent, AXDatePickerModule, AXDecoratorContentComponent, AXDialogAlertResult, AXDialogComponent, AXDialogConfirmResult, AXDialogModule, AXDialogResult, AXDialogService, AXDrawerComponent, AXDrawerContainerComponent, AXDrawerModule, AXDropdownComponent, AXDropdownModule, AXEvent, AXFieldsetComponent, AXFieldsetModule, AXFilterColumnComponent, AXFilterColumnDateComponent, AXFilterColumnNumberComponent, AXFilterColumnSelectionComponent, AXFilterColumnStringComponent, AXFilterModule, AXFilterPanelComponent, AXFormGroupComponent, AXFormGroupModule, AXFormLableDirective, AXHtmlEvent, AXLabelComponent, AXLabelModule, AXListComponent, AXListModule, AXLoadingIndicatorComponent, AXLoadingModule, AXLoadingPanelComponent, AXLoadingService, AXMenu2Component, AXMenuComponent, AXMenuItemClickEvent, AXMenuItemComponent, AXMenuModule, AXNumberBoxComponent, AXNumberBoxModule, AXOverlayService, AXPageCloseEvent, AXPageClosedPromise, AXPageClosing, AXPageComponent, AXPageContentComponent, AXPageFooterComponent, AXPageModule, AXPageResult, AXPanelBoxComponent, AXPanelBoxModule, AXPasswordBoxComponent, AXPasswordBoxModule, AXPopoverComponent, AXPopoverModule, AXPopupComponent, AXPopupModule, AXPopupService, AXProgressBarComponent, AXProgressBarModule, AXPropertyDecorator, AXPropertyDecorators, AXPropertyEditorRendererDirective, AXProperyEditorComponent, AXProppertyEditorModule, AXQueryBuilderComponent, AXQueryBuilderControl, AXQueryBuilderField, AXQueryBuilderGroup, AXQueryBuilderGroupEvent, AXQueryBuilderModule, AXQueryBuilderPopup, AXQueryBuilderRule, AXQueryBuilderRuleEvent, AXQueryBuilderService, AXRangePropertyEditorComponent, AXRangePropertyEditorModule, AXSchedulerAgendaViewComponent, AXSchedulerBaseViewComponent, AXSchedulerComponent, AXSchedulerDayTimeViewComponent, AXSchedulerEventChangeArgs, AXSchedulerModule, AXSchedulerMonthViewComponent, AXSchedulerTimelineViewComponent, AXSchedulerViewProperty, AXSchedulerViewsProperty, AXSearchBarComponent, AXSearchBarModule, AXSearchBoxComponent, AXSearchBoxModule, AXSelectBox2Component, AXSelectBoxComponent, AXSelectBoxModule, AXSelectBoxPropertyEditorComponent, AXSelectBoxPropertyEditorModule, AXSelectBoxSelectionChangedEvent, AXSelectBoxValueChangedEvent, AXSelectionListComponent, AXSelectionListModule, AXSideMenuComponent, AXSideMenuModule, AXSwitchComponent, AXSwitchModule, AXTabComponent, AXTabPageHostComponent, AXTabPageModule, AXTabPageRendererComponent, AXTabPageService, AXTabStripChangedEvent, AXTabStripComponent, AXTabStripModule, AXTabViewComponent, AXTabViewModule, AXTextAreaComponent, AXTextAreaModule, AXTextBoxComponent, AXTextBoxModule, AXTextPropertyEditorComponent, AXTextPropertyEditorModule, AXTimePickerChangedEvent, AXTimePickerComponent, AXTimePickerItemChangedEvent, AXTimePickerModule, AXToastMessageComponent, AXToastModule, AXToastService, AXToastWrapperComponent, AXToolbarButtonGroupComponent, AXToolbarComponent, AXToolbarFilterViewComponent, AXToolbarItem, AXToolbarListViewComponent, AXToolbarMenuComponent, AXToolbarModule, AXToolbarSchedulerNavigatorComponent, AXToolbarSchedulerViewsComponent, AXToolbarSearchComponent, AXToolbarTitleComponent, AXTooltipDirective, AXTooltipModule, AXTreeSideMenuComponent, AXTreeSideMenuItemClick, AXTreeSideMenuItemData, AXTreeSideMenuItemMovedEvent, AXTreeSideMenuModule, AXTreeSideMenuNode, AXTreeSideMenuSelectionChangedEvent, AXTreeViewComponent, AXTreeViewItemClick, AXTreeViewItemData, AXTreeViewItemMovedEvent, AXTreeViewModule, AXTreeViewNode, AXTreeViewselectionChangedEvent, AXTreeViewseletedKeyFieldsChangedEvent, AXUploadFileComponent, AXUploadFileModule, AXValidatableComponent, AXValidation, AXValidationComponent, AXValidationFormComponent, AXValidationModule, AXValidationRuleComponent, AXValidationRules, AXValueEvent, DynamicTabsDirective, TAB_META_KEY, propertyEditor };
 //# sourceMappingURL=acorex-components.mjs.map