ngx-sumax-erp-components 1.0.49 → 1.1.0

package/esm2022/lib/ng-select-simple/ng-select-simple.component.mjs

@@ -525,7 +525,7 @@ export class NgSelectSimpleComponent {
                 useExisting: forwardRef(() => NgSelectSimpleComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "ngSelectSimple", first: true, predicate: ["ngSelectSimple"], descendants: true }, { propertyName: "btnSearch", first: true, predicate: ["btnSearch"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<label *ngIf=\"label != null && label != '' && showLabel\" class=\"d-flex sumax-label mb-0 p-0\">\r\n  <span *ngIf=\"!templateLabel; else templateLabel\" [title]=\"label\" style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis\">\r\n    {{ label }}\r\n  </span>\r\n  <span *ngIf=\"required\" [class.text-danger]=\"controls?.errors != null\"> *</span>\r\n  <span *ngIf=\"labelInfo\">\r\n    <i class=\"fa fa-exclamation-circle text-info ms-2\" [matTooltip]=\"textLabelInfo\" matTooltipClass=\"bg-info\"></i>\r\n  </span>\r\n</label>\r\n\r\n<div\r\n  [class.input-icon]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n  [class.right]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n  [class.refresh]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted && refresh\"\r\n  [class.search]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted && search\">\r\n  <div class=\"d-flex\">\r\n    <div\r\n      class=\"position-relative\"\r\n      [class.ng-select-container-fullbuttons]=\"search && refresh && redirect\"\r\n      [class.app-ng-selec-container]=\"search || refresh\"\r\n      [class.w-100]=\"!search && !refresh\">\r\n      <ng-select\r\n        #ngSelectSimple\r\n        [class]=\"search || refresh ? 'app-ng-select' : 'w-100'\"\r\n        [class.action]=\"search && refresh\"\r\n        [items]=\"items | async\"\r\n        [(ngModel)]=\"_value\"\r\n        [disabled]=\"disabled\"\r\n        [readonly]=\"readonly\"\r\n        (change)=\"eventChange($event)\"\r\n        (blur)=\"eventBlur($event)\"\r\n        (focus)=\"eventFocus($event)\"\r\n        (search)=\"eventSearch($event)\"\r\n        [markFirst]=\"markFirst\"\r\n        [clearable]=\"!required && clearable\"\r\n        [virtualScroll]=\"virtualScroll\"\r\n        [inputAttrs]=\"{ autocomplete: autocomplete }\"\r\n        [clearOnBackspace]=\"clearOnBackspace\"\r\n        [openOnEnter]=\"openOnEnter\"\r\n        (keydown.delete)=\"!required && clearable ? clear() : ''\"\r\n        (clear)=\"clear()\"\r\n        (keyup.F1)=\"f1KeyUp()\"\r\n        [notFoundText]=\"notFoundText\"\r\n        placeholder=\"Seleccionar\"\r\n        (keyup.enter)=\"enterKeyUp()\"\r\n        [clearAllText]=\"clearAllText\"\r\n        [searchable]=\"searchable\"\r\n        (keyup.ArrowLeft)=\"leftKeyUp()\"\r\n        [appendTo]=\"appendTo\"\r\n        [loading]=\"loading\"\r\n        [loadingText]=\"loadingText\"\r\n        [class.ng-select-invalid]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n        [class.ng-select-touched]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n        [class.upperCase]=\"upperCase\"\r\n        [ngClass]=\"setNgClass\">\r\n        <!-- OPCIONES DE LISTADO -->\r\n        <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\r\n          <span data-toggle=\"tooltip\" title=\"{{ item.label }}\">{{ item.label }}</span>\r\n        </ng-template>\r\n      </ng-select>\r\n\r\n      <!-- tooltip-message es el icono de error -->\r\n      <tooltip-message\r\n        [label]=\"label\"\r\n        [controls]=\"controls\"\r\n        [validatorMessage]=\"validatorMessage\"\r\n        [submitted]=\"submitted\"\r\n        [tooltipMessage]=\"tooltipMessage\"></tooltip-message>\r\n    </div>\r\n    <ng-container *ngIf=\"search && refresh && redirect; else templateAction\">\r\n      <div class=\"app-ng-select-action bd-highligh\">\r\n        <button\r\n          #btnSearch\r\n          type=\"button\"\r\n          [disabled]=\"disabled || readonly\"\r\n          class=\"btn btn-success p-0 rounded-0 h-100\"\r\n          (keyup.ArrowLeft)=\"ngSelectSimple.focus()\"\r\n          style=\"background-color: orange; border-color: orange\"\r\n          (click)=\"onSearch()\">\r\n          <i class=\"fa fa-search text-white px-1\" [matTooltip]=\"'Buscar'\" matTooltipClass=\"custom-tooltip\"></i>\r\n        </button>\r\n        <button\r\n          *ngIf=\"refresh\"\r\n          type=\"button\"\r\n          [disabled]=\"disabled || readonly || isRefreshDisabled\"\r\n          class=\"btn btn-info p-0 rounded-0 h-100\"\r\n          (click)=\"onRefresh()\">\r\n          <i class=\"fa fa-refresh text-white px-1\" [matTooltip]=\"'Refrescar'\" matTooltipClass=\"bg-info\"></i>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-success p-0 rounded-0 h-100\"\r\n          (click)=\"openEnlace()\"\r\n          [disabled]=\"disabled || readonly || isRedirectDisabled\">\r\n          <em class=\"fa-regular fa-rectangle-list text-white px-1\" [matTooltip]=\"titleRedirect!\" matTooltipClass=\"bg-success\"> </em>\r\n        </button>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <ng-template #templateAction>\r\n      <div class=\"app-ng-select-button bd-highlight\" *ngIf=\"search\">\r\n        <button\r\n          #btnSearch\r\n          type=\"button\"\r\n          [disabled]=\"disabled || readonly\"\r\n          class=\"btn btn-success p-0 rounded-0 h-100\"\r\n          (keyup.ArrowLeft)=\"ngSelectSimple.focus()\"\r\n          (click)=\"onSearch()\">\r\n          <i class=\"fa fa-search text-white px-1\" [matTooltip]=\"'Buscar'\" matTooltipClass=\"bg-success\"></i>\r\n        </button>\r\n      </div>\r\n      <div class=\"app-ng-select-button bd-highlight\" *ngIf=\"refresh\">\r\n        <button\r\n          *ngIf=\"refresh\"\r\n          type=\"button\"\r\n          [disabled]=\"disabled || readonly || isRefreshDisabled\"\r\n          class=\"btn btn-info p-0 rounded-0 h-100\"\r\n          (click)=\"onRefresh()\">\r\n          <i class=\"fa fa-refresh text-white px-1\" [matTooltip]=\"'Refrescar'\" matTooltipClass=\"bg-info\"></i>\r\n        </button>\r\n      </div>\r\n      <div class=\"app-ng-select-button bd-highlight\" *ngIf=\"redirect\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-success p-0 rounded-0 h-100\"\r\n          style=\"padding-top: 3px; padding-bottom: 7px; border-radius: 0px\"\r\n          (click)=\"openEnlace()\"\r\n          [disabled]=\"disabled || readonly || isRedirectDisabled\">\r\n          <em class=\"fa-regular fa-rectangle-list text-white px-1\" [matTooltip]=\"titleRedirect!\" matTooltipClass=\"bg-success\"> </em>\r\n        </button>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-content select=\"[more-buttons]\"></ng-content>\r\n  </div>\r\n</div>\r\n\r\n<!-- error-message es el mansaje que aparece abajo del componente -->\r\n<error-message\r\n  [label]=\"label\"\r\n  [controls]=\"controls\"\r\n  [validatorMessage]=\"validatorMessage\"\r\n  [submitted]=\"submitted\"\r\n  [tooltipMessage]=\"tooltipMessage\"></error-message>\r\n", styles: ["ng-select-simple{display:block}.sumax-label{color:#646c9a!important}.input-icon tooltip-message{color:#ccc;position:absolute;z-index:3;font-size:16px;text-align:center;right:9px;top:50%;transform:translateY(-50%)}.input-icon.right>.form-control{padding-right:33px;padding-left:12px}.upperCase .ng-select-container .ng-value-container .ng-input>input{text-transform:uppercase}.app-ng-select-button{width:34px}.app-ng-select-button button{width:100%}.app-ng-selec-container{width:calc(100% - 34px)}.ng-select-container-fullbuttons{width:calc(100% - 102px)}.app-ng-select-action{width:8rem}.app-ng-select-action button{min-width:2rem;width:33%}.overflow-box{padding:5px;height:100px;border:1px solid #999;overflow:hidden}.ng-dropdown-panel{width:auto!important;max-width:550px;min-width:100%}.custom-tooltip{--mdc-plain-tooltip-container-color: orange}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.errorMessageComponent, selector: "error-message", inputs: ["tooltipMessage", "validatorMessage", "controls", "label", "submitted"] }, { kind: "component", type: i7.tooltipMessageComponent, selector: "tooltip-message", inputs: ["tooltipMessage", "validatorMessage", "controls", "label", "submitted"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i9.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i9.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "ngSelectSimple", first: true, predicate: ["ngSelectSimple"], descendants: true }, { propertyName: "btnSearch", first: true, predicate: ["btnSearch"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<label *ngIf=\"label != null && label != '' && showLabel\" class=\"d-flex sumax-label mb-0 p-0\">\r\n  <span *ngIf=\"!templateLabel; else templateLabel\" [title]=\"label\" style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis\">\r\n    {{ label }}\r\n  </span>\r\n  <span *ngIf=\"required\" [class.text-danger]=\"controls?.errors != null\"> *</span>\r\n  <span *ngIf=\"labelInfo\">\r\n    <i class=\"fa fa-exclamation-circle text-info ms-2\" [matTooltip]=\"textLabelInfo\" matTooltipClass=\"bg-info\"></i>\r\n  </span>\r\n</label>\r\n\r\n<div\r\n  [class.input-icon]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n  [class.right]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n  [class.refresh]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted && refresh\"\r\n  [class.search]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted && search\">\r\n  <div class=\"d-flex\">\r\n    <div\r\n      class=\"position-relative\"\r\n      [class.ng-select-container-fullbuttons]=\"search && refresh && redirect\"\r\n      [class.app-ng-selec-container]=\"search || refresh\"\r\n      [class.w-100]=\"!search && !refresh\">\r\n      <ng-select\r\n        #ngSelectSimple\r\n        [class]=\"search || refresh ? 'app-ng-select' : 'w-100'\"\r\n        [class.action]=\"search && refresh\"\r\n        [items]=\"items | async\"\r\n        [(ngModel)]=\"_value\"\r\n        [disabled]=\"disabled\"\r\n        [readonly]=\"readonly\"\r\n        (change)=\"eventChange($event)\"\r\n        (blur)=\"eventBlur($event)\"\r\n        (focus)=\"eventFocus($event)\"\r\n        (search)=\"eventSearch($event)\"\r\n        [markFirst]=\"markFirst\"\r\n        [clearable]=\"!required && clearable\"\r\n        [virtualScroll]=\"virtualScroll\"\r\n        [inputAttrs]=\"{ autocomplete: autocomplete }\"\r\n        [clearOnBackspace]=\"clearOnBackspace\"\r\n        [openOnEnter]=\"openOnEnter\"\r\n        (keydown.delete)=\"!required && clearable ? clear() : ''\"\r\n        (clear)=\"clear()\"\r\n        (keyup.F1)=\"f1KeyUp()\"\r\n        [notFoundText]=\"notFoundText\"\r\n        placeholder=\"Seleccionar\"\r\n        (keyup.enter)=\"enterKeyUp()\"\r\n        [clearAllText]=\"clearAllText\"\r\n        [searchable]=\"searchable\"\r\n        (keyup.ArrowLeft)=\"leftKeyUp()\"\r\n        [appendTo]=\"appendTo\"\r\n        [loading]=\"loading\"\r\n        [loadingText]=\"loadingText\"\r\n        [class.ng-select-invalid]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n        [class.ng-select-touched]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n        [class.upperCase]=\"upperCase\"\r\n        [ngClass]=\"setNgClass\">\r\n        <!-- OPCIONES DE LISTADO -->\r\n        <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\r\n          <span data-toggle=\"tooltip\" title=\"{{ item.label }}\">{{ item.label }}</span>\r\n        </ng-template>\r\n      </ng-select>\r\n\r\n      <!-- tooltip-message es el icono de error -->\r\n      <tooltip-message\r\n        [label]=\"label\"\r\n        [controls]=\"controls\"\r\n        [validatorMessage]=\"validatorMessage\"\r\n        [submitted]=\"submitted\"\r\n        [tooltipMessage]=\"tooltipMessage\"></tooltip-message>\r\n    </div>\r\n    <ng-container *ngIf=\"search && refresh && redirect; else templateAction\">\r\n      <div class=\"app-ng-select-action bd-highligh\">\r\n        <button\r\n          #btnSearch\r\n          type=\"button\"\r\n          [disabled]=\"disabled || readonly\"\r\n          class=\"btn btn-success p-0 rounded-0 h-100\"\r\n          (keyup.ArrowLeft)=\"ngSelectSimple.focus()\"\r\n          style=\"background-color: orange; border-color: orange\"\r\n          (click)=\"onSearch()\">\r\n          <i class=\"fa fa-search text-white px-1\" [matTooltip]=\"'Buscar'\" matTooltipClass=\"custom-tooltip\"></i>\r\n        </button>\r\n        <button\r\n          *ngIf=\"refresh\"\r\n          type=\"button\"\r\n          [disabled]=\"disabled || readonly || isRefreshDisabled\"\r\n          class=\"btn btn-info p-0 rounded-0 h-100\"\r\n          (click)=\"onRefresh()\">\r\n          <i class=\"fa fa-refresh text-white px-1\" [matTooltip]=\"'Refrescar'\" matTooltipClass=\"bg-info\"></i>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-success p-0 rounded-0 h-100\"\r\n          (click)=\"openEnlace()\"\r\n          [disabled]=\"disabled || readonly || isRedirectDisabled\">\r\n          <em class=\"fa-regular fa-rectangle-list text-white px-1\" [matTooltip]=\"titleRedirect!\" matTooltipClass=\"bg-success\"> </em>\r\n        </button>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <ng-template #templateAction>\r\n      <div class=\"app-ng-select-button bd-highlight\" *ngIf=\"search\">\r\n        <button\r\n          #btnSearch\r\n          type=\"button\"\r\n          [disabled]=\"disabled || readonly\"\r\n          class=\"btn btn-success p-0 rounded-0 h-100\"\r\n          (keyup.ArrowLeft)=\"ngSelectSimple.focus()\"\r\n          (click)=\"onSearch()\">\r\n          <i class=\"fa fa-search text-white px-1\" [matTooltip]=\"'Buscar'\" matTooltipClass=\"bg-success\"></i>\r\n        </button>\r\n      </div>\r\n      <div class=\"app-ng-select-button bd-highlight\" *ngIf=\"refresh\">\r\n        <button\r\n          *ngIf=\"refresh\"\r\n          type=\"button\"\r\n          [disabled]=\"disabled || readonly || isRefreshDisabled\"\r\n          class=\"btn btn-info p-0 rounded-0 h-100\"\r\n          (click)=\"onRefresh()\">\r\n          <i class=\"fa fa-refresh text-white px-1\" [matTooltip]=\"'Refrescar'\" matTooltipClass=\"bg-info\"></i>\r\n        </button>\r\n      </div>\r\n      <div class=\"app-ng-select-button bd-highlight\" *ngIf=\"redirect\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-success p-0 rounded-0 h-100\"\r\n          style=\"padding-top: 3px; padding-bottom: 7px; border-radius: 0px\"\r\n          (click)=\"openEnlace()\"\r\n          [disabled]=\"disabled || readonly || isRedirectDisabled\">\r\n          <em class=\"fa-regular fa-rectangle-list text-white px-1\" [matTooltip]=\"titleRedirect!\" matTooltipClass=\"bg-success\"> </em>\r\n        </button>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-content select=\"[more-buttons]\"></ng-content>\r\n  </div>\r\n</div>\r\n\r\n<!-- error-message es el mansaje que aparece abajo del componente -->\r\n<error-message\r\n  [label]=\"label\"\r\n  [controls]=\"controls\"\r\n  [validatorMessage]=\"validatorMessage\"\r\n  [submitted]=\"submitted\"\r\n  [tooltipMessage]=\"tooltipMessage\"></error-message>\r\n", styles: ["ng-select-simple{display:block}.sumax-label{color:#646c9a!important}.input-icon tooltip-message{color:#ccc;position:absolute;z-index:3;font-size:16px;text-align:center;right:9px;top:50%;transform:translateY(-50%)}.input-icon.right>.form-control{padding-right:33px;padding-left:12px}.upperCase .ng-select-container .ng-value-container .ng-input>input{text-transform:uppercase}.app-ng-select-button{width:34px}.app-ng-select-button button{width:100%}.app-ng-selec-container{width:calc(100% - 34px)}.ng-select-container-fullbuttons{width:calc(100% - 102px)}.app-ng-select-action{width:8rem}.app-ng-select-action button{min-width:2rem;width:33%}.overflow-box{padding:5px;height:100px;border:1px solid #999;overflow:hidden}.ng-dropdown-panel{width:auto!important;max-width:550px;min-width:100%}.custom-tooltip{--mdc-plain-tooltip-container-color: orange}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#999!important}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.errorMessageComponent, selector: "error-message", inputs: ["tooltipMessage", "validatorMessage", "controls", "label", "submitted"] }, { kind: "component", type: i7.tooltipMessageComponent, selector: "tooltip-message", inputs: ["tooltipMessage", "validatorMessage", "controls", "label", "submitted"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i9.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i9.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgSelectSimpleComponent, decorators: [{
             type: Component,
@@ -540,7 +540,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                             useExisting: forwardRef(() => NgSelectSimpleComponent),
                             multi: true,
                         },
-                    ], encapsulation: ViewEncapsulation.None, template: "<label *ngIf=\"label != null && label != '' && showLabel\" class=\"d-flex sumax-label mb-0 p-0\">\r\n  <span *ngIf=\"!templateLabel; else templateLabel\" [title]=\"label\" style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis\">\r\n    {{ label }}\r\n  </span>\r\n  <span *ngIf=\"required\" [class.text-danger]=\"controls?.errors != null\"> *</span>\r\n  <span *ngIf=\"labelInfo\">\r\n    <i class=\"fa fa-exclamation-circle text-info ms-2\" [matTooltip]=\"textLabelInfo\" matTooltipClass=\"bg-info\"></i>\r\n  </span>\r\n</label>\r\n\r\n<div\r\n  [class.input-icon]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n  [class.right]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n  [class.refresh]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted && refresh\"\r\n  [class.search]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted && search\">\r\n  <div class=\"d-flex\">\r\n    <div\r\n      class=\"position-relative\"\r\n      [class.ng-select-container-fullbuttons]=\"search && refresh && redirect\"\r\n      [class.app-ng-selec-container]=\"search || refresh\"\r\n      [class.w-100]=\"!search && !refresh\">\r\n      <ng-select\r\n        #ngSelectSimple\r\n        [class]=\"search || refresh ? 'app-ng-select' : 'w-100'\"\r\n        [class.action]=\"search && refresh\"\r\n        [items]=\"items | async\"\r\n        [(ngModel)]=\"_value\"\r\n        [disabled]=\"disabled\"\r\n        [readonly]=\"readonly\"\r\n        (change)=\"eventChange($event)\"\r\n        (blur)=\"eventBlur($event)\"\r\n        (focus)=\"eventFocus($event)\"\r\n        (search)=\"eventSearch($event)\"\r\n        [markFirst]=\"markFirst\"\r\n        [clearable]=\"!required && clearable\"\r\n        [virtualScroll]=\"virtualScroll\"\r\n        [inputAttrs]=\"{ autocomplete: autocomplete }\"\r\n        [clearOnBackspace]=\"clearOnBackspace\"\r\n        [openOnEnter]=\"openOnEnter\"\r\n        (keydown.delete)=\"!required && clearable ? clear() : ''\"\r\n        (clear)=\"clear()\"\r\n        (keyup.F1)=\"f1KeyUp()\"\r\n        [notFoundText]=\"notFoundText\"\r\n        placeholder=\"Seleccionar\"\r\n        (keyup.enter)=\"enterKeyUp()\"\r\n        [clearAllText]=\"clearAllText\"\r\n        [searchable]=\"searchable\"\r\n        (keyup.ArrowLeft)=\"leftKeyUp()\"\r\n        [appendTo]=\"appendTo\"\r\n        [loading]=\"loading\"\r\n        [loadingText]=\"loadingText\"\r\n        [class.ng-select-invalid]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n        [class.ng-select-touched]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n        [class.upperCase]=\"upperCase\"\r\n        [ngClass]=\"setNgClass\">\r\n        <!-- OPCIONES DE LISTADO -->\r\n        <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\r\n          <span data-toggle=\"tooltip\" title=\"{{ item.label }}\">{{ item.label }}</span>\r\n        </ng-template>\r\n      </ng-select>\r\n\r\n      <!-- tooltip-message es el icono de error -->\r\n      <tooltip-message\r\n        [label]=\"label\"\r\n        [controls]=\"controls\"\r\n        [validatorMessage]=\"validatorMessage\"\r\n        [submitted]=\"submitted\"\r\n        [tooltipMessage]=\"tooltipMessage\"></tooltip-message>\r\n    </div>\r\n    <ng-container *ngIf=\"search && refresh && redirect; else templateAction\">\r\n      <div class=\"app-ng-select-action bd-highligh\">\r\n        <button\r\n          #btnSearch\r\n          type=\"button\"\r\n          [disabled]=\"disabled || readonly\"\r\n          class=\"btn btn-success p-0 rounded-0 h-100\"\r\n          (keyup.ArrowLeft)=\"ngSelectSimple.focus()\"\r\n          style=\"background-color: orange; border-color: orange\"\r\n          (click)=\"onSearch()\">\r\n          <i class=\"fa fa-search text-white px-1\" [matTooltip]=\"'Buscar'\" matTooltipClass=\"custom-tooltip\"></i>\r\n        </button>\r\n        <button\r\n          *ngIf=\"refresh\"\r\n          type=\"button\"\r\n          [disabled]=\"disabled || readonly || isRefreshDisabled\"\r\n          class=\"btn btn-info p-0 rounded-0 h-100\"\r\n          (click)=\"onRefresh()\">\r\n          <i class=\"fa fa-refresh text-white px-1\" [matTooltip]=\"'Refrescar'\" matTooltipClass=\"bg-info\"></i>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-success p-0 rounded-0 h-100\"\r\n          (click)=\"openEnlace()\"\r\n          [disabled]=\"disabled || readonly || isRedirectDisabled\">\r\n          <em class=\"fa-regular fa-rectangle-list text-white px-1\" [matTooltip]=\"titleRedirect!\" matTooltipClass=\"bg-success\"> </em>\r\n        </button>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <ng-template #templateAction>\r\n      <div class=\"app-ng-select-button bd-highlight\" *ngIf=\"search\">\r\n        <button\r\n          #btnSearch\r\n          type=\"button\"\r\n          [disabled]=\"disabled || readonly\"\r\n          class=\"btn btn-success p-0 rounded-0 h-100\"\r\n          (keyup.ArrowLeft)=\"ngSelectSimple.focus()\"\r\n          (click)=\"onSearch()\">\r\n          <i class=\"fa fa-search text-white px-1\" [matTooltip]=\"'Buscar'\" matTooltipClass=\"bg-success\"></i>\r\n        </button>\r\n      </div>\r\n      <div class=\"app-ng-select-button bd-highlight\" *ngIf=\"refresh\">\r\n        <button\r\n          *ngIf=\"refresh\"\r\n          type=\"button\"\r\n          [disabled]=\"disabled || readonly || isRefreshDisabled\"\r\n          class=\"btn btn-info p-0 rounded-0 h-100\"\r\n          (click)=\"onRefresh()\">\r\n          <i class=\"fa fa-refresh text-white px-1\" [matTooltip]=\"'Refrescar'\" matTooltipClass=\"bg-info\"></i>\r\n        </button>\r\n      </div>\r\n      <div class=\"app-ng-select-button bd-highlight\" *ngIf=\"redirect\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-success p-0 rounded-0 h-100\"\r\n          style=\"padding-top: 3px; padding-bottom: 7px; border-radius: 0px\"\r\n          (click)=\"openEnlace()\"\r\n          [disabled]=\"disabled || readonly || isRedirectDisabled\">\r\n          <em class=\"fa-regular fa-rectangle-list text-white px-1\" [matTooltip]=\"titleRedirect!\" matTooltipClass=\"bg-success\"> </em>\r\n        </button>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-content select=\"[more-buttons]\"></ng-content>\r\n  </div>\r\n</div>\r\n\r\n<!-- error-message es el mansaje que aparece abajo del componente -->\r\n<error-message\r\n  [label]=\"label\"\r\n  [controls]=\"controls\"\r\n  [validatorMessage]=\"validatorMessage\"\r\n  [submitted]=\"submitted\"\r\n  [tooltipMessage]=\"tooltipMessage\"></error-message>\r\n", styles: ["ng-select-simple{display:block}.sumax-label{color:#646c9a!important}.input-icon tooltip-message{color:#ccc;position:absolute;z-index:3;font-size:16px;text-align:center;right:9px;top:50%;transform:translateY(-50%)}.input-icon.right>.form-control{padding-right:33px;padding-left:12px}.upperCase .ng-select-container .ng-value-container .ng-input>input{text-transform:uppercase}.app-ng-select-button{width:34px}.app-ng-select-button button{width:100%}.app-ng-selec-container{width:calc(100% - 34px)}.ng-select-container-fullbuttons{width:calc(100% - 102px)}.app-ng-select-action{width:8rem}.app-ng-select-action button{min-width:2rem;width:33%}.overflow-box{padding:5px;height:100px;border:1px solid #999;overflow:hidden}.ng-dropdown-panel{width:auto!important;max-width:550px;min-width:100%}.custom-tooltip{--mdc-plain-tooltip-container-color: orange}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, template: "<label *ngIf=\"label != null && label != '' && showLabel\" class=\"d-flex sumax-label mb-0 p-0\">\r\n  <span *ngIf=\"!templateLabel; else templateLabel\" [title]=\"label\" style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis\">\r\n    {{ label }}\r\n  </span>\r\n  <span *ngIf=\"required\" [class.text-danger]=\"controls?.errors != null\"> *</span>\r\n  <span *ngIf=\"labelInfo\">\r\n    <i class=\"fa fa-exclamation-circle text-info ms-2\" [matTooltip]=\"textLabelInfo\" matTooltipClass=\"bg-info\"></i>\r\n  </span>\r\n</label>\r\n\r\n<div\r\n  [class.input-icon]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n  [class.right]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n  [class.refresh]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted && refresh\"\r\n  [class.search]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted && search\">\r\n  <div class=\"d-flex\">\r\n    <div\r\n      class=\"position-relative\"\r\n      [class.ng-select-container-fullbuttons]=\"search && refresh && redirect\"\r\n      [class.app-ng-selec-container]=\"search || refresh\"\r\n      [class.w-100]=\"!search && !refresh\">\r\n      <ng-select\r\n        #ngSelectSimple\r\n        [class]=\"search || refresh ? 'app-ng-select' : 'w-100'\"\r\n        [class.action]=\"search && refresh\"\r\n        [items]=\"items | async\"\r\n        [(ngModel)]=\"_value\"\r\n        [disabled]=\"disabled\"\r\n        [readonly]=\"readonly\"\r\n        (change)=\"eventChange($event)\"\r\n        (blur)=\"eventBlur($event)\"\r\n        (focus)=\"eventFocus($event)\"\r\n        (search)=\"eventSearch($event)\"\r\n        [markFirst]=\"markFirst\"\r\n        [clearable]=\"!required && clearable\"\r\n        [virtualScroll]=\"virtualScroll\"\r\n        [inputAttrs]=\"{ autocomplete: autocomplete }\"\r\n        [clearOnBackspace]=\"clearOnBackspace\"\r\n        [openOnEnter]=\"openOnEnter\"\r\n        (keydown.delete)=\"!required && clearable ? clear() : ''\"\r\n        (clear)=\"clear()\"\r\n        (keyup.F1)=\"f1KeyUp()\"\r\n        [notFoundText]=\"notFoundText\"\r\n        placeholder=\"Seleccionar\"\r\n        (keyup.enter)=\"enterKeyUp()\"\r\n        [clearAllText]=\"clearAllText\"\r\n        [searchable]=\"searchable\"\r\n        (keyup.ArrowLeft)=\"leftKeyUp()\"\r\n        [appendTo]=\"appendTo\"\r\n        [loading]=\"loading\"\r\n        [loadingText]=\"loadingText\"\r\n        [class.ng-select-invalid]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n        [class.ng-select-touched]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n        [class.upperCase]=\"upperCase\"\r\n        [ngClass]=\"setNgClass\">\r\n        <!-- OPCIONES DE LISTADO -->\r\n        <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\r\n          <span data-toggle=\"tooltip\" title=\"{{ item.label }}\">{{ item.label }}</span>\r\n        </ng-template>\r\n      </ng-select>\r\n\r\n      <!-- tooltip-message es el icono de error -->\r\n      <tooltip-message\r\n        [label]=\"label\"\r\n        [controls]=\"controls\"\r\n        [validatorMessage]=\"validatorMessage\"\r\n        [submitted]=\"submitted\"\r\n        [tooltipMessage]=\"tooltipMessage\"></tooltip-message>\r\n    </div>\r\n    <ng-container *ngIf=\"search && refresh && redirect; else templateAction\">\r\n      <div class=\"app-ng-select-action bd-highligh\">\r\n        <button\r\n          #btnSearch\r\n          type=\"button\"\r\n          [disabled]=\"disabled || readonly\"\r\n          class=\"btn btn-success p-0 rounded-0 h-100\"\r\n          (keyup.ArrowLeft)=\"ngSelectSimple.focus()\"\r\n          style=\"background-color: orange; border-color: orange\"\r\n          (click)=\"onSearch()\">\r\n          <i class=\"fa fa-search text-white px-1\" [matTooltip]=\"'Buscar'\" matTooltipClass=\"custom-tooltip\"></i>\r\n        </button>\r\n        <button\r\n          *ngIf=\"refresh\"\r\n          type=\"button\"\r\n          [disabled]=\"disabled || readonly || isRefreshDisabled\"\r\n          class=\"btn btn-info p-0 rounded-0 h-100\"\r\n          (click)=\"onRefresh()\">\r\n          <i class=\"fa fa-refresh text-white px-1\" [matTooltip]=\"'Refrescar'\" matTooltipClass=\"bg-info\"></i>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-success p-0 rounded-0 h-100\"\r\n          (click)=\"openEnlace()\"\r\n          [disabled]=\"disabled || readonly || isRedirectDisabled\">\r\n          <em class=\"fa-regular fa-rectangle-list text-white px-1\" [matTooltip]=\"titleRedirect!\" matTooltipClass=\"bg-success\"> </em>\r\n        </button>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <ng-template #templateAction>\r\n      <div class=\"app-ng-select-button bd-highlight\" *ngIf=\"search\">\r\n        <button\r\n          #btnSearch\r\n          type=\"button\"\r\n          [disabled]=\"disabled || readonly\"\r\n          class=\"btn btn-success p-0 rounded-0 h-100\"\r\n          (keyup.ArrowLeft)=\"ngSelectSimple.focus()\"\r\n          (click)=\"onSearch()\">\r\n          <i class=\"fa fa-search text-white px-1\" [matTooltip]=\"'Buscar'\" matTooltipClass=\"bg-success\"></i>\r\n        </button>\r\n      </div>\r\n      <div class=\"app-ng-select-button bd-highlight\" *ngIf=\"refresh\">\r\n        <button\r\n          *ngIf=\"refresh\"\r\n          type=\"button\"\r\n          [disabled]=\"disabled || readonly || isRefreshDisabled\"\r\n          class=\"btn btn-info p-0 rounded-0 h-100\"\r\n          (click)=\"onRefresh()\">\r\n          <i class=\"fa fa-refresh text-white px-1\" [matTooltip]=\"'Refrescar'\" matTooltipClass=\"bg-info\"></i>\r\n        </button>\r\n      </div>\r\n      <div class=\"app-ng-select-button bd-highlight\" *ngIf=\"redirect\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-success p-0 rounded-0 h-100\"\r\n          style=\"padding-top: 3px; padding-bottom: 7px; border-radius: 0px\"\r\n          (click)=\"openEnlace()\"\r\n          [disabled]=\"disabled || readonly || isRedirectDisabled\">\r\n          <em class=\"fa-regular fa-rectangle-list text-white px-1\" [matTooltip]=\"titleRedirect!\" matTooltipClass=\"bg-success\"> </em>\r\n        </button>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-content select=\"[more-buttons]\"></ng-content>\r\n  </div>\r\n</div>\r\n\r\n<!-- error-message es el mansaje que aparece abajo del componente -->\r\n<error-message\r\n  [label]=\"label\"\r\n  [controls]=\"controls\"\r\n  [validatorMessage]=\"validatorMessage\"\r\n  [submitted]=\"submitted\"\r\n  [tooltipMessage]=\"tooltipMessage\"></error-message>\r\n", styles: ["ng-select-simple{display:block}.sumax-label{color:#646c9a!important}.input-icon tooltip-message{color:#ccc;position:absolute;z-index:3;font-size:16px;text-align:center;right:9px;top:50%;transform:translateY(-50%)}.input-icon.right>.form-control{padding-right:33px;padding-left:12px}.upperCase .ng-select-container .ng-value-container .ng-input>input{text-transform:uppercase}.app-ng-select-button{width:34px}.app-ng-select-button button{width:100%}.app-ng-selec-container{width:calc(100% - 34px)}.ng-select-container-fullbuttons{width:calc(100% - 102px)}.app-ng-select-action{width:8rem}.app-ng-select-action button{min-width:2rem;width:33%}.overflow-box{padding:5px;height:100px;border:1px solid #999;overflow:hidden}.ng-dropdown-panel{width:auto!important;max-width:550px;min-width:100%}.custom-tooltip{--mdc-plain-tooltip-container-color: orange}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#999!important}\n"] }]
         }], ctorParameters: () => [{ type: i1.MessageUtilService }, { type: i2.MatDialog }, { type: i3.NgSelectSimpleService }], propDecorators: { ngSelectSimple: [{
                 type: ViewChild,
                 args: ["ngSelectSimple"]

package/fesm2022/ngx-sumax-erp-components.mjs

@@ -744,6 +744,24 @@ class DatePickerComponent {
     onKeyUpEnter() {
         this.enterKeyUp();
     }
+    handlePaste(event) {
+        if (!this.restrictInputLength)
+            return;
+        event.preventDefault();
+        if (!this.isApplicableToHandlePaste(event))
+            return;
+        const pastedText = event.clipboardData?.getData('text') || '';
+        if (!pastedText)
+            return;
+        this.formatDate(pastedText);
+    }
+    isApplicableToHandlePaste(event) {
+        const input = event.target;
+        if (this._hasTextSelection(input)) {
+            return this._isFullySelected(input);
+        }
+        return true;
+    }
     handleKeyPress(event) {
         if (this.restrictInputLength) {
             this._handleRestrictInputLength(event);
@@ -775,6 +793,11 @@ class DatePickerComponent {
     _hasTextSelection(input) {
         return input.selectionStart !== input.selectionEnd;
     }
+    _isFullySelected(input) {
+        return input.selectionStart === 0 &&
+            input.selectionEnd === input.value.length &&
+            input.value.length > 0;
+    }
     _isInputLengthExceeded(currentValue) {
         const hasSlashes = /\//.test(currentValue);
         // DD/MM/YYYY (máximo 10 caracteres) o 12032025 (máximo 8 dígitos)
@@ -856,7 +879,10 @@ class DatePickerComponent {
         }
     }
     focusOut(value) {
-        if (value && value.trim() !== '') {
+        this.formatDate(value);
+    }
+    formatDate(value) {
+        if (value && value?.trim() !== '') {
             if (this._tempValue === value)
                 return;
             this.ngbDatepicker.close();
@@ -902,7 +928,7 @@ class DatePickerComponent {
             I18n,
             { provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n },
             { provide: NgbDateParserFormatter, useClass: CustomDatepickerFormat },
-        ], viewQueries: [{ propertyName: "ngbDatepicker", first: true, predicate: ["fecha"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<label *ngIf=\"label != null && label != '' && showLabel\" class=\"d-flex sumax-label mb-0 p-0\"\r\n  ><span [title]=\"label\" style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis\">{{ label }}</span>\r\n  <span *ngIf=\"required\" class=\"ms-1\" [class.text-danger]=\"controls?.errors != null\"> *</span>\r\n  <span *ngIf=\"labelInfo\">\r\n    <i class=\"fa fa-exclamation-circle text-info ms-2\" [matTooltip]=\"textLabelInfo\" matTooltipClass=\"bg-info\"></i>\r\n  </span>\r\n</label>\r\n<div\r\n  [class.input-icon]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n  [class.right]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\">\r\n  <!-- tooltip-message es el icono de error -->\r\n\r\n  <div class=\"d-flex p-0 group-input-button position-relative\">\r\n    <tooltip-message\r\n    [label]=\"label\"\r\n    [controls]=\"controls\"\r\n    [validatorMessage]=\"validatorMessage\"\r\n    [submitted]=\"submitted\"\r\n    [tooltipMessage]=\"tooltipMessage\"></tooltip-message>\r\n    <input\r\n      type=\"text\"\r\n      [attr.autocomplete]=\"autocomplete\"\r\n      [class.is-invalid]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n      [disabled]=\"disabled\"\r\n      [readonly]=\"readonly\"\r\n      (keyup.enter)=\"onKeyUpEnter()\"\r\n      (keyup.ArrowUp)=\"arrowUpKeyUp()\"\r\n      (keypress)=\"handleKeyPress($event)\"\r\n      (input)=\"onInput($any($event.target).value)\"\r\n      (dateSelect)=\"onInput($event)\"\r\n      (focus)=\"onFocus($any($event.target).value)\"\r\n      (focusout)=\"focusOut($any($event.target).value)\"\r\n      (blur)=\"onBlur()\"\r\n      class=\"form-control form-control-sm rounded-left use-input\"\r\n      container=\"body\"\r\n      placeholder=\"dd/mm/yyyy\"\r\n      [minDate]=\"minDate\"\r\n      [maxDate]=\"maxDate\"\r\n      name=\"fecha\"\r\n      ngbDatepicker\r\n      #fecha=\"ngbDatepicker\"\r\n      [(ngModel)]=\"value\" />\r\n    <button type=\"button\" [disabled]=\"disabled || readonly\" class=\"btn btn-info p-0 rounded-0 use-button\" (click)=\"fecha.toggle()\">\r\n      <!-- <mat-icon class=\"text-white pt-1\" style=\"font-size: 18px;\" [matTooltip]=\"'Calendario'\" matTooltipClass=\"bg-info\">calendar_today</mat-icon> -->\r\n      <i class=\"fa fa-calendar text-white px-1\" aria-hidden=\"true\"></i>\r\n    </button>\r\n  </div>\r\n</div>\r\n<!-- error-message es el mansaje que aparece abajo del componente -->\r\n<error-message\r\n  [label]=\"label\"\r\n  [controls]=\"controls\"\r\n  [validatorMessage]=\"validatorMessage\"\r\n  [submitted]=\"submitted\"\r\n  [tooltipMessage]=\"tooltipMessage\"></error-message>\r\n", styles: ["button[disabled]{pointer-events:none}.sumax-label{color:#646c9a!important}.input-icon tooltip-message{color:#ccc;position:absolute;z-index:3;width:16px;font-size:16px;text-align:center;left:auto;right:35px;top:50%;transform:translateY(-50%)}.input-icon.right>.form-control{padding-right:33px;padding-left:12px}.was-validated .form-control:invalid:focus,.form-control.is-invalid:focus{border-color:#dc3545;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #fde6e8!important}.was-validated .form-control:invalid,.form-control.is-invalid{background-image:none;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #fde6e8!important}.form-control:focus,.form-control:active{border-color:#007eff;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #007eff1a!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: errorMessageComponent, selector: "error-message", inputs: ["tooltipMessage", "validatorMessage", "controls", "label", "submitted"] }, { kind: "component", type: tooltipMessageComponent, selector: "tooltip-message", inputs: ["tooltipMessage", "validatorMessage", "controls", "label", "submitted"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }] }); }
+        ], viewQueries: [{ propertyName: "ngbDatepicker", first: true, predicate: ["fecha"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<label *ngIf=\"label != null && label != '' && showLabel\" class=\"d-flex sumax-label mb-0 p-0\"\r\n  ><span [title]=\"label\" style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis\">{{ label }}</span>\r\n  <span *ngIf=\"required\" class=\"ms-1\" [class.text-danger]=\"controls?.errors != null\"> *</span>\r\n  <span *ngIf=\"labelInfo\">\r\n    <i class=\"fa fa-exclamation-circle text-info ms-2\" [matTooltip]=\"textLabelInfo\" matTooltipClass=\"bg-info\"></i>\r\n  </span>\r\n</label>\r\n<div\r\n  [class.input-icon]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n  [class.right]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\">\r\n  <!-- tooltip-message es el icono de error -->\r\n\r\n  <div class=\"d-flex p-0 group-input-button position-relative\">\r\n    <tooltip-message\r\n      [label]=\"label\"\r\n      [controls]=\"controls\"\r\n      [validatorMessage]=\"validatorMessage\"\r\n      [submitted]=\"submitted\"\r\n      [tooltipMessage]=\"tooltipMessage\"></tooltip-message>\r\n    <input\r\n      type=\"text\"\r\n      [attr.autocomplete]=\"autocomplete\"\r\n      [class.is-invalid]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n      [disabled]=\"disabled\"\r\n      [readonly]=\"readonly\"\r\n      (keyup.enter)=\"onKeyUpEnter()\"\r\n      (keyup.ArrowUp)=\"arrowUpKeyUp()\"\r\n      (keypress)=\"handleKeyPress($event)\"\r\n      (input)=\"onInput($any($event.target).value)\"\r\n      (dateSelect)=\"onInput($event)\"\r\n      (focus)=\"onFocus($any($event.target).value)\"\r\n      (focusout)=\"focusOut($any($event.target).value)\"\r\n      (blur)=\"onBlur()\"\r\n      (paste)=\"handlePaste($event)\"\r\n      class=\"form-control form-control-sm rounded-left use-input\"\r\n      container=\"body\"\r\n      placeholder=\"dd/mm/yyyy\"\r\n      [minDate]=\"{ year: 1960, month: 1, day: 1 }\"\r\n      [maxDate]=\"maxDate\"\r\n      name=\"fecha\"\r\n      ngbDatepicker\r\n      #fecha=\"ngbDatepicker\"\r\n      [(ngModel)]=\"value\" />\r\n    <button type=\"button\" [disabled]=\"disabled || readonly\" class=\"btn btn-info p-0 rounded-0 use-button\" (click)=\"fecha.toggle()\">\r\n      <!-- <mat-icon class=\"text-white pt-1\" style=\"font-size: 18px;\" [matTooltip]=\"'Calendario'\" matTooltipClass=\"bg-info\">calendar_today</mat-icon> -->\r\n      <i class=\"fa fa-calendar text-white px-1\" aria-hidden=\"true\"></i>\r\n    </button>\r\n  </div>\r\n</div>\r\n<!-- error-message es el mansaje que aparece abajo del componente -->\r\n<error-message\r\n  [label]=\"label\"\r\n  [controls]=\"controls\"\r\n  [validatorMessage]=\"validatorMessage\"\r\n  [submitted]=\"submitted\"\r\n  [tooltipMessage]=\"tooltipMessage\"></error-message>\r\n", styles: ["button[disabled]{pointer-events:none}.sumax-label{color:#646c9a!important}.input-icon tooltip-message{color:#ccc;position:absolute;z-index:3;width:16px;font-size:16px;text-align:center;left:auto;right:35px;top:50%;transform:translateY(-50%)}.input-icon.right>.form-control{padding-right:33px;padding-left:12px}.was-validated .form-control:invalid:focus,.form-control.is-invalid:focus{border-color:#dc3545;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #fde6e8!important}.was-validated .form-control:invalid,.form-control.is-invalid{background-image:none;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #fde6e8!important}.form-control:focus,.form-control:active{border-color:#007eff;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #007eff1a!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: errorMessageComponent, selector: "error-message", inputs: ["tooltipMessage", "validatorMessage", "controls", "label", "submitted"] }, { kind: "component", type: tooltipMessageComponent, selector: "tooltip-message", inputs: ["tooltipMessage", "validatorMessage", "controls", "label", "submitted"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -920,7 +946,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                         I18n,
                         { provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n },
                         { provide: NgbDateParserFormatter, useClass: CustomDatepickerFormat },
-                    ], template: "<label *ngIf=\"label != null && label != '' && showLabel\" class=\"d-flex sumax-label mb-0 p-0\"\r\n  ><span [title]=\"label\" style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis\">{{ label }}</span>\r\n  <span *ngIf=\"required\" class=\"ms-1\" [class.text-danger]=\"controls?.errors != null\"> *</span>\r\n  <span *ngIf=\"labelInfo\">\r\n    <i class=\"fa fa-exclamation-circle text-info ms-2\" [matTooltip]=\"textLabelInfo\" matTooltipClass=\"bg-info\"></i>\r\n  </span>\r\n</label>\r\n<div\r\n  [class.input-icon]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n  [class.right]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\">\r\n  <!-- tooltip-message es el icono de error -->\r\n\r\n  <div class=\"d-flex p-0 group-input-button position-relative\">\r\n    <tooltip-message\r\n    [label]=\"label\"\r\n    [controls]=\"controls\"\r\n    [validatorMessage]=\"validatorMessage\"\r\n    [submitted]=\"submitted\"\r\n    [tooltipMessage]=\"tooltipMessage\"></tooltip-message>\r\n    <input\r\n      type=\"text\"\r\n      [attr.autocomplete]=\"autocomplete\"\r\n      [class.is-invalid]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n      [disabled]=\"disabled\"\r\n      [readonly]=\"readonly\"\r\n      (keyup.enter)=\"onKeyUpEnter()\"\r\n      (keyup.ArrowUp)=\"arrowUpKeyUp()\"\r\n      (keypress)=\"handleKeyPress($event)\"\r\n      (input)=\"onInput($any($event.target).value)\"\r\n      (dateSelect)=\"onInput($event)\"\r\n      (focus)=\"onFocus($any($event.target).value)\"\r\n      (focusout)=\"focusOut($any($event.target).value)\"\r\n      (blur)=\"onBlur()\"\r\n      class=\"form-control form-control-sm rounded-left use-input\"\r\n      container=\"body\"\r\n      placeholder=\"dd/mm/yyyy\"\r\n      [minDate]=\"minDate\"\r\n      [maxDate]=\"maxDate\"\r\n      name=\"fecha\"\r\n      ngbDatepicker\r\n      #fecha=\"ngbDatepicker\"\r\n      [(ngModel)]=\"value\" />\r\n    <button type=\"button\" [disabled]=\"disabled || readonly\" class=\"btn btn-info p-0 rounded-0 use-button\" (click)=\"fecha.toggle()\">\r\n      <!-- <mat-icon class=\"text-white pt-1\" style=\"font-size: 18px;\" [matTooltip]=\"'Calendario'\" matTooltipClass=\"bg-info\">calendar_today</mat-icon> -->\r\n      <i class=\"fa fa-calendar text-white px-1\" aria-hidden=\"true\"></i>\r\n    </button>\r\n  </div>\r\n</div>\r\n<!-- error-message es el mansaje que aparece abajo del componente -->\r\n<error-message\r\n  [label]=\"label\"\r\n  [controls]=\"controls\"\r\n  [validatorMessage]=\"validatorMessage\"\r\n  [submitted]=\"submitted\"\r\n  [tooltipMessage]=\"tooltipMessage\"></error-message>\r\n", styles: ["button[disabled]{pointer-events:none}.sumax-label{color:#646c9a!important}.input-icon tooltip-message{color:#ccc;position:absolute;z-index:3;width:16px;font-size:16px;text-align:center;left:auto;right:35px;top:50%;transform:translateY(-50%)}.input-icon.right>.form-control{padding-right:33px;padding-left:12px}.was-validated .form-control:invalid:focus,.form-control.is-invalid:focus{border-color:#dc3545;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #fde6e8!important}.was-validated .form-control:invalid,.form-control.is-invalid{background-image:none;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #fde6e8!important}.form-control:focus,.form-control:active{border-color:#007eff;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #007eff1a!important}\n"] }]
+                    ], template: "<label *ngIf=\"label != null && label != '' && showLabel\" class=\"d-flex sumax-label mb-0 p-0\"\r\n  ><span [title]=\"label\" style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis\">{{ label }}</span>\r\n  <span *ngIf=\"required\" class=\"ms-1\" [class.text-danger]=\"controls?.errors != null\"> *</span>\r\n  <span *ngIf=\"labelInfo\">\r\n    <i class=\"fa fa-exclamation-circle text-info ms-2\" [matTooltip]=\"textLabelInfo\" matTooltipClass=\"bg-info\"></i>\r\n  </span>\r\n</label>\r\n<div\r\n  [class.input-icon]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n  [class.right]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\">\r\n  <!-- tooltip-message es el icono de error -->\r\n\r\n  <div class=\"d-flex p-0 group-input-button position-relative\">\r\n    <tooltip-message\r\n      [label]=\"label\"\r\n      [controls]=\"controls\"\r\n      [validatorMessage]=\"validatorMessage\"\r\n      [submitted]=\"submitted\"\r\n      [tooltipMessage]=\"tooltipMessage\"></tooltip-message>\r\n    <input\r\n      type=\"text\"\r\n      [attr.autocomplete]=\"autocomplete\"\r\n      [class.is-invalid]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n      [disabled]=\"disabled\"\r\n      [readonly]=\"readonly\"\r\n      (keyup.enter)=\"onKeyUpEnter()\"\r\n      (keyup.ArrowUp)=\"arrowUpKeyUp()\"\r\n      (keypress)=\"handleKeyPress($event)\"\r\n      (input)=\"onInput($any($event.target).value)\"\r\n      (dateSelect)=\"onInput($event)\"\r\n      (focus)=\"onFocus($any($event.target).value)\"\r\n      (focusout)=\"focusOut($any($event.target).value)\"\r\n      (blur)=\"onBlur()\"\r\n      (paste)=\"handlePaste($event)\"\r\n      class=\"form-control form-control-sm rounded-left use-input\"\r\n      container=\"body\"\r\n      placeholder=\"dd/mm/yyyy\"\r\n      [minDate]=\"{ year: 1960, month: 1, day: 1 }\"\r\n      [maxDate]=\"maxDate\"\r\n      name=\"fecha\"\r\n      ngbDatepicker\r\n      #fecha=\"ngbDatepicker\"\r\n      [(ngModel)]=\"value\" />\r\n    <button type=\"button\" [disabled]=\"disabled || readonly\" class=\"btn btn-info p-0 rounded-0 use-button\" (click)=\"fecha.toggle()\">\r\n      <!-- <mat-icon class=\"text-white pt-1\" style=\"font-size: 18px;\" [matTooltip]=\"'Calendario'\" matTooltipClass=\"bg-info\">calendar_today</mat-icon> -->\r\n      <i class=\"fa fa-calendar text-white px-1\" aria-hidden=\"true\"></i>\r\n    </button>\r\n  </div>\r\n</div>\r\n<!-- error-message es el mansaje que aparece abajo del componente -->\r\n<error-message\r\n  [label]=\"label\"\r\n  [controls]=\"controls\"\r\n  [validatorMessage]=\"validatorMessage\"\r\n  [submitted]=\"submitted\"\r\n  [tooltipMessage]=\"tooltipMessage\"></error-message>\r\n", styles: ["button[disabled]{pointer-events:none}.sumax-label{color:#646c9a!important}.input-icon tooltip-message{color:#ccc;position:absolute;z-index:3;width:16px;font-size:16px;text-align:center;left:auto;right:35px;top:50%;transform:translateY(-50%)}.input-icon.right>.form-control{padding-right:33px;padding-left:12px}.was-validated .form-control:invalid:focus,.form-control.is-invalid:focus{border-color:#dc3545;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #fde6e8!important}.was-validated .form-control:invalid,.form-control.is-invalid{background-image:none;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #fde6e8!important}.form-control:focus,.form-control:active{border-color:#007eff;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #007eff1a!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: MessageUtilService }, { type: DatePickerService }, { type: i0.Renderer2 }], propDecorators: { showLabel: [{
                 type: Input
             }], label: [{
@@ -2303,7 +2329,7 @@ class DateTimePickerEditableComponent {
             I18n,
             { provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n },
             { provide: NgbDateParserFormatter, useClass: CustomDatepickerFormat },
-        ], viewQueries: [{ propertyName: "inputDateTime", first: true, predicate: ["inputDateTime"], descendants: true }, { propertyName: "btnOpen", first: true, predicate: ["btnOpen"], descendants: true }, { propertyName: "btnClean", first: true, predicate: ["btnClean"], descendants: true }, { propertyName: "ngbDatepicker", first: true, predicate: ["d2"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"row\">\r\n  <div class=\"col-12\" style=\"overflow: hidden\">\r\n    <label *ngIf=\"label != null && label != '' && showLabel\" class=\"d-flex sumax-label mb-0 p-0\"\r\n      ><span [title]=\"label\" style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis\">{{ label }}</span>\r\n      <span *ngIf=\"required\" class=\"ms-1\" [class.text-danger]=\"controls?.errors != null\"> *</span>\r\n      <span *ngIf=\"labelInfo\">\r\n        <i class=\"fa fa-exclamation-circle text-info ms-2\" [matTooltip]=\"textLabelInfo\" matTooltipClass=\"bg-info\"></i>\r\n      </span>\r\n    </label>\r\n    <input\r\n      type=\"text\"\r\n      class=\"form-control form-control-sm position-absolute\"\r\n      container=\"body\"\r\n      id=\"fakeInput\"\r\n      ngbDatepicker\r\n      [formControl]=\"dateControl\"\r\n      [autoClose]=\"'outside'\"\r\n      [footerTemplate]=\"footerTemplate\"\r\n      #d2=\"ngbDatepicker\" />\r\n    <div class=\"input-group w-100\">\r\n      <input\r\n        type=\"text\"\r\n        readonly\r\n        id=\"inputDateTime\"\r\n        #inputDateTime\r\n        style=\"flex: 1\"\r\n        [class.is-invalid]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n        [disabled]=\"disabled || readonly\"\r\n        class=\"form-control form-control-sm\"\r\n        (blur)=\"onBlur()\"\r\n        (focusout)=\"focusOutInput()\"\r\n        (keyup)=\"onKeyUp($event)\"\r\n        (dblclick)=\"preventDefault($event)\"\r\n        (click)=\"preventDefault($event)\"\r\n        (mouseup)=\"onClick($event, inputDateTime)\"\r\n        [formControl]=\"dateTimeControl\" />\r\n      <div class=\"input-group-append\">\r\n        <button\r\n          #btnOpen\r\n          (keyup.ArrowLeft)=\"goBack()\"\r\n          [disabled]=\"disabled || readonly\"\r\n          (keyup.ArrowRight)=\"clearable ? btnClean.focus() : goNext()\"\r\n          class=\"btn btn-info p-0 rounded-0 use-button\"\r\n          (click)=\"d2.toggle(); open(d2)\"\r\n          type=\"button\">\r\n          <i aria-hidden=\"true\" class=\"fa fa-calendar text-light px-1\"></i>\r\n        </button>\r\n        <button\r\n          #btnClean\r\n          class=\"btn btn-danger p-0 rounded-0 limpiar\"\r\n          [disabled]=\"disabled || readonly\"\r\n          (click)=\"limpiarTodo()\"\r\n          (keyup.ArrowLeft)=\"btnOpen.focus()\"\r\n          (keyup.ArrowRight)=\"goNext()\"\r\n          type=\"button\">\r\n          <!-- <mat-icon class=\"text-white pt-1\" style=\"font-size: 18px;\" [matTooltip]=\"'Limpiar'\" matTooltipClass=\"bg-danger\">close</mat-icon> -->\r\n          <i aria-hidden=\"true\" class=\"fa fa-times px-1 text-light\"></i>\r\n        </button>\r\n      </div>\r\n      <div class=\"position-absolute container-tooltipmessage\">\r\n        <tooltip-message\r\n          [label]=\"label\"\r\n          [controls]=\"controls\"\r\n          [validatorMessage]=\"validatorMessage\"\r\n          [tooltipMessage]=\"tooltipMessage\"\r\n          [submitted]=\"submitted\"></tooltip-message>\r\n      </div>\r\n    </div>\r\n    <error-message\r\n      [label]=\"label\"\r\n      [controls]=\"controls\"\r\n      [validatorMessage]=\"validatorMessage\"\r\n      [tooltipMessage]=\"tooltipMessage\"\r\n      [submitted]=\"submitted\"></error-message>\r\n    <ng-template #footerTemplate>\r\n      <ngb-timepicker [formControl]=\"hoursControl\" [meridian]=\"format == 12 ? true : false\" (focusout)=\"focusOut($event)\"></ngb-timepicker>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n", styles: ["#fakeInput{position:relative;visibility:hidden;padding:0;height:0}#inputDateTime{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.form-control:focus,.form-control:active{border-color:#007eff;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #007eff1a!important}ngb-timepicker fieldset{width:230px!important}.container-tooltipmessage{width:16px;height:100%;display:flex;align-items:center;z-index:1000;right:68px;top:1px}.was-validated .form-control:invalid:focus,.form-control.is-invalid:focus{border-color:#dc3545;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #fde6e8!important}.was-validated .form-control:invalid,.form-control.is-invalid{background-image:none;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #fde6e8!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"], exportAs: ["ngbTimepicker"] }, { kind: "directive", type: i1$1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: tooltipMessageComponent, selector: "tooltip-message", inputs: ["tooltipMessage", "validatorMessage", "controls", "label", "submitted"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: errorMessageComponent, selector: "error-message", inputs: ["tooltipMessage", "validatorMessage", "controls", "label", "submitted"] }] }); }
+        ], viewQueries: [{ propertyName: "inputDateTime", first: true, predicate: ["inputDateTime"], descendants: true }, { propertyName: "btnOpen", first: true, predicate: ["btnOpen"], descendants: true }, { propertyName: "btnClean", first: true, predicate: ["btnClean"], descendants: true }, { propertyName: "ngbDatepicker", first: true, predicate: ["d2"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"row\">\r\n  <div class=\"col-12\" style=\"overflow: hidden\">\r\n    <label *ngIf=\"label != null && label != '' && showLabel\" class=\"d-flex sumax-label mb-0 p-0\"\r\n      ><span [title]=\"label\" style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis\">{{ label }}</span>\r\n      <span *ngIf=\"required\" class=\"ms-1\" [class.text-danger]=\"controls?.errors != null\"> *</span>\r\n      <span *ngIf=\"labelInfo\">\r\n        <i class=\"fa fa-exclamation-circle text-info ms-2\" [matTooltip]=\"textLabelInfo\" matTooltipClass=\"bg-info\"></i>\r\n      </span>\r\n    </label>\r\n    <input\r\n      type=\"text\"\r\n      class=\"form-control form-control-sm position-absolute\"\r\n      container=\"body\"\r\n      id=\"fakeInput\"\r\n      ngbDatepicker\r\n      [formControl]=\"dateControl\"\r\n      [autoClose]=\"'outside'\"\r\n      [footerTemplate]=\"footerTemplate\"\r\n      [minDate]=\"{ year: 1960, month: 1, day: 1 }\"\r\n      #d2=\"ngbDatepicker\" />\r\n    <div class=\"input-group w-100\">\r\n      <input\r\n        type=\"text\"\r\n        readonly\r\n        id=\"inputDateTime\"\r\n        #inputDateTime\r\n        style=\"flex: 1\"\r\n        [class.is-invalid]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n        [disabled]=\"disabled || readonly\"\r\n        class=\"form-control form-control-sm\"\r\n        (blur)=\"onBlur()\"\r\n        (focusout)=\"focusOutInput()\"\r\n        (keyup)=\"onKeyUp($event)\"\r\n        (dblclick)=\"preventDefault($event)\"\r\n        (click)=\"preventDefault($event)\"\r\n        (mouseup)=\"onClick($event, inputDateTime)\"\r\n        [formControl]=\"dateTimeControl\" />\r\n      <div class=\"input-group-append\">\r\n        <button\r\n          #btnOpen\r\n          (keyup.ArrowLeft)=\"goBack()\"\r\n          [disabled]=\"disabled || readonly\"\r\n          (keyup.ArrowRight)=\"clearable ? btnClean.focus() : goNext()\"\r\n          class=\"btn btn-info p-0 rounded-0 use-button\"\r\n          (click)=\"d2.toggle(); open(d2)\"\r\n          type=\"button\">\r\n          <i aria-hidden=\"true\" class=\"fa fa-calendar text-light px-1\"></i>\r\n        </button>\r\n        <button\r\n          #btnClean\r\n          class=\"btn btn-danger p-0 rounded-0 limpiar\"\r\n          [disabled]=\"disabled || readonly\"\r\n          (click)=\"limpiarTodo()\"\r\n          (keyup.ArrowLeft)=\"btnOpen.focus()\"\r\n          (keyup.ArrowRight)=\"goNext()\"\r\n          type=\"button\">\r\n          <!-- <mat-icon class=\"text-white pt-1\" style=\"font-size: 18px;\" [matTooltip]=\"'Limpiar'\" matTooltipClass=\"bg-danger\">close</mat-icon> -->\r\n          <i aria-hidden=\"true\" class=\"fa fa-times px-1 text-light\"></i>\r\n        </button>\r\n      </div>\r\n      <div class=\"position-absolute container-tooltipmessage\">\r\n        <tooltip-message\r\n          [label]=\"label\"\r\n          [controls]=\"controls\"\r\n          [validatorMessage]=\"validatorMessage\"\r\n          [tooltipMessage]=\"tooltipMessage\"\r\n          [submitted]=\"submitted\"></tooltip-message>\r\n      </div>\r\n    </div>\r\n    <error-message\r\n      [label]=\"label\"\r\n      [controls]=\"controls\"\r\n      [validatorMessage]=\"validatorMessage\"\r\n      [tooltipMessage]=\"tooltipMessage\"\r\n      [submitted]=\"submitted\"></error-message>\r\n    <ng-template #footerTemplate>\r\n      <ngb-timepicker [formControl]=\"hoursControl\" [meridian]=\"format == 12 ? true : false\" (focusout)=\"focusOut($event)\"></ngb-timepicker>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n", styles: ["#fakeInput{position:relative;visibility:hidden;padding:0;height:0}#inputDateTime{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.form-control:focus,.form-control:active{border-color:#007eff;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #007eff1a!important}ngb-timepicker fieldset{width:230px!important}.container-tooltipmessage{width:16px;height:100%;display:flex;align-items:center;z-index:1000;right:68px;top:1px}.was-validated .form-control:invalid:focus,.form-control.is-invalid:focus{border-color:#dc3545;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #fde6e8!important}.was-validated .form-control:invalid,.form-control.is-invalid{background-image:none;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #fde6e8!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"], exportAs: ["ngbTimepicker"] }, { kind: "directive", type: i1$1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: tooltipMessageComponent, selector: "tooltip-message", inputs: ["tooltipMessage", "validatorMessage", "controls", "label", "submitted"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: errorMessageComponent, selector: "error-message", inputs: ["tooltipMessage", "validatorMessage", "controls", "label", "submitted"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DateTimePickerEditableComponent, decorators: [{
             type: Component,
@@ -2321,7 +2347,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                         I18n,
                         { provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n },
                         { provide: NgbDateParserFormatter, useClass: CustomDatepickerFormat },
-                    ], template: "<div class=\"row\">\r\n  <div class=\"col-12\" style=\"overflow: hidden\">\r\n    <label *ngIf=\"label != null && label != '' && showLabel\" class=\"d-flex sumax-label mb-0 p-0\"\r\n      ><span [title]=\"label\" style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis\">{{ label }}</span>\r\n      <span *ngIf=\"required\" class=\"ms-1\" [class.text-danger]=\"controls?.errors != null\"> *</span>\r\n      <span *ngIf=\"labelInfo\">\r\n        <i class=\"fa fa-exclamation-circle text-info ms-2\" [matTooltip]=\"textLabelInfo\" matTooltipClass=\"bg-info\"></i>\r\n      </span>\r\n    </label>\r\n    <input\r\n      type=\"text\"\r\n      class=\"form-control form-control-sm position-absolute\"\r\n      container=\"body\"\r\n      id=\"fakeInput\"\r\n      ngbDatepicker\r\n      [formControl]=\"dateControl\"\r\n      [autoClose]=\"'outside'\"\r\n      [footerTemplate]=\"footerTemplate\"\r\n      #d2=\"ngbDatepicker\" />\r\n    <div class=\"input-group w-100\">\r\n      <input\r\n        type=\"text\"\r\n        readonly\r\n        id=\"inputDateTime\"\r\n        #inputDateTime\r\n        style=\"flex: 1\"\r\n        [class.is-invalid]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n        [disabled]=\"disabled || readonly\"\r\n        class=\"form-control form-control-sm\"\r\n        (blur)=\"onBlur()\"\r\n        (focusout)=\"focusOutInput()\"\r\n        (keyup)=\"onKeyUp($event)\"\r\n        (dblclick)=\"preventDefault($event)\"\r\n        (click)=\"preventDefault($event)\"\r\n        (mouseup)=\"onClick($event, inputDateTime)\"\r\n        [formControl]=\"dateTimeControl\" />\r\n      <div class=\"input-group-append\">\r\n        <button\r\n          #btnOpen\r\n          (keyup.ArrowLeft)=\"goBack()\"\r\n          [disabled]=\"disabled || readonly\"\r\n          (keyup.ArrowRight)=\"clearable ? btnClean.focus() : goNext()\"\r\n          class=\"btn btn-info p-0 rounded-0 use-button\"\r\n          (click)=\"d2.toggle(); open(d2)\"\r\n          type=\"button\">\r\n          <i aria-hidden=\"true\" class=\"fa fa-calendar text-light px-1\"></i>\r\n        </button>\r\n        <button\r\n          #btnClean\r\n          class=\"btn btn-danger p-0 rounded-0 limpiar\"\r\n          [disabled]=\"disabled || readonly\"\r\n          (click)=\"limpiarTodo()\"\r\n          (keyup.ArrowLeft)=\"btnOpen.focus()\"\r\n          (keyup.ArrowRight)=\"goNext()\"\r\n          type=\"button\">\r\n          <!-- <mat-icon class=\"text-white pt-1\" style=\"font-size: 18px;\" [matTooltip]=\"'Limpiar'\" matTooltipClass=\"bg-danger\">close</mat-icon> -->\r\n          <i aria-hidden=\"true\" class=\"fa fa-times px-1 text-light\"></i>\r\n        </button>\r\n      </div>\r\n      <div class=\"position-absolute container-tooltipmessage\">\r\n        <tooltip-message\r\n          [label]=\"label\"\r\n          [controls]=\"controls\"\r\n          [validatorMessage]=\"validatorMessage\"\r\n          [tooltipMessage]=\"tooltipMessage\"\r\n          [submitted]=\"submitted\"></tooltip-message>\r\n      </div>\r\n    </div>\r\n    <error-message\r\n      [label]=\"label\"\r\n      [controls]=\"controls\"\r\n      [validatorMessage]=\"validatorMessage\"\r\n      [tooltipMessage]=\"tooltipMessage\"\r\n      [submitted]=\"submitted\"></error-message>\r\n    <ng-template #footerTemplate>\r\n      <ngb-timepicker [formControl]=\"hoursControl\" [meridian]=\"format == 12 ? true : false\" (focusout)=\"focusOut($event)\"></ngb-timepicker>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n", styles: ["#fakeInput{position:relative;visibility:hidden;padding:0;height:0}#inputDateTime{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.form-control:focus,.form-control:active{border-color:#007eff;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #007eff1a!important}ngb-timepicker fieldset{width:230px!important}.container-tooltipmessage{width:16px;height:100%;display:flex;align-items:center;z-index:1000;right:68px;top:1px}.was-validated .form-control:invalid:focus,.form-control.is-invalid:focus{border-color:#dc3545;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #fde6e8!important}.was-validated .form-control:invalid,.form-control.is-invalid{background-image:none;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #fde6e8!important}\n"] }]
+                    ], template: "<div class=\"row\">\r\n  <div class=\"col-12\" style=\"overflow: hidden\">\r\n    <label *ngIf=\"label != null && label != '' && showLabel\" class=\"d-flex sumax-label mb-0 p-0\"\r\n      ><span [title]=\"label\" style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis\">{{ label }}</span>\r\n      <span *ngIf=\"required\" class=\"ms-1\" [class.text-danger]=\"controls?.errors != null\"> *</span>\r\n      <span *ngIf=\"labelInfo\">\r\n        <i class=\"fa fa-exclamation-circle text-info ms-2\" [matTooltip]=\"textLabelInfo\" matTooltipClass=\"bg-info\"></i>\r\n      </span>\r\n    </label>\r\n    <input\r\n      type=\"text\"\r\n      class=\"form-control form-control-sm position-absolute\"\r\n      container=\"body\"\r\n      id=\"fakeInput\"\r\n      ngbDatepicker\r\n      [formControl]=\"dateControl\"\r\n      [autoClose]=\"'outside'\"\r\n      [footerTemplate]=\"footerTemplate\"\r\n      [minDate]=\"{ year: 1960, month: 1, day: 1 }\"\r\n      #d2=\"ngbDatepicker\" />\r\n    <div class=\"input-group w-100\">\r\n      <input\r\n        type=\"text\"\r\n        readonly\r\n        id=\"inputDateTime\"\r\n        #inputDateTime\r\n        style=\"flex: 1\"\r\n        [class.is-invalid]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n        [disabled]=\"disabled || readonly\"\r\n        class=\"form-control form-control-sm\"\r\n        (blur)=\"onBlur()\"\r\n        (focusout)=\"focusOutInput()\"\r\n        (keyup)=\"onKeyUp($event)\"\r\n        (dblclick)=\"preventDefault($event)\"\r\n        (click)=\"preventDefault($event)\"\r\n        (mouseup)=\"onClick($event, inputDateTime)\"\r\n        [formControl]=\"dateTimeControl\" />\r\n      <div class=\"input-group-append\">\r\n        <button\r\n          #btnOpen\r\n          (keyup.ArrowLeft)=\"goBack()\"\r\n          [disabled]=\"disabled || readonly\"\r\n          (keyup.ArrowRight)=\"clearable ? btnClean.focus() : goNext()\"\r\n          class=\"btn btn-info p-0 rounded-0 use-button\"\r\n          (click)=\"d2.toggle(); open(d2)\"\r\n          type=\"button\">\r\n          <i aria-hidden=\"true\" class=\"fa fa-calendar text-light px-1\"></i>\r\n        </button>\r\n        <button\r\n          #btnClean\r\n          class=\"btn btn-danger p-0 rounded-0 limpiar\"\r\n          [disabled]=\"disabled || readonly\"\r\n          (click)=\"limpiarTodo()\"\r\n          (keyup.ArrowLeft)=\"btnOpen.focus()\"\r\n          (keyup.ArrowRight)=\"goNext()\"\r\n          type=\"button\">\r\n          <!-- <mat-icon class=\"text-white pt-1\" style=\"font-size: 18px;\" [matTooltip]=\"'Limpiar'\" matTooltipClass=\"bg-danger\">close</mat-icon> -->\r\n          <i aria-hidden=\"true\" class=\"fa fa-times px-1 text-light\"></i>\r\n        </button>\r\n      </div>\r\n      <div class=\"position-absolute container-tooltipmessage\">\r\n        <tooltip-message\r\n          [label]=\"label\"\r\n          [controls]=\"controls\"\r\n          [validatorMessage]=\"validatorMessage\"\r\n          [tooltipMessage]=\"tooltipMessage\"\r\n          [submitted]=\"submitted\"></tooltip-message>\r\n      </div>\r\n    </div>\r\n    <error-message\r\n      [label]=\"label\"\r\n      [controls]=\"controls\"\r\n      [validatorMessage]=\"validatorMessage\"\r\n      [tooltipMessage]=\"tooltipMessage\"\r\n      [submitted]=\"submitted\"></error-message>\r\n    <ng-template #footerTemplate>\r\n      <ngb-timepicker [formControl]=\"hoursControl\" [meridian]=\"format == 12 ? true : false\" (focusout)=\"focusOut($event)\"></ngb-timepicker>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n", styles: ["#fakeInput{position:relative;visibility:hidden;padding:0;height:0}#inputDateTime{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.form-control:focus,.form-control:active{border-color:#007eff;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #007eff1a!important}ngb-timepicker fieldset{width:230px!important}.container-tooltipmessage{width:16px;height:100%;display:flex;align-items:center;z-index:1000;right:68px;top:1px}.was-validated .form-control:invalid:focus,.form-control.is-invalid:focus{border-color:#dc3545;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #fde6e8!important}.was-validated .form-control:invalid,.form-control.is-invalid{background-image:none;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #fde6e8!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { inputDateTime: [{
                 type: ViewChild,
                 args: ["inputDateTime"]
@@ -2795,7 +2821,7 @@ class DateTimePickerComponent {
             I18n,
             { provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n },
             { provide: NgbDateParserFormatter, useClass: CustomDatepickerFormat },
-        ], viewQueries: [{ propertyName: "ngbDatepicker", first: true, predicate: ["d"], descendants: true }, { propertyName: "timePicker", first: true, predicate: ["tp"], descendants: true }, { propertyName: "btnOpen", first: true, predicate: ["btnOpen"], descendants: true }, { propertyName: "btnClean", first: true, predicate: ["btnClean"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<label\r\n  *ngIf=\"label != null && label != '' && showLabel\"\r\n  class=\"d-flex sumax-label mb-0 p-0\"\r\n  ><span [title]=\"label\" style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\">{{label}}</span>\r\n\t<span *ngIf=\"required\" class=\"ms-1\"\r\n\t\t[class.text-danger]=\"controls?.errors != null\"> *</span>\r\n\t<span *ngIf=\"labelInfo\">\r\n\t\t<i class=\"fa fa-exclamation-circle text-info ms-2\" [matTooltip]=\"textLabelInfo\" matTooltipClass=\"bg-info\"></i>\r\n\t</span>\r\n  </label\r\n>\r\n<div\r\n  [class.input-icon]=\"\r\n    controls?.errors != null &&\r\n    (controls?.dirty || controls?.touched) &&\r\n    submitted\r\n  \"\r\n  class=\"position-relative\"\r\n  [class.right]=\"\r\n    controls?.errors != null &&\r\n    (controls?.dirty || controls?.touched) &&\r\n    submitted\r\n  \"\r\n>\r\n  <!-- tooltip-message es el icono de error -->\r\n\r\n  <tooltip-message\r\n    [label]=\"label\"\r\n    [controls]=\"controls\"\r\n    [validatorMessage]=\"validatorMessage\"\r\n    [tooltipMessage]=\"tooltipMessage\"\r\n    [submitted]=\"submitted\"\r\n  ></tooltip-message>\r\n  <div class=\"input-group mr-2 \">\r\n    <input\r\n      name=\"input\"\r\n      type=\"text\"\r\n      class=\"form-control form-control-sm\"\r\n      [disabled]=\"true\"\r\n      [ngModel]=\"input | date: inputDatetimeFormat\"\r\n    />\r\n    <input\r\n      class=\"form-control form-control-sm\"\r\n      container=\"body\"\r\n      [readonly]=\"true\"\r\n      placeholder=\"dd/mm/yyyy\"\r\n      name=\"dp\"\r\n      [(ngModel)]=\"date\"\r\n      (ngModelChange)=\"onModelDateChange($event)\"\r\n      [autoClose]=\"'outside'\"\r\n      ngbDatepicker\r\n      [footerTemplate]=\"footerTemplate\"\r\n      #d=\"ngbDatepicker\"\r\n    />\r\n    <!-- (dateSelect)=\"onDateSelect($event)\" -->\r\n    <div class=\"input-group-append\">\r\n      <button\r\n        #btnOpen\r\n        class=\"btn btn-info p-0 rounded-0 h-100\"\r\n        [disabled]=\"isDisabled || readonly\"\r\n        (click)=\"open(d)\"\r\n        (keyup.ArrowLeft)=\"goBack()\"\r\n        (keyup.ArrowRight)=\"btnClean.focus()\"\r\n        type=\"button\"\r\n      >\r\n        <!-- <mat-icon class=\"text-white pt-1\" style=\"font-size: 18px;\" [matTooltip]=\"'Calendario'\" matTooltipClass=\"bg-info\">calendar_today</mat-icon> -->\r\n        <i aria-hidden=\"true\" class=\"fa fa-calendar text-light px-1 \"></i>\r\n      </button>\r\n      <button\r\n        #btnClean\r\n        class=\"btn btn-danger p-0 rounded-0 limpiar h-100\"\r\n        [disabled]=\"isDisabled || readonly\"\r\n        (click)=\"limpiar()\"\r\n        (keyup.ArrowLeft)=\"btnOpen.focus()\"\r\n        (keyup.ArrowRight)=\"goNext()\"\r\n        type=\"button\"\r\n      >\r\n        <!-- <mat-icon class=\"text-white pt-1\" style=\"font-size: 18px;\" [matTooltip]=\"'Limpiar'\" matTooltipClass=\"bg-danger\">close</mat-icon> -->\r\n        <i aria-hidden=\"true\" class=\"fa fa-times px-1 text-light\"></i>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #footerTemplate>\r\n  <hr class=\"my-0\" />\r\n  <ngb-timepicker\r\n    #tp\r\n    [(ngModel)]=\"time\"\r\n    name=\"timepicker\"\r\n    (ngModelChange)=\"onModelDateChange($event)\"\r\n    (focusout)=\"focusOut($event)\"\r\n  >\r\n  </ngb-timepicker>\r\n</ng-template>\r\n<!-- error-message es el mansaje que aparece abajo del componente -->\r\n<error-message\r\n  [label]=\"label\"\r\n  [controls]=\"controls\"\r\n  [validatorMessage]=\"validatorMessage\"\r\n  [tooltipMessage]=\"tooltipMessage\"\r\n  [submitted]=\"submitted\"\r\n></error-message>\r\n", styles: [".sumax-label{color:#646c9a!important}button[disabled]{pointer-events:none}.input-group i{color:#212529}.input-group input:nth-child(1){position:absolute;width:100%}.input-group input:nth-child(2){position:relative;visibility:hidden}.input-group .input-group-append{background-color:#fff;z-index:1;border-left:1px solid #e2e5ec}.form-control[readonly]{background-color:#f7f8fa;opacity:1}.input-icon tooltip-message{color:#ccc;position:absolute;z-index:3;font-size:16px;text-align:center;right:55px;top:50%;transform:translateY(-50%)}.input-icon.right>.form-control{padding-right:33px;padding-left:12px}.was-validated .form-control:invalid:focus,.form-control.is-invalid:focus{border-color:#dc3545;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #fde6e8!important}.was-validated .form-control:invalid,.form-control.is-invalid{background-image:none;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #fde6e8!important}.form-control:focus,.form-control:active{border-color:#007eff;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #007eff1a!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: errorMessageComponent, selector: "error-message", inputs: ["tooltipMessage", "validatorMessage", "controls", "label", "submitted"] }, { kind: "component", type: tooltipMessageComponent, selector: "tooltip-message", inputs: ["tooltipMessage", "validatorMessage", "controls", "label", "submitted"] }, { kind: "directive", type: i1$1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i1$1.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"], exportAs: ["ngbTimepicker"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "ngbDatepicker", first: true, predicate: ["d"], descendants: true }, { propertyName: "timePicker", first: true, predicate: ["tp"], descendants: true }, { propertyName: "btnOpen", first: true, predicate: ["btnOpen"], descendants: true }, { propertyName: "btnClean", first: true, predicate: ["btnClean"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<label *ngIf=\"label != null && label != '' && showLabel\" class=\"d-flex sumax-label mb-0 p-0\"\r\n  ><span [title]=\"label\" style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis\">{{ label }}</span>\r\n  <span *ngIf=\"required\" class=\"ms-1\" [class.text-danger]=\"controls?.errors != null\"> *</span>\r\n  <span *ngIf=\"labelInfo\">\r\n    <i class=\"fa fa-exclamation-circle text-info ms-2\" [matTooltip]=\"textLabelInfo\" matTooltipClass=\"bg-info\"></i>\r\n  </span>\r\n</label>\r\n<div\r\n  [class.input-icon]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n  class=\"position-relative\"\r\n  [class.right]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\">\r\n  <!-- tooltip-message es el icono de error -->\r\n\r\n  <tooltip-message\r\n    [label]=\"label\"\r\n    [controls]=\"controls\"\r\n    [validatorMessage]=\"validatorMessage\"\r\n    [tooltipMessage]=\"tooltipMessage\"\r\n    [submitted]=\"submitted\"></tooltip-message>\r\n  <div class=\"input-group mr-2\">\r\n    <input name=\"input\" type=\"text\" class=\"form-control form-control-sm\" [disabled]=\"true\" [ngModel]=\"input | date: inputDatetimeFormat\" />\r\n    <input\r\n      class=\"form-control form-control-sm\"\r\n      container=\"body\"\r\n      [readonly]=\"true\"\r\n      placeholder=\"dd/mm/yyyy\"\r\n      name=\"dp\"\r\n      [(ngModel)]=\"date\"\r\n      (ngModelChange)=\"onModelDateChange($event)\"\r\n      [autoClose]=\"'outside'\"\r\n      ngbDatepicker\r\n      [footerTemplate]=\"footerTemplate\"\r\n      [minDate]=\"{ year: 1960, month: 1, day: 1 }\"\r\n      #d=\"ngbDatepicker\" />\r\n    <!-- (dateSelect)=\"onDateSelect($event)\" -->\r\n    <div class=\"input-group-append\">\r\n      <button\r\n        #btnOpen\r\n        class=\"btn btn-info p-0 rounded-0 h-100\"\r\n        [disabled]=\"isDisabled || readonly\"\r\n        (click)=\"open(d)\"\r\n        (keyup.ArrowLeft)=\"goBack()\"\r\n        (keyup.ArrowRight)=\"btnClean.focus()\"\r\n        type=\"button\">\r\n        <!-- <mat-icon class=\"text-white pt-1\" style=\"font-size: 18px;\" [matTooltip]=\"'Calendario'\" matTooltipClass=\"bg-info\">calendar_today</mat-icon> -->\r\n        <i aria-hidden=\"true\" class=\"fa fa-calendar text-light px-1\"></i>\r\n      </button>\r\n      <button\r\n        #btnClean\r\n        class=\"btn btn-danger p-0 rounded-0 limpiar h-100\"\r\n        [disabled]=\"isDisabled || readonly\"\r\n        (click)=\"limpiar()\"\r\n        (keyup.ArrowLeft)=\"btnOpen.focus()\"\r\n        (keyup.ArrowRight)=\"goNext()\"\r\n        type=\"button\">\r\n        <!-- <mat-icon class=\"text-white pt-1\" style=\"font-size: 18px;\" [matTooltip]=\"'Limpiar'\" matTooltipClass=\"bg-danger\">close</mat-icon> -->\r\n        <i aria-hidden=\"true\" class=\"fa fa-times px-1 text-light\"></i>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #footerTemplate>\r\n  <hr class=\"my-0\" />\r\n  <ngb-timepicker #tp [(ngModel)]=\"time\" name=\"timepicker\" (ngModelChange)=\"onModelDateChange($event)\" (focusout)=\"focusOut($event)\">\r\n  </ngb-timepicker>\r\n</ng-template>\r\n<!-- error-message es el mansaje que aparece abajo del componente -->\r\n<error-message\r\n  [label]=\"label\"\r\n  [controls]=\"controls\"\r\n  [validatorMessage]=\"validatorMessage\"\r\n  [tooltipMessage]=\"tooltipMessage\"\r\n  [submitted]=\"submitted\"></error-message>\r\n", styles: [".sumax-label{color:#646c9a!important}button[disabled]{pointer-events:none}.input-group i{color:#212529}.input-group input:nth-child(1){position:absolute;width:100%}.input-group input:nth-child(2){position:relative;visibility:hidden}.input-group .input-group-append{background-color:#fff;z-index:1;border-left:1px solid #e2e5ec}.form-control[readonly]{background-color:#f7f8fa;opacity:1}.input-icon tooltip-message{color:#ccc;position:absolute;z-index:3;font-size:16px;text-align:center;right:55px;top:50%;transform:translateY(-50%)}.input-icon.right>.form-control{padding-right:33px;padding-left:12px}.was-validated .form-control:invalid:focus,.form-control.is-invalid:focus{border-color:#dc3545;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #fde6e8!important}.was-validated .form-control:invalid,.form-control.is-invalid{background-image:none;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #fde6e8!important}.form-control:focus,.form-control:active{border-color:#007eff;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #007eff1a!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: errorMessageComponent, selector: "error-message", inputs: ["tooltipMessage", "validatorMessage", "controls", "label", "submitted"] }, { kind: "component", type: tooltipMessageComponent, selector: "tooltip-message", inputs: ["tooltipMessage", "validatorMessage", "controls", "label", "submitted"] }, { kind: "directive", type: i1$1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i1$1.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"], exportAs: ["ngbTimepicker"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
@@ -2813,7 +2839,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                         I18n,
                         { provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n },
                         { provide: NgbDateParserFormatter, useClass: CustomDatepickerFormat },
-                    ], template: "<label\r\n  *ngIf=\"label != null && label != '' && showLabel\"\r\n  class=\"d-flex sumax-label mb-0 p-0\"\r\n  ><span [title]=\"label\" style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\">{{label}}</span>\r\n\t<span *ngIf=\"required\" class=\"ms-1\"\r\n\t\t[class.text-danger]=\"controls?.errors != null\"> *</span>\r\n\t<span *ngIf=\"labelInfo\">\r\n\t\t<i class=\"fa fa-exclamation-circle text-info ms-2\" [matTooltip]=\"textLabelInfo\" matTooltipClass=\"bg-info\"></i>\r\n\t</span>\r\n  </label\r\n>\r\n<div\r\n  [class.input-icon]=\"\r\n    controls?.errors != null &&\r\n    (controls?.dirty || controls?.touched) &&\r\n    submitted\r\n  \"\r\n  class=\"position-relative\"\r\n  [class.right]=\"\r\n    controls?.errors != null &&\r\n    (controls?.dirty || controls?.touched) &&\r\n    submitted\r\n  \"\r\n>\r\n  <!-- tooltip-message es el icono de error -->\r\n\r\n  <tooltip-message\r\n    [label]=\"label\"\r\n    [controls]=\"controls\"\r\n    [validatorMessage]=\"validatorMessage\"\r\n    [tooltipMessage]=\"tooltipMessage\"\r\n    [submitted]=\"submitted\"\r\n  ></tooltip-message>\r\n  <div class=\"input-group mr-2 \">\r\n    <input\r\n      name=\"input\"\r\n      type=\"text\"\r\n      class=\"form-control form-control-sm\"\r\n      [disabled]=\"true\"\r\n      [ngModel]=\"input | date: inputDatetimeFormat\"\r\n    />\r\n    <input\r\n      class=\"form-control form-control-sm\"\r\n      container=\"body\"\r\n      [readonly]=\"true\"\r\n      placeholder=\"dd/mm/yyyy\"\r\n      name=\"dp\"\r\n      [(ngModel)]=\"date\"\r\n      (ngModelChange)=\"onModelDateChange($event)\"\r\n      [autoClose]=\"'outside'\"\r\n      ngbDatepicker\r\n      [footerTemplate]=\"footerTemplate\"\r\n      #d=\"ngbDatepicker\"\r\n    />\r\n    <!-- (dateSelect)=\"onDateSelect($event)\" -->\r\n    <div class=\"input-group-append\">\r\n      <button\r\n        #btnOpen\r\n        class=\"btn btn-info p-0 rounded-0 h-100\"\r\n        [disabled]=\"isDisabled || readonly\"\r\n        (click)=\"open(d)\"\r\n        (keyup.ArrowLeft)=\"goBack()\"\r\n        (keyup.ArrowRight)=\"btnClean.focus()\"\r\n        type=\"button\"\r\n      >\r\n        <!-- <mat-icon class=\"text-white pt-1\" style=\"font-size: 18px;\" [matTooltip]=\"'Calendario'\" matTooltipClass=\"bg-info\">calendar_today</mat-icon> -->\r\n        <i aria-hidden=\"true\" class=\"fa fa-calendar text-light px-1 \"></i>\r\n      </button>\r\n      <button\r\n        #btnClean\r\n        class=\"btn btn-danger p-0 rounded-0 limpiar h-100\"\r\n        [disabled]=\"isDisabled || readonly\"\r\n        (click)=\"limpiar()\"\r\n        (keyup.ArrowLeft)=\"btnOpen.focus()\"\r\n        (keyup.ArrowRight)=\"goNext()\"\r\n        type=\"button\"\r\n      >\r\n        <!-- <mat-icon class=\"text-white pt-1\" style=\"font-size: 18px;\" [matTooltip]=\"'Limpiar'\" matTooltipClass=\"bg-danger\">close</mat-icon> -->\r\n        <i aria-hidden=\"true\" class=\"fa fa-times px-1 text-light\"></i>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #footerTemplate>\r\n  <hr class=\"my-0\" />\r\n  <ngb-timepicker\r\n    #tp\r\n    [(ngModel)]=\"time\"\r\n    name=\"timepicker\"\r\n    (ngModelChange)=\"onModelDateChange($event)\"\r\n    (focusout)=\"focusOut($event)\"\r\n  >\r\n  </ngb-timepicker>\r\n</ng-template>\r\n<!-- error-message es el mansaje que aparece abajo del componente -->\r\n<error-message\r\n  [label]=\"label\"\r\n  [controls]=\"controls\"\r\n  [validatorMessage]=\"validatorMessage\"\r\n  [tooltipMessage]=\"tooltipMessage\"\r\n  [submitted]=\"submitted\"\r\n></error-message>\r\n", styles: [".sumax-label{color:#646c9a!important}button[disabled]{pointer-events:none}.input-group i{color:#212529}.input-group input:nth-child(1){position:absolute;width:100%}.input-group input:nth-child(2){position:relative;visibility:hidden}.input-group .input-group-append{background-color:#fff;z-index:1;border-left:1px solid #e2e5ec}.form-control[readonly]{background-color:#f7f8fa;opacity:1}.input-icon tooltip-message{color:#ccc;position:absolute;z-index:3;font-size:16px;text-align:center;right:55px;top:50%;transform:translateY(-50%)}.input-icon.right>.form-control{padding-right:33px;padding-left:12px}.was-validated .form-control:invalid:focus,.form-control.is-invalid:focus{border-color:#dc3545;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #fde6e8!important}.was-validated .form-control:invalid,.form-control.is-invalid{background-image:none;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #fde6e8!important}.form-control:focus,.form-control:active{border-color:#007eff;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #007eff1a!important}\n"] }]
+                    ], template: "<label *ngIf=\"label != null && label != '' && showLabel\" class=\"d-flex sumax-label mb-0 p-0\"\r\n  ><span [title]=\"label\" style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis\">{{ label }}</span>\r\n  <span *ngIf=\"required\" class=\"ms-1\" [class.text-danger]=\"controls?.errors != null\"> *</span>\r\n  <span *ngIf=\"labelInfo\">\r\n    <i class=\"fa fa-exclamation-circle text-info ms-2\" [matTooltip]=\"textLabelInfo\" matTooltipClass=\"bg-info\"></i>\r\n  </span>\r\n</label>\r\n<div\r\n  [class.input-icon]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n  class=\"position-relative\"\r\n  [class.right]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\">\r\n  <!-- tooltip-message es el icono de error -->\r\n\r\n  <tooltip-message\r\n    [label]=\"label\"\r\n    [controls]=\"controls\"\r\n    [validatorMessage]=\"validatorMessage\"\r\n    [tooltipMessage]=\"tooltipMessage\"\r\n    [submitted]=\"submitted\"></tooltip-message>\r\n  <div class=\"input-group mr-2\">\r\n    <input name=\"input\" type=\"text\" class=\"form-control form-control-sm\" [disabled]=\"true\" [ngModel]=\"input | date: inputDatetimeFormat\" />\r\n    <input\r\n      class=\"form-control form-control-sm\"\r\n      container=\"body\"\r\n      [readonly]=\"true\"\r\n      placeholder=\"dd/mm/yyyy\"\r\n      name=\"dp\"\r\n      [(ngModel)]=\"date\"\r\n      (ngModelChange)=\"onModelDateChange($event)\"\r\n      [autoClose]=\"'outside'\"\r\n      ngbDatepicker\r\n      [footerTemplate]=\"footerTemplate\"\r\n      [minDate]=\"{ year: 1960, month: 1, day: 1 }\"\r\n      #d=\"ngbDatepicker\" />\r\n    <!-- (dateSelect)=\"onDateSelect($event)\" -->\r\n    <div class=\"input-group-append\">\r\n      <button\r\n        #btnOpen\r\n        class=\"btn btn-info p-0 rounded-0 h-100\"\r\n        [disabled]=\"isDisabled || readonly\"\r\n        (click)=\"open(d)\"\r\n        (keyup.ArrowLeft)=\"goBack()\"\r\n        (keyup.ArrowRight)=\"btnClean.focus()\"\r\n        type=\"button\">\r\n        <!-- <mat-icon class=\"text-white pt-1\" style=\"font-size: 18px;\" [matTooltip]=\"'Calendario'\" matTooltipClass=\"bg-info\">calendar_today</mat-icon> -->\r\n        <i aria-hidden=\"true\" class=\"fa fa-calendar text-light px-1\"></i>\r\n      </button>\r\n      <button\r\n        #btnClean\r\n        class=\"btn btn-danger p-0 rounded-0 limpiar h-100\"\r\n        [disabled]=\"isDisabled || readonly\"\r\n        (click)=\"limpiar()\"\r\n        (keyup.ArrowLeft)=\"btnOpen.focus()\"\r\n        (keyup.ArrowRight)=\"goNext()\"\r\n        type=\"button\">\r\n        <!-- <mat-icon class=\"text-white pt-1\" style=\"font-size: 18px;\" [matTooltip]=\"'Limpiar'\" matTooltipClass=\"bg-danger\">close</mat-icon> -->\r\n        <i aria-hidden=\"true\" class=\"fa fa-times px-1 text-light\"></i>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #footerTemplate>\r\n  <hr class=\"my-0\" />\r\n  <ngb-timepicker #tp [(ngModel)]=\"time\" name=\"timepicker\" (ngModelChange)=\"onModelDateChange($event)\" (focusout)=\"focusOut($event)\">\r\n  </ngb-timepicker>\r\n</ng-template>\r\n<!-- error-message es el mansaje que aparece abajo del componente -->\r\n<error-message\r\n  [label]=\"label\"\r\n  [controls]=\"controls\"\r\n  [validatorMessage]=\"validatorMessage\"\r\n  [tooltipMessage]=\"tooltipMessage\"\r\n  [submitted]=\"submitted\"></error-message>\r\n", styles: [".sumax-label{color:#646c9a!important}button[disabled]{pointer-events:none}.input-group i{color:#212529}.input-group input:nth-child(1){position:absolute;width:100%}.input-group input:nth-child(2){position:relative;visibility:hidden}.input-group .input-group-append{background-color:#fff;z-index:1;border-left:1px solid #e2e5ec}.form-control[readonly]{background-color:#f7f8fa;opacity:1}.input-icon tooltip-message{color:#ccc;position:absolute;z-index:3;font-size:16px;text-align:center;right:55px;top:50%;transform:translateY(-50%)}.input-icon.right>.form-control{padding-right:33px;padding-left:12px}.was-validated .form-control:invalid:focus,.form-control.is-invalid:focus{border-color:#dc3545;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #fde6e8!important}.was-validated .form-control:invalid,.form-control.is-invalid{background-image:none;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #fde6e8!important}.form-control:focus,.form-control:active{border-color:#007eff;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #007eff1a!important}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.NgbCalendar }, { type: i1.DatePipe }, { type: DateTimePickerService }, { type: i0.Renderer2 }], propDecorators: { inputDatetimeFormat: [{
                 type: Input
             }], label: [{
@@ -5870,7 +5896,7 @@ class NgSelectSimpleComponent {
                 useExisting: forwardRef(() => NgSelectSimpleComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "ngSelectSimple", first: true, predicate: ["ngSelectSimple"], descendants: true }, { propertyName: "btnSearch", first: true, predicate: ["btnSearch"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<label *ngIf=\"label != null && label != '' && showLabel\" class=\"d-flex sumax-label mb-0 p-0\">\r\n  <span *ngIf=\"!templateLabel; else templateLabel\" [title]=\"label\" style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis\">\r\n    {{ label }}\r\n  </span>\r\n  <span *ngIf=\"required\" [class.text-danger]=\"controls?.errors != null\"> *</span>\r\n  <span *ngIf=\"labelInfo\">\r\n    <i class=\"fa fa-exclamation-circle text-info ms-2\" [matTooltip]=\"textLabelInfo\" matTooltipClass=\"bg-info\"></i>\r\n  </span>\r\n</label>\r\n\r\n<div\r\n  [class.input-icon]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n  [class.right]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n  [class.refresh]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted && refresh\"\r\n  [class.search]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted && search\">\r\n  <div class=\"d-flex\">\r\n    <div\r\n      class=\"position-relative\"\r\n      [class.ng-select-container-fullbuttons]=\"search && refresh && redirect\"\r\n      [class.app-ng-selec-container]=\"search || refresh\"\r\n      [class.w-100]=\"!search && !refresh\">\r\n      <ng-select\r\n        #ngSelectSimple\r\n        [class]=\"search || refresh ? 'app-ng-select' : 'w-100'\"\r\n        [class.action]=\"search && refresh\"\r\n        [items]=\"items | async\"\r\n        [(ngModel)]=\"_value\"\r\n        [disabled]=\"disabled\"\r\n        [readonly]=\"readonly\"\r\n        (change)=\"eventChange($event)\"\r\n        (blur)=\"eventBlur($event)\"\r\n        (focus)=\"eventFocus($event)\"\r\n        (search)=\"eventSearch($event)\"\r\n        [markFirst]=\"markFirst\"\r\n        [clearable]=\"!required && clearable\"\r\n        [virtualScroll]=\"virtualScroll\"\r\n        [inputAttrs]=\"{ autocomplete: autocomplete }\"\r\n        [clearOnBackspace]=\"clearOnBackspace\"\r\n        [openOnEnter]=\"openOnEnter\"\r\n        (keydown.delete)=\"!required && clearable ? clear() : ''\"\r\n        (clear)=\"clear()\"\r\n        (keyup.F1)=\"f1KeyUp()\"\r\n        [notFoundText]=\"notFoundText\"\r\n        placeholder=\"Seleccionar\"\r\n        (keyup.enter)=\"enterKeyUp()\"\r\n        [clearAllText]=\"clearAllText\"\r\n        [searchable]=\"searchable\"\r\n        (keyup.ArrowLeft)=\"leftKeyUp()\"\r\n        [appendTo]=\"appendTo\"\r\n        [loading]=\"loading\"\r\n        [loadingText]=\"loadingText\"\r\n        [class.ng-select-invalid]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n        [class.ng-select-touched]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n        [class.upperCase]=\"upperCase\"\r\n        [ngClass]=\"setNgClass\">\r\n        <!-- OPCIONES DE LISTADO -->\r\n        <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\r\n          <span data-toggle=\"tooltip\" title=\"{{ item.label }}\">{{ item.label }}</span>\r\n        </ng-template>\r\n      </ng-select>\r\n\r\n      <!-- tooltip-message es el icono de error -->\r\n      <tooltip-message\r\n        [label]=\"label\"\r\n        [controls]=\"controls\"\r\n        [validatorMessage]=\"validatorMessage\"\r\n        [submitted]=\"submitted\"\r\n        [tooltipMessage]=\"tooltipMessage\"></tooltip-message>\r\n    </div>\r\n    <ng-container *ngIf=\"search && refresh && redirect; else templateAction\">\r\n      <div class=\"app-ng-select-action bd-highligh\">\r\n        <button\r\n          #btnSearch\r\n          type=\"button\"\r\n          [disabled]=\"disabled || readonly\"\r\n          class=\"btn btn-success p-0 rounded-0 h-100\"\r\n          (keyup.ArrowLeft)=\"ngSelectSimple.focus()\"\r\n          style=\"background-color: orange; border-color: orange\"\r\n          (click)=\"onSearch()\">\r\n          <i class=\"fa fa-search text-white px-1\" [matTooltip]=\"'Buscar'\" matTooltipClass=\"custom-tooltip\"></i>\r\n        </button>\r\n        <button\r\n          *ngIf=\"refresh\"\r\n          type=\"button\"\r\n          [disabled]=\"disabled || readonly || isRefreshDisabled\"\r\n          class=\"btn btn-info p-0 rounded-0 h-100\"\r\n          (click)=\"onRefresh()\">\r\n          <i class=\"fa fa-refresh text-white px-1\" [matTooltip]=\"'Refrescar'\" matTooltipClass=\"bg-info\"></i>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-success p-0 rounded-0 h-100\"\r\n          (click)=\"openEnlace()\"\r\n          [disabled]=\"disabled || readonly || isRedirectDisabled\">\r\n          <em class=\"fa-regular fa-rectangle-list text-white px-1\" [matTooltip]=\"titleRedirect!\" matTooltipClass=\"bg-success\"> </em>\r\n        </button>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <ng-template #templateAction>\r\n      <div class=\"app-ng-select-button bd-highlight\" *ngIf=\"search\">\r\n        <button\r\n          #btnSearch\r\n          type=\"button\"\r\n          [disabled]=\"disabled || readonly\"\r\n          class=\"btn btn-success p-0 rounded-0 h-100\"\r\n          (keyup.ArrowLeft)=\"ngSelectSimple.focus()\"\r\n          (click)=\"onSearch()\">\r\n          <i class=\"fa fa-search text-white px-1\" [matTooltip]=\"'Buscar'\" matTooltipClass=\"bg-success\"></i>\r\n        </button>\r\n      </div>\r\n      <div class=\"app-ng-select-button bd-highlight\" *ngIf=\"refresh\">\r\n        <button\r\n          *ngIf=\"refresh\"\r\n          type=\"button\"\r\n          [disabled]=\"disabled || readonly || isRefreshDisabled\"\r\n          class=\"btn btn-info p-0 rounded-0 h-100\"\r\n          (click)=\"onRefresh()\">\r\n          <i class=\"fa fa-refresh text-white px-1\" [matTooltip]=\"'Refrescar'\" matTooltipClass=\"bg-info\"></i>\r\n        </button>\r\n      </div>\r\n      <div class=\"app-ng-select-button bd-highlight\" *ngIf=\"redirect\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-success p-0 rounded-0 h-100\"\r\n          style=\"padding-top: 3px; padding-bottom: 7px; border-radius: 0px\"\r\n          (click)=\"openEnlace()\"\r\n          [disabled]=\"disabled || readonly || isRedirectDisabled\">\r\n          <em class=\"fa-regular fa-rectangle-list text-white px-1\" [matTooltip]=\"titleRedirect!\" matTooltipClass=\"bg-success\"> </em>\r\n        </button>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-content select=\"[more-buttons]\"></ng-content>\r\n  </div>\r\n</div>\r\n\r\n<!-- error-message es el mansaje que aparece abajo del componente -->\r\n<error-message\r\n  [label]=\"label\"\r\n  [controls]=\"controls\"\r\n  [validatorMessage]=\"validatorMessage\"\r\n  [submitted]=\"submitted\"\r\n  [tooltipMessage]=\"tooltipMessage\"></error-message>\r\n", styles: ["ng-select-simple{display:block}.sumax-label{color:#646c9a!important}.input-icon tooltip-message{color:#ccc;position:absolute;z-index:3;font-size:16px;text-align:center;right:9px;top:50%;transform:translateY(-50%)}.input-icon.right>.form-control{padding-right:33px;padding-left:12px}.upperCase .ng-select-container .ng-value-container .ng-input>input{text-transform:uppercase}.app-ng-select-button{width:34px}.app-ng-select-button button{width:100%}.app-ng-selec-container{width:calc(100% - 34px)}.ng-select-container-fullbuttons{width:calc(100% - 102px)}.app-ng-select-action{width:8rem}.app-ng-select-action button{min-width:2rem;width:33%}.overflow-box{padding:5px;height:100px;border:1px solid #999;overflow:hidden}.ng-dropdown-panel{width:auto!important;max-width:550px;min-width:100%}.custom-tooltip{--mdc-plain-tooltip-container-color: orange}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: errorMessageComponent, selector: "error-message", inputs: ["tooltipMessage", "validatorMessage", "controls", "label", "submitted"] }, { kind: "component", type: tooltipMessageComponent, selector: "tooltip-message", inputs: ["tooltipMessage", "validatorMessage", "controls", "label", "submitted"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i7$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i7$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "ngSelectSimple", first: true, predicate: ["ngSelectSimple"], descendants: true }, { propertyName: "btnSearch", first: true, predicate: ["btnSearch"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<label *ngIf=\"label != null && label != '' && showLabel\" class=\"d-flex sumax-label mb-0 p-0\">\r\n  <span *ngIf=\"!templateLabel; else templateLabel\" [title]=\"label\" style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis\">\r\n    {{ label }}\r\n  </span>\r\n  <span *ngIf=\"required\" [class.text-danger]=\"controls?.errors != null\"> *</span>\r\n  <span *ngIf=\"labelInfo\">\r\n    <i class=\"fa fa-exclamation-circle text-info ms-2\" [matTooltip]=\"textLabelInfo\" matTooltipClass=\"bg-info\"></i>\r\n  </span>\r\n</label>\r\n\r\n<div\r\n  [class.input-icon]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n  [class.right]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n  [class.refresh]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted && refresh\"\r\n  [class.search]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted && search\">\r\n  <div class=\"d-flex\">\r\n    <div\r\n      class=\"position-relative\"\r\n      [class.ng-select-container-fullbuttons]=\"search && refresh && redirect\"\r\n      [class.app-ng-selec-container]=\"search || refresh\"\r\n      [class.w-100]=\"!search && !refresh\">\r\n      <ng-select\r\n        #ngSelectSimple\r\n        [class]=\"search || refresh ? 'app-ng-select' : 'w-100'\"\r\n        [class.action]=\"search && refresh\"\r\n        [items]=\"items | async\"\r\n        [(ngModel)]=\"_value\"\r\n        [disabled]=\"disabled\"\r\n        [readonly]=\"readonly\"\r\n        (change)=\"eventChange($event)\"\r\n        (blur)=\"eventBlur($event)\"\r\n        (focus)=\"eventFocus($event)\"\r\n        (search)=\"eventSearch($event)\"\r\n        [markFirst]=\"markFirst\"\r\n        [clearable]=\"!required && clearable\"\r\n        [virtualScroll]=\"virtualScroll\"\r\n        [inputAttrs]=\"{ autocomplete: autocomplete }\"\r\n        [clearOnBackspace]=\"clearOnBackspace\"\r\n        [openOnEnter]=\"openOnEnter\"\r\n        (keydown.delete)=\"!required && clearable ? clear() : ''\"\r\n        (clear)=\"clear()\"\r\n        (keyup.F1)=\"f1KeyUp()\"\r\n        [notFoundText]=\"notFoundText\"\r\n        placeholder=\"Seleccionar\"\r\n        (keyup.enter)=\"enterKeyUp()\"\r\n        [clearAllText]=\"clearAllText\"\r\n        [searchable]=\"searchable\"\r\n        (keyup.ArrowLeft)=\"leftKeyUp()\"\r\n        [appendTo]=\"appendTo\"\r\n        [loading]=\"loading\"\r\n        [loadingText]=\"loadingText\"\r\n        [class.ng-select-invalid]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n        [class.ng-select-touched]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n        [class.upperCase]=\"upperCase\"\r\n        [ngClass]=\"setNgClass\">\r\n        <!-- OPCIONES DE LISTADO -->\r\n        <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\r\n          <span data-toggle=\"tooltip\" title=\"{{ item.label }}\">{{ item.label }}</span>\r\n        </ng-template>\r\n      </ng-select>\r\n\r\n      <!-- tooltip-message es el icono de error -->\r\n      <tooltip-message\r\n        [label]=\"label\"\r\n        [controls]=\"controls\"\r\n        [validatorMessage]=\"validatorMessage\"\r\n        [submitted]=\"submitted\"\r\n        [tooltipMessage]=\"tooltipMessage\"></tooltip-message>\r\n    </div>\r\n    <ng-container *ngIf=\"search && refresh && redirect; else templateAction\">\r\n      <div class=\"app-ng-select-action bd-highligh\">\r\n        <button\r\n          #btnSearch\r\n          type=\"button\"\r\n          [disabled]=\"disabled || readonly\"\r\n          class=\"btn btn-success p-0 rounded-0 h-100\"\r\n          (keyup.ArrowLeft)=\"ngSelectSimple.focus()\"\r\n          style=\"background-color: orange; border-color: orange\"\r\n          (click)=\"onSearch()\">\r\n          <i class=\"fa fa-search text-white px-1\" [matTooltip]=\"'Buscar'\" matTooltipClass=\"custom-tooltip\"></i>\r\n        </button>\r\n        <button\r\n          *ngIf=\"refresh\"\r\n          type=\"button\"\r\n          [disabled]=\"disabled || readonly || isRefreshDisabled\"\r\n          class=\"btn btn-info p-0 rounded-0 h-100\"\r\n          (click)=\"onRefresh()\">\r\n          <i class=\"fa fa-refresh text-white px-1\" [matTooltip]=\"'Refrescar'\" matTooltipClass=\"bg-info\"></i>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-success p-0 rounded-0 h-100\"\r\n          (click)=\"openEnlace()\"\r\n          [disabled]=\"disabled || readonly || isRedirectDisabled\">\r\n          <em class=\"fa-regular fa-rectangle-list text-white px-1\" [matTooltip]=\"titleRedirect!\" matTooltipClass=\"bg-success\"> </em>\r\n        </button>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <ng-template #templateAction>\r\n      <div class=\"app-ng-select-button bd-highlight\" *ngIf=\"search\">\r\n        <button\r\n          #btnSearch\r\n          type=\"button\"\r\n          [disabled]=\"disabled || readonly\"\r\n          class=\"btn btn-success p-0 rounded-0 h-100\"\r\n          (keyup.ArrowLeft)=\"ngSelectSimple.focus()\"\r\n          (click)=\"onSearch()\">\r\n          <i class=\"fa fa-search text-white px-1\" [matTooltip]=\"'Buscar'\" matTooltipClass=\"bg-success\"></i>\r\n        </button>\r\n      </div>\r\n      <div class=\"app-ng-select-button bd-highlight\" *ngIf=\"refresh\">\r\n        <button\r\n          *ngIf=\"refresh\"\r\n          type=\"button\"\r\n          [disabled]=\"disabled || readonly || isRefreshDisabled\"\r\n          class=\"btn btn-info p-0 rounded-0 h-100\"\r\n          (click)=\"onRefresh()\">\r\n          <i class=\"fa fa-refresh text-white px-1\" [matTooltip]=\"'Refrescar'\" matTooltipClass=\"bg-info\"></i>\r\n        </button>\r\n      </div>\r\n      <div class=\"app-ng-select-button bd-highlight\" *ngIf=\"redirect\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-success p-0 rounded-0 h-100\"\r\n          style=\"padding-top: 3px; padding-bottom: 7px; border-radius: 0px\"\r\n          (click)=\"openEnlace()\"\r\n          [disabled]=\"disabled || readonly || isRedirectDisabled\">\r\n          <em class=\"fa-regular fa-rectangle-list text-white px-1\" [matTooltip]=\"titleRedirect!\" matTooltipClass=\"bg-success\"> </em>\r\n        </button>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-content select=\"[more-buttons]\"></ng-content>\r\n  </div>\r\n</div>\r\n\r\n<!-- error-message es el mansaje que aparece abajo del componente -->\r\n<error-message\r\n  [label]=\"label\"\r\n  [controls]=\"controls\"\r\n  [validatorMessage]=\"validatorMessage\"\r\n  [submitted]=\"submitted\"\r\n  [tooltipMessage]=\"tooltipMessage\"></error-message>\r\n", styles: ["ng-select-simple{display:block}.sumax-label{color:#646c9a!important}.input-icon tooltip-message{color:#ccc;position:absolute;z-index:3;font-size:16px;text-align:center;right:9px;top:50%;transform:translateY(-50%)}.input-icon.right>.form-control{padding-right:33px;padding-left:12px}.upperCase .ng-select-container .ng-value-container .ng-input>input{text-transform:uppercase}.app-ng-select-button{width:34px}.app-ng-select-button button{width:100%}.app-ng-selec-container{width:calc(100% - 34px)}.ng-select-container-fullbuttons{width:calc(100% - 102px)}.app-ng-select-action{width:8rem}.app-ng-select-action button{min-width:2rem;width:33%}.overflow-box{padding:5px;height:100px;border:1px solid #999;overflow:hidden}.ng-dropdown-panel{width:auto!important;max-width:550px;min-width:100%}.custom-tooltip{--mdc-plain-tooltip-container-color: orange}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#999!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: errorMessageComponent, selector: "error-message", inputs: ["tooltipMessage", "validatorMessage", "controls", "label", "submitted"] }, { kind: "component", type: tooltipMessageComponent, selector: "tooltip-message", inputs: ["tooltipMessage", "validatorMessage", "controls", "label", "submitted"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i7$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i7$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgSelectSimpleComponent, decorators: [{
             type: Component,
@@ -5885,7 +5911,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                             useExisting: forwardRef(() => NgSelectSimpleComponent),
                             multi: true,
                         },
-                    ], encapsulation: ViewEncapsulation.None, template: "<label *ngIf=\"label != null && label != '' && showLabel\" class=\"d-flex sumax-label mb-0 p-0\">\r\n  <span *ngIf=\"!templateLabel; else templateLabel\" [title]=\"label\" style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis\">\r\n    {{ label }}\r\n  </span>\r\n  <span *ngIf=\"required\" [class.text-danger]=\"controls?.errors != null\"> *</span>\r\n  <span *ngIf=\"labelInfo\">\r\n    <i class=\"fa fa-exclamation-circle text-info ms-2\" [matTooltip]=\"textLabelInfo\" matTooltipClass=\"bg-info\"></i>\r\n  </span>\r\n</label>\r\n\r\n<div\r\n  [class.input-icon]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n  [class.right]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n  [class.refresh]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted && refresh\"\r\n  [class.search]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted && search\">\r\n  <div class=\"d-flex\">\r\n    <div\r\n      class=\"position-relative\"\r\n      [class.ng-select-container-fullbuttons]=\"search && refresh && redirect\"\r\n      [class.app-ng-selec-container]=\"search || refresh\"\r\n      [class.w-100]=\"!search && !refresh\">\r\n      <ng-select\r\n        #ngSelectSimple\r\n        [class]=\"search || refresh ? 'app-ng-select' : 'w-100'\"\r\n        [class.action]=\"search && refresh\"\r\n        [items]=\"items | async\"\r\n        [(ngModel)]=\"_value\"\r\n        [disabled]=\"disabled\"\r\n        [readonly]=\"readonly\"\r\n        (change)=\"eventChange($event)\"\r\n        (blur)=\"eventBlur($event)\"\r\n        (focus)=\"eventFocus($event)\"\r\n        (search)=\"eventSearch($event)\"\r\n        [markFirst]=\"markFirst\"\r\n        [clearable]=\"!required && clearable\"\r\n        [virtualScroll]=\"virtualScroll\"\r\n        [inputAttrs]=\"{ autocomplete: autocomplete }\"\r\n        [clearOnBackspace]=\"clearOnBackspace\"\r\n        [openOnEnter]=\"openOnEnter\"\r\n        (keydown.delete)=\"!required && clearable ? clear() : ''\"\r\n        (clear)=\"clear()\"\r\n        (keyup.F1)=\"f1KeyUp()\"\r\n        [notFoundText]=\"notFoundText\"\r\n        placeholder=\"Seleccionar\"\r\n        (keyup.enter)=\"enterKeyUp()\"\r\n        [clearAllText]=\"clearAllText\"\r\n        [searchable]=\"searchable\"\r\n        (keyup.ArrowLeft)=\"leftKeyUp()\"\r\n        [appendTo]=\"appendTo\"\r\n        [loading]=\"loading\"\r\n        [loadingText]=\"loadingText\"\r\n        [class.ng-select-invalid]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n        [class.ng-select-touched]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n        [class.upperCase]=\"upperCase\"\r\n        [ngClass]=\"setNgClass\">\r\n        <!-- OPCIONES DE LISTADO -->\r\n        <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\r\n          <span data-toggle=\"tooltip\" title=\"{{ item.label }}\">{{ item.label }}</span>\r\n        </ng-template>\r\n      </ng-select>\r\n\r\n      <!-- tooltip-message es el icono de error -->\r\n      <tooltip-message\r\n        [label]=\"label\"\r\n        [controls]=\"controls\"\r\n        [validatorMessage]=\"validatorMessage\"\r\n        [submitted]=\"submitted\"\r\n        [tooltipMessage]=\"tooltipMessage\"></tooltip-message>\r\n    </div>\r\n    <ng-container *ngIf=\"search && refresh && redirect; else templateAction\">\r\n      <div class=\"app-ng-select-action bd-highligh\">\r\n        <button\r\n          #btnSearch\r\n          type=\"button\"\r\n          [disabled]=\"disabled || readonly\"\r\n          class=\"btn btn-success p-0 rounded-0 h-100\"\r\n          (keyup.ArrowLeft)=\"ngSelectSimple.focus()\"\r\n          style=\"background-color: orange; border-color: orange\"\r\n          (click)=\"onSearch()\">\r\n          <i class=\"fa fa-search text-white px-1\" [matTooltip]=\"'Buscar'\" matTooltipClass=\"custom-tooltip\"></i>\r\n        </button>\r\n        <button\r\n          *ngIf=\"refresh\"\r\n          type=\"button\"\r\n          [disabled]=\"disabled || readonly || isRefreshDisabled\"\r\n          class=\"btn btn-info p-0 rounded-0 h-100\"\r\n          (click)=\"onRefresh()\">\r\n          <i class=\"fa fa-refresh text-white px-1\" [matTooltip]=\"'Refrescar'\" matTooltipClass=\"bg-info\"></i>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-success p-0 rounded-0 h-100\"\r\n          (click)=\"openEnlace()\"\r\n          [disabled]=\"disabled || readonly || isRedirectDisabled\">\r\n          <em class=\"fa-regular fa-rectangle-list text-white px-1\" [matTooltip]=\"titleRedirect!\" matTooltipClass=\"bg-success\"> </em>\r\n        </button>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <ng-template #templateAction>\r\n      <div class=\"app-ng-select-button bd-highlight\" *ngIf=\"search\">\r\n        <button\r\n          #btnSearch\r\n          type=\"button\"\r\n          [disabled]=\"disabled || readonly\"\r\n          class=\"btn btn-success p-0 rounded-0 h-100\"\r\n          (keyup.ArrowLeft)=\"ngSelectSimple.focus()\"\r\n          (click)=\"onSearch()\">\r\n          <i class=\"fa fa-search text-white px-1\" [matTooltip]=\"'Buscar'\" matTooltipClass=\"bg-success\"></i>\r\n        </button>\r\n      </div>\r\n      <div class=\"app-ng-select-button bd-highlight\" *ngIf=\"refresh\">\r\n        <button\r\n          *ngIf=\"refresh\"\r\n          type=\"button\"\r\n          [disabled]=\"disabled || readonly || isRefreshDisabled\"\r\n          class=\"btn btn-info p-0 rounded-0 h-100\"\r\n          (click)=\"onRefresh()\">\r\n          <i class=\"fa fa-refresh text-white px-1\" [matTooltip]=\"'Refrescar'\" matTooltipClass=\"bg-info\"></i>\r\n        </button>\r\n      </div>\r\n      <div class=\"app-ng-select-button bd-highlight\" *ngIf=\"redirect\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-success p-0 rounded-0 h-100\"\r\n          style=\"padding-top: 3px; padding-bottom: 7px; border-radius: 0px\"\r\n          (click)=\"openEnlace()\"\r\n          [disabled]=\"disabled || readonly || isRedirectDisabled\">\r\n          <em class=\"fa-regular fa-rectangle-list text-white px-1\" [matTooltip]=\"titleRedirect!\" matTooltipClass=\"bg-success\"> </em>\r\n        </button>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-content select=\"[more-buttons]\"></ng-content>\r\n  </div>\r\n</div>\r\n\r\n<!-- error-message es el mansaje que aparece abajo del componente -->\r\n<error-message\r\n  [label]=\"label\"\r\n  [controls]=\"controls\"\r\n  [validatorMessage]=\"validatorMessage\"\r\n  [submitted]=\"submitted\"\r\n  [tooltipMessage]=\"tooltipMessage\"></error-message>\r\n", styles: ["ng-select-simple{display:block}.sumax-label{color:#646c9a!important}.input-icon tooltip-message{color:#ccc;position:absolute;z-index:3;font-size:16px;text-align:center;right:9px;top:50%;transform:translateY(-50%)}.input-icon.right>.form-control{padding-right:33px;padding-left:12px}.upperCase .ng-select-container .ng-value-container .ng-input>input{text-transform:uppercase}.app-ng-select-button{width:34px}.app-ng-select-button button{width:100%}.app-ng-selec-container{width:calc(100% - 34px)}.ng-select-container-fullbuttons{width:calc(100% - 102px)}.app-ng-select-action{width:8rem}.app-ng-select-action button{min-width:2rem;width:33%}.overflow-box{padding:5px;height:100px;border:1px solid #999;overflow:hidden}.ng-dropdown-panel{width:auto!important;max-width:550px;min-width:100%}.custom-tooltip{--mdc-plain-tooltip-container-color: orange}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, template: "<label *ngIf=\"label != null && label != '' && showLabel\" class=\"d-flex sumax-label mb-0 p-0\">\r\n  <span *ngIf=\"!templateLabel; else templateLabel\" [title]=\"label\" style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis\">\r\n    {{ label }}\r\n  </span>\r\n  <span *ngIf=\"required\" [class.text-danger]=\"controls?.errors != null\"> *</span>\r\n  <span *ngIf=\"labelInfo\">\r\n    <i class=\"fa fa-exclamation-circle text-info ms-2\" [matTooltip]=\"textLabelInfo\" matTooltipClass=\"bg-info\"></i>\r\n  </span>\r\n</label>\r\n\r\n<div\r\n  [class.input-icon]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n  [class.right]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n  [class.refresh]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted && refresh\"\r\n  [class.search]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted && search\">\r\n  <div class=\"d-flex\">\r\n    <div\r\n      class=\"position-relative\"\r\n      [class.ng-select-container-fullbuttons]=\"search && refresh && redirect\"\r\n      [class.app-ng-selec-container]=\"search || refresh\"\r\n      [class.w-100]=\"!search && !refresh\">\r\n      <ng-select\r\n        #ngSelectSimple\r\n        [class]=\"search || refresh ? 'app-ng-select' : 'w-100'\"\r\n        [class.action]=\"search && refresh\"\r\n        [items]=\"items | async\"\r\n        [(ngModel)]=\"_value\"\r\n        [disabled]=\"disabled\"\r\n        [readonly]=\"readonly\"\r\n        (change)=\"eventChange($event)\"\r\n        (blur)=\"eventBlur($event)\"\r\n        (focus)=\"eventFocus($event)\"\r\n        (search)=\"eventSearch($event)\"\r\n        [markFirst]=\"markFirst\"\r\n        [clearable]=\"!required && clearable\"\r\n        [virtualScroll]=\"virtualScroll\"\r\n        [inputAttrs]=\"{ autocomplete: autocomplete }\"\r\n        [clearOnBackspace]=\"clearOnBackspace\"\r\n        [openOnEnter]=\"openOnEnter\"\r\n        (keydown.delete)=\"!required && clearable ? clear() : ''\"\r\n        (clear)=\"clear()\"\r\n        (keyup.F1)=\"f1KeyUp()\"\r\n        [notFoundText]=\"notFoundText\"\r\n        placeholder=\"Seleccionar\"\r\n        (keyup.enter)=\"enterKeyUp()\"\r\n        [clearAllText]=\"clearAllText\"\r\n        [searchable]=\"searchable\"\r\n        (keyup.ArrowLeft)=\"leftKeyUp()\"\r\n        [appendTo]=\"appendTo\"\r\n        [loading]=\"loading\"\r\n        [loadingText]=\"loadingText\"\r\n        [class.ng-select-invalid]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n        [class.ng-select-touched]=\"controls?.errors != null && (controls?.dirty || controls?.touched) && submitted\"\r\n        [class.upperCase]=\"upperCase\"\r\n        [ngClass]=\"setNgClass\">\r\n        <!-- OPCIONES DE LISTADO -->\r\n        <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\r\n          <span data-toggle=\"tooltip\" title=\"{{ item.label }}\">{{ item.label }}</span>\r\n        </ng-template>\r\n      </ng-select>\r\n\r\n      <!-- tooltip-message es el icono de error -->\r\n      <tooltip-message\r\n        [label]=\"label\"\r\n        [controls]=\"controls\"\r\n        [validatorMessage]=\"validatorMessage\"\r\n        [submitted]=\"submitted\"\r\n        [tooltipMessage]=\"tooltipMessage\"></tooltip-message>\r\n    </div>\r\n    <ng-container *ngIf=\"search && refresh && redirect; else templateAction\">\r\n      <div class=\"app-ng-select-action bd-highligh\">\r\n        <button\r\n          #btnSearch\r\n          type=\"button\"\r\n          [disabled]=\"disabled || readonly\"\r\n          class=\"btn btn-success p-0 rounded-0 h-100\"\r\n          (keyup.ArrowLeft)=\"ngSelectSimple.focus()\"\r\n          style=\"background-color: orange; border-color: orange\"\r\n          (click)=\"onSearch()\">\r\n          <i class=\"fa fa-search text-white px-1\" [matTooltip]=\"'Buscar'\" matTooltipClass=\"custom-tooltip\"></i>\r\n        </button>\r\n        <button\r\n          *ngIf=\"refresh\"\r\n          type=\"button\"\r\n          [disabled]=\"disabled || readonly || isRefreshDisabled\"\r\n          class=\"btn btn-info p-0 rounded-0 h-100\"\r\n          (click)=\"onRefresh()\">\r\n          <i class=\"fa fa-refresh text-white px-1\" [matTooltip]=\"'Refrescar'\" matTooltipClass=\"bg-info\"></i>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-success p-0 rounded-0 h-100\"\r\n          (click)=\"openEnlace()\"\r\n          [disabled]=\"disabled || readonly || isRedirectDisabled\">\r\n          <em class=\"fa-regular fa-rectangle-list text-white px-1\" [matTooltip]=\"titleRedirect!\" matTooltipClass=\"bg-success\"> </em>\r\n        </button>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <ng-template #templateAction>\r\n      <div class=\"app-ng-select-button bd-highlight\" *ngIf=\"search\">\r\n        <button\r\n          #btnSearch\r\n          type=\"button\"\r\n          [disabled]=\"disabled || readonly\"\r\n          class=\"btn btn-success p-0 rounded-0 h-100\"\r\n          (keyup.ArrowLeft)=\"ngSelectSimple.focus()\"\r\n          (click)=\"onSearch()\">\r\n          <i class=\"fa fa-search text-white px-1\" [matTooltip]=\"'Buscar'\" matTooltipClass=\"bg-success\"></i>\r\n        </button>\r\n      </div>\r\n      <div class=\"app-ng-select-button bd-highlight\" *ngIf=\"refresh\">\r\n        <button\r\n          *ngIf=\"refresh\"\r\n          type=\"button\"\r\n          [disabled]=\"disabled || readonly || isRefreshDisabled\"\r\n          class=\"btn btn-info p-0 rounded-0 h-100\"\r\n          (click)=\"onRefresh()\">\r\n          <i class=\"fa fa-refresh text-white px-1\" [matTooltip]=\"'Refrescar'\" matTooltipClass=\"bg-info\"></i>\r\n        </button>\r\n      </div>\r\n      <div class=\"app-ng-select-button bd-highlight\" *ngIf=\"redirect\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-success p-0 rounded-0 h-100\"\r\n          style=\"padding-top: 3px; padding-bottom: 7px; border-radius: 0px\"\r\n          (click)=\"openEnlace()\"\r\n          [disabled]=\"disabled || readonly || isRedirectDisabled\">\r\n          <em class=\"fa-regular fa-rectangle-list text-white px-1\" [matTooltip]=\"titleRedirect!\" matTooltipClass=\"bg-success\"> </em>\r\n        </button>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-content select=\"[more-buttons]\"></ng-content>\r\n  </div>\r\n</div>\r\n\r\n<!-- error-message es el mansaje que aparece abajo del componente -->\r\n<error-message\r\n  [label]=\"label\"\r\n  [controls]=\"controls\"\r\n  [validatorMessage]=\"validatorMessage\"\r\n  [submitted]=\"submitted\"\r\n  [tooltipMessage]=\"tooltipMessage\"></error-message>\r\n", styles: ["ng-select-simple{display:block}.sumax-label{color:#646c9a!important}.input-icon tooltip-message{color:#ccc;position:absolute;z-index:3;font-size:16px;text-align:center;right:9px;top:50%;transform:translateY(-50%)}.input-icon.right>.form-control{padding-right:33px;padding-left:12px}.upperCase .ng-select-container .ng-value-container .ng-input>input{text-transform:uppercase}.app-ng-select-button{width:34px}.app-ng-select-button button{width:100%}.app-ng-selec-container{width:calc(100% - 34px)}.ng-select-container-fullbuttons{width:calc(100% - 102px)}.app-ng-select-action{width:8rem}.app-ng-select-action button{min-width:2rem;width:33%}.overflow-box{padding:5px;height:100px;border:1px solid #999;overflow:hidden}.ng-dropdown-panel{width:auto!important;max-width:550px;min-width:100%}.custom-tooltip{--mdc-plain-tooltip-container-color: orange}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#999!important}\n"] }]
         }], ctorParameters: () => [{ type: MessageUtilService }, { type: i1$2.MatDialog }, { type: NgSelectSimpleService }], propDecorators: { ngSelectSimple: [{
                 type: ViewChild,
                 args: ["ngSelectSimple"]