@acorex/components 3.0.23 → 3.0.24

package/fesm5/acorex-components.js

@@ -3298,12 +3298,12 @@ var AXTooltipDirective = /** @class */ (function () {
         this.offset = 17;
     }
     AXTooltipDirective.prototype.onMouseEnter = function () {
-        if (!this.tooltip) {
+        if (!this.tooltip && this.tooltipTitle) {
             this.show();
         }
     };
     AXTooltipDirective.prototype.onMouseLeave = function () {
-        if (this.tooltip) {
+        if (this.tooltip && this.tooltipTitle) {
             this.hide();
         }
     };
@@ -4518,7 +4518,7 @@ var AXTextBoxComponent = /** @class */ (function (_super) {
             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    </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 class=\"ax {{size}}\" [attr.type]=\"type\" [attr.maxlength]=\"maxLength\"\r\n                [textMask]=\"{mask: mask || false, showMask : showMask, keepCharPositions:maskKeepCharPositions,guide:maskGuid,placeholderChar:maskPlaceholder}\"\r\n                [(ngModel)]=\"value\" placeholder=\"{{placeholder}}\" [readonly]=\"readonly\" [disabled]=\"disabled\"\r\n                [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus($event)\"\r\n                (blur)=\"handleInputBlur($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\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\"></ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </div>\r\n</div>",
             encapsulation: ViewEncapsulation.None,
             changeDetection: ChangeDetectionStrategy.OnPush,
-            host: { style: 'display: contents;' },
+            host: {},
             providers: [{ provide: AXValidatableComponent, useExisting: AXTextBoxComponent_1 }]
         }),
         __metadata("design:paramtypes", [ChangeDetectorRef, ElementRef])
@@ -6188,7 +6188,7 @@ var AXDatePickerComponent = /** @class */ (function (_super) {
             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;' },
+            host: {},
             styles: [".ax-dropdown-container-bordered .ax-calendar-container{border:none!important}"]
         }),
         __metadata("design:paramtypes", [ElementRef, ChangeDetectorRef])
@@ -6233,7 +6233,7 @@ var AXFormGroupComponent = /** @class */ (function (_super) {
             template: "<div class=\"ax form-group {{size}}\">\r\n    <ng-content select=\"ax-label\"></ng-content>\r\n    <div #div class=\"ax form-item\" [ngClass]=\"{'required-state': required}\">\r\n        <div class=\"ax buttons start-buttons\" #startButtons>\r\n            <ng-content select=\"ax-button[start]\"></ng-content>\r\n        </div>\r\n        <div class=\"content\" #content>\r\n            <ng-content></ng-content>\r\n        </div>\r\n        <div class=\"ax buttons end-buttons\" #endButtons>\r\n            <ng-content select=\"ax-button[end]\"></ng-content>\r\n            <ng-content select=\"ax-button\"></ng-content>\r\n        </div>\r\n    </div>\r\n</div>",
             encapsulation: ViewEncapsulation.None,
             changeDetection: ChangeDetectionStrategy.OnPush,
-            host: { style: 'display: contents;' }
+            host: {}
         }),
         __metadata("design:paramtypes", [ChangeDetectorRef])
     ], AXFormGroupComponent);
@@ -8041,7 +8041,7 @@ var AXNumberBoxComponent = /** @class */ (function (_super) {
             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            <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;' },
+            host: {},
             providers: [{ provide: AXValidatableComponent, useExisting: AXNumberBoxComponent_1 }]
         }),
         __metadata("design:paramtypes", [ChangeDetectorRef, ElementRef])
@@ -8140,7 +8140,7 @@ var AXPasswordBoxComponent = /** @class */ (function (_super) {
             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;' },
+            host: {},
             providers: [{ provide: AXValidatableComponent, useExisting: AXPasswordBoxComponent_1 }]
         }),
         __metadata("design:paramtypes", [ChangeDetectorRef, ElementRef])
@@ -8345,7 +8345,7 @@ var AXSearchBoxComponent = /** @class */ (function (_super) {
         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=\"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;' },
+            host: {},
             changeDetection: ChangeDetectionStrategy.OnPush
         }),
         __metadata("design:paramtypes", [ChangeDetectorRef, ElementRef])
@@ -9388,7 +9388,7 @@ var AXSelectBoxComponent = /** @class */ (function (_super) {
             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-circle 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 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\" [class.selected]=\"isItemSelected(item)\"\r\n                        (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)\">\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;\"\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;\"\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>",
             encapsulation: ViewEncapsulation.None,
             changeDetection: ChangeDetectionStrategy.OnPush,
-            host: { style: 'display: contents;' },
+            host: {},
             providers: [{ provide: AXValidatableComponent, useExisting: AXSelectBoxComponent_1 }]
         }),
         __metadata("design:paramtypes", [ChangeDetectorRef, ElementRef, NgZone])
@@ -10873,7 +10873,7 @@ var AXSelectBox2Component = /** @class */ (function (_super) {
             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-circle 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>",
             encapsulation: ViewEncapsulation.None,
             changeDetection: ChangeDetectionStrategy.OnPush,
-            host: { style: 'display: contents;' },
+            host: {},
             providers: [{ provide: AXValidatableComponent, useExisting: AXSelectBox2Component_1 }]
         }),
         __metadata("design:paramtypes", [ChangeDetectorRef, ElementRef, NgZone])
@@ -11666,7 +11666,7 @@ var AXTextAreaComponent = /** @class */ (function (_super) {
             template: "<div class=\"ax form-item {{size}}\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\r\n    <div class=\"content\">\r\n        <div class=\"ax input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\">\r\n            <textarea [attr.maxlength]=\"maxLength\" rows=\"{{rows}}\" cols=\"{{cols}}\" #input type=\"text\"\r\n                class=\"ax icon {{size}}\" [ngClass]=\"setTextAlign()\" placeholder=\"{{placeholder}}\" [readonly]=\"readonly\"\r\n                [disabled]=\"disabled\" value=\"{{value}}\"></textarea>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax buttons\">\r\n        <ng-content select=\"ax-button\">\r\n        </ng-content>\r\n    </div>\r\n</div>",
             encapsulation: ViewEncapsulation.None,
             changeDetection: ChangeDetectionStrategy.OnPush,
-            host: { style: 'display: contents;' },
+            host: {},
             providers: [{ provide: AXValidatableComponent, useExisting: AXTextAreaComponent_1 }]
         }),
         __metadata("design:paramtypes", [ChangeDetectorRef, ElementRef])
@@ -12651,7 +12651,7 @@ var AXTimePickerComponent = /** @class */ (function (_super) {
             selector: 'ax-time-picker',
             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    </div>\r\n    <div class=\"content\" #content>\r\n        <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" [class.icon]=\"icon\">\r\n            <input #input type=\"text\" class=\"ax {{size}}\" [textMask]=\"timeType\" [(ngModel)]=\"textValue\" placeholder=\"{{placeholder}}\" [readonly]=\"readonly\" [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus()\"\r\n                (blur)=\"handleInputBlur($event)\" (keypress)='handleKeyPress($event)' (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick($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\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\" [disabled]=\"disabled\" [tabIndex]=\"-1\"></ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </div>\r\n</div>\r\n<!-- [textMask]=\"{mask: mask , showMask:showMask , guid: maskGuid , keepCharPositions: maskKeepCharPositions}\" -->\r\n<!-- <input #input id=\"timePickerValue\" [textMask]=\"timeType\" type=\"text\" [(ngModel)]=\"value\" (keypress)='handleKeyPress($event)'\r\n    (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick($event)\"> -->",
             changeDetection: ChangeDetectionStrategy.OnPush,
-            host: { style: 'display: contents;' },
+            host: {},
             providers: [{ provide: AXValidatableComponent, useExisting: AXTimePickerComponent_1 }]
         }),
         __metadata("design:paramtypes", [ChangeDetectorRef, ElementRef])
@@ -15515,7 +15515,7 @@ var AXColorPickerComponent = /** @class */ (function (_super) {
             providers: [
                 { provide: AXValidatableComponent, useExisting: AXColorPickerComponent_1 },
             ],
-            host: { style: 'display: contents;' }
+            host: {}
         }),
         __metadata("design:paramtypes", [ElementRef])
     ], AXColorPickerComponent);