@acorex/components 3.0.11 → 3.0.15

package/fesm5/acorex-components.js

@@ -256,6 +256,10 @@ var AXBaseComponent = /** @class */ (function () {
     function AXBaseComponent() {
         this.uid = AXHtmlUtil.getUID();
     }
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], AXBaseComponent.prototype, "cssClass", void 0);
     return AXBaseComponent;
 }());
 var AXBaseInputChangeEvent = /** @class */ (function (_super) {
@@ -1037,7 +1041,7 @@ var AXButtonComponent = /** @class */ (function (_super) {
         Component({
             selector: 'ax-button',
             encapsulation: ViewEncapsulation.None,
-            template: "<button #container class=\"ax button form-control {{type}} {{size}}\" [class.selected]=\"selected\" [class.icon]=\"icon\"\r\n    [class.icon]=\"loading\" [class.disabled]=\"disabled || loading\" (click)=\"handleClick($event)\" [disabled]=\"disabled\"\r\n    [ngStyle]=\"{'width.%': block ? 100 : 'auto'}\" [attr.tabindex]=\"tabIndex\">\r\n    <div class=\"button-inner-content\">\r\n        <ng-container *ngIf=\"icon && !loading\">\r\n            <i class=\"{{icon}} icon\"></i>\r\n            <ng-container *ngIf=\"refContent.innerText.length==0 && refContent.children.length == 0\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"loading\">\r\n            <i class=\"far fa-circle-notch fa-spin icon\"></i>\r\n            <ng-container *ngIf=\"refContent.innerText.length==0 && refContent.children.length == 0\"></ng-container>\r\n        </ng-container>\r\n        <div class=\"ax-wrapper\" #refContent>\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</button>"
+            template: "<button #container class=\"ax button form-control {{type}} {{size}} {{cssClass}}\" [class.ax-button-icon]=\"refContent.innerText.length==0 && refContent.children.length == 0\" [class.selected]=\"selected\" [class.icon]=\"icon\"\r\n    [class.icon]=\"loading\" [class.disabled]=\"disabled || loading\" (click)=\"handleClick($event)\" [disabled]=\"disabled\"\r\n    [ngStyle]=\"{'width.%': block ? 100 : 'auto'}\" [attr.tabindex]=\"tabIndex\">\r\n    <div class=\"button-inner-content\">\r\n        <ng-container *ngIf=\"icon && !loading\">\r\n            <i class=\"{{icon}} icon\"></i>\r\n            <ng-container *ngIf=\"refContent.innerText.length==0 && refContent.children.length == 0\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"loading\">\r\n            <i class=\"far fa-circle-notch fa-spin icon\"></i>\r\n            <ng-container *ngIf=\"refContent.innerText.length==0 && refContent.children.length == 0\"></ng-container>\r\n        </ng-container>\r\n        <div class=\"ax-wrapper\" #refContent>\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</button>"
         }),
         __metadata("design:paramtypes", [ElementRef])
     ], AXButtonComponent);
@@ -1508,7 +1512,7 @@ var AXCalendarBoxComponent = /** @class */ (function () {
     AXCalendarBoxComponent = __decorate([
         Component({
             selector: 'ax-calendar-box',
-            template: "<!-- <div class=\"calendar-body ax {{size}}\" [ngClass]=\"type\">\r\n    <div class=\"calendar-selector\">\r\n        <div class=\"arrows left-arrow\" (click)=\"prev()\">\r\n            <i class=\"far fa-chevron-left\"></i>\r\n        </div>\r\n        <div class=\"selector-name\" (click)=\"changeView()\" [ngSwitch]=\"view\">\r\n            <ng-container *ngSwitchCase=\"'day'\">\r\n                {{viewRange.startTime.add('day',10) | dt:\"MMM YYYY\"}}\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'month'\">\r\n                {{viewRange.startTime | dt:\"YYYY\"}}\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                {{viewRange.startTime | dt:\"YYYY\"}} - {{viewRange.endTime | dt:\"YYYY\"}}\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"arrows right-arrow\" (click)=\"next()\">\r\n            <i class=\"far fa-chevron-right\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"view\">\r\n        <ng-container [ngSwitch]=\"view\">\r\n            <ng-container *ngSwitchCase=\"'day'\">\r\n                <table>\r\n                    <thead>\r\n                        <tr class=\"days-name calendar-row\">\r\n                            <th class=\"calendar-item\" *ngFor='let w of weekdays'>{{w}}</th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <tr class=\"calendar-row\" *ngFor=\"let r of matrix\">\r\n                            <td *ngFor=\"let d of r;trackBy:trackByFn\" class=\"calendar-item \" [title]=\"getTitle(d.date)\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today,'next-month':d.nextMonth , 'holiday':d.holiday , 'unselect':d.unselect}\" [ngStyle]=\"(findDay(d.date)) ? getStyle(d.date):''\"\r\n                                (click)=\"setDayClick($event,d)\">\r\n                                <div>\r\n                                    {{d.date.dayInMonth}}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'month'\">\r\n                <table>\r\n                    <tbody>\r\n                        <tr class=\"calendar-row\" *ngFor=\"let r of matrix\">\r\n                            <td class=\"calendar-item month-item\" *ngFor=\"let d of r;trackBy:trackByFn\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today}\" (click)=\"setMonthClick($event,d.date)\">\r\n                                <div>\r\n                                    {{d.date| dt:\"MMM\"}}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'year'\">\r\n                <table>\r\n                    <tbody>\r\n                        <tr class=\"calendar-row\" *ngFor=\"let r of matrix\">\r\n                            <td class=\"calendar-item year-item\" *ngFor=\"let d of r;trackBy:trackByFn\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today}\" (click)=\"setYearClick($event,d.date)\">\r\n                                <div>\r\n                                    {{d.date | dt:\"YYYY\"}}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <div style=\"padding: 5px;\">\r\n        <ax-button (click)=\"setToday()\" *ngIf=\"showTodayButton\" size=\"sm\" type=\"primary\" block=\"'true'\">\r\n            {{getTodayName()}}\r\n        </ax-button>\r\n    </div>\r\n</div> -->\r\n\r\n\r\n\r\n<div class=\"ax-calendar {{size}}\" [ngClass]=\"type\">\r\n    <div class=\"ax-calendar-header\">\r\n\r\n        <div class=\"ax-nav-button\" [ngSwitch]=\"view\">\r\n            <ax-button type=\"light twotone\" (click)=\"changeView()\">\r\n                <ng-container *ngSwitchCase=\"'day'\">\r\n                    {{viewRange.startTime.add('day',10) | dt:\"MMM YYYY\"}}\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'month'\">\r\n                    {{viewRange.startTime | dt:\"YYYY\"}}\r\n                </ng-container>\r\n                <ng-container *ngSwitchDefault>\r\n                    {{viewRange.startTime | dt:\"YYYY\"}} - {{viewRange.endTime | dt:\"YYYY\"}}\r\n                </ng-container>\r\n            </ax-button>\r\n        </div>\r\n\r\n        <div class=\"ax-controll-button\">\r\n            <ax-button type=\"light twotone\" (click)=\"next()\"><i class=\"fas fa-chevron-down\"></i></ax-button>\r\n\r\n        </div>\r\n        <div class=\"ax-controll-button\">\r\n            <ax-button type=\"light twotone\" (click)=\"prev()\"><i class=\"fas fa-chevron-up\"></i></ax-button>\r\n\r\n        </div>\r\n    </div>\r\n    <div class=\"ax-calendar-body\">\r\n        <ng-container [ngSwitch]=\"view\">\r\n            <ng-container *ngSwitchCase=\"'day'\">\r\n                <div class=\"ax-month-items\">\r\n                    <ng-container *ngFor='let w of weekdays'>\r\n                        <div class=\"ax-month-item\"><strong>{{w}}</strong></div>\r\n                    </ng-container>\r\n                </div>\r\n                <div class=\"ax-day-items\">\r\n                    <ng-container *ngFor=\"let r of matrix\">\r\n                        <div class=\"ax-day-item ax-state-event\" *ngFor=\"let d of r;trackBy:trackByFn\" [title]=\"getTitle(d.date)\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today,'next-month':d.nextMonth , 'holiday':d.holiday , 'unselect':d.unselect}\" [ngStyle]=\"(findDay(d.date)) ? getStyle(d.date):''\"\r\n                            (click)=\"setDayClick($event,d)\">\r\n                            {{d.date.dayInMonth}}</div>\r\n                    </ng-container>\r\n\r\n                </div>\r\n            </ng-container>\r\n            <div class=\"ax-month-container\" *ngSwitchCase=\"'month'\">\r\n                <ng-container *ngFor=\"let r of matrix\">\r\n                    <div class=\"ax-month-item\" *ngFor=\"let d of r;trackBy:trackByFn\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today}\" (click)=\"setMonthClick($event,d.date)\">\r\n                        <strong>\r\n                            {{d.date| dt:\"MMM\"}}\r\n                        </strong>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n            <div class=\"ax-year-container\" *ngSwitchCase=\"'year'\">\r\n                <ng-container class=\"calendar-row\" *ngFor=\"let r of matrix\">\r\n                    <div class=\"ax-year-item\" *ngFor=\"let d of r;trackBy:trackByFn\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today}\" (click)=\"setYearClick($event,d.date)\">\r\n                        <strong>{{d.date | dt:\"YYYY\"}}</strong>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n        </ng-container>\r\n\r\n    </div>\r\n    <div class=\"ax-calendar-footer\">\r\n        <ax-button (click)=\"setToday()\" *ngIf=\"showTodayButton\" type=\"dark\">\r\n            {{getTodayName()}}\r\n        </ax-button>\r\n    </div>\r\n</div>",
+            template: "<!-- <div class=\"calendar-body ax {{size}}\" [ngClass]=\"type\">\r\n    <div class=\"calendar-selector\">\r\n        <div class=\"arrows left-arrow\" (click)=\"prev()\">\r\n            <i class=\"far fa-chevron-left\"></i>\r\n        </div>\r\n        <div class=\"selector-name\" (click)=\"changeView()\" [ngSwitch]=\"view\">\r\n            <ng-container *ngSwitchCase=\"'day'\">\r\n                {{viewRange.startTime.add('day',10) | dt:\"MMM YYYY\"}}\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'month'\">\r\n                {{viewRange.startTime | dt:\"YYYY\"}}\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                {{viewRange.startTime | dt:\"YYYY\"}} - {{viewRange.endTime | dt:\"YYYY\"}}\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"arrows right-arrow\" (click)=\"next()\">\r\n            <i class=\"far fa-chevron-right\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"view\">\r\n        <ng-container [ngSwitch]=\"view\">\r\n            <ng-container *ngSwitchCase=\"'day'\">\r\n                <table>\r\n                    <thead>\r\n                        <tr class=\"days-name calendar-row\">\r\n                            <th class=\"calendar-item\" *ngFor='let w of weekdays'>{{w}}</th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <tr class=\"calendar-row\" *ngFor=\"let r of matrix\">\r\n                            <td *ngFor=\"let d of r;trackBy:trackByFn\" class=\"calendar-item \" [title]=\"getTitle(d.date)\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today,'next-month':d.nextMonth , 'holiday':d.holiday , 'unselect':d.unselect}\" [ngStyle]=\"(findDay(d.date)) ? getStyle(d.date):''\"\r\n                                (click)=\"setDayClick($event,d)\">\r\n                                <div>\r\n                                    {{d.date.dayInMonth}}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'month'\">\r\n                <table>\r\n                    <tbody>\r\n                        <tr class=\"calendar-row\" *ngFor=\"let r of matrix\">\r\n                            <td class=\"calendar-item month-item\" *ngFor=\"let d of r;trackBy:trackByFn\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today}\" (click)=\"setMonthClick($event,d.date)\">\r\n                                <div>\r\n                                    {{d.date| dt:\"MMM\"}}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'year'\">\r\n                <table>\r\n                    <tbody>\r\n                        <tr class=\"calendar-row\" *ngFor=\"let r of matrix\">\r\n                            <td class=\"calendar-item year-item\" *ngFor=\"let d of r;trackBy:trackByFn\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today}\" (click)=\"setYearClick($event,d.date)\">\r\n                                <div>\r\n                                    {{d.date | dt:\"YYYY\"}}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <div style=\"padding: 5px;\">\r\n        <ax-button (click)=\"setToday()\" *ngIf=\"showTodayButton\" size=\"sm\" type=\"primary\" block=\"'true'\">\r\n            {{getTodayName()}}\r\n        </ax-button>\r\n    </div>\r\n</div> -->\r\n\r\n\r\n\r\n<div class=\"ax-calendar-container {{size}}\" [ngClass]=\"type\">\r\n    <div class=\"ax-calendar-header\">\r\n\r\n        <div class=\"ax-nav-button\" [ngSwitch]=\"view\">\r\n            <ax-button type=\"light blank\" (click)=\"changeView()\">\r\n                <ng-container *ngSwitchCase=\"'day'\">\r\n                    {{viewRange.startTime.add('day',10) | dt:\"MMM YYYY\"}}\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'month'\">\r\n                    {{viewRange.startTime | dt:\"YYYY\"}}\r\n                </ng-container>\r\n                <ng-container *ngSwitchDefault>\r\n                    {{viewRange.startTime | dt:\"YYYY\"}} - {{viewRange.endTime | dt:\"YYYY\"}}\r\n                </ng-container>\r\n            </ax-button>\r\n        </div>\r\n\r\n        <div class=\"ax-controll-button\">\r\n            <ax-button type=\"light blank\" icon=\"fas fa-chevron-down\" (click)=\"next()\"></ax-button>\r\n        </div>\r\n        <div class=\"ax-controll-button\">\r\n            <ax-button type=\"light blank\" icon=\"fas fa-chevron-up\" (click)=\"prev()\"></ax-button>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax-calendar-body\">\r\n        <ng-container [ngSwitch]=\"view\">\r\n            <ng-container *ngSwitchCase=\"'day'\">\r\n                <div class=\"ax-month-items\">\r\n                    <ng-container *ngFor='let w of weekdays'>\r\n                        <div class=\"ax-month-item\"><strong>{{w}}</strong></div>\r\n                    </ng-container>\r\n                </div>\r\n                <div class=\"ax-day-items\">\r\n                    <ng-container *ngFor=\"let r of matrix\">\r\n                        <div class=\"ax-day-item ax-state-event\" *ngFor=\"let d of r;trackBy:trackByFn\" [title]=\"getTitle(d.date)\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today,'next-month':d.nextMonth , 'holiday':d.holiday , 'unselect':d.unselect}\" [ngStyle]=\"(findDay(d.date)) ? getStyle(d.date):''\"\r\n                            (click)=\"setDayClick($event,d)\">\r\n                            {{d.date.dayInMonth}}</div>\r\n                    </ng-container>\r\n\r\n                </div>\r\n            </ng-container>\r\n            <div class=\"ax-month-container\" *ngSwitchCase=\"'month'\">\r\n                <ng-container *ngFor=\"let r of matrix\">\r\n                    <div class=\"ax-month-item\" *ngFor=\"let d of r;trackBy:trackByFn\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today}\" (click)=\"setMonthClick($event,d.date)\">\r\n                        <strong>\r\n                            {{d.date| dt:\"MMM\"}}\r\n                        </strong>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n            <div class=\"ax-year-container\" *ngSwitchCase=\"'year'\">\r\n                <ng-container class=\"calendar-row\" *ngFor=\"let r of matrix\">\r\n                    <div class=\"ax-year-item\" *ngFor=\"let d of r;trackBy:trackByFn\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today}\" (click)=\"setYearClick($event,d.date)\">\r\n                        <strong>{{d.date | dt:\"YYYY\"}}</strong>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n        </ng-container>\r\n\r\n    </div>\r\n    <div class=\"ax-calendar-footer\">\r\n        <ax-button (click)=\"setToday()\" *ngIf=\"showTodayButton\" type=\"dark\">\r\n            {{getTodayName()}}\r\n        </ax-button>\r\n    </div>\r\n</div>",
             encapsulation: ViewEncapsulation.None,
             changeDetection: ChangeDetectionStrategy.OnPush
         }),
@@ -3519,7 +3523,7 @@ var AXCheckBoxComponent = /** @class */ (function (_super) {
             return this._value;
         },
         set: function (v) {
-            if (v != this._value && v != undefined) {
+            if (v != this._value || v !== undefined) {
                 var old = this._value;
                 this._value = v;
                 this.valueChange.emit(v);
@@ -3544,15 +3548,21 @@ var AXCheckBoxComponent = /** @class */ (function (_super) {
         }
     };
     AXCheckBoxComponent.prototype.handleClick = function (e) {
-        if (!this.disabled && !this.readonly) {
-            //TODO: check intermddiate;
-            this.onClick.emit({
-                component: this,
-                htmlElement: this.ref.nativeElement,
-                htmlEvent: e,
-                value: this.value
-            });
-        }
+        var _this = this;
+        // e.preventDefault();
+        // e.stopPropagation();
+        setTimeout(function () {
+            if (!_this.disabled && !_this.readonly) {
+                //TODO: check intermddiate;
+                // this.value = !this.value;
+                _this.onClick.emit({
+                    component: _this,
+                    htmlElement: _this.ref.nativeElement,
+                    htmlEvent: e,
+                    value: _this.value
+                });
+            }
+        }, 100);
     };
     AXCheckBoxComponent.ctorParameters = function () { return [
         { type: ChangeDetectorRef },
@@ -5411,7 +5421,7 @@ var AXDropdownComponent = /** @class */ (function (_super) {
     AXDropdownComponent = __decorate([
         Component({
             selector: 'ax-drop-down',
-            template: "<div class=\"ax form-item {{size}}\" [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\" icon=\"far fa-angle-down icon\"\r\n            type=\"primary blank\" [size]=\"size\" (click)=\"handleArrowClick($event)\"  [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    <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>",
+            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\" icon=\"far fa-angle-down icon\"\r\n            type=\"light blank\" [size]=\"size\" (click)=\"handleArrowClick($event)\"  [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    <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>",
             encapsulation: ViewEncapsulation.None,
             changeDetection: ChangeDetectionStrategy.OnPush,
             host: { style: 'display:contents;' },
@@ -6175,11 +6185,11 @@ var AXDatePickerComponent = /** @class */ (function (_super) {
     AXDatePickerComponent = AXDatePickerComponent_1 = __decorate([
         Component({
             selector: 'ax-date-picker',
-            template: "<ax-drop-down [readonly]=\"readonly\" [size]=\"size\" [showDropDownButton]=\"false\" icon=\"far fa-calendar-alt\" #dropdown fitParent=\"false\"\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    <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\" [selectableHoliday]=\"selectableHoliday\"\r\n      [min]=\"min\" [max]=\"max\" [size]=\"size\" (onClick)=\"onClick($event)\" (onValueChanged)=\"onDateChange($event)\"\r\n      [type]=\"type\" [(value)]=\"value\" [dayStyle]=\"dayStyle\">\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=\"primary 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>",
+            template: "<ax-drop-down [readonly]=\"readonly\" [size]=\"size\" [showDropDownButton]=\"false\" icon=\"far fa-calendar-alt\" #dropdown fitParent=\"false\"\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    <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\" [selectableHoliday]=\"selectableHoliday\"\r\n      [min]=\"min\" [max]=\"max\" [size]=\"size\" (onClick)=\"onClick($event)\" (onValueChanged)=\"onDateChange($event)\"\r\n      [type]=\"type\" [(value)]=\"value\" [dayStyle]=\"dayStyle\">\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>",
             encapsulation: ViewEncapsulation.None,
             providers: [{ provide: AXValidatableComponent, useExisting: AXDatePickerComponent_1 }],
             host: { style: 'display: contents;' },
-            styles: [".ax-dropdown-container-bordered .ax-calendar{border:none!important}"]
+            styles: [".ax-dropdown-container-bordered .ax-calendar-container{border:none!important}"]
         }),
         __metadata("design:paramtypes", [ElementRef, ChangeDetectorRef])
     ], AXDatePickerComponent);
@@ -6767,7 +6777,7 @@ var AXDialogComponent = /** @class */ (function (_super) {
     AXDialogComponent = __decorate([
         Component({
             selector: 'ax-dialog',
-            template: "<div class=\"ax-dialog\">\r\n    <div class=\"dialog-content\">\r\n            {{message}}\r\n    </div>\r\n</div>",
+            template: "<div class=\"ax-dialog\">\r\n    <div class=\"dialog-content\" [innerHTML]=\"message\">\r\n            \r\n    </div>\r\n</div>",
             encapsulation: ViewEncapsulation.None,
             styles: [".ax-dialog{background:var(--ax-white-color);display:flex;flex-direction:column;padding:.8em}.ax-dialog .dialog-content{display:flex;justify-content:center;align-items:center}.ax-dialog .buttons{display:flex;flex-direction:row-reverse;margin-top:1em}.ax-dialog .buttons .button{-webkit-margin-end:.5em;margin-inline-end:.5em;min-width:100px}[dir=rtl] .ax-dialog .buttons{flex-direction:row!important}.ax-dialog .buttons .btn{margin:0 5px}"]
         }),
@@ -6938,7 +6948,7 @@ var AXPopupComponent = /** @class */ (function (_super) {
         Component({
             template: "<div class=\"popup-wrapper\" role=\"dialog\" [attr.aria-labelledby]=\"'dialog'+uid+'_label'\" aria-modal=\"true\" cdkTrapFocus>\r\n  <div class=\"popup-container {{size}}\" tabindex=\"0\" cdkDrag [class.has-border]=\"!modal\">\r\n    <div class=\"ax-popup-header\" cdkDragHandle [attr.id]=\"'dialog'+uid+'_label'\">\r\n      <span>\r\n        {{title}}\r\n      </span>\r\n      <span class=\"ax-buttons-containers\">\r\n        <i class=\"far fa-expand ax-popup-header-button\" (click)=\"onFullScreen()\" *ngIf=\"maximizable\" tabindex=\"2\"\r\n          title=\"\u062A\u0645\u0627\u0645 \u0635\u0641\u062D\u0647\"></i>\r\n        <i class=\"far fa-times ax-popup-header-button\" (click)=\"onCloseClick()\" *ngIf=\"closable\" tabindex=\"1\"\r\n          title=\"\u0628\u0633\u062A\u0646\"></i>\r\n      </span>\r\n    </div>\r\n    <div class=\"ax-popup-body ax-loading-host\">\r\n      <div class=\"ax-popup-body-container\">\r\n        <div [hidden]=\"isLoading\">\r\n          <ng-template #popupBody></ng-template>\r\n        </div>\r\n      </div>\r\n      <div class=\"ax-popup-footer\" *ngIf=\"!isLoading && footerButtons.length > 0\">\r\n        <div class=\"ax-buttons-containers\">\r\n          <ng-container *ngFor=\"let button of footerButtons\">\r\n            <ax-button [type]=\"button.style\" [icon]=\"button.icon\" [submitBehavior]=\"button.submitBehavior\"\r\n              [disabled]=\"button.disable\" [cancelBehavior]=\"button.cancelBehavior\"\r\n              (click)=\"handleFooterButtonClick(button)\">\r\n              {{button.text}}\r\n            </ax-button>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>",
             encapsulation: ViewEncapsulation.None,
-            styles: [".popup-wrapper .popup-container{opacity:1;background:var(--ax-white-color);display:flex;flex-direction:column;border-radius:var(--ax-size-border-radius);-webkit-border-radius:var(--ax-size-border-radius);-moz-border-radius:var(--ax-size-border-radius);overflow:hidden;max-height:95vh;height:-webkit-fit-content;height:fit-content;height:-moz-fit-content}.popup-wrapper .popup-container.has-border{border:1px solid var(--ax-border-color);box-shadow:1px 1px 10px var(--ax-border-color)}@media all and (min-width:1280px){.popup-wrapper .popup-container.sm{width:420px!important}.popup-wrapper .popup-container.md{width:680px!important}.popup-wrapper .popup-container.lg{width:1024px!important}}@media all and (min-width:1024px) and (max-width:1279px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:900px!important}}@media all and (min-width:768px) and (max-width:1023px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:700px!important}}@media all and (min-width:425px) and (max-width:767px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.lg,.popup-wrapper .popup-container.md{width:460px!important}}@media all and (min-width:0px) and (max-width:424px){.popup-wrapper .popup-container.lg,.popup-wrapper .popup-container.md,.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}}.popup-wrapper .popup-container:focus{box-shadow:0 0 0 .2rem rgba(var(--outline-color),.8);outline-color:transparent}.popup-wrapper .popup-container.full{width:95vw}.popup-wrapper .popup-container .ax-popup-header{background:var(--ax-gray-trans-dark-color);color:var(--ax-dark-color);display:flex;flex-direction:row;justify-content:space-between;align-items:center;font-size:1.2rem;font-weight:500;padding:.5em}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers{display:flex;flex-direction:row}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers .ax-popup-header-button{width:1em;height:1em;padding:1em;background:rgba(0,0,0,.05);border-radius:50%;font-size:1.2rem;display:flex;justify-content:center;align-items:center;cursor:pointer;-webkit-margin-start:.5em;margin-inline-start:.5em}.popup-wrapper .popup-container .ax-popup-body{max-height:90vh;min-height:100px;position:relative;overflow:hidden;display:flex;flex-direction:column}@media only screen and (min-device-width:320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio:2){.popup-wrapper .popup-container .ax-popup-body{min-height:93vh!important}}.popup-wrapper .popup-container .ax-popup-body .ax-popup-body-container{overflow:auto}.popup-wrapper .popup-container .ax-popup-body .ax-footer{background:var(--ax-white-color);border-top:1px solid;border-color:var(--ax-border-color);-webkit-margin-before:.5em;margin-block-start:.5em;padding:.4em .5em;display:flex;align-items:center}.popup-wrapper .popup-container .ax-popup-body .ax-footer .button{min-width:100px;-webkit-margin-end:.5em;margin-inline-end:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer{background-color:var(--ax-white-color);display:flex;flex-direction:row;align-items:center;padding:.5em;border-top:1px solid var(--ax-border-color);-webkit-margin-before:.5em;margin-block-start:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers{flex:1;max-width:-webkit-fit-content;max-width:fit-content;max-width:-moz-fit-content}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers .button{-webkit-margin-end:.5em;margin-inline-end:.5em;min-width:80px}"]
+            styles: [".popup-wrapper .popup-container{opacity:1;background:var(--ax-white-color);display:flex;flex-direction:column;border-radius:var(--ax-size-border-radius);-webkit-border-radius:var(--ax-size-border-radius);-moz-border-radius:var(--ax-size-border-radius);overflow:hidden;max-height:95vh;height:-webkit-fit-content;height:fit-content;height:-moz-fit-content}.popup-wrapper .popup-container.has-border{border:1px solid var(--ax-border-color);box-shadow:1px 1px 10px var(--ax-border-color)}@media all and (min-width:1280px){.popup-wrapper .popup-container.sm{width:420px!important}.popup-wrapper .popup-container.md{width:680px!important}.popup-wrapper .popup-container.lg{width:1024px!important}}@media all and (min-width:1024px) and (max-width:1279px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:900px!important}}@media all and (min-width:768px) and (max-width:1023px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:700px!important}}@media all and (min-width:425px) and (max-width:767px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.lg,.popup-wrapper .popup-container.md{width:460px!important}}@media all and (min-width:0px) and (max-width:424px){.popup-wrapper .popup-container.lg,.popup-wrapper .popup-container.md,.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}}.popup-wrapper .popup-container:focus{box-shadow:0 0 0 .2rem rgba(var(--outline-color),.8);outline-color:transparent}.popup-wrapper .popup-container.full{width:95vw}.popup-wrapper .popup-container .ax-popup-header{background:var(--ax-gray-trans-dark-color);color:var(--ax-dark-color);display:flex;flex-direction:row;justify-content:space-between;align-items:center;font-size:1.2rem;font-weight:500;padding:0 1rem;height:calc(var(--ax-base-size) * var(--ax-base-ratio))!important}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers{display:flex;flex-direction:row}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers .ax-popup-header-button{width:1em;height:1em;padding:1em;background:rgba(0,0,0,.05);border-radius:50%;font-size:1.2rem;display:flex;justify-content:center;align-items:center;cursor:pointer;-webkit-margin-start:.5em;margin-inline-start:.5em}.popup-wrapper .popup-container .ax-popup-body{max-height:90vh;min-height:100px;position:relative;overflow:hidden;display:flex;flex-direction:column}@media only screen and (min-device-width:320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio:2){.popup-wrapper .popup-container .ax-popup-body{min-height:93vh!important}}.popup-wrapper .popup-container .ax-popup-body .ax-popup-body-container{overflow:auto}.popup-wrapper .popup-container .ax-popup-body .ax-footer{background:var(--ax-white-color);border-top:1px solid;border-color:var(--ax-border-color);-webkit-margin-before:.5em;margin-block-start:.5em;padding:.4em .5em;display:flex;align-items:center}.popup-wrapper .popup-container .ax-popup-body .ax-footer .button{min-width:100px;-webkit-margin-end:.5em;margin-inline-end:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer{background-color:var(--ax-white-color);display:flex;flex-direction:row;align-items:center;padding:.5em;border-top:1px solid var(--ax-border-color);-webkit-margin-before:.5em;margin-block-start:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers{flex:1;max-width:-webkit-fit-content;max-width:fit-content;max-width:-moz-fit-content}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers .button{-webkit-margin-end:.5em;margin-inline-end:.5em;min-width:80px}"]
         }),
         __metadata("design:paramtypes", [ComponentFactoryResolver,
             ElementRef,
@@ -8029,7 +8039,7 @@ var AXNumberBoxComponent = /** @class */ (function (_super) {
     AXNumberBoxComponent = AXNumberBoxComponent_1 = __decorate([
         Component({
             selector: 'ax-number-box',
-            template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\r\n    <div class=\"ax items-wrapper\">\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n        <ax-button icon=\"far fa-plus\" type=\"success blank\" (click)=\"upStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\r\n    </div>\r\n    <div class=\"content\" #content>\r\n        <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\r\n            [class.icon]=\"icon\">\r\n            <input #input type=\"text\" class=\"ax {{size}}\" [(ngModel)]=\"textValue\" placeholder=\"{{placeholder}}\"\r\n                [readonly]=\"readonly\" [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\"\r\n                [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\"\r\n                (keypress)=\"handleKeyPress($event)\" (ngModelChange)=\"this.userQuestionUpdate.next($event)\"\r\n                (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick()\" (keyup)=\"handleKeyUp($event)\">\r\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax items-wrapper\">\r\n        <ax-button *ngIf=\"value && allowClear\" [disabled]=\"disabled\" icon=\"far fa-times\" type=\"danger blank\"\r\n            (click)=\"clear()\"></ax-button>\r\n\r\n            <ax-button icon=\"far fa-minus\" type=\"danger blank\" (click)=\"downStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n        <div class=\"arrow-number\" *ngIf=\"showCounter && !showDoubleCounter\" >\r\n            <ax-button type=\"primary blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-up\" [size]=\"size\"\r\n                (mousedown)=\"upStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\r\n            <ax-button type=\"primary blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-down\" [size]=\"size\"\r\n                (mousedown)=\"downStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\r\n        </div>\r\n    </div>\r\n\r\n</div>\r\n",
+            template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\r\n    <div class=\"ax items-wrapper\">\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n        <ax-button icon=\"far fa-plus\" type=\"success blank\" (click)=\"upStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\r\n    </div>\r\n    <div class=\"content\" #content>\r\n        <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\r\n            [class.icon]=\"icon\">\r\n            <input #input type=\"text\" class=\"ax {{size}}\" [(ngModel)]=\"textValue\" placeholder=\"{{placeholder}}\"\r\n                [readonly]=\"readonly\" [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\"\r\n                [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\"\r\n                (keypress)=\"handleKeyPress($event)\" (ngModelChange)=\"this.userQuestionUpdate.next($event)\"\r\n                (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick()\" (keyup)=\"handleKeyUp($event)\">\r\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax items-wrapper\">\r\n        <ax-button *ngIf=\"value && allowClear\" [disabled]=\"disabled\" icon=\"far fa-times\" type=\"danger blank\"\r\n            (click)=\"clear()\"></ax-button>\r\n            <ax-button icon=\"far fa-minus\" type=\"danger blank\" (click)=\"downStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n        <div class=\"arrow-number\" *ngIf=\"showCounter && !showDoubleCounter\" >\r\n            <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-up\" [size]=\"size\"\r\n                (mousedown)=\"upStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\r\n            <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-down\" [size]=\"size\"\r\n                (mousedown)=\"downStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\r\n        </div>\r\n    </div>\r\n\r\n</div>\r\n",
             changeDetection: ChangeDetectionStrategy.OnPush,
             host: { style: 'display: contents;' },
             providers: [{ provide: AXValidatableComponent, useExisting: AXNumberBoxComponent_1 }]
@@ -8127,7 +8137,7 @@ var AXPasswordBoxComponent = /** @class */ (function (_super) {
     AXPasswordBoxComponent = AXPasswordBoxComponent_1 = __decorate([
         Component({
             selector: 'ax-password-box',
-            template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\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\" #content>\r\n        <div class=\"ax input form-control {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" [class.icon]=\"icon\">\r\n            <input #input [type]=\"type\" class=\"ax {{size}}\" value=\"{{value}}\" placeholder=\"{{placeholder}}\"\r\n                [readonly]=\"readonly\" [disabled]=\"disabled\"\r\n                [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\">\r\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax items-wrapper\">\r\n        <ax-button *ngIf=\"value && allowClear\" icon=\"fas fa-times\" type=\"danger blank\" (click)=\"clear()\"  [tabIndex]=\"-1\"></ax-button>\r\n        <ax-button [disabled]=\"disabled\" [icon]=\"eyeIcon\" type=\"primary blank\" size=\"{{size}}\" (click)=\"handleShowPassword()\"  [tabIndex]=\"-1\">\r\n            <!-- <i class=\"\" [ngClass]=\"{'fa-eye': type === 'password','fa-eye-slash':type === 'text'}\"></i> -->\r\n        </ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </div>\r\n</div>\r\n",
+            template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\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\" #content>\r\n        <div class=\"ax input form-control {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" [class.icon]=\"icon\">\r\n            <input #input [type]=\"type\" class=\"ax {{size}}\" value=\"{{value}}\" placeholder=\"{{placeholder}}\"\r\n                [readonly]=\"readonly\" [disabled]=\"disabled\"\r\n                [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\">\r\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax items-wrapper\">\r\n        <ax-button *ngIf=\"value && allowClear\" icon=\"fas fa-times\" type=\"danger blank\" (click)=\"clear()\"  [tabIndex]=\"-1\"></ax-button>\r\n        <ax-button [disabled]=\"disabled\" [icon]=\"eyeIcon\" type=\"light blank\" size=\"{{size}}\" (click)=\"handleShowPassword()\"  [tabIndex]=\"-1\">\r\n            <!-- <i class=\"\" [ngClass]=\"{'fa-eye': type === 'password','fa-eye-slash':type === 'text'}\"></i> -->\r\n        </ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </div>\r\n</div>\r\n",
             encapsulation: ViewEncapsulation.None,
             changeDetection: ChangeDetectionStrategy.OnPush,
             host: { style: 'display: contents;' },
@@ -8334,7 +8344,7 @@ var AXSearchBoxComponent = /** @class */ (function (_super) {
     AXSearchBoxComponent = __decorate([
         Component({
             selector: 'ax-search-box',
-            template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\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\" #content>\r\n        <div class=\"ax input form-control {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\r\n            [class.icon]=\"icon\">\r\n            <input #input type=\"text\" class=\"ax {{size}}\" [(ngModel)]=\"value\"\r\n                (input)=\"onSearchChanged($event.target.value)\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\r\n                [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\"\r\n                (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\" (keyup)=\"handleKeyEvent($event)\"\r\n                (keydown)=\"handleKeyEvent($event)\">\r\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax items-wrapper\">\r\n        <ax-button [size]=\"size\" *ngIf=\"value && allowClear\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\"  [tabIndex]=\"-1\">\r\n        </ax-button>\r\n        <ax-button [size]=\"size\" type=\"primary blank\" icon=\"far fa-search\" end (click)=\"click($event)\"  [tabIndex]=\"-1\">\r\n        </ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </div>\r\n</div>",
+            template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\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\" #content>\r\n        <div class=\"ax input form-control {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\r\n            [class.icon]=\"icon\">\r\n            <input #input type=\"text\" class=\"ax {{size}}\" [(ngModel)]=\"value\"\r\n                (input)=\"onSearchChanged($event.target.value)\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\r\n                [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\"\r\n                (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\" (keyup)=\"handleKeyEvent($event)\"\r\n                (keydown)=\"handleKeyEvent($event)\">\r\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax items-wrapper\">\r\n        <ax-button [size]=\"size\" *ngIf=\"value && allowClear\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\"  [tabIndex]=\"-1\">\r\n        </ax-button>\r\n        <ax-button [size]=\"size\" type=\"light blank\" icon=\"far fa-search\" end (click)=\"click($event)\"  [tabIndex]=\"-1\">\r\n        </ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </div>\r\n</div>",
             host: { style: 'display: contents;' },
             changeDetection: ChangeDetectionStrategy.OnPush
         }),