@acorex/components 4.1.4 → 4.2.0

package/src/lib/query-builder/query-builder.component.ts

@@ -0,0 +1,220 @@
+import { AXBaseComponent } from '../base/element.class';
+import { Component, Input, Output, EventEmitter, ElementRef, ViewEncapsulation, ViewChild } from '@angular/core';
+import { AXTranslator, AXHtmlUtil } from '@acorex/core';
+import { AXQueryBuilderGroup, AXQueryBuilderGroupEvent, AXQueryBuilderGroupItem } from './query-builder.class';
+import { AXQueryBuilderGroupComponent } from './query-builder-group.component';
+import { AXToastService } from '../toast/toast.service';
+
+@Component({
+  selector: 'ax-query-builder',
+  templateUrl: './query-builder.component.html',
+  styleUrls: ['./query-builder.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class AXQueryBuilderComponent extends AXBaseComponent {
+  @ViewChild('queryGroup') queryGroup: AXQueryBuilderGroupComponent;
+
+  @Input()
+  query: AXQueryBuilderGroup;
+
+  @Input()
+  mode: 'new' | 'edit' = 'new';
+
+  rootGroup: AXQueryBuilderGroup = new AXQueryBuilderGroup();
+
+  ngOnInit(): void {
+    this.rootGroup.condition = this.query.condition ? this.query.condition : 'AND';
+    this.rootGroup.items = this.query.items ? this.query.items : [];
+  }
+
+  constructor(private ref: ElementRef, private toast: AXToastService) {
+    super();
+  }
+
+  @Input()
+  fields: any[] = [];
+
+  // @Input()
+  // mode: 'immediate' | 'click' = 'click';
+
+  @Output()
+  onRuleChanged: EventEmitter<AXQueryBuilderGroupEvent> = new EventEmitter<AXQueryBuilderGroupEvent>();
+
+  saved: boolean = false;
+
+  public getQueryBuilder() {
+    return { groups: this.rootGroup };
+  }
+
+  ruleChanged(e) {
+    this.onRuleChanged.emit({ component: this, groups: this.rootGroup });
+  }
+
+  public saveRule() {
+    /// return this.queryGroup.saveRule();
+    return new Promise((resolve, reject) => {
+      this.saved = true;
+      for (let i = 0; i < this.rootGroup.items.length; i++) {
+        if (this.saved == true) {
+          this.findNullValue(this.rootGroup.items[i]);
+        }
+      }
+      if (this.saved == true) {
+        resolve(this.rootGroup);
+      } else {
+        reject();
+      }
+    });
+  }
+
+  findNullValue(gr) {
+    if (this.saved == true) {
+      if (gr.condition) {
+        for (let i = 0; i < gr.items.length; i++) {
+          this.findNullValue(gr.items[i]);
+        }
+      } else {
+        if (gr.onDemandLabel == '????|') {
+          this.saved = false;
+          this.toast.error('لطفا نام متغیر های مورد نیاز را کامل کنید');
+        }
+      }
+    }
+  }
+
+  // selectionFieldsChanged(e, rules: AXQueryBuilderRule) {
+  //
+  //     rules.dataField = e.selectedItems[0].dataField;
+  //     rules.caption = e.selectedItems[0].caption;
+  //     rules.dataType = e.selectedItems[0].dataType;
+
+  //     // TO DO chack dataType For Def operator and Value
+  //     if (rules.dataType == 'string') {
+  //         rules.operator = this.operatorStringItem[0].id;
+  //         rules.value = 'null';
+  //     }
+  //     if (rules.dataType == 'number') {
+  //         rules.operator = this.operatorNumberItem[0].id;
+  //         rules.value = '0';
+  //     }
+
+  //     this.onRuleChanged.emit({ groups: this.rootGroup, queryString: this.getQueryDisplay(), component: this, htmlElement: this.ref.nativeElement })
+  // }
+
+  // selectionOparatorChanged(e, rules: AXQueryBuilderRule) {
+  //     rules.operator = e.selectedItems[0].id;
+  // }
+
+  // provideDataFields = (e) => {
+  //     return new Promise((resolve) => {
+  //         resolve(this.fields);
+  //     });
+  // }
+
+  // provideDataOperatorString = (e) => {
+  //     return new Promise((resolve) => {
+  //         resolve(this.operatorStringItem);
+  //     });
+  // }
+  // provideDataOperatorNumber = (e) => {
+  //     return new Promise((resolve) => {
+  //         resolve(this.operatorNumberItem);
+  //     });
+  // }
+
+  // private getQueryDisplay(gr = this.list, _condition = this.list[0].condition) {
+  //     var cap: string = '(';
+
+  //     for (let j = 0; j < gr.length; j++) {
+  //         if (j > 0) {
+  //             cap = cap + _condition;
+  //         }
+  //         cap = cap + " ( ";
+  //         for (let i = 0; i < gr[j].items.length; i++) {
+  //             if (gr[j].items[i].value && gr[j].items[i].operator && gr[j].items[i].caption || ((gr[j].items[i].operator == "is-empty" || gr[j].items[i].operator == "is-not-empty") && gr[j].items[i].caption)) {
+  //                 var opr: string;
+  //                 if (gr[j].items[i].dataType == "number" || gr[j].items[i].dataType == "date" || gr[j].items[i].dataType == "dateTime") {
+  //                     let d = this.operatorNumberItem.filter(c => c.id == gr[j].items[i].operator);
+  //                     opr = d[0].text;
+  //                 } else {
+  //                     let d = this.operatorStringItem.filter(c => c.id == gr[j].items[i].operator);
+  //                     opr = d[0].text;
+  //                 }
+  //                 if ((gr[j].items[i].operator == "is-empty" || gr[j].items[i].operator == "is-not-empty")) {
+
+  //                     if (i === gr[j].items.length - 1) {
+  //                         cap = cap + " " + "[" + gr[j].items[i].caption + "]";
+  //                     } else {
+  //                         cap = cap + " " + "[" + gr[j].items[i].caption + "]" + " " + opr + " " + gr[j].condition;
+  //                     }
+  //                 } else {
+  //                     var val: string;
+
+  //                     if (gr[j].items[i].dataType == 'date') {
+  //                         // val = moment(item.value).locale('fa').format('YYYY/MM/DD');
+  //                     } else if (gr[j].items[i].dataType == 'dateTime') {
+  //                         // val = moment(item.value).locale('fa').format('HH:mm YYYY/MM/DD');
+  //                     } else {
+  //                         val = gr[j].items[i].value;
+  //                     }
+  //                     if (i === gr[j].items.length - 1) {
+  //                         cap = cap + " " + "[" + gr[j].items[i].caption + "]" + " " + opr + " " + val
+  //                     } else {
+  //                         cap = cap + " " + "[" + gr[j].items[i].caption + "]" + " " + opr + " " + val + " " + gr[j].condition
+  //                     }
+
+  //                 }
+  //             }
+  //         }
+
+  //         if (gr[j].groups && gr[j].groups.length > 0) {
+  //             let c = this.getQueryDisplay(gr[j].groups, gr[j].condition);
+  //             if (c != "( ) ") {
+  //                 if (gr[j].items.length > 0 || j > 0) {
+  //                     cap = cap + " " + gr[j].condition + " " + c + " ";
+  //                 } else {
+  //                     cap = cap + " " + c + " ";
+  //                 }
+
+  //             }
+  //         }
+
+  //         cap = cap + " ) ";
+  //     };
+
+  //     cap = cap + " ) ";
+  //     return cap;
+  // }
+
+  // deleteGroup(groupOut: AXQueryBuilderGroup, groupIn: AXQueryBuilderGroup) {
+  //     groupOut.items = groupOut.items.filter(c => c.id != groupIn.id);
+  // }
+
+  // deleteRule1(group: AXQueryBuilderGroup, rule: AXQueryBuilderRule) {
+  //     group.items = group.items.filter(c => c.id != rule.id);
+  // }
+
+  // addRule(group: AXQueryBuilderGroup) {
+  //     const item: AXQueryBuilderRule = new AXQueryBuilderRule();
+  //     group.items.push(item);
+  // }
+
+  // addGroupAND(group: AXQueryBuilderGroup) {
+  //     this.addGroupOnClick(group);
+  //     group.condition = "AND";
+  // }
+  // addGroupOR(group: AXQueryBuilderGroup) {
+  //     this.addGroupOnClick(group);
+  //     group.condition = "OR";
+  // }
+
+  // addGroupOnClick(groups: AXQueryBuilderGroup) {
+  //     let r: AXQueryBuilderGroup = new AXQueryBuilderGroup();
+  //     r.condition = "";
+  //     r.items = [];
+  //     if (groups.items == undefined) {
+  //         groups.items = [];
+  //     }
+  //     groups.items.push(r);
+  // }
+}

package/src/lib/query-builder/query-builder.module.ts

@@ -0,0 +1,42 @@
+import { NgModule } from '@angular/core';
+import { AXQueryBuilderComponent } from './query-builder.component';
+import { AXButtonModule } from '../button/button.module';
+import { CommonModule } from '@angular/common';
+import { AXPanelBoxModule } from '../panel-box/panel-box.module';
+import { AXSelectBoxModule } from '../selectbox/selectbox.module';
+import { AXTextBoxModule } from '../textbox/textbox.module';
+import { AXQueryBuilderRuleComponent } from './query-builder-rule.component';
+import { AXQueryBuilderGroupComponent } from './query-builder-group.component';
+import { AXTranslatorModule } from '@acorex/core';
+import { AXNumberBoxModule } from '../number-box/number-box.module';
+import { AXDataSourceModule } from '../data-source/datasource.module';
+import { AXFormGroupModule } from '../form-group/form-group.module';
+import { AXQueryBuilderPopupComponent } from './query-builder-popup/query-builder-popup.component';
+import { AXLabelModule } from '../label/label.module';
+import { AXCheckBoxModule } from '../checkbox/checkbox.module';
+import { AXValidationModule } from '../validation/validation.module';
+import { AXQueryBuilderService } from './query-builder.service';
+
+const MODUELS = [
+    CommonModule,
+    AXButtonModule,
+    AXPanelBoxModule,
+    AXSelectBoxModule,
+    AXDataSourceModule,
+    AXTextBoxModule,
+    AXNumberBoxModule,
+    AXFormGroupModule,
+    AXTranslatorModule,
+    AXLabelModule,
+    AXCheckBoxModule,
+    AXValidationModule
+]
+
+@NgModule({
+    declarations: [AXQueryBuilderComponent, AXQueryBuilderGroupComponent, AXQueryBuilderRuleComponent, AXQueryBuilderPopupComponent],
+    imports: [MODUELS],
+    exports: [AXQueryBuilderComponent],
+    providers: [AXQueryBuilderService]
+})
+
+export class AXQueryBuilderModule { }

package/src/lib/query-builder/query-builder.service.ts

@@ -0,0 +1,181 @@
+import { AXQueryBuilderGroup, AXQueryBuilderStringType } from './query-builder.class';
+import { Injectable } from '@angular/core';
+import { AXPopupService } from '../popup/popup.service';
+import { AXQueryBuilderPopupComponent } from './query-builder-popup/query-builder-popup.component';
+import { AXToastService } from '../toast/toast.service';
+@Injectable({ providedIn: 'root' })
+export class AXQueryBuilderService {
+  constructor(private popup: AXPopupService, private toast: AXToastService) {}
+  canOpen: boolean = false;
+  canRun: boolean = false;
+  public runQuery(group: AXQueryBuilderGroup, provideData) {
+    return new Promise((resolve) => {
+      this.canOpen = false;
+      for (let i = 0; i < group.items.length; i++) {
+        this.getNoValueRule(group.items[i]);
+      }
+      if (this.canOpen) {
+        this.canRun = true;
+        for (let i = 0; i < group.items.length; i++) {
+          if (this.canRun == true) {
+            this.findNullValue(group.items[i]);
+          }
+        }
+        if (this.canRun) {
+          this.popup.open(AXQueryBuilderPopupComponent, { data: { group: group, provideData: provideData }, title: 'دریافت مقادیر' }).then((c) => {
+            resolve(c);
+          });
+        }
+      } else {
+        resolve(group);
+      }
+    });
+  }
+
+  findNullValue(gr) {
+    if (this.canRun == true) {
+      if (gr.condition) {
+        for (let i = 0; i < gr.items.length; i++) {
+          this.findNullValue(gr.items[i]);
+        }
+      } else {
+        if (gr.onDemandLabel == '????|') {
+          this.canRun = false;
+          this.toast.error('لطفا نام متغیر های مورد نیاز را کامل کنید');
+        }
+      }
+    }
+  }
+
+  private getNoValueRule(gr) {
+    // for (let i = 0; i < gr.items.length; i++) {
+    if (gr.condition) {
+      for (let i = 0; i < gr.items.length; i++) {
+        this.getNoValueRule(gr.items[i]);
+      }
+    } else {
+      if (gr.onDemandLabel?.indexOf('????') == 0) {
+        this.canOpen = true;
+      }
+    }
+
+    //  }
+  }
+
+  async getQueryStringSimple(group: AXQueryBuilderGroup) {
+    return new Promise<string>(async (resolve, reject) => {
+      var query: string;
+      if (group.items.length > 0) {
+        query = ' ( ';
+      }
+      var id = 0;
+      for await (const iterator of group.items) {
+        const item: any = group.items[id];
+        if (item.condition) {
+          await this.getQueryStringSimple(item).then((c) => {
+            query = query + c;
+          });
+        } else {
+          let codeOperator: string = null;
+          switch (item.operator) {
+            case 'equal':
+              codeOperator = '==';
+              break;
+            case 'not-equal':
+              codeOperator = '!=';
+              break;
+            case 'not-null':
+              codeOperator = '!= null';
+              break;
+            case 'null':
+              codeOperator = '== null';
+              break;
+            case 'gt':
+              codeOperator = '>';
+              break;
+            case 'gte':
+              codeOperator = '>=';
+              break;
+            case 'lt':
+              codeOperator = '<';
+              break;
+            case 'lte':
+              codeOperator = '<=';
+              break;
+            case 'contains':
+              codeOperator = item.operator;
+              break;
+            case 'start-with':
+              codeOperator = item.operator;
+              break;
+            case 'end-with':
+              codeOperator = item.operator;
+              break;
+            default:
+              codeOperator = item.operator;
+              break;
+          }
+          query = query + ' ' + item.caption + ' ' + codeOperator + ' ' + item.text;
+        }
+        if (id !== group.items.length - 1 && query != ' ( ') {
+          query = query + ' ' + group.condition;
+        }
+        id += 1;
+      }
+      if (group.items.length > 0) {
+        query = query + ' ) ';
+      }
+      resolve(query);
+    });
+  }
+
+  public getQueryString(group: AXQueryBuilderGroup, type: AXQueryBuilderStringType): string {
+    let query = '';
+    switch (type) {
+      case 'simple':
+        if (group.items.length > 0) {
+          query = ' ( ';
+        }
+        for (let i = 0; i < group.items.length; i++) {
+          const item = group.items[i];
+          if (item instanceof AXQueryBuilderGroup) {
+            query = query + item.queryString;
+          } else {
+            query = query + ' ' + item.caption + ' ' + item.operator + ' ' + item.value;
+          }
+          if (i !== group.items.length - 1 && query != ' ( ') {
+            query = query + ' ' + group.condition;
+          }
+        }
+        if (group.items.length > 0) {
+          query = query + ' ) ';
+        }
+        break;
+
+      case 'elastic':
+        if (group.items.length > 0) {
+          query = ' ( ';
+        }
+        for (let i = 0; i < group.items.length; i++) {
+          const item = group.items[i];
+          if (item instanceof AXQueryBuilderGroup) {
+            query = query + item.queryStringElastic;
+          } else {
+            query = query + ' ' + item.dataField + ' ' + item.operator + ' ' + item.value;
+          }
+          if (i !== group.items.length - 1 && query != ' ( ') {
+            query = query + ' ' + group.condition;
+          }
+        }
+        if (group.items.length > 0) {
+          query = query + ' ) ';
+        }
+
+        break;
+      case 'sql':
+        break;
+    }
+
+    return query;
+  }
+}

package/src/lib/searchbox/searchbox.component.html

@@ -0,0 +1,25 @@
+<div class="ax form-item" [class.disabled]="disabled" [attr.id]="uid">
+    <div class="ax items-wrapper">
+        <ng-content select="[start]">
+        </ng-content>
+    </div>
+    <div class="content" #content>
+        <div class="ax input form-control {{size}}" [class.disabled]="disabled" [class.readonly]="readonly"
+            [class.icon]="icon">
+            <input #input type="text" class="ax {{size}}" [(ngModel)]="value"
+                (input)="onSearchChanged($event.target.value)" [placeholder]="placeholder" [readonly]="readonly"
+                [disabled]="disabled" [ngClass]="setTextAlign()" [class.clear]="value && allowClear"
+                (focus)="handleInputFocus($event)" (blur)="handleInputBlur($event)" (keyup)="handleKeyEvent($event)"
+                (keydown)="handleKeyEvent($event)">
+            <i class="{{icon}}" *ngIf="icon"></i>
+        </div>
+    </div>
+    <div class="ax items-wrapper">
+        <ax-button [size]="size" *ngIf="value && allowClear" icon="far fa-times" type="danger blank" (click)="clear()"  [tabIndex]="-1">
+        </ax-button>
+        <ax-button [size]="size" type="light blank" icon="far fa-search" end (click)="click($event)"  [tabIndex]="-1">
+        </ax-button>
+        <ng-content select="[end]">
+        </ng-content>
+    </div>
+</div>

package/src/lib/searchbox/searchbox.component.ts

@@ -0,0 +1,85 @@
+import { Component, OnInit, Input, Output, EventEmitter, ChangeDetectorRef, ElementRef, ChangeDetectionStrategy, ViewChild } from '@angular/core';
+import { Observable } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { AXBaseTextComponent } from '../base/element.class';
+import { AXBaseEvent, AXValueEvent } from '../base/events.class';
+
+
+@Component({
+  selector: 'ax-search-box',
+  templateUrl: './searchbox.component.html',
+  host: { style:'width: 100%' },
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AXSearchBoxComponent extends AXBaseTextComponent {
+
+  @Output()
+  public textChanged: EventEmitter<AXValueEvent<any>> = new EventEmitter<AXValueEvent<any>>();
+  @Output()
+  onButtonClick: EventEmitter<AXValueEvent<any>> = new EventEmitter<AXValueEvent<any>>();
+
+  @Input()
+  placeholder: string = 'جستجو ...';
+
+  constructor(protected cdr: ChangeDetectorRef, ref: ElementRef) {
+    super(cdr, ref);
+  }
+
+  private _text: string;
+  @Input()
+  public get text(): string {
+    return this._text;
+  }
+  public set text(v: string) {
+    if (v !== this._text) {
+      const old = this._text;
+      this._text = v;
+      this.textChanged.emit({
+        component: this,
+        value: v,
+        oldValue: old
+      });
+    }
+  }
+
+  ngOnInit() {
+    this.value = '';
+    this.text = '';
+  }
+
+  onSearchChanged(text: string) {
+    if (!this.searchChangeObserver) {
+      Observable.create(observer => {
+
+        this.searchChangeObserver = observer;
+      })
+        .pipe(debounceTime(this.delay))
+        .pipe(distinctUntilChanged())
+        .subscribe(c => {
+          this.text = c;
+          this.value = c;
+        });
+    }
+
+    this.searchChangeObserver.next(text);
+  }
+
+  @Input()
+  delay: number = 500;
+
+  private searchChangeObserver: any;
+
+  handleKeyEvent(e: KeyboardEvent) {
+    //  this.searchChangeObserver.next(this.text);
+    this.onkey.emit(e);
+  }
+
+  click(e: MouseEvent) {
+    this.onButtonClick.emit({
+      component: this,
+      htmlElement: this.ref.nativeElement,
+      value: this.text
+    });
+    // this.searchChangeObserver.next(this.text);
+  }
+}

package/src/lib/searchbox/searchbox.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXSearchBoxComponent } from './searchbox.component';
+import { AXTextBoxModule } from '../textbox/textbox.module';
+import { AXButtonModule } from '../button/button.module';
+import { AXFormGroupModule } from '../form-group/form-group.module';
+import { AXTranslatorModule } from '@acorex/core';
+import { FormsModule } from '@angular/forms';
+
+
+@NgModule({
+  declarations: [AXSearchBoxComponent],
+  imports: [CommonModule, AXTextBoxModule, AXButtonModule, AXFormGroupModule, AXTranslatorModule, FormsModule],
+  exports: [AXSearchBoxComponent],
+  providers: []
+})
+export class AXSearchBoxModule { }

package/src/lib/selectbox/selectbox.component.html

@@ -0,0 +1,98 @@
+<ax-drop-down [size]="size" [rtl]="rtl" [showDropDownButton]="showDropDownButton" [disabled]="disabled"
+    [readonly]="readonly" #d (dropdownToggle)="dropdownToggleSelecBox($event)">
+    <ng-container start>
+        <ng-content select="[start]">
+        </ng-content>
+    </ng-container>
+    <ng-container header>
+        <div class="ax chips-container" [horizontalScroll]="40">
+            <div class="chips" [class.chips-blank]="mode === 'single'" [title]="item[textField]"
+                *ngFor="let item of selectedItems">
+                <span class="chips-text">
+                    {{item[textField]}}
+                </span>
+                <span class="close-icon" (click)="handleItemRemoveClick(item)"
+                    *ngIf="(readonly!=true || itemRemove ==true)&& disabled!=true && (allowNull==true || (selectedItems.length > 1))">
+                    <i class="far fa-times close"></i>
+                </span>
+            </div>
+            <div class="search-wrapper" (click)="onTextBoxClick($event)">
+                <ax-text-box #textBoxSelectBox [textAlign]="textAlign"
+                    [placeholder]="selectedItems.length == 0 ? placeholder : ''" [readonly]="readonly"
+                    [disabled]="disabled" (onkey)="handleKeyEvent($event)" [size]="size"
+                    (onFocus)="onFocusTextBox($event)">
+                </ax-text-box>
+            </div>
+        </div>
+    </ng-container>
+    <ng-container end>
+        <ng-content select="[end]">
+        </ng-content>
+    </ng-container>
+
+    <ng-container panel>
+        <div *ngIf="allowSearch" class="search-wrapper" style="padding: 0.7em;">
+            <ax-search-box #serchBox [(value)]="text" (onkey)="handleKeyEventSearch($event)"
+                (textChanged)="textChanged($event)" (onButtonClick)="textChanged($event)">
+            </ax-search-box>
+        </div>
+        <div class="ax list-container">
+            <div #listContainer class="list-container-items" (scroll)="scrolled($event)">
+                <ng-container *ngIf="getItems().length>0; then thenTemplate; else elseTemplate"></ng-container>
+                <ng-template #thenTemplate>
+                    <div [class.ax-state-disabled]="isItemDisabled(item)" class="list-item"
+                        *ngFor="let item of getItems();let i = index" [class.focused]="i==currentfocusedIndex"
+                        [class.selected]="isItemSelected(item)" (click)="handleItemClick($event,item)">
+                        <div style="display: flex;">
+                            <ax-check-box *ngIf="showCheckBox" [size]="size" [value]="isItemSelected(item)"
+                                [disabled]="(!allowNull && selectedItems.length === 1 && isItemSelected(item)) || isItemDisabled(item)"
+                                (onClick)="handleItemClick($event,item)">
+                            </ax-check-box>
+                            <ng-container *ngIf="rowTemplate; else elseTemplate">
+                                <div style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;flex: 1;"
+                                    [title]="item[textField]"
+                                    [ngStyle]="(showCheckBox) ? {'padding-inline-start': '0.5rem'}:''">
+                                    <ng-container *ngTemplateOutlet="rowTemplate; context:{ $implicit: item }">
+                                    </ng-container>
+                                </div>
+
+                            </ng-container>
+                            <ng-template #elseTemplate>
+                                <div style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;flex: 1;"
+                                    [title]="item[textField]"
+                                    [ngStyle]="(showCheckBox) ? {'padding-inline-start': '0.5rem'}:''">
+                                    {{ item[textField] }}
+                                </div>
+                            </ng-template>
+
+                        </div>
+
+                    </div>
+
+                </ng-template>
+                <div *ngIf="showLoading" class="ax-pad-sm" style="text-align: center;">
+                    <i class="far fa-spinner-third fa-pulse fa-2x" style="color: var(--ax-primary-color);"></i>
+
+                </div>
+                <!-- <ax-loading-indicator ></ax-loading-indicator> -->
+                <ng-template #elseTemplate>
+                    <ng-container *ngIf="showLoading == true; then searchTemplate else noDataTemplate"></ng-container>
+                    <ng-template #searchTemplate>
+                        <div class="list-item">
+                            {{'common.searching' | trans}}
+                        </div>
+                    </ng-template>
+                    <ng-template #noDataTemplate>
+                        <div class="list-item">
+                            {{'common.noDataFound' | trans}}
+                        </div>
+                    </ng-template>
+
+                </ng-template>
+
+            </div>
+
+        </div>
+    </ng-container>
+
+</ax-drop-down>