@acorex/components 6.5.83 → 6.5.84

package/fesm2022/acorex-components.mjs

@@ -8960,13 +8960,13 @@ class AXSelectBoxComponent extends AXValidatableComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AXSelectBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: { showDropDownButton: "showDropDownButton", rowInputTemplate: "rowInputTemplate", showCheckBox: "showCheckBox", readonly: "readonly", rtl: "rtl", disabled: "disabled", placeholder: "placeholder", size: "size", allowNull: "allowNull", textAlign: "textAlign", bufferSize: "bufferSize", remoteOperation: "remoteOperation", fitParent: "fitParent", dropdownWidth: "dropdownWidth", multiLine: "multiLine", onDemandTranslate: "onDemandTranslate", dataSource: "dataSource", validation: "validation", disabledCallback: "disabledCallback", allowSearch: "allowSearch", textField: "textField", valueField: "valueField", disabledField: "disabledField", mode: "mode", items: "items", selectedItems: "selectedItems", selectedValues: "selectedValues" }, outputs: { dropdownToggle: "dropdownToggle", itemsChange: "itemsChange", onBlur: "onBlur", onFocus: "onFocus", selectionChanged: "selectionChanged", selectedItemsChange: "selectedItemsChange", selectedValuesChange: "selectedValuesChange" }, host: { styleAttribute: "width: 100%" }, providers: [
             { provide: AXValidatableComponent, useExisting: AXSelectBoxComponent },
-        ], queries: [{ propertyName: "rowTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }, { propertyName: "_contentDataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }, { propertyName: "_contentValidation", first: true, predicate: AXValidation, descendants: true, static: true }], viewQueries: [{ propertyName: "span", first: true, predicate: AXTextBoxComponent, descendants: true, static: true }, { propertyName: "textbox", first: true, predicate: AXTextBoxComponent, descendants: true, static: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }, { propertyName: "serchBox", first: true, predicate: ["serchBox"], descendants: true }, { propertyName: "textBoxSelectBox", first: true, predicate: ["textBoxSelectBox"], descendants: true, static: true }, { propertyName: "dropdown", first: true, predicate: ["d"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down\n  #d\n  [size]=\"size\"\n  [fitParent]=\"fitParent\"\n  [dropdownWidth]=\"dropdownWidth\"\n  [rtl]=\"rtl\"\n  [showDropDownButton]=\"showDropDownButton\"\n  [disabled]=\"disabled\"\n  [readonly]=\"readonly\"\n  (dropdownToggle)=\"dropdownToggleSelecBox($event)\"\n>\n  <ng-container start>\n    <ng-content select=\"[start]\"> </ng-content>\n  </ng-container>\n  <ng-container header>\n    <div\n      class=\"ax chips-container\"\n      [class.multiline]=\"multiLine\"\n      [style.padding]=\"selectedItems.length ? '0.25rem' : ''\"\n    >\n      <div\n        class=\"chips\"\n        [class.chips-blank]=\"mode === 'single'\"\n        [title]=\"item[textField]\"\n        *ngFor=\"let item of selectedItems\"\n      >\n        <span\n          class=\"chips-text\"\n          [ngStyle]=\"{\n            width:\n              item[textField].length > 15 &&\n              this.mode === 'multiple' &&\n              !multiLine\n                ? '110px'\n                : 'auto'\n          }\"\n        >\n          {{ item[textField] }}\n        </span>\n        <span\n          class=\"close-icon\"\n          (click)=\"handleItemRemoveClick(item)\"\n          *ngIf=\"\n            (readonly != true || itemRemove == true) &&\n            disabled != true &&\n            (allowNull == true || selectedItems.length > 1)\n          \"\n        >\n          <i class=\"far fa-times close\"></i>\n        </span>\n      </div>\n      <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\n        <ax-text-box\n          #textBoxSelectBox\n          [textAlign]=\"textAlign\"\n          [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\"\n          [readonly]=\"readonly\"\n          [disabled]=\"disabled\"\n          (onkey)=\"handleKeyEvent($event)\"\n          [size]=\"size\"\n          (onFocus)=\"onFocusTextBox($event)\"\n        >\n        </ax-text-box>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container end>\n    <ng-content select=\"[end]\"> </ng-content>\n  </ng-container>\n\n  <ng-container panel>\n    <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em\">\n      <ax-search-box\n        #serchBox\n        [onDemandTranslate]=\"onDemandTranslate\"\n        [(value)]=\"text\"\n        (onkey)=\"handleKeyEventSearch($event)\"\n        (textChanged)=\"textChanged($event)\"\n        (onButtonClick)=\"textChanged($event)\"\n      >\n      </ax-search-box>\n    </div>\n    <div class=\"ax list-container\">\n      <div\n        #listContainer\n        class=\"list-container-items\"\n        (scroll)=\"scrolled($event)\"\n      >\n        <ng-container\n          *ngIf=\"getItems().length > 0; then thenTemplate; else elseTemplate\"\n        ></ng-container>\n        <ng-template #thenTemplate>\n          <div\n            [class.ax-state-disabled]=\"isItemDisabled(item)\"\n            class=\"list-item\"\n            *ngFor=\"let item of getItems(); let i = index\"\n            [class.focused]=\"i == currentfocusedIndex\"\n            [class.selected]=\"isItemSelected(item)\"\n            (click)=\"handleItemClick($event, item)\"\n          >\n            <div style=\"display: flex\">\n              <ax-check-box\n                *ngIf=\"showCheckBox\"\n                [size]=\"size\"\n                [value]=\"isItemSelected(item)\"\n                [disabled]=\"\n                  (!allowNull &&\n                    selectedItems.length === 1 &&\n                    isItemSelected(item)) ||\n                  isItemDisabled(item)\n                \"\n                (onClick)=\"handleItemClick($event, item)\"\n              >\n              </ax-check-box>\n              <ng-container *ngIf=\"rowTemplate; else elseTemplate\">\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=\"\n                      rowTemplate;\n                      context: { $implicit: item }\n                    \"\n                  >\n                  </ng-container>\n                </div>\n              </ng-container>\n              <ng-template #elseTemplate>\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              </ng-template>\n            </div>\n          </div>\n        </ng-template>\n        <div *ngIf=\"showLoading\" 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        <!-- <ax-loading-indicator ></ax-loading-indicator> -->\n        <ng-template #elseTemplate>\n          <ng-container\n            *ngIf=\"\n              showLoading == true;\n              then searchTemplate;\n              else noDataTemplate\n            \"\n          ></ng-container>\n          <ng-template #searchTemplate>\n            <div class=\"list-item\">\n              {{ 'common.search' | trans }}\n            </div>\n          </ng-template>\n          <ng-template #noDataTemplate>\n            <div class=\"list-item\">\n              {{ 'common.noDataFound' | trans }}\n            </div>\n          </ng-template>\n        </ng-template>\n      </div>\n    </div>\n  </ng-container>\n</ax-drop-down>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["placeholder", "onDemandTranslate", "text", "delay"], outputs: ["textChanged", "onButtonClick"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "rowTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }, { propertyName: "_contentDataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }, { propertyName: "_contentValidation", first: true, predicate: AXValidation, descendants: true, static: true }], viewQueries: [{ propertyName: "span", first: true, predicate: AXTextBoxComponent, descendants: true, static: true }, { propertyName: "textbox", first: true, predicate: AXTextBoxComponent, descendants: true, static: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }, { propertyName: "serchBox", first: true, predicate: ["serchBox"], descendants: true }, { propertyName: "textBoxSelectBox", first: true, predicate: ["textBoxSelectBox"], descendants: true, static: true }, { propertyName: "dropdown", first: true, predicate: ["d"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down\n  #d\n  [size]=\"size\"\n  [fitParent]=\"fitParent\"\n  [dropdownWidth]=\"dropdownWidth\"\n  [rtl]=\"rtl\"\n  [showDropDownButton]=\"showDropDownButton\"\n  [disabled]=\"disabled\"\n  [readonly]=\"readonly\"\n  (dropdownToggle)=\"dropdownToggleSelecBox($event)\"\n>\n  <ng-container start>\n    <ng-content select=\"[start]\"> </ng-content>\n  </ng-container>\n  <ng-container header>\n    <div\n      class=\"ax chips-container\"\n      [class.multiline]=\"multiLine\"\n      [style.padding]=\"selectedItems.length && multiLine ? '0.25rem' : ''\"\n    >\n      <div\n        class=\"chips\"\n        [class.chips-blank]=\"mode === 'single'\"\n        [title]=\"item[textField]\"\n        *ngFor=\"let item of selectedItems\"\n      >\n        <span\n          class=\"chips-text\"\n          [ngStyle]=\"{\n            width:\n              item[textField].length > 15 &&\n              this.mode === 'multiple' &&\n              !multiLine\n                ? '110px'\n                : 'auto'\n          }\"\n        >\n          {{ item[textField] }}\n        </span>\n        <span\n          class=\"close-icon\"\n          (click)=\"handleItemRemoveClick(item)\"\n          *ngIf=\"\n            (readonly != true || itemRemove == true) &&\n            disabled != true &&\n            (allowNull == true || selectedItems.length > 1)\n          \"\n        >\n          <i class=\"far fa-times close\"></i>\n        </span>\n      </div>\n      <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\n        <ax-text-box\n          #textBoxSelectBox\n          [textAlign]=\"textAlign\"\n          [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\"\n          [readonly]=\"readonly\"\n          [disabled]=\"disabled\"\n          (onkey)=\"handleKeyEvent($event)\"\n          [size]=\"size\"\n          (onFocus)=\"onFocusTextBox($event)\"\n        >\n        </ax-text-box>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container end>\n    <ng-content select=\"[end]\"> </ng-content>\n  </ng-container>\n\n  <ng-container panel>\n    <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em\">\n      <ax-search-box\n        #serchBox\n        [onDemandTranslate]=\"onDemandTranslate\"\n        [(value)]=\"text\"\n        (onkey)=\"handleKeyEventSearch($event)\"\n        (textChanged)=\"textChanged($event)\"\n        (onButtonClick)=\"textChanged($event)\"\n      >\n      </ax-search-box>\n    </div>\n    <div class=\"ax list-container\">\n      <div\n        #listContainer\n        class=\"list-container-items\"\n        (scroll)=\"scrolled($event)\"\n      >\n        <ng-container\n          *ngIf=\"getItems().length > 0; then thenTemplate; else elseTemplate\"\n        ></ng-container>\n        <ng-template #thenTemplate>\n          <div\n            [class.ax-state-disabled]=\"isItemDisabled(item)\"\n            class=\"list-item\"\n            *ngFor=\"let item of getItems(); let i = index\"\n            [class.focused]=\"i == currentfocusedIndex\"\n            [class.selected]=\"isItemSelected(item)\"\n            (click)=\"handleItemClick($event, item)\"\n          >\n            <div style=\"display: flex\">\n              <ax-check-box\n                *ngIf=\"showCheckBox\"\n                [size]=\"size\"\n                [value]=\"isItemSelected(item)\"\n                [disabled]=\"\n                  (!allowNull &&\n                    selectedItems.length === 1 &&\n                    isItemSelected(item)) ||\n                  isItemDisabled(item)\n                \"\n                (onClick)=\"handleItemClick($event, item)\"\n              >\n              </ax-check-box>\n              <ng-container *ngIf=\"rowTemplate; else elseTemplate\">\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=\"\n                      rowTemplate;\n                      context: { $implicit: item }\n                    \"\n                  >\n                  </ng-container>\n                </div>\n              </ng-container>\n              <ng-template #elseTemplate>\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              </ng-template>\n            </div>\n          </div>\n        </ng-template>\n        <div *ngIf=\"showLoading\" 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        <!-- <ax-loading-indicator ></ax-loading-indicator> -->\n        <ng-template #elseTemplate>\n          <ng-container\n            *ngIf=\"\n              showLoading == true;\n              then searchTemplate;\n              else noDataTemplate\n            \"\n          ></ng-container>\n          <ng-template #searchTemplate>\n            <div class=\"list-item\">\n              {{ 'common.search' | trans }}\n            </div>\n          </ng-template>\n          <ng-template #noDataTemplate>\n            <div class=\"list-item\">\n              {{ 'common.noDataFound' | trans }}\n            </div>\n          </ng-template>\n        </ng-template>\n      </div>\n    </div>\n  </ng-container>\n</ax-drop-down>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["placeholder", "onDemandTranslate", "text", "delay"], outputs: ["textChanged", "onButtonClick"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AXSelectBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-select-box', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [
                         { provide: AXValidatableComponent, useExisting: AXSelectBoxComponent },
-                    ], template: "<ax-drop-down\n  #d\n  [size]=\"size\"\n  [fitParent]=\"fitParent\"\n  [dropdownWidth]=\"dropdownWidth\"\n  [rtl]=\"rtl\"\n  [showDropDownButton]=\"showDropDownButton\"\n  [disabled]=\"disabled\"\n  [readonly]=\"readonly\"\n  (dropdownToggle)=\"dropdownToggleSelecBox($event)\"\n>\n  <ng-container start>\n    <ng-content select=\"[start]\"> </ng-content>\n  </ng-container>\n  <ng-container header>\n    <div\n      class=\"ax chips-container\"\n      [class.multiline]=\"multiLine\"\n      [style.padding]=\"selectedItems.length ? '0.25rem' : ''\"\n    >\n      <div\n        class=\"chips\"\n        [class.chips-blank]=\"mode === 'single'\"\n        [title]=\"item[textField]\"\n        *ngFor=\"let item of selectedItems\"\n      >\n        <span\n          class=\"chips-text\"\n          [ngStyle]=\"{\n            width:\n              item[textField].length > 15 &&\n              this.mode === 'multiple' &&\n              !multiLine\n                ? '110px'\n                : 'auto'\n          }\"\n        >\n          {{ item[textField] }}\n        </span>\n        <span\n          class=\"close-icon\"\n          (click)=\"handleItemRemoveClick(item)\"\n          *ngIf=\"\n            (readonly != true || itemRemove == true) &&\n            disabled != true &&\n            (allowNull == true || selectedItems.length > 1)\n          \"\n        >\n          <i class=\"far fa-times close\"></i>\n        </span>\n      </div>\n      <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\n        <ax-text-box\n          #textBoxSelectBox\n          [textAlign]=\"textAlign\"\n          [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\"\n          [readonly]=\"readonly\"\n          [disabled]=\"disabled\"\n          (onkey)=\"handleKeyEvent($event)\"\n          [size]=\"size\"\n          (onFocus)=\"onFocusTextBox($event)\"\n        >\n        </ax-text-box>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container end>\n    <ng-content select=\"[end]\"> </ng-content>\n  </ng-container>\n\n  <ng-container panel>\n    <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em\">\n      <ax-search-box\n        #serchBox\n        [onDemandTranslate]=\"onDemandTranslate\"\n        [(value)]=\"text\"\n        (onkey)=\"handleKeyEventSearch($event)\"\n        (textChanged)=\"textChanged($event)\"\n        (onButtonClick)=\"textChanged($event)\"\n      >\n      </ax-search-box>\n    </div>\n    <div class=\"ax list-container\">\n      <div\n        #listContainer\n        class=\"list-container-items\"\n        (scroll)=\"scrolled($event)\"\n      >\n        <ng-container\n          *ngIf=\"getItems().length > 0; then thenTemplate; else elseTemplate\"\n        ></ng-container>\n        <ng-template #thenTemplate>\n          <div\n            [class.ax-state-disabled]=\"isItemDisabled(item)\"\n            class=\"list-item\"\n            *ngFor=\"let item of getItems(); let i = index\"\n            [class.focused]=\"i == currentfocusedIndex\"\n            [class.selected]=\"isItemSelected(item)\"\n            (click)=\"handleItemClick($event, item)\"\n          >\n            <div style=\"display: flex\">\n              <ax-check-box\n                *ngIf=\"showCheckBox\"\n                [size]=\"size\"\n                [value]=\"isItemSelected(item)\"\n                [disabled]=\"\n                  (!allowNull &&\n                    selectedItems.length === 1 &&\n                    isItemSelected(item)) ||\n                  isItemDisabled(item)\n                \"\n                (onClick)=\"handleItemClick($event, item)\"\n              >\n              </ax-check-box>\n              <ng-container *ngIf=\"rowTemplate; else elseTemplate\">\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=\"\n                      rowTemplate;\n                      context: { $implicit: item }\n                    \"\n                  >\n                  </ng-container>\n                </div>\n              </ng-container>\n              <ng-template #elseTemplate>\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              </ng-template>\n            </div>\n          </div>\n        </ng-template>\n        <div *ngIf=\"showLoading\" 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        <!-- <ax-loading-indicator ></ax-loading-indicator> -->\n        <ng-template #elseTemplate>\n          <ng-container\n            *ngIf=\"\n              showLoading == true;\n              then searchTemplate;\n              else noDataTemplate\n            \"\n          ></ng-container>\n          <ng-template #searchTemplate>\n            <div class=\"list-item\">\n              {{ 'common.search' | trans }}\n            </div>\n          </ng-template>\n          <ng-template #noDataTemplate>\n            <div class=\"list-item\">\n              {{ 'common.noDataFound' | trans }}\n            </div>\n          </ng-template>\n        </ng-template>\n      </div>\n    </div>\n  </ng-container>\n</ax-drop-down>\n" }]
+                    ], template: "<ax-drop-down\n  #d\n  [size]=\"size\"\n  [fitParent]=\"fitParent\"\n  [dropdownWidth]=\"dropdownWidth\"\n  [rtl]=\"rtl\"\n  [showDropDownButton]=\"showDropDownButton\"\n  [disabled]=\"disabled\"\n  [readonly]=\"readonly\"\n  (dropdownToggle)=\"dropdownToggleSelecBox($event)\"\n>\n  <ng-container start>\n    <ng-content select=\"[start]\"> </ng-content>\n  </ng-container>\n  <ng-container header>\n    <div\n      class=\"ax chips-container\"\n      [class.multiline]=\"multiLine\"\n      [style.padding]=\"selectedItems.length && multiLine ? '0.25rem' : ''\"\n    >\n      <div\n        class=\"chips\"\n        [class.chips-blank]=\"mode === 'single'\"\n        [title]=\"item[textField]\"\n        *ngFor=\"let item of selectedItems\"\n      >\n        <span\n          class=\"chips-text\"\n          [ngStyle]=\"{\n            width:\n              item[textField].length > 15 &&\n              this.mode === 'multiple' &&\n              !multiLine\n                ? '110px'\n                : 'auto'\n          }\"\n        >\n          {{ item[textField] }}\n        </span>\n        <span\n          class=\"close-icon\"\n          (click)=\"handleItemRemoveClick(item)\"\n          *ngIf=\"\n            (readonly != true || itemRemove == true) &&\n            disabled != true &&\n            (allowNull == true || selectedItems.length > 1)\n          \"\n        >\n          <i class=\"far fa-times close\"></i>\n        </span>\n      </div>\n      <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\n        <ax-text-box\n          #textBoxSelectBox\n          [textAlign]=\"textAlign\"\n          [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\"\n          [readonly]=\"readonly\"\n          [disabled]=\"disabled\"\n          (onkey)=\"handleKeyEvent($event)\"\n          [size]=\"size\"\n          (onFocus)=\"onFocusTextBox($event)\"\n        >\n        </ax-text-box>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container end>\n    <ng-content select=\"[end]\"> </ng-content>\n  </ng-container>\n\n  <ng-container panel>\n    <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em\">\n      <ax-search-box\n        #serchBox\n        [onDemandTranslate]=\"onDemandTranslate\"\n        [(value)]=\"text\"\n        (onkey)=\"handleKeyEventSearch($event)\"\n        (textChanged)=\"textChanged($event)\"\n        (onButtonClick)=\"textChanged($event)\"\n      >\n      </ax-search-box>\n    </div>\n    <div class=\"ax list-container\">\n      <div\n        #listContainer\n        class=\"list-container-items\"\n        (scroll)=\"scrolled($event)\"\n      >\n        <ng-container\n          *ngIf=\"getItems().length > 0; then thenTemplate; else elseTemplate\"\n        ></ng-container>\n        <ng-template #thenTemplate>\n          <div\n            [class.ax-state-disabled]=\"isItemDisabled(item)\"\n            class=\"list-item\"\n            *ngFor=\"let item of getItems(); let i = index\"\n            [class.focused]=\"i == currentfocusedIndex\"\n            [class.selected]=\"isItemSelected(item)\"\n            (click)=\"handleItemClick($event, item)\"\n          >\n            <div style=\"display: flex\">\n              <ax-check-box\n                *ngIf=\"showCheckBox\"\n                [size]=\"size\"\n                [value]=\"isItemSelected(item)\"\n                [disabled]=\"\n                  (!allowNull &&\n                    selectedItems.length === 1 &&\n                    isItemSelected(item)) ||\n                  isItemDisabled(item)\n                \"\n                (onClick)=\"handleItemClick($event, item)\"\n              >\n              </ax-check-box>\n              <ng-container *ngIf=\"rowTemplate; else elseTemplate\">\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=\"\n                      rowTemplate;\n                      context: { $implicit: item }\n                    \"\n                  >\n                  </ng-container>\n                </div>\n              </ng-container>\n              <ng-template #elseTemplate>\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              </ng-template>\n            </div>\n          </div>\n        </ng-template>\n        <div *ngIf=\"showLoading\" 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        <!-- <ax-loading-indicator ></ax-loading-indicator> -->\n        <ng-template #elseTemplate>\n          <ng-container\n            *ngIf=\"\n              showLoading == true;\n              then searchTemplate;\n              else noDataTemplate\n            \"\n          ></ng-container>\n          <ng-template #searchTemplate>\n            <div class=\"list-item\">\n              {{ 'common.search' | trans }}\n            </div>\n          </ng-template>\n          <ng-template #noDataTemplate>\n            <div class=\"list-item\">\n              {{ 'common.noDataFound' | trans }}\n            </div>\n          </ng-template>\n        </ng-template>\n      </div>\n    </div>\n  </ng-container>\n</ax-drop-down>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { showDropDownButton: [{
                 type: Input
             }], rowTemplate: [{