@acorex/components 4.2.57 → 4.2.58

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3584,13 +3584,10 @@ class AXDropdownComponent extends AXBaseDropdownComponent {
3584
3584
  // Todo: chech fitparent
3585
3585
  setTimeout(() => {
3586
3586
  if (this.endButtons && this.endButtons.nativeElement.childNodes.length !== 0) {
3587
- this.content.nativeElement.style.paddingInlineEnd = this.endButtons.nativeElement.clientWidth + 'px';
3587
+ this.content.nativeElement.style.paddingInlineEnd = `${this.endButtons.nativeElement.clientWidth}px`;
3588
3588
  }
3589
3589
  if (this.fitParent == true) {
3590
- this.dropdownWidth = this.dropdownEL.nativeElement.offsetWidth;
3591
- }
3592
- else {
3593
- this.dropdownWidth = 260;
3590
+ this.dropdownWidth = `${this.dropdownEL.nativeElement.offsetWidth}px`;
3594
3591
  }
3595
3592
  }, 5);
3596
3593
  }
@@ -3684,10 +3681,10 @@ class AXDropdownComponent extends AXBaseDropdownComponent {
3684
3681
  focus() { }
3685
3682
  }
3686
3683
  AXDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
3687
- AXDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXDropdownComponent, selector: "ax-drop-down", inputs: { rtl: "rtl", readonly: "readonly", loading: "loading" }, outputs: { dropdownToggle: "dropdownToggle", onButtonClick: "onButtonClick" }, host: { listeners: { "keydown": "onKeydownHandler($event)" }, styleAttribute: "display:contents;" }, viewQueries: [{ propertyName: "baseTemplate", first: true, predicate: ["baseTemplate"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "endButtons", first: true, predicate: ["endButtons"], descendants: true }, { propertyName: "dropdownEL", first: true, predicate: ["el"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item {{size}}\" [class.readonly]=\"readonly\" [attr.id]=\"uid\" [class.disabled]=\"disabled\" #el>\r\n <div class=\"ax items-wrapper\">\r\n <ng-content select=\"[start]\">\r\n </ng-content>\r\n </div>\r\n <div class=\"content\">\r\n <ng-content select=\"ng-container[header]\">\r\n </ng-content>\r\n </div>\r\n <div class=\"ax items-wrapper\">\r\n <ax-button *ngIf=\"showDropDownButton\" [disabled]=\"disabled || readonly\" [loading]=\"loading\"\r\n icon=\"far fa-angle-down icon\" type=\"light blank\" [size]=\"size\" (click)=\"handleArrowClick($event)\"\r\n [tabIndex]=\"-1\">\r\n </ax-button>\r\n <ng-content select=\"[end]\">\r\n </ng-content>\r\n </div>\r\n</div>\r\n\r\n<ng-template #baseTemplate>\r\n <!-- [ngStyle]=\"{'width': dropdownWidth ? dropdownWidth + 'px' : 'unset'}\" -->\r\n <div class=\"ax-dropdown-container-bordered\" [ngStyle]=\"{'width': dropdownWidth ? dropdownWidth + 'px' : 'unset'}\">\r\n <ng-content select=\"ng-container[panel]\">\r\n </ng-content>\r\n </div>\r\n</ng-template>", styles: [".ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-size-border-radius);box-shadow:0 0 3px #0003;margin:.2rem 0}\n"], components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
3684
+ AXDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXDropdownComponent, selector: "ax-drop-down", inputs: { rtl: "rtl", readonly: "readonly", loading: "loading", dropdownWidth: "dropdownWidth" }, outputs: { dropdownToggle: "dropdownToggle", onButtonClick: "onButtonClick" }, host: { listeners: { "keydown": "onKeydownHandler($event)" }, styleAttribute: "display:contents;" }, viewQueries: [{ propertyName: "baseTemplate", first: true, predicate: ["baseTemplate"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "endButtons", first: true, predicate: ["endButtons"], descendants: true }, { propertyName: "dropdownEL", first: true, predicate: ["el"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item {{size}}\" [class.readonly]=\"readonly\" [attr.id]=\"uid\" [class.disabled]=\"disabled\" #el>\r\n <div class=\"ax items-wrapper\">\r\n <ng-content select=\"[start]\">\r\n </ng-content>\r\n </div>\r\n <div class=\"content\">\r\n <ng-content select=\"ng-container[header]\">\r\n </ng-content>\r\n </div>\r\n <div class=\"ax items-wrapper\">\r\n <ax-button *ngIf=\"showDropDownButton\" [disabled]=\"disabled || readonly\" [loading]=\"loading\"\r\n icon=\"far fa-angle-down icon\" type=\"light blank\" [size]=\"size\" (click)=\"handleArrowClick($event)\"\r\n [tabIndex]=\"-1\">\r\n </ax-button>\r\n <ng-content select=\"[end]\">\r\n </ng-content>\r\n </div>\r\n</div>\r\n\r\n<ng-template #baseTemplate>\r\n <!-- [ngStyle]=\"{'width': dropdownWidth ? dropdownWidth + 'px' : 'unset'}\" -->\r\n <div class=\"ax-dropdown-container-bordered\" [ngStyle]=\"{'width': dropdownWidth ? dropdownWidth : 'unset'}\">\r\n <ng-content select=\"ng-container[panel]\">\r\n </ng-content>\r\n </div>\r\n</ng-template>", styles: [".ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-size-border-radius);box-shadow:0 0 3px #0003;margin:.2rem 0}\n"], components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
3688
3685
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDropdownComponent, decorators: [{
3689
3686
  type: Component,
3690
- args: [{ selector: 'ax-drop-down', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'display:contents;' }, template: "<div class=\"ax form-item {{size}}\" [class.readonly]=\"readonly\" [attr.id]=\"uid\" [class.disabled]=\"disabled\" #el>\r\n <div class=\"ax items-wrapper\">\r\n <ng-content select=\"[start]\">\r\n </ng-content>\r\n </div>\r\n <div class=\"content\">\r\n <ng-content select=\"ng-container[header]\">\r\n </ng-content>\r\n </div>\r\n <div class=\"ax items-wrapper\">\r\n <ax-button *ngIf=\"showDropDownButton\" [disabled]=\"disabled || readonly\" [loading]=\"loading\"\r\n icon=\"far fa-angle-down icon\" type=\"light blank\" [size]=\"size\" (click)=\"handleArrowClick($event)\"\r\n [tabIndex]=\"-1\">\r\n </ax-button>\r\n <ng-content select=\"[end]\">\r\n </ng-content>\r\n </div>\r\n</div>\r\n\r\n<ng-template #baseTemplate>\r\n <!-- [ngStyle]=\"{'width': dropdownWidth ? dropdownWidth + 'px' : 'unset'}\" -->\r\n <div class=\"ax-dropdown-container-bordered\" [ngStyle]=\"{'width': dropdownWidth ? dropdownWidth + 'px' : 'unset'}\">\r\n <ng-content select=\"ng-container[panel]\">\r\n </ng-content>\r\n </div>\r\n</ng-template>", styles: [".ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-size-border-radius);box-shadow:0 0 3px #0003;margin:.2rem 0}\n"] }]
3687
+ args: [{ selector: 'ax-drop-down', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'display:contents;' }, template: "<div class=\"ax form-item {{size}}\" [class.readonly]=\"readonly\" [attr.id]=\"uid\" [class.disabled]=\"disabled\" #el>\r\n <div class=\"ax items-wrapper\">\r\n <ng-content select=\"[start]\">\r\n </ng-content>\r\n </div>\r\n <div class=\"content\">\r\n <ng-content select=\"ng-container[header]\">\r\n </ng-content>\r\n </div>\r\n <div class=\"ax items-wrapper\">\r\n <ax-button *ngIf=\"showDropDownButton\" [disabled]=\"disabled || readonly\" [loading]=\"loading\"\r\n icon=\"far fa-angle-down icon\" type=\"light blank\" [size]=\"size\" (click)=\"handleArrowClick($event)\"\r\n [tabIndex]=\"-1\">\r\n </ax-button>\r\n <ng-content select=\"[end]\">\r\n </ng-content>\r\n </div>\r\n</div>\r\n\r\n<ng-template #baseTemplate>\r\n <!-- [ngStyle]=\"{'width': dropdownWidth ? dropdownWidth + 'px' : 'unset'}\" -->\r\n <div class=\"ax-dropdown-container-bordered\" [ngStyle]=\"{'width': dropdownWidth ? dropdownWidth : 'unset'}\">\r\n <ng-content select=\"ng-container[panel]\">\r\n </ng-content>\r\n </div>\r\n</ng-template>", styles: [".ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-size-border-radius);box-shadow:0 0 3px #0003;margin:.2rem 0}\n"] }]
3691
3688
  }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { baseTemplate: [{
3692
3689
  type: ViewChild,
3693
3690
  args: ['baseTemplate']
@@ -3713,6 +3710,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
3713
3710
  }], onKeydownHandler: [{
3714
3711
  type: HostListener,
3715
3712
  args: ['keydown', ['$event']]
3713
+ }], dropdownWidth: [{
3714
+ type: Input
3716
3715
  }] } });
3717
3716
 
3718
3717
  class AXTextBoxComponent extends AXBaseTextComponent {
@@ -3861,9 +3860,7 @@ class AXDatePickerComponent extends AXValidatableComponent {
3861
3860
  if (this.showToday && !this.value) {
3862
3861
  this.selectToday();
3863
3862
  }
3864
- if (this.dropdown.dropdownWidth > 200 || this.dropdown.dropdownWidth < 200) {
3865
- this.dropdown.dropdownWidth = 320;
3866
- }
3863
+ this.dropdown.dropdownWidth = "300px";
3867
3864
  this.cdr.markForCheck();
3868
3865
  });
3869
3866
  }
@@ -4384,10 +4381,10 @@ class AXDatePickerComponent extends AXValidatableComponent {
4384
4381
  }
4385
4382
  }
4386
4383
  AXDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
4387
- AXDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXDatePickerComponent, selector: "ax-date-picker", inputs: { dayStyle: "dayStyle", dayMinMaxResoan: "dayMinMaxResoan", validation: "validation", placeholder: "placeholder", min: "min", max: "max", readonly: "readonly", disabled: "disabled", allowClear: "allowClear", textAlign: "textAlign", showToday: "showToday", selectableHoliday: "selectableHoliday", dateType: "dateType", showTodayButton: "showTodayButton", openByClick: "openByClick", size: "size", type: "type", value: "value" }, outputs: { typeChange: "typeChange", onValueChanged: "onValueChanged", valueChange: "valueChange" }, host: { styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXDatePickerComponent }], queries: [{ propertyName: "_contentValidation", first: true, predicate: AXValidation, descendants: true, static: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down [readonly]=\"readonly\" [fitParent]=\"true\" [size]=\"size\" [showDropDownButton]=\"false\"\r\n icon=\"far fa-calendar-alt\" #dropdown maxHeight=\"unset\">\r\n <ng-container start>\r\n <ng-content select=\"[start]\">\r\n </ng-content>\r\n </ng-container>\r\n <ng-container header>\r\n <ax-text-box #input [textAlign]=\"textAlign\" [(value)]=\"text\" [readonly]=\"false\" [textMask]=\"dateType\"\r\n [disabled]=\"disabled\" [placeholder]=\"placeholder\" [size]=\"size\" (onkey)=\"handleKeyPress($event)\"\r\n (onFocus)=\"handleInputFocus()\" (click)=\"handleClick()\" (onBlur)=\"handleInputBlur()\"\r\n (onValueChanged)=\"textChange($event)\"></ax-text-box>\r\n </ng-container>\r\n <ng-container panel>\r\n <ax-calendar-box *ngIf=\"_renderPicker\" [showTodayButton]=\"showTodayButton\"\r\n [selectableHoliday]=\"selectableHoliday\" [min]=\"min\" [max]=\"max\" [size]=\"size\" (onClick)=\"onClick($event)\"\r\n (onValueChanged)=\"onDateChange($event)\" [type]=\"type\" [(value)]=\"value\" [dayStyle]=\"dayStyle\"\r\n [dayMinMaxResoan]=\"dayMinMaxResoan\">\r\n </ax-calendar-box>\r\n </ng-container>\r\n <ng-container end>\r\n <ax-button end *ngIf=\"allowClear && value\" [disabled]=\"disabled\" icon=\"far fa-times icon\" type=\"blank danger\"\r\n (click)=\"clear()\" [size]=\"size\" [tabIndex]=\"-1\">\r\n </ax-button>\r\n <ax-button end icon=\"far fa-calendar-alt icon\" type=\"light blank\" (click)=\"handleButtonClick()\"\r\n [disabled]=\"disabled\" [size]=\"size\" [tabIndex]=\"-1\"></ax-button>\r\n <ng-content select=\"[end]\">\r\n </ng-content>\r\n </ng-container>\r\n\r\n</ax-drop-down>", styles: [".ax-dropdown-container-bordered .ax-calendar-container{border:none!important}\n"], components: [{ type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading"], outputs: ["dropdownToggle", "onButtonClick"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXCalendarBoxComponent, selector: "ax-calendar-box", inputs: ["size", "type", "locale", "dir", "min", "max", "selectableHoliday", "dayStyle", "dayMinMaxResoan", "showTodayButton", "view", "depth", "value"], outputs: ["onValueChanged", "onClick", "valueChange"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i3.MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
4384
+ AXDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXDatePickerComponent, selector: "ax-date-picker", inputs: { dayStyle: "dayStyle", dayMinMaxResoan: "dayMinMaxResoan", validation: "validation", placeholder: "placeholder", min: "min", max: "max", readonly: "readonly", disabled: "disabled", allowClear: "allowClear", textAlign: "textAlign", showToday: "showToday", selectableHoliday: "selectableHoliday", dateType: "dateType", showTodayButton: "showTodayButton", openByClick: "openByClick", size: "size", type: "type", value: "value" }, outputs: { typeChange: "typeChange", onValueChanged: "onValueChanged", valueChange: "valueChange" }, host: { styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXDatePickerComponent }], queries: [{ propertyName: "_contentValidation", first: true, predicate: AXValidation, descendants: true, static: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down [readonly]=\"readonly\" [fitParent]=\"false\" [size]=\"size\" [showDropDownButton]=\"false\"\r\n icon=\"far fa-calendar-alt\" #dropdown maxHeight=\"unset\">\r\n <ng-container start>\r\n <ng-content select=\"[start]\">\r\n </ng-content>\r\n </ng-container>\r\n <ng-container header>\r\n <ax-text-box #input [textAlign]=\"textAlign\" [(value)]=\"text\" [readonly]=\"false\" [textMask]=\"dateType\"\r\n [disabled]=\"disabled\" [placeholder]=\"placeholder\" [size]=\"size\" (onkey)=\"handleKeyPress($event)\"\r\n (onFocus)=\"handleInputFocus()\" (click)=\"handleClick()\" (onBlur)=\"handleInputBlur()\"\r\n (onValueChanged)=\"textChange($event)\"></ax-text-box>\r\n </ng-container>\r\n <ng-container panel>\r\n <ax-calendar-box *ngIf=\"_renderPicker\" [showTodayButton]=\"showTodayButton\"\r\n [selectableHoliday]=\"selectableHoliday\" [min]=\"min\" [max]=\"max\" [size]=\"size\" (onClick)=\"onClick($event)\"\r\n (onValueChanged)=\"onDateChange($event)\" [type]=\"type\" [(value)]=\"value\" [dayStyle]=\"dayStyle\"\r\n [dayMinMaxResoan]=\"dayMinMaxResoan\">\r\n </ax-calendar-box>\r\n </ng-container>\r\n <ng-container end>\r\n <ax-button end *ngIf=\"allowClear && value\" [disabled]=\"disabled\" icon=\"far fa-times icon\" type=\"blank danger\"\r\n (click)=\"clear()\" [size]=\"size\" [tabIndex]=\"-1\">\r\n </ax-button>\r\n <ax-button end icon=\"far fa-calendar-alt icon\" type=\"light blank\" (click)=\"handleButtonClick()\"\r\n [disabled]=\"disabled\" [size]=\"size\" [tabIndex]=\"-1\"></ax-button>\r\n <ng-content select=\"[end]\">\r\n </ng-content>\r\n </ng-container>\r\n\r\n</ax-drop-down>", styles: [".ax-dropdown-container-bordered .ax-calendar-container{border:none!important}\n"], components: [{ type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading", "dropdownWidth"], outputs: ["dropdownToggle", "onButtonClick"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXCalendarBoxComponent, selector: "ax-calendar-box", inputs: ["size", "type", "locale", "dir", "min", "max", "selectableHoliday", "dayStyle", "dayMinMaxResoan", "showTodayButton", "view", "depth", "value"], outputs: ["onValueChanged", "onClick", "valueChange"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i3.MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
4388
4385
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDatePickerComponent, decorators: [{
4389
4386
  type: Component,
4390
- args: [{ selector: 'ax-date-picker', encapsulation: ViewEncapsulation.None, providers: [{ provide: AXValidatableComponent, useExisting: AXDatePickerComponent }], host: { style: 'width: 100%' }, template: "<ax-drop-down [readonly]=\"readonly\" [fitParent]=\"true\" [size]=\"size\" [showDropDownButton]=\"false\"\r\n icon=\"far fa-calendar-alt\" #dropdown maxHeight=\"unset\">\r\n <ng-container start>\r\n <ng-content select=\"[start]\">\r\n </ng-content>\r\n </ng-container>\r\n <ng-container header>\r\n <ax-text-box #input [textAlign]=\"textAlign\" [(value)]=\"text\" [readonly]=\"false\" [textMask]=\"dateType\"\r\n [disabled]=\"disabled\" [placeholder]=\"placeholder\" [size]=\"size\" (onkey)=\"handleKeyPress($event)\"\r\n (onFocus)=\"handleInputFocus()\" (click)=\"handleClick()\" (onBlur)=\"handleInputBlur()\"\r\n (onValueChanged)=\"textChange($event)\"></ax-text-box>\r\n </ng-container>\r\n <ng-container panel>\r\n <ax-calendar-box *ngIf=\"_renderPicker\" [showTodayButton]=\"showTodayButton\"\r\n [selectableHoliday]=\"selectableHoliday\" [min]=\"min\" [max]=\"max\" [size]=\"size\" (onClick)=\"onClick($event)\"\r\n (onValueChanged)=\"onDateChange($event)\" [type]=\"type\" [(value)]=\"value\" [dayStyle]=\"dayStyle\"\r\n [dayMinMaxResoan]=\"dayMinMaxResoan\">\r\n </ax-calendar-box>\r\n </ng-container>\r\n <ng-container end>\r\n <ax-button end *ngIf=\"allowClear && value\" [disabled]=\"disabled\" icon=\"far fa-times icon\" type=\"blank danger\"\r\n (click)=\"clear()\" [size]=\"size\" [tabIndex]=\"-1\">\r\n </ax-button>\r\n <ax-button end icon=\"far fa-calendar-alt icon\" type=\"light blank\" (click)=\"handleButtonClick()\"\r\n [disabled]=\"disabled\" [size]=\"size\" [tabIndex]=\"-1\"></ax-button>\r\n <ng-content select=\"[end]\">\r\n </ng-content>\r\n </ng-container>\r\n\r\n</ax-drop-down>", styles: [".ax-dropdown-container-bordered .ax-calendar-container{border:none!important}\n"] }]
4387
+ args: [{ selector: 'ax-date-picker', encapsulation: ViewEncapsulation.None, providers: [{ provide: AXValidatableComponent, useExisting: AXDatePickerComponent }], host: { style: 'width: 100%' }, template: "<ax-drop-down [readonly]=\"readonly\" [fitParent]=\"false\" [size]=\"size\" [showDropDownButton]=\"false\"\r\n icon=\"far fa-calendar-alt\" #dropdown maxHeight=\"unset\">\r\n <ng-container start>\r\n <ng-content select=\"[start]\">\r\n </ng-content>\r\n </ng-container>\r\n <ng-container header>\r\n <ax-text-box #input [textAlign]=\"textAlign\" [(value)]=\"text\" [readonly]=\"false\" [textMask]=\"dateType\"\r\n [disabled]=\"disabled\" [placeholder]=\"placeholder\" [size]=\"size\" (onkey)=\"handleKeyPress($event)\"\r\n (onFocus)=\"handleInputFocus()\" (click)=\"handleClick()\" (onBlur)=\"handleInputBlur()\"\r\n (onValueChanged)=\"textChange($event)\"></ax-text-box>\r\n </ng-container>\r\n <ng-container panel>\r\n <ax-calendar-box *ngIf=\"_renderPicker\" [showTodayButton]=\"showTodayButton\"\r\n [selectableHoliday]=\"selectableHoliday\" [min]=\"min\" [max]=\"max\" [size]=\"size\" (onClick)=\"onClick($event)\"\r\n (onValueChanged)=\"onDateChange($event)\" [type]=\"type\" [(value)]=\"value\" [dayStyle]=\"dayStyle\"\r\n [dayMinMaxResoan]=\"dayMinMaxResoan\">\r\n </ax-calendar-box>\r\n </ng-container>\r\n <ng-container end>\r\n <ax-button end *ngIf=\"allowClear && value\" [disabled]=\"disabled\" icon=\"far fa-times icon\" type=\"blank danger\"\r\n (click)=\"clear()\" [size]=\"size\" [tabIndex]=\"-1\">\r\n </ax-button>\r\n <ax-button end icon=\"far fa-calendar-alt icon\" type=\"light blank\" (click)=\"handleButtonClick()\"\r\n [disabled]=\"disabled\" [size]=\"size\" [tabIndex]=\"-1\"></ax-button>\r\n <ng-content select=\"[end]\">\r\n </ng-content>\r\n </ng-container>\r\n\r\n</ax-drop-down>", styles: [".ax-dropdown-container-bordered .ax-calendar-container{border:none!important}\n"] }]
4391
4388
  }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { dropdown: [{
4392
4389
  type: ViewChild,
4393
4390
  args: ['dropdown', { static: true }]
@@ -8516,7 +8513,7 @@ class AXSelectBoxComponent extends AXValidatableComponent {
8516
8513
  }
8517
8514
  }
8518
8515
  AXSelectBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
8519
- AXSelectBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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", 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 [size]=\"size\" [rtl]=\"rtl\" [showDropDownButton]=\"showDropDownButton\" [disabled]=\"disabled\"\r\n [readonly]=\"readonly\" #d (dropdownToggle)=\"dropdownToggleSelecBox($event)\">\r\n <ng-container start>\r\n <ng-content select=\"[start]\">\r\n </ng-content>\r\n </ng-container>\r\n <ng-container header>\r\n <div class=\"ax chips-container\" [horizontalScroll]=\"40\">\r\n <div class=\"chips\" [class.chips-blank]=\"mode === 'single'\" [title]=\"item[textField]\"\r\n *ngFor=\"let item of selectedItems\">\r\n <span class=\"chips-text\">\r\n {{item[textField]}}\r\n </span>\r\n <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\"\r\n *ngIf=\"(readonly!=true || itemRemove ==true)&& disabled!=true && (allowNull==true || (selectedItems.length > 1))\">\r\n <i class=\"far fa-times close\"></i>\r\n </span>\r\n </div>\r\n <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\r\n <ax-text-box #textBoxSelectBox [textAlign]=\"textAlign\"\r\n [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\" [readonly]=\"readonly\"\r\n [disabled]=\"disabled\" (onkey)=\"handleKeyEvent($event)\" [size]=\"size\"\r\n (onFocus)=\"onFocusTextBox($event)\">\r\n </ax-text-box>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container end>\r\n <ng-content select=\"[end]\">\r\n </ng-content>\r\n </ng-container>\r\n\r\n <ng-container panel>\r\n <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em;\">\r\n <ax-search-box #serchBox [(value)]=\"text\" (onkey)=\"handleKeyEventSearch($event)\"\r\n (textChanged)=\"textChanged($event)\" (onButtonClick)=\"textChanged($event)\">\r\n </ax-search-box>\r\n </div>\r\n <div class=\"ax list-container\">\r\n <div #listContainer class=\"list-container-items\" (scroll)=\"scrolled($event)\">\r\n <ng-container *ngIf=\"getItems().length>0; then thenTemplate; else elseTemplate\"></ng-container>\r\n <ng-template #thenTemplate>\r\n <div [class.ax-state-disabled]=\"isItemDisabled(item)\" class=\"list-item\"\r\n *ngFor=\"let item of getItems();let i = index\" [class.focused]=\"i==currentfocusedIndex\"\r\n [class.selected]=\"isItemSelected(item)\" (click)=\"handleItemClick($event,item)\">\r\n <div style=\"display: flex;\">\r\n <ax-check-box *ngIf=\"showCheckBox\" [size]=\"size\" [value]=\"isItemSelected(item)\"\r\n [disabled]=\"(!allowNull && selectedItems.length === 1 && isItemSelected(item)) || isItemDisabled(item)\"\r\n (onClick)=\"handleItemClick($event,item)\">\r\n </ax-check-box>\r\n <ng-container *ngIf=\"rowTemplate; else elseTemplate\">\r\n <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;flex: 1;\"\r\n [title]=\"item[textField]\"\r\n [ngStyle]=\"(showCheckBox) ? {'padding-inline-start': '0.5rem'}:''\">\r\n <ng-container *ngTemplateOutlet=\"rowTemplate; context:{ $implicit: item }\">\r\n </ng-container>\r\n </div>\r\n\r\n </ng-container>\r\n <ng-template #elseTemplate>\r\n <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;flex: 1;\"\r\n [title]=\"item[textField]\"\r\n [ngStyle]=\"(showCheckBox) ? {'padding-inline-start': '0.5rem'}:''\">\r\n {{ item[textField] }}\r\n </div>\r\n </ng-template>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n </ng-template>\r\n <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center;\">\r\n <i class=\"far fa-spinner-third fa-pulse fa-2x\" style=\"color: var(--ax-primary-color);\"></i>\r\n\r\n </div>\r\n <!-- <ax-loading-indicator ></ax-loading-indicator> -->\r\n <ng-template #elseTemplate>\r\n <ng-container *ngIf=\"showLoading == true; then searchTemplate else noDataTemplate\"></ng-container>\r\n <ng-template #searchTemplate>\r\n <div class=\"list-item\">\r\n {{'common.searching' | trans}}\r\n </div>\r\n </ng-template>\r\n <ng-template #noDataTemplate>\r\n <div class=\"list-item\">\r\n {{'common.noDataFound' | trans}}\r\n </div>\r\n </ng-template>\r\n\r\n </ng-template>\r\n\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n\r\n</ax-drop-down>", components: [{ type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading"], outputs: ["dropdownToggle", "onButtonClick"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["placeholder", "text", "delay"], outputs: ["textChanged", "onButtonClick"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], directives: [{ type: i1$2.AXHorizontalScrollDirective, selector: "[horizontalScroll]", inputs: ["horizontalScroll"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "trans": i1$2.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
8516
+ AXSelectBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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", 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 [size]=\"size\" [rtl]=\"rtl\" [showDropDownButton]=\"showDropDownButton\" [disabled]=\"disabled\"\r\n [readonly]=\"readonly\" #d (dropdownToggle)=\"dropdownToggleSelecBox($event)\">\r\n <ng-container start>\r\n <ng-content select=\"[start]\">\r\n </ng-content>\r\n </ng-container>\r\n <ng-container header>\r\n <div class=\"ax chips-container\" [horizontalScroll]=\"40\">\r\n <div class=\"chips\" [class.chips-blank]=\"mode === 'single'\" [title]=\"item[textField]\"\r\n *ngFor=\"let item of selectedItems\">\r\n <span class=\"chips-text\">\r\n {{item[textField]}}\r\n </span>\r\n <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\"\r\n *ngIf=\"(readonly!=true || itemRemove ==true)&& disabled!=true && (allowNull==true || (selectedItems.length > 1))\">\r\n <i class=\"far fa-times close\"></i>\r\n </span>\r\n </div>\r\n <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\r\n <ax-text-box #textBoxSelectBox [textAlign]=\"textAlign\"\r\n [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\" [readonly]=\"readonly\"\r\n [disabled]=\"disabled\" (onkey)=\"handleKeyEvent($event)\" [size]=\"size\"\r\n (onFocus)=\"onFocusTextBox($event)\">\r\n </ax-text-box>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container end>\r\n <ng-content select=\"[end]\">\r\n </ng-content>\r\n </ng-container>\r\n\r\n <ng-container panel>\r\n <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em;\">\r\n <ax-search-box #serchBox [(value)]=\"text\" (onkey)=\"handleKeyEventSearch($event)\"\r\n (textChanged)=\"textChanged($event)\" (onButtonClick)=\"textChanged($event)\">\r\n </ax-search-box>\r\n </div>\r\n <div class=\"ax list-container\">\r\n <div #listContainer class=\"list-container-items\" (scroll)=\"scrolled($event)\">\r\n <ng-container *ngIf=\"getItems().length>0; then thenTemplate; else elseTemplate\"></ng-container>\r\n <ng-template #thenTemplate>\r\n <div [class.ax-state-disabled]=\"isItemDisabled(item)\" class=\"list-item\"\r\n *ngFor=\"let item of getItems();let i = index\" [class.focused]=\"i==currentfocusedIndex\"\r\n [class.selected]=\"isItemSelected(item)\" (click)=\"handleItemClick($event,item)\">\r\n <div style=\"display: flex;\">\r\n <ax-check-box *ngIf=\"showCheckBox\" [size]=\"size\" [value]=\"isItemSelected(item)\"\r\n [disabled]=\"(!allowNull && selectedItems.length === 1 && isItemSelected(item)) || isItemDisabled(item)\"\r\n (onClick)=\"handleItemClick($event,item)\">\r\n </ax-check-box>\r\n <ng-container *ngIf=\"rowTemplate; else elseTemplate\">\r\n <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;flex: 1;\"\r\n [title]=\"item[textField]\"\r\n [ngStyle]=\"(showCheckBox) ? {'padding-inline-start': '0.5rem'}:''\">\r\n <ng-container *ngTemplateOutlet=\"rowTemplate; context:{ $implicit: item }\">\r\n </ng-container>\r\n </div>\r\n\r\n </ng-container>\r\n <ng-template #elseTemplate>\r\n <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;flex: 1;\"\r\n [title]=\"item[textField]\"\r\n [ngStyle]=\"(showCheckBox) ? {'padding-inline-start': '0.5rem'}:''\">\r\n {{ item[textField] }}\r\n </div>\r\n </ng-template>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n </ng-template>\r\n <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center;\">\r\n <i class=\"far fa-spinner-third fa-pulse fa-2x\" style=\"color: var(--ax-primary-color);\"></i>\r\n\r\n </div>\r\n <!-- <ax-loading-indicator ></ax-loading-indicator> -->\r\n <ng-template #elseTemplate>\r\n <ng-container *ngIf=\"showLoading == true; then searchTemplate else noDataTemplate\"></ng-container>\r\n <ng-template #searchTemplate>\r\n <div class=\"list-item\">\r\n {{'common.searching' | trans}}\r\n </div>\r\n </ng-template>\r\n <ng-template #noDataTemplate>\r\n <div class=\"list-item\">\r\n {{'common.noDataFound' | trans}}\r\n </div>\r\n </ng-template>\r\n\r\n </ng-template>\r\n\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n\r\n</ax-drop-down>", components: [{ type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading", "dropdownWidth"], outputs: ["dropdownToggle", "onButtonClick"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["placeholder", "text", "delay"], outputs: ["textChanged", "onButtonClick"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], directives: [{ type: i1$2.AXHorizontalScrollDirective, selector: "[horizontalScroll]", inputs: ["horizontalScroll"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "trans": i1$2.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
8520
8517
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBoxComponent, decorators: [{
8521
8518
  type: Component,
8522
8519
  args: [{ selector: 'ax-select-box', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [{ provide: AXValidatableComponent, useExisting: AXSelectBoxComponent }], template: "<ax-drop-down [size]=\"size\" [rtl]=\"rtl\" [showDropDownButton]=\"showDropDownButton\" [disabled]=\"disabled\"\r\n [readonly]=\"readonly\" #d (dropdownToggle)=\"dropdownToggleSelecBox($event)\">\r\n <ng-container start>\r\n <ng-content select=\"[start]\">\r\n </ng-content>\r\n </ng-container>\r\n <ng-container header>\r\n <div class=\"ax chips-container\" [horizontalScroll]=\"40\">\r\n <div class=\"chips\" [class.chips-blank]=\"mode === 'single'\" [title]=\"item[textField]\"\r\n *ngFor=\"let item of selectedItems\">\r\n <span class=\"chips-text\">\r\n {{item[textField]}}\r\n </span>\r\n <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\"\r\n *ngIf=\"(readonly!=true || itemRemove ==true)&& disabled!=true && (allowNull==true || (selectedItems.length > 1))\">\r\n <i class=\"far fa-times close\"></i>\r\n </span>\r\n </div>\r\n <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\r\n <ax-text-box #textBoxSelectBox [textAlign]=\"textAlign\"\r\n [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\" [readonly]=\"readonly\"\r\n [disabled]=\"disabled\" (onkey)=\"handleKeyEvent($event)\" [size]=\"size\"\r\n (onFocus)=\"onFocusTextBox($event)\">\r\n </ax-text-box>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container end>\r\n <ng-content select=\"[end]\">\r\n </ng-content>\r\n </ng-container>\r\n\r\n <ng-container panel>\r\n <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em;\">\r\n <ax-search-box #serchBox [(value)]=\"text\" (onkey)=\"handleKeyEventSearch($event)\"\r\n (textChanged)=\"textChanged($event)\" (onButtonClick)=\"textChanged($event)\">\r\n </ax-search-box>\r\n </div>\r\n <div class=\"ax list-container\">\r\n <div #listContainer class=\"list-container-items\" (scroll)=\"scrolled($event)\">\r\n <ng-container *ngIf=\"getItems().length>0; then thenTemplate; else elseTemplate\"></ng-container>\r\n <ng-template #thenTemplate>\r\n <div [class.ax-state-disabled]=\"isItemDisabled(item)\" class=\"list-item\"\r\n *ngFor=\"let item of getItems();let i = index\" [class.focused]=\"i==currentfocusedIndex\"\r\n [class.selected]=\"isItemSelected(item)\" (click)=\"handleItemClick($event,item)\">\r\n <div style=\"display: flex;\">\r\n <ax-check-box *ngIf=\"showCheckBox\" [size]=\"size\" [value]=\"isItemSelected(item)\"\r\n [disabled]=\"(!allowNull && selectedItems.length === 1 && isItemSelected(item)) || isItemDisabled(item)\"\r\n (onClick)=\"handleItemClick($event,item)\">\r\n </ax-check-box>\r\n <ng-container *ngIf=\"rowTemplate; else elseTemplate\">\r\n <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;flex: 1;\"\r\n [title]=\"item[textField]\"\r\n [ngStyle]=\"(showCheckBox) ? {'padding-inline-start': '0.5rem'}:''\">\r\n <ng-container *ngTemplateOutlet=\"rowTemplate; context:{ $implicit: item }\">\r\n </ng-container>\r\n </div>\r\n\r\n </ng-container>\r\n <ng-template #elseTemplate>\r\n <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;flex: 1;\"\r\n [title]=\"item[textField]\"\r\n [ngStyle]=\"(showCheckBox) ? {'padding-inline-start': '0.5rem'}:''\">\r\n {{ item[textField] }}\r\n </div>\r\n </ng-template>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n </ng-template>\r\n <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center;\">\r\n <i class=\"far fa-spinner-third fa-pulse fa-2x\" style=\"color: var(--ax-primary-color);\"></i>\r\n\r\n </div>\r\n <!-- <ax-loading-indicator ></ax-loading-indicator> -->\r\n <ng-template #elseTemplate>\r\n <ng-container *ngIf=\"showLoading == true; then searchTemplate else noDataTemplate\"></ng-container>\r\n <ng-template #searchTemplate>\r\n <div class=\"list-item\">\r\n {{'common.searching' | trans}}\r\n </div>\r\n </ng-template>\r\n <ng-template #noDataTemplate>\r\n <div class=\"list-item\">\r\n {{'common.noDataFound' | trans}}\r\n </div>\r\n </ng-template>\r\n\r\n </ng-template>\r\n\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n\r\n</ax-drop-down>" }]
@@ -9985,7 +9982,7 @@ class AXSelectBox2Component extends AXValidatableComponent {
9985
9982
  }
9986
9983
  }
9987
9984
  AXSelectBox2Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBox2Component, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
9988
- AXSelectBox2Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSelectBox2Component, selector: "ax-select-box2", inputs: { showDropDownButton: "showDropDownButton", readonly: "readonly", rtl: "rtl", disabled: "disabled", placeholder: "placeholder", size: "size", allowNull: "allowNull", textAlign: "textAlign", bufferSize: "bufferSize", remoteOperation: "remoteOperation", allowSearch: "allowSearch", textField: "textField", valueField: "valueField", selectionMode: "selectionMode", selectionDataMode: "selectionDataMode", dataSource: "dataSource", validation: "validation", value: "value", items: "items" }, outputs: { itemsChange: "itemsChange", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { listeners: { "document:keydown": "handleKeyDown($event)" }, styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXSelectBox2Component }], queries: [{ 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: "searchBox", first: true, predicate: ["searchBox"], 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 [size]=\"size\" [rtl]=\"rtl\" [showDropDownButton]=\"showDropDownButton\" [disabled]=\"disabled\"\r\n [readonly]=\"readonly\" #d (dropdownToggle)=\"dropdownToggle($event)\" [loading]=\"showLoading\">\r\n <ng-container start>\r\n <ng-content select=\"[start]\">\r\n </ng-content>\r\n </ng-container>\r\n <ng-container header>\r\n <div class=\"ax chips-container\" [horizontalScroll]=\"40\">\r\n <div *ngFor=\"let item of selectedItems\" class=\"chips\" [class.chips-blank]=\"selectionMode === 'single'\"\r\n [title]=\"item[textField]\">\r\n <span class=\"chips-text\">\r\n {{item[textField]}}\r\n </span>\r\n <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\"\r\n *ngIf=\"(readonly!=true) && disabled!=true && (allowNull==true || (selectedItems.length > 1))\">\r\n <i class=\"far fa-times close\"></i>\r\n </span>\r\n </div>\r\n <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\r\n <ax-text-box #textBoxSelectBox [textAlign]=\"textAlign\"\r\n [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\" [readonly]=\"readonly\"\r\n [disabled]=\"disabled\" [size]=\"size\">\r\n </ax-text-box>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container end>\r\n <ng-content select=\"[end]\">\r\n </ng-content>\r\n </ng-container>\r\n <ng-container panel>\r\n <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em;\">\r\n <ax-search-box #searchBox [(value)]=\"text\" size=\"sm\"\r\n (textChanged)=\"textChanged($event)\" (onButtonClick)=\"textChanged($event)\">\r\n </ax-search-box>\r\n </div>\r\n <div class=\"ax list-container\">\r\n <div #listContainer style=\"max-height: 300px;overflow-y: auto;width: 100%;\" (scroll)=\"scrolled($event)\">\r\n <ng-container *ngIf=\"getItems().length>0; then thenTemplate; else elseTemplate\"></ng-container>\r\n <ng-template #thenTemplate>\r\n <div class=\"list-item\" *ngFor=\"let item of getItems();let i = index\"\r\n [class.focused]=\"i==currentfocusedIndex\" (click)=\"handleItemClick($event,item)\"\r\n [class.selected]=\"isItemSelected(item)\">\r\n <div>\r\n <div>\r\n <ax-check-box *ngIf=\"selectionMode !== 'single'\" [size]=\"size\" [value]=\"isItemSelected(item)\"\r\n [disabled]=\"!allowNull && selectedItems.length === 1 && isItemSelected(item)\"\r\n (onClick)=\"handleItemClick($event,item)\">\r\n </ax-check-box>\r\n </div>\r\n <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\r\n [title]=\"item[textField]\"\r\n [ngStyle]=\"(selectionMode !== 'single') ? {'padding-inline-start': '2em'}:''\">\r\n {{ item[textField] }}\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center;\">\r\n <i class=\"far fa-spinner-third fa-pulse fa-2x\" style=\"color: var(--ax-primary-color);\"></i>\r\n </div>\r\n <ng-template #elseTemplate>\r\n <ng-container *ngIf=\"showLoading == true; then searchTemplate else noDataTemplate\"></ng-container>\r\n <ng-template #searchTemplate>\r\n <div class=\"list-item\">\r\n {{'common.searching' | trans}}\r\n </div>\r\n </ng-template>\r\n <ng-template #noDataTemplate>\r\n <div class=\"list-item\">\r\n {{'common.noDataFound' | trans}}\r\n </div>\r\n </ng-template>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</ax-drop-down>", components: [{ type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading"], outputs: ["dropdownToggle", "onButtonClick"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["placeholder", "text", "delay"], outputs: ["textChanged", "onButtonClick"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], directives: [{ type: i1$2.AXHorizontalScrollDirective, selector: "[horizontalScroll]", inputs: ["horizontalScroll"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "trans": i1$2.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
9985
+ AXSelectBox2Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSelectBox2Component, selector: "ax-select-box2", inputs: { showDropDownButton: "showDropDownButton", readonly: "readonly", rtl: "rtl", disabled: "disabled", placeholder: "placeholder", size: "size", allowNull: "allowNull", textAlign: "textAlign", bufferSize: "bufferSize", remoteOperation: "remoteOperation", allowSearch: "allowSearch", textField: "textField", valueField: "valueField", selectionMode: "selectionMode", selectionDataMode: "selectionDataMode", dataSource: "dataSource", validation: "validation", value: "value", items: "items" }, outputs: { itemsChange: "itemsChange", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { listeners: { "document:keydown": "handleKeyDown($event)" }, styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXSelectBox2Component }], queries: [{ 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: "searchBox", first: true, predicate: ["searchBox"], 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 [size]=\"size\" [rtl]=\"rtl\" [showDropDownButton]=\"showDropDownButton\" [disabled]=\"disabled\"\r\n [readonly]=\"readonly\" #d (dropdownToggle)=\"dropdownToggle($event)\" [loading]=\"showLoading\">\r\n <ng-container start>\r\n <ng-content select=\"[start]\">\r\n </ng-content>\r\n </ng-container>\r\n <ng-container header>\r\n <div class=\"ax chips-container\" [horizontalScroll]=\"40\">\r\n <div *ngFor=\"let item of selectedItems\" class=\"chips\" [class.chips-blank]=\"selectionMode === 'single'\"\r\n [title]=\"item[textField]\">\r\n <span class=\"chips-text\">\r\n {{item[textField]}}\r\n </span>\r\n <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\"\r\n *ngIf=\"(readonly!=true) && disabled!=true && (allowNull==true || (selectedItems.length > 1))\">\r\n <i class=\"far fa-times close\"></i>\r\n </span>\r\n </div>\r\n <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\r\n <ax-text-box #textBoxSelectBox [textAlign]=\"textAlign\"\r\n [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\" [readonly]=\"readonly\"\r\n [disabled]=\"disabled\" [size]=\"size\">\r\n </ax-text-box>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container end>\r\n <ng-content select=\"[end]\">\r\n </ng-content>\r\n </ng-container>\r\n <ng-container panel>\r\n <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em;\">\r\n <ax-search-box #searchBox [(value)]=\"text\" size=\"sm\"\r\n (textChanged)=\"textChanged($event)\" (onButtonClick)=\"textChanged($event)\">\r\n </ax-search-box>\r\n </div>\r\n <div class=\"ax list-container\">\r\n <div #listContainer style=\"max-height: 300px;overflow-y: auto;width: 100%;\" (scroll)=\"scrolled($event)\">\r\n <ng-container *ngIf=\"getItems().length>0; then thenTemplate; else elseTemplate\"></ng-container>\r\n <ng-template #thenTemplate>\r\n <div class=\"list-item\" *ngFor=\"let item of getItems();let i = index\"\r\n [class.focused]=\"i==currentfocusedIndex\" (click)=\"handleItemClick($event,item)\"\r\n [class.selected]=\"isItemSelected(item)\">\r\n <div>\r\n <div>\r\n <ax-check-box *ngIf=\"selectionMode !== 'single'\" [size]=\"size\" [value]=\"isItemSelected(item)\"\r\n [disabled]=\"!allowNull && selectedItems.length === 1 && isItemSelected(item)\"\r\n (onClick)=\"handleItemClick($event,item)\">\r\n </ax-check-box>\r\n </div>\r\n <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\r\n [title]=\"item[textField]\"\r\n [ngStyle]=\"(selectionMode !== 'single') ? {'padding-inline-start': '2em'}:''\">\r\n {{ item[textField] }}\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center;\">\r\n <i class=\"far fa-spinner-third fa-pulse fa-2x\" style=\"color: var(--ax-primary-color);\"></i>\r\n </div>\r\n <ng-template #elseTemplate>\r\n <ng-container *ngIf=\"showLoading == true; then searchTemplate else noDataTemplate\"></ng-container>\r\n <ng-template #searchTemplate>\r\n <div class=\"list-item\">\r\n {{'common.searching' | trans}}\r\n </div>\r\n </ng-template>\r\n <ng-template #noDataTemplate>\r\n <div class=\"list-item\">\r\n {{'common.noDataFound' | trans}}\r\n </div>\r\n </ng-template>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</ax-drop-down>", components: [{ type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading", "dropdownWidth"], outputs: ["dropdownToggle", "onButtonClick"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["placeholder", "text", "delay"], outputs: ["textChanged", "onButtonClick"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], directives: [{ type: i1$2.AXHorizontalScrollDirective, selector: "[horizontalScroll]", inputs: ["horizontalScroll"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "trans": i1$2.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
9989
9986
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBox2Component, decorators: [{
9990
9987
  type: Component,
9991
9988
  args: [{ selector: 'ax-select-box2', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [{ provide: AXValidatableComponent, useExisting: AXSelectBox2Component }], template: "<ax-drop-down [size]=\"size\" [rtl]=\"rtl\" [showDropDownButton]=\"showDropDownButton\" [disabled]=\"disabled\"\r\n [readonly]=\"readonly\" #d (dropdownToggle)=\"dropdownToggle($event)\" [loading]=\"showLoading\">\r\n <ng-container start>\r\n <ng-content select=\"[start]\">\r\n </ng-content>\r\n </ng-container>\r\n <ng-container header>\r\n <div class=\"ax chips-container\" [horizontalScroll]=\"40\">\r\n <div *ngFor=\"let item of selectedItems\" class=\"chips\" [class.chips-blank]=\"selectionMode === 'single'\"\r\n [title]=\"item[textField]\">\r\n <span class=\"chips-text\">\r\n {{item[textField]}}\r\n </span>\r\n <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\"\r\n *ngIf=\"(readonly!=true) && disabled!=true && (allowNull==true || (selectedItems.length > 1))\">\r\n <i class=\"far fa-times close\"></i>\r\n </span>\r\n </div>\r\n <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\r\n <ax-text-box #textBoxSelectBox [textAlign]=\"textAlign\"\r\n [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\" [readonly]=\"readonly\"\r\n [disabled]=\"disabled\" [size]=\"size\">\r\n </ax-text-box>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container end>\r\n <ng-content select=\"[end]\">\r\n </ng-content>\r\n </ng-container>\r\n <ng-container panel>\r\n <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em;\">\r\n <ax-search-box #searchBox [(value)]=\"text\" size=\"sm\"\r\n (textChanged)=\"textChanged($event)\" (onButtonClick)=\"textChanged($event)\">\r\n </ax-search-box>\r\n </div>\r\n <div class=\"ax list-container\">\r\n <div #listContainer style=\"max-height: 300px;overflow-y: auto;width: 100%;\" (scroll)=\"scrolled($event)\">\r\n <ng-container *ngIf=\"getItems().length>0; then thenTemplate; else elseTemplate\"></ng-container>\r\n <ng-template #thenTemplate>\r\n <div class=\"list-item\" *ngFor=\"let item of getItems();let i = index\"\r\n [class.focused]=\"i==currentfocusedIndex\" (click)=\"handleItemClick($event,item)\"\r\n [class.selected]=\"isItemSelected(item)\">\r\n <div>\r\n <div>\r\n <ax-check-box *ngIf=\"selectionMode !== 'single'\" [size]=\"size\" [value]=\"isItemSelected(item)\"\r\n [disabled]=\"!allowNull && selectedItems.length === 1 && isItemSelected(item)\"\r\n (onClick)=\"handleItemClick($event,item)\">\r\n </ax-check-box>\r\n </div>\r\n <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\r\n [title]=\"item[textField]\"\r\n [ngStyle]=\"(selectionMode !== 'single') ? {'padding-inline-start': '2em'}:''\">\r\n {{ item[textField] }}\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center;\">\r\n <i class=\"far fa-spinner-third fa-pulse fa-2x\" style=\"color: var(--ax-primary-color);\"></i>\r\n </div>\r\n <ng-template #elseTemplate>\r\n <ng-container *ngIf=\"showLoading == true; then searchTemplate else noDataTemplate\"></ng-container>\r\n <ng-template #searchTemplate>\r\n <div class=\"list-item\">\r\n {{'common.searching' | trans}}\r\n </div>\r\n </ng-template>\r\n <ng-template #noDataTemplate>\r\n <div class=\"list-item\">\r\n {{'common.noDataFound' | trans}}\r\n </div>\r\n </ng-template>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</ax-drop-down>" }]
@@ -10403,6 +10400,14 @@ class AXSearchBarComponent {
10403
10400
  }
10404
10401
  }
10405
10402
  ngOnInit() { }
10403
+ ngAfterViewInit() {
10404
+ setTimeout(() => {
10405
+ debugger;
10406
+ if (!this.dropdown.dropdownWidth) {
10407
+ this.dropdown.dropdownWidth = "600px";
10408
+ }
10409
+ });
10410
+ }
10406
10411
  _handleTextValue(dataItem) {
10407
10412
  let text = '';
10408
10413
  if (Array.isArray(dataItem.value)) {
@@ -10491,10 +10496,10 @@ class AXSearchBarComponent {
10491
10496
  }
10492
10497
  }
10493
10498
  AXSearchBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSearchBarComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
10494
- AXSearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSearchBarComponent, selector: "ax-search-bar", inputs: { size: "size", disabled: "disabled", fitParent: "fitParent", items: "items", rtl: "rtl" }, outputs: { onValueChange: "onValueChange", onSearchValue: "onSearchValue" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }, { propertyName: "_editors", predicate: AXPropertyEditorRendererDirective, descendants: true }], ngImport: i0, template: "<div>\r\n <ax-drop-down [fitParent]=\"fitParent\" [size]=\"size\" [showDropDownButton]=\"false\" icon=\"far fa-sliders-h\" #dropdown\r\n maxHeight=\"unset\">\r\n <ng-container start>\r\n <ng-content select=\"[start]\">\r\n </ng-content>\r\n </ng-container>\r\n <ng-container header>\r\n <div class=\"ax chips-container\">\r\n <div class=\"chips\" *ngFor=\"let item of _filterItems\">\r\n <span class=\"chips-text\" style=\"direction:rtl;\">\r\n <b>{{_handleShowTitleSelected(item)}}</b> {{_handleShowValueSelected(item)}}\r\n </span>\r\n <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\">\r\n </span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container panel>\r\n <div class=\"panel-box\">\r\n <ax-validation-form #form>\r\n <div *ngFor=\"let item of _items\" class=\"row\">\r\n <div *ngFor=\"let prop of item.items\" class=\"{{renderCol(prop.property.col)}}\">\r\n <!-- <ax-form-group> -->\r\n <div *ngIf=\"prop.property.visible != false\">\r\n <ax-label>{{prop.property.title}}</ax-label>\r\n <ng-container ax-property-editor-renderer [validationForm]=\"form\" [property]=\"prop\"\r\n [context]=\"_context\" (onValueChange)=\"handleValueChange($event)\"></ng-container>\r\n </div>\r\n <!-- </ax-form-group> -->\r\n </div>\r\n </div>\r\n <div class=\"footer-button\">\r\n <ax-button (click)=\"search()\">{{'common.search' | trans}}</ax-button>\r\n <ax-button type=\"blank danger\" (click)=\"clear()\">{{'dataGrid.clearFilter' | trans}}</ax-button>\r\n </div>\r\n </ax-validation-form>\r\n </div>\r\n </ng-container>\r\n <ng-container end>\r\n <ax-button end icon=\"far fa-sliders-h icon\" type=\"light blank\" [disabled]=\"disabled\" [size]=\"size\"\r\n [tabIndex]=\"-1\" (click)=\"handleButtonClick()\">{{'common.search' | trans}}</ax-button>\r\n </ng-container>\r\n\r\n</ax-drop-down>\r\n</div>", styles: [".ax.chips-container{height:100%}.panel-box{padding:1rem}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem}\n"], components: [{ type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading"], outputs: ["dropdownToggle", "onButtonClick"] }, { type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { type: AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: AXPropertyEditorRendererDirective, selector: "[ax-property-editor-renderer]", inputs: ["property", "validationForm", "context", "host", "groupId"], outputs: ["onValueChange"] }], pipes: { "trans": i1$2.AXTranslatorPipe } });
10499
+ AXSearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSearchBarComponent, selector: "ax-search-bar", inputs: { size: "size", disabled: "disabled", fitParent: "fitParent", dropdownWidth: "dropdownWidth", items: "items", rtl: "rtl" }, outputs: { onValueChange: "onValueChange", onSearchValue: "onSearchValue" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }, { propertyName: "_editors", predicate: AXPropertyEditorRendererDirective, descendants: true }], ngImport: i0, template: "<div>\r\n <ax-drop-down [fitParent]=\"fitParent\" [dropdownWidth]=\"dropdownWidth\" [size]=\"size\" [showDropDownButton]=\"false\" icon=\"far fa-sliders-h\" #dropdown\r\n maxHeight=\"unset\">\r\n <ng-container start>\r\n <ng-content select=\"[start]\">\r\n </ng-content>\r\n </ng-container>\r\n <ng-container header>\r\n <div class=\"ax chips-container\">\r\n <div class=\"chips\" *ngFor=\"let item of _filterItems\">\r\n <span class=\"chips-text\" style=\"direction:rtl;\">\r\n <b>{{_handleShowTitleSelected(item)}}</b> {{_handleShowValueSelected(item)}}\r\n </span>\r\n <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\">\r\n </span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container panel>\r\n <div class=\"panel-box\">\r\n <ax-validation-form #form>\r\n <div *ngFor=\"let item of _items\" class=\"row\">\r\n <div *ngFor=\"let prop of item.items\" class=\"{{renderCol(prop.property.col)}}\">\r\n <!-- <ax-form-group> -->\r\n <div *ngIf=\"prop.property.visible != false\">\r\n <ax-label>{{prop.property.title}}</ax-label>\r\n <ng-container ax-property-editor-renderer [validationForm]=\"form\" [property]=\"prop\"\r\n [context]=\"_context\" (onValueChange)=\"handleValueChange($event)\"></ng-container>\r\n </div>\r\n <!-- </ax-form-group> -->\r\n </div>\r\n </div>\r\n <div class=\"footer-button\">\r\n <ax-button (click)=\"search()\">{{'common.search' | trans}}</ax-button>\r\n <ax-button type=\"blank danger\" (click)=\"clear()\">{{'dataGrid.clearFilter' | trans}}</ax-button>\r\n </div>\r\n </ax-validation-form>\r\n </div>\r\n </ng-container>\r\n <ng-container end>\r\n <ax-button end icon=\"far fa-sliders-h icon\" type=\"light blank\" [disabled]=\"disabled\" [size]=\"size\"\r\n [tabIndex]=\"-1\" (click)=\"handleButtonClick()\">{{'common.search' | trans}}</ax-button>\r\n </ng-container>\r\n\r\n</ax-drop-down>\r\n</div>", styles: [".ax.chips-container{height:100%}.panel-box{padding:1rem}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem}\n"], components: [{ type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading", "dropdownWidth"], outputs: ["dropdownToggle", "onButtonClick"] }, { type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { type: AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: AXPropertyEditorRendererDirective, selector: "[ax-property-editor-renderer]", inputs: ["property", "validationForm", "context", "host", "groupId"], outputs: ["onValueChange"] }], pipes: { "trans": i1$2.AXTranslatorPipe } });
10495
10500
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSearchBarComponent, decorators: [{
10496
10501
  type: Component,
10497
- args: [{ selector: 'ax-search-bar', template: "<div>\r\n <ax-drop-down [fitParent]=\"fitParent\" [size]=\"size\" [showDropDownButton]=\"false\" icon=\"far fa-sliders-h\" #dropdown\r\n maxHeight=\"unset\">\r\n <ng-container start>\r\n <ng-content select=\"[start]\">\r\n </ng-content>\r\n </ng-container>\r\n <ng-container header>\r\n <div class=\"ax chips-container\">\r\n <div class=\"chips\" *ngFor=\"let item of _filterItems\">\r\n <span class=\"chips-text\" style=\"direction:rtl;\">\r\n <b>{{_handleShowTitleSelected(item)}}</b> {{_handleShowValueSelected(item)}}\r\n </span>\r\n <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\">\r\n </span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container panel>\r\n <div class=\"panel-box\">\r\n <ax-validation-form #form>\r\n <div *ngFor=\"let item of _items\" class=\"row\">\r\n <div *ngFor=\"let prop of item.items\" class=\"{{renderCol(prop.property.col)}}\">\r\n <!-- <ax-form-group> -->\r\n <div *ngIf=\"prop.property.visible != false\">\r\n <ax-label>{{prop.property.title}}</ax-label>\r\n <ng-container ax-property-editor-renderer [validationForm]=\"form\" [property]=\"prop\"\r\n [context]=\"_context\" (onValueChange)=\"handleValueChange($event)\"></ng-container>\r\n </div>\r\n <!-- </ax-form-group> -->\r\n </div>\r\n </div>\r\n <div class=\"footer-button\">\r\n <ax-button (click)=\"search()\">{{'common.search' | trans}}</ax-button>\r\n <ax-button type=\"blank danger\" (click)=\"clear()\">{{'dataGrid.clearFilter' | trans}}</ax-button>\r\n </div>\r\n </ax-validation-form>\r\n </div>\r\n </ng-container>\r\n <ng-container end>\r\n <ax-button end icon=\"far fa-sliders-h icon\" type=\"light blank\" [disabled]=\"disabled\" [size]=\"size\"\r\n [tabIndex]=\"-1\" (click)=\"handleButtonClick()\">{{'common.search' | trans}}</ax-button>\r\n </ng-container>\r\n\r\n</ax-drop-down>\r\n</div>", styles: [".ax.chips-container{height:100%}.panel-box{padding:1rem}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem}\n"] }]
10502
+ args: [{ selector: 'ax-search-bar', template: "<div>\r\n <ax-drop-down [fitParent]=\"fitParent\" [dropdownWidth]=\"dropdownWidth\" [size]=\"size\" [showDropDownButton]=\"false\" icon=\"far fa-sliders-h\" #dropdown\r\n maxHeight=\"unset\">\r\n <ng-container start>\r\n <ng-content select=\"[start]\">\r\n </ng-content>\r\n </ng-container>\r\n <ng-container header>\r\n <div class=\"ax chips-container\">\r\n <div class=\"chips\" *ngFor=\"let item of _filterItems\">\r\n <span class=\"chips-text\" style=\"direction:rtl;\">\r\n <b>{{_handleShowTitleSelected(item)}}</b> {{_handleShowValueSelected(item)}}\r\n </span>\r\n <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\">\r\n </span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container panel>\r\n <div class=\"panel-box\">\r\n <ax-validation-form #form>\r\n <div *ngFor=\"let item of _items\" class=\"row\">\r\n <div *ngFor=\"let prop of item.items\" class=\"{{renderCol(prop.property.col)}}\">\r\n <!-- <ax-form-group> -->\r\n <div *ngIf=\"prop.property.visible != false\">\r\n <ax-label>{{prop.property.title}}</ax-label>\r\n <ng-container ax-property-editor-renderer [validationForm]=\"form\" [property]=\"prop\"\r\n [context]=\"_context\" (onValueChange)=\"handleValueChange($event)\"></ng-container>\r\n </div>\r\n <!-- </ax-form-group> -->\r\n </div>\r\n </div>\r\n <div class=\"footer-button\">\r\n <ax-button (click)=\"search()\">{{'common.search' | trans}}</ax-button>\r\n <ax-button type=\"blank danger\" (click)=\"clear()\">{{'dataGrid.clearFilter' | trans}}</ax-button>\r\n </div>\r\n </ax-validation-form>\r\n </div>\r\n </ng-container>\r\n <ng-container end>\r\n <ax-button end icon=\"far fa-sliders-h icon\" type=\"light blank\" [disabled]=\"disabled\" [size]=\"size\"\r\n [tabIndex]=\"-1\" (click)=\"handleButtonClick()\">{{'common.search' | trans}}</ax-button>\r\n </ng-container>\r\n\r\n</ax-drop-down>\r\n</div>", styles: [".ax.chips-container{height:100%}.panel-box{padding:1rem}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem}\n"] }]
10498
10503
  }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { dropdown: [{
10499
10504
  type: ViewChild,
10500
10505
  args: ['dropdown', { static: true }]
@@ -10510,6 +10515,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
10510
10515
  type: Input
10511
10516
  }], fitParent: [{
10512
10517
  type: Input
10518
+ }], dropdownWidth: [{
10519
+ type: Input
10513
10520
  }], items: [{
10514
10521
  type: Input
10515
10522
  }], rtl: [{
@@ -11146,7 +11153,7 @@ class AXColorPickerComponent extends AXColorBoxComponent {
11146
11153
  AXColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXColorPickerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
11147
11154
  AXColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXColorPickerComponent, selector: "ax-color-picker", inputs: { placeholder: "placeholder", showClear: "showClear", label: "label", readonly: "readonly", disabled: "disabled", size: "size", rtl: "rtl", validation: "validation" }, host: { styleAttribute: "width: 100%" }, providers: [
11148
11155
  { provide: AXValidatableComponent, useExisting: AXColorPickerComponent },
11149
- ], queries: [{ propertyName: "_contentValidation", first: true, predicate: AXValidation, descendants: true, static: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down #dropdown fitParent=\"false\" [size]=\"size\" [disabled]=\"disabled\" [rtl]=\"rtl\">\r\n <ng-container start>\r\n <ng-content select=\"[start]\">\r\n </ng-content>\r\n </ng-container>\r\n <ng-container header>\r\n\r\n <div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\r\n <div class=\"content\" #content>\r\n <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\">\r\n <ng-container *ngIf=\"value; else elseTemplate\">\r\n <div [style.background-color]=\"value\" [style.color]=\"findTextColor(value)\"\r\n style=\"padding:0px 5px;width: 100%;display: flex;align-items: center;\">\r\n {{value}}&nbsp;</div>\r\n </ng-container>\r\n <ng-template #elseTemplate>\r\n {{placeholder}}&nbsp;\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container end>\r\n <ng-content select=\"[end]\">\r\n </ng-content>\r\n </ng-container>\r\n <ng-container panel>\r\n <ax-color-box [(value)]=\"value\" \r\n (onColorSelect)=\"handleItemClick($event)\"></ax-color-box>\r\n </ng-container>\r\n</ax-drop-down>", components: [{ type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading"], outputs: ["dropdownToggle", "onButtonClick"] }, { type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["value"], outputs: ["onColorSelect", "valueChange"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
11156
+ ], queries: [{ propertyName: "_contentValidation", first: true, predicate: AXValidation, descendants: true, static: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down #dropdown fitParent=\"false\" [size]=\"size\" [disabled]=\"disabled\" [rtl]=\"rtl\">\r\n <ng-container start>\r\n <ng-content select=\"[start]\">\r\n </ng-content>\r\n </ng-container>\r\n <ng-container header>\r\n\r\n <div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\r\n <div class=\"content\" #content>\r\n <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\">\r\n <ng-container *ngIf=\"value; else elseTemplate\">\r\n <div [style.background-color]=\"value\" [style.color]=\"findTextColor(value)\"\r\n style=\"padding:0px 5px;width: 100%;display: flex;align-items: center;\">\r\n {{value}}&nbsp;</div>\r\n </ng-container>\r\n <ng-template #elseTemplate>\r\n {{placeholder}}&nbsp;\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container end>\r\n <ng-content select=\"[end]\">\r\n </ng-content>\r\n </ng-container>\r\n <ng-container panel>\r\n <ax-color-box [(value)]=\"value\" \r\n (onColorSelect)=\"handleItemClick($event)\"></ax-color-box>\r\n </ng-container>\r\n</ax-drop-down>", components: [{ type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading", "dropdownWidth"], outputs: ["dropdownToggle", "onButtonClick"] }, { type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["value"], outputs: ["onColorSelect", "valueChange"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
11150
11157
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXColorPickerComponent, decorators: [{
11151
11158
  type: Component,
11152
11159
  args: [{ selector: 'ax-color-picker', providers: [