@dev-tcloud/tcloud-ui 0.0.49 → 0.0.51

package/fesm2015/dev-tcloud-tcloud-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, Input, NgModule, Injectable, EventEmitter, Output, ViewChild, forwardRef, Pipe, Directive, HostListener } from '@angular/core';
+import { Component, Input, NgModule, Injectable, EventEmitter, Output, ViewChild, forwardRef, Pipe, ViewEncapsulation, Directive, HostListener } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DatePipe } from '@angular/common';
 import { Subject } from 'rxjs';
@@ -944,12 +944,12 @@ const CUSTOM_INPUT_VALIDATORS$1 = {
     useExisting: forwardRef(() => TCloudUiMultiSelectComponent),
     multi: true
 };
-const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$3 = {
+const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$5 = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => TCloudUiMultiSelectComponent),
     multi: true
 };
-const noop$3 = () => {
+const noop$5 = () => {
 };
 class TCloudUiMultiSelectComponent {
     constructor() {
@@ -962,8 +962,8 @@ class TCloudUiMultiSelectComponent {
         this.onChange = new EventEmitter();
         //Placeholders for the callbacks which are later providesd
         //by the Control Value Accessor
-        this.onTouchedCallback = noop$3;
-        this.onChangeCallback = noop$3;
+        this.onTouchedCallback = noop$5;
+        this.onChangeCallback = noop$5;
     }
     ngOnInit() {
         setTimeout(() => { this.toChange(); });
@@ -1094,10 +1094,10 @@ class TCloudUiMultiSelectComponent {
     }
 }
 TCloudUiMultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TCloudUiMultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiMultiSelectComponent, selector: "tcloud-ui-multi-select", inputs: { tcList: "tcList", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required" }, outputs: { tcChange: "tcChange", onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$3, CUSTOM_INPUT_VALIDATORS$1], ngImport: i0, template: "\r\n  <div>\r\n    <table>\r\n      <tr *ngIf=\"tcList\">\r\n        <td>\r\n          <select  \r\n            class=\"tc-form-control\"\r\n            [(ngModel)]=\"item_value\"\r\n            [class.tc-parent-validation]=\"use_validation_required\"     \r\n            #_select\r\n            [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n            [title]=\"tcList.length === 0 ? 'Nenhum item dispon\u00EDvel' : placeholder\">\r\n            <option></option>\r\n            <ng-container *ngFor=\"let item of tcList; let i = index\">\r\n              <option [title]=\"item.description\" *ngIf=\"!item.active\" [value]=\"item.value\">{{ item.description }}</option>\r\n            </ng-container>\r\n          </select>\r\n        </td>\r\n        <td>\r\n          <button\r\n            [disabled]=\"!item_value || tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n            title=\"Adicionar\"\r\n            class=\"btn-plus-select\"\r\n            (click)=\"addItem(_select.value);onChangeTouched()\"\r\n            type=\"button\">\r\n            <i class=\"fas fa-plus\"></i>\r\n          </button>\r\n        </td>\r\n      </tr>\r\n    </table>\r\n\r\n    <div class=\"box-itens-selected\" *ngIf=\"count_actives > 0 && (tcList && tcList.length > 0)\">\r\n      <ng-container *ngFor=\"let item of tcList\">\r\n\r\n        <ng-container *ngIf=\"item.active\">\r\n          <div class=\"box-label\" [ngStyle]=\"item_width(item.value)\">\r\n            <div class=\"box-value\" [title]=\"item.value\">\r\n              {{ item.value }}          \r\n            </div>\r\n            <div class=\"box-action\">\r\n              <button\r\n                [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n                title=\"Remover\"\r\n                type=\"button\"\r\n                (click)=\"removeItem(item.value);onChangeTouched()\">\r\n                <i class=\"fas fa-times\"></i>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n", styles: ["table{width:100%;border-collapse:collapse;border:none}table td{vertical-align:top}table td:first-child{width:100%}select{font-size:.8rem;height:40px;border:1px solid #999;border-radius:4px 0 0 4px;padding:6px 10px;white-space:nowrap;text-overflow:ellipsis;width:100%;background-color:#fff;color:#888}.btn-plus-select{width:30px;height:40px;border:none;color:#fff;background-color:var(--verde);border-radius:0 4px 4px 0}.box-itens-selected{display:flex;padding:9px;background-color:#ededed;border-radius:4px}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{position:relative;display:inline-block;height:35px;min-width:60px;background-color:var(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px;width:100%}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{position:absolute;right:4px;top:7px}.box-label .box-action button{color:#d72020;background-color:var(--verde);border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+TCloudUiMultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiMultiSelectComponent, selector: "tcloud-ui-multi-select", inputs: { tcList: "tcList", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required" }, outputs: { tcChange: "tcChange", onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$5, CUSTOM_INPUT_VALIDATORS$1], ngImport: i0, template: "\r\n  <div>\r\n    <table>\r\n      <tr *ngIf=\"tcList\">\r\n        <td>\r\n          <select  \r\n            class=\"tc-form-control\"\r\n            [(ngModel)]=\"item_value\"\r\n            [class.tc-parent-validation]=\"use_validation_required\"     \r\n            #_select\r\n            [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n            [title]=\"tcList.length === 0 ? 'Nenhum item dispon\u00EDvel' : placeholder\">\r\n            <option></option>\r\n            <ng-container *ngFor=\"let item of tcList; let i = index\">\r\n              <option [title]=\"item.description\" *ngIf=\"!item.active\" [value]=\"item.value\">{{ item.description }}</option>\r\n            </ng-container>\r\n          </select>\r\n        </td>\r\n        <td>\r\n          <button\r\n            [disabled]=\"!item_value || tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n            title=\"Adicionar\"\r\n            class=\"btn-plus-select\"\r\n            (click)=\"addItem(_select.value);onChangeTouched()\"\r\n            type=\"button\">\r\n            <i class=\"fas fa-plus\"></i>\r\n          </button>\r\n        </td>\r\n      </tr>\r\n    </table>\r\n\r\n    <div class=\"box-itens-selected\" *ngIf=\"count_actives > 0 && (tcList && tcList.length > 0)\">\r\n      <ng-container *ngFor=\"let item of tcList\">\r\n\r\n        <ng-container *ngIf=\"item.active\">\r\n          <div class=\"box-label\" [ngStyle]=\"item_width(item.value)\">\r\n            <div class=\"box-value\" [title]=\"item.value\">\r\n              {{ item.value }}          \r\n            </div>\r\n            <div class=\"box-action\">\r\n              <button\r\n                [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n                title=\"Remover\"\r\n                type=\"button\"\r\n                (click)=\"removeItem(item.value);onChangeTouched()\">\r\n                <i class=\"fas fa-times\"></i>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n", styles: ["table{width:100%;border-collapse:collapse;border:none}table td{vertical-align:top}table td:first-child{width:100%}select{font-size:.8rem;height:40px;border:1px solid #999;border-radius:4px 0 0 4px;padding:6px 10px;white-space:nowrap;text-overflow:ellipsis;width:100%;background-color:#fff;color:#888}.btn-plus-select{width:30px;height:40px;border:none;color:#fff;background-color:var(--verde);border-radius:0 4px 4px 0}.box-itens-selected{display:flex;padding:9px;background-color:#ededed;border-radius:4px}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{position:relative;display:inline-block;height:35px;min-width:60px;background-color:var(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px;width:100%}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{position:absolute;right:4px;top:7px}.box-label .box-action button{color:#d72020;background-color:var(--verde);border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-multi-select', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$3, CUSTOM_INPUT_VALIDATORS$1], template: "\r\n  <div>\r\n    <table>\r\n      <tr *ngIf=\"tcList\">\r\n        <td>\r\n          <select  \r\n            class=\"tc-form-control\"\r\n            [(ngModel)]=\"item_value\"\r\n            [class.tc-parent-validation]=\"use_validation_required\"     \r\n            #_select\r\n            [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n            [title]=\"tcList.length === 0 ? 'Nenhum item dispon\u00EDvel' : placeholder\">\r\n            <option></option>\r\n            <ng-container *ngFor=\"let item of tcList; let i = index\">\r\n              <option [title]=\"item.description\" *ngIf=\"!item.active\" [value]=\"item.value\">{{ item.description }}</option>\r\n            </ng-container>\r\n          </select>\r\n        </td>\r\n        <td>\r\n          <button\r\n            [disabled]=\"!item_value || tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n            title=\"Adicionar\"\r\n            class=\"btn-plus-select\"\r\n            (click)=\"addItem(_select.value);onChangeTouched()\"\r\n            type=\"button\">\r\n            <i class=\"fas fa-plus\"></i>\r\n          </button>\r\n        </td>\r\n      </tr>\r\n    </table>\r\n\r\n    <div class=\"box-itens-selected\" *ngIf=\"count_actives > 0 && (tcList && tcList.length > 0)\">\r\n      <ng-container *ngFor=\"let item of tcList\">\r\n\r\n        <ng-container *ngIf=\"item.active\">\r\n          <div class=\"box-label\" [ngStyle]=\"item_width(item.value)\">\r\n            <div class=\"box-value\" [title]=\"item.value\">\r\n              {{ item.value }}          \r\n            </div>\r\n            <div class=\"box-action\">\r\n              <button\r\n                [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n                title=\"Remover\"\r\n                type=\"button\"\r\n                (click)=\"removeItem(item.value);onChangeTouched()\">\r\n                <i class=\"fas fa-times\"></i>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n", styles: ["table{width:100%;border-collapse:collapse;border:none}table td{vertical-align:top}table td:first-child{width:100%}select{font-size:.8rem;height:40px;border:1px solid #999;border-radius:4px 0 0 4px;padding:6px 10px;white-space:nowrap;text-overflow:ellipsis;width:100%;background-color:#fff;color:#888}.btn-plus-select{width:30px;height:40px;border:none;color:#fff;background-color:var(--verde);border-radius:0 4px 4px 0}.box-itens-selected{display:flex;padding:9px;background-color:#ededed;border-radius:4px}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{position:relative;display:inline-block;height:35px;min-width:60px;background-color:var(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px;width:100%}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{position:absolute;right:4px;top:7px}.box-label .box-action button{color:#d72020;background-color:var(--verde);border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}\n"] }]
+            args: [{ selector: 'tcloud-ui-multi-select', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$5, CUSTOM_INPUT_VALIDATORS$1], template: "\r\n  <div>\r\n    <table>\r\n      <tr *ngIf=\"tcList\">\r\n        <td>\r\n          <select  \r\n            class=\"tc-form-control\"\r\n            [(ngModel)]=\"item_value\"\r\n            [class.tc-parent-validation]=\"use_validation_required\"     \r\n            #_select\r\n            [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n            [title]=\"tcList.length === 0 ? 'Nenhum item dispon\u00EDvel' : placeholder\">\r\n            <option></option>\r\n            <ng-container *ngFor=\"let item of tcList; let i = index\">\r\n              <option [title]=\"item.description\" *ngIf=\"!item.active\" [value]=\"item.value\">{{ item.description }}</option>\r\n            </ng-container>\r\n          </select>\r\n        </td>\r\n        <td>\r\n          <button\r\n            [disabled]=\"!item_value || tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n            title=\"Adicionar\"\r\n            class=\"btn-plus-select\"\r\n            (click)=\"addItem(_select.value);onChangeTouched()\"\r\n            type=\"button\">\r\n            <i class=\"fas fa-plus\"></i>\r\n          </button>\r\n        </td>\r\n      </tr>\r\n    </table>\r\n\r\n    <div class=\"box-itens-selected\" *ngIf=\"count_actives > 0 && (tcList && tcList.length > 0)\">\r\n      <ng-container *ngFor=\"let item of tcList\">\r\n\r\n        <ng-container *ngIf=\"item.active\">\r\n          <div class=\"box-label\" [ngStyle]=\"item_width(item.value)\">\r\n            <div class=\"box-value\" [title]=\"item.value\">\r\n              {{ item.value }}          \r\n            </div>\r\n            <div class=\"box-action\">\r\n              <button\r\n                [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n                title=\"Remover\"\r\n                type=\"button\"\r\n                (click)=\"removeItem(item.value);onChangeTouched()\">\r\n                <i class=\"fas fa-times\"></i>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n", styles: ["table{width:100%;border-collapse:collapse;border:none}table td{vertical-align:top}table td:first-child{width:100%}select{font-size:.8rem;height:40px;border:1px solid #999;border-radius:4px 0 0 4px;padding:6px 10px;white-space:nowrap;text-overflow:ellipsis;width:100%;background-color:#fff;color:#888}.btn-plus-select{width:30px;height:40px;border:none;color:#fff;background-color:var(--verde);border-radius:0 4px 4px 0}.box-itens-selected{display:flex;padding:9px;background-color:#ededed;border-radius:4px}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{position:relative;display:inline-block;height:35px;min-width:60px;background-color:var(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px;width:100%}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{position:absolute;right:4px;top:7px}.box-label .box-action button{color:#d72020;background-color:var(--verde);border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { tcList: [{
                 type: Input
             }], placeholder: [{
@@ -1171,12 +1171,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             type: Injectable
         }] });
 
-const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2 = {
+const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$4 = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => TCloudUiDataListComponent),
     multi: true
 };
-const noop$2 = () => {
+const noop$4 = () => {
 };
 class TCloudUiDataListComponent {
     constructor(dataListService, formBuilder) {
@@ -1200,8 +1200,8 @@ class TCloudUiDataListComponent {
         this.id = '';
         //Placeholders for the callbacks which are later providesd
         //by the Control Value Accessor
-        this.onTouchedCallback = noop$2;
-        this.onChangeCallback = noop$2;
+        this.onTouchedCallback = noop$4;
+        this.onChangeCallback = noop$4;
     }
     set disabled(v) {
         if (v) {
@@ -1419,13 +1419,13 @@ class TCloudUiDataListComponent {
 TCloudUiDataListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDataListComponent, deps: [{ token: DataListService }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
 TCloudUiDataListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiDataListComponent, selector: "tcloud-ui-data-list", inputs: { placeholder: "placeholder", disabled: "disabled", loading: "loading", search: "search", ngModel: "ngModel" }, outputs: { onInputChange: "onInputChange", onChange: "onChange", ngModelChange: "ngModelChange" }, providers: [
         DataListService,
-        CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2
+        CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$4
     ], ngImport: i0, template: "<div *ngIf=\"formulario\" id=\"area-{{ id }}\" class=\"tc-dropdown\" [class.disabled]=\"disabled || loading\">\r\n  <div *ngIf=\"loading\" class=\"loading-area\">\r\n    <i class=\"fas fa-spinner fa-spin\"></i>\r\n  </div>\r\n  <!-- [attr.data-bs-toggle]=\"'dropdown'\"  -->\r\n  <button \r\n    [class.loading-box]=\"loading\"\r\n    [disabled]=\"disabled || loading\"\r\n    class=\"dropdown-toggle button-select no-margin-bottom\" \r\n    type=\"button\" \r\n    id=\"{{ id }}\" \r\n    \r\n    [attr.aria-haspopup]=\"'true'\" \r\n    [attr.aria-expanded]=\"'false'\" \r\n    (click)=\"toOpen()\" >\r\n\r\n    <i *ngIf=\"(selected_description === undefined || selected_description === null || selected_description === '' ) && !loading \">{{ placeholder }}</i>\r\n    {{ selected_description }}\r\n    <span><i class=\"fas fa-angle-down\"></i></span>\r\n  </button>\r\n  <div class=\"tc-dropdown-menu {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!menu_show\" [style]=\"box_style\">\r\n\r\n    <div class=\"line-search\" *ngIf=\"search\">\r\n      <table class=\"box-search\">\r\n        <tr>\r\n\r\n          <td class=\"area-input\">\r\n            <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" >            \r\n          </td>\r\n\r\n          <td class=\"area-icon\">\r\n            <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\r\n            <button type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\r\n          </td>\r\n          \r\n        </tr>\r\n      </table>\r\n    </div>\r\n    \r\n    <div class=\"area-options\" id=\"{{ id }}-options\" (click)=\"toClose()\">\r\n      <ng-content></ng-content>      \r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"formulario\">\r\n  <form [formGroup]=\"formulario\" style=\"display: none;\" >\r\n    <input id=\"{{ id }}-hidden\" formControlName=\"selected_item\" type=\"hidden\">\r\n  </form>\r\n</div>\r\n", styles: [".dropdown-toggle:after{display:none!important}.tc-dropdown{position:relative}.tc-dropdown .button-select{width:100%;background-color:#fff;border:1px solid #ccc;height:35px;text-align:left;padding-left:15px;font-size:14px;color:#666}.tc-dropdown .button-select span{position:absolute;right:6px;top:7px}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid #ccc;background-color:#fff;position:absolute;z-index:1}.tc-dropdown .area-options{max-height:200px;overflow-y:scroll;overflow-x:hidden}.tc-dropdown .menu-on-top{position:absolute}.line-search{padding:3px}.line-search .box-search{width:100%;border-collapse:collapse}.line-search .box-search td.area-icon{padding:4px 0 2px 8px;width:35px}.line-search .box-search td.area-icon .icon-search{color:#666}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:#999;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.line-search .box-search td.area-input{border:none}.line-search .box-search td.area-input input{width:100%}.line-search .box-search input{width:100%;font-size:13px;height:33px;border:1px solid #ccc;padding:10px}.loading-area{line-height:0;position:relative;height:0;bottom:-10px;left:10px}button:disabled{background-color:#eee!important;border:1px solid #ececec!important;cursor:not-allowed}.loading-box{cursor:progress!important}.disabled i{color:#999!important}.to-hide{display:none}.no-margin-bottom{margin-bottom:0!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDataListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tcloud-ui-data-list', providers: [
                         DataListService,
-                        CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2
+                        CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$4
                     ], template: "<div *ngIf=\"formulario\" id=\"area-{{ id }}\" class=\"tc-dropdown\" [class.disabled]=\"disabled || loading\">\r\n  <div *ngIf=\"loading\" class=\"loading-area\">\r\n    <i class=\"fas fa-spinner fa-spin\"></i>\r\n  </div>\r\n  <!-- [attr.data-bs-toggle]=\"'dropdown'\"  -->\r\n  <button \r\n    [class.loading-box]=\"loading\"\r\n    [disabled]=\"disabled || loading\"\r\n    class=\"dropdown-toggle button-select no-margin-bottom\" \r\n    type=\"button\" \r\n    id=\"{{ id }}\" \r\n    \r\n    [attr.aria-haspopup]=\"'true'\" \r\n    [attr.aria-expanded]=\"'false'\" \r\n    (click)=\"toOpen()\" >\r\n\r\n    <i *ngIf=\"(selected_description === undefined || selected_description === null || selected_description === '' ) && !loading \">{{ placeholder }}</i>\r\n    {{ selected_description }}\r\n    <span><i class=\"fas fa-angle-down\"></i></span>\r\n  </button>\r\n  <div class=\"tc-dropdown-menu {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!menu_show\" [style]=\"box_style\">\r\n\r\n    <div class=\"line-search\" *ngIf=\"search\">\r\n      <table class=\"box-search\">\r\n        <tr>\r\n\r\n          <td class=\"area-input\">\r\n            <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" >            \r\n          </td>\r\n\r\n          <td class=\"area-icon\">\r\n            <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\r\n            <button type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\r\n          </td>\r\n          \r\n        </tr>\r\n      </table>\r\n    </div>\r\n    \r\n    <div class=\"area-options\" id=\"{{ id }}-options\" (click)=\"toClose()\">\r\n      <ng-content></ng-content>      \r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"formulario\">\r\n  <form [formGroup]=\"formulario\" style=\"display: none;\" >\r\n    <input id=\"{{ id }}-hidden\" formControlName=\"selected_item\" type=\"hidden\">\r\n  </form>\r\n</div>\r\n", styles: [".dropdown-toggle:after{display:none!important}.tc-dropdown{position:relative}.tc-dropdown .button-select{width:100%;background-color:#fff;border:1px solid #ccc;height:35px;text-align:left;padding-left:15px;font-size:14px;color:#666}.tc-dropdown .button-select span{position:absolute;right:6px;top:7px}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid #ccc;background-color:#fff;position:absolute;z-index:1}.tc-dropdown .area-options{max-height:200px;overflow-y:scroll;overflow-x:hidden}.tc-dropdown .menu-on-top{position:absolute}.line-search{padding:3px}.line-search .box-search{width:100%;border-collapse:collapse}.line-search .box-search td.area-icon{padding:4px 0 2px 8px;width:35px}.line-search .box-search td.area-icon .icon-search{color:#666}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:#999;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.line-search .box-search td.area-input{border:none}.line-search .box-search td.area-input input{width:100%}.line-search .box-search input{width:100%;font-size:13px;height:33px;border:1px solid #ccc;padding:10px}.loading-area{line-height:0;position:relative;height:0;bottom:-10px;left:10px}button:disabled{background-color:#eee!important;border:1px solid #ececec!important;cursor:not-allowed}.loading-box{cursor:progress!important}.disabled i{color:#999!important}.to-hide{display:none}.no-margin-bottom{margin-bottom:0!important}\n"] }]
         }], ctorParameters: function () { return [{ type: DataListService }, { type: i2.FormBuilder }]; }, propDecorators: { placeholder: [{
                 type: Input
@@ -1535,12 +1535,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 }]
         }] });
 
-const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1 = {
+const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$3 = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => TCloudUiChoiceIssuesComponent),
     multi: true
 };
-const noop$1 = () => {
+const noop$3 = () => {
 };
 class TCloudUiChoiceIssuesComponent {
     constructor() {
@@ -1552,8 +1552,8 @@ class TCloudUiChoiceIssuesComponent {
         this.innerValue = false;
         //Placeholders for the callbacks which are later providesd
         //by the Control Value Accessor
-        this.onTouchedCallback = noop$1;
-        this.onChangeCallback = noop$1;
+        this.onTouchedCallback = noop$3;
+        this.onChangeCallback = noop$3;
         this.ID = 'tc-issue-' + Math.random().toString(36).substr(2, 9);
     }
     //get accessor
@@ -1599,10 +1599,10 @@ class TCloudUiChoiceIssuesComponent {
     }
 }
 TCloudUiChoiceIssuesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiChoiceIssuesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TCloudUiChoiceIssuesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiChoiceIssuesComponent, selector: "tcloud-ui-choice-issues", inputs: { view: "view", titulo: "titulo", subTitulo: "subTitulo", disabled: "disabled" }, outputs: { onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["campo"], descendants: true, read: true }], ngImport: i0, template: "\r\n\r\n<input #campo [(ngModel)]=\"value\" type=\"hidden\" [value]=\"false\" >\r\n<div class=\"box p-2 mt-3 mb-2\">\r\n  <div class=\"row\">\r\n    <div class=\"col-md-8\">\r\n      <p class=\"titulo\">{{ titulo }}</p>      \r\n    </div>\r\n    <div class=\"col-md-4 text-right\">  \r\n\r\n      <table class=\"mt-2 mr-2\" *ngIf=\"!view\" >\r\n        <tr>\r\n          <td>\r\n            <div class=\"form-fieldset\">\r\n              <label [class.v-true]=\"value\" class=\"mr-1\"><input #campo name=\"{{ ID }}\" [value]=\"true\" type=\"radio\" [(ngModel)]=\"value\" (click)=\"setV(true)\" >Sim</label>\r\n            </div>\r\n          </td>\r\n          <td>\r\n            <div class=\"form-fieldset\">\r\n              <label [class.v-true]=\"!value\" class=\"ml-2\"><input #campo name=\"{{ ID }}\" [value]=\"false\" type=\"radio\" [(ngModel)]=\"value\" (click)=\"setV(false)\" >N\u00E3o</label>\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      </table>    \r\n\r\n      <table class=\"mt-2 mr-2\" *ngIf=\"view\" >\r\n        <tr>\r\n          <td>\r\n            <div class=\"form-fieldset view\" >\r\n              <label *ngIf=\"value\" class=\"v-true disabled\" >Sim</label>\r\n              <label *ngIf=\"!value\">N\u00E3o</label>\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n    <div class=\"col-md-12 mt-1\">\r\n      <p class=\"sub-titulo\">{{ subTitulo }}</p>\r\n    </div>\r\n    <div class=\"col-md-12 mt-2 mb-1\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".titulo{font-size:1rem;color:var(--cinza)}.sub-titulo{color:#b0adaa}.box{border:1px solid var(--cinza3);border-radius:10px}.box.box-icon{display:flex;justify-content:center;padding:35px 20px}.form-fieldset input{display:none}.form-fieldset .v-true{background:var(--verde);color:#fff}.form-fieldset label{font-size:11px;background:var(--cinza4);cursor:pointer;position:relative;display:inline-flex;align-items:center;justify-content:space-around;text-transform:uppercase;border-radius:30px;padding:7px;margin:0;width:66px}.form-fieldset label:before{content:\"\";background:#fff;border-radius:50%;height:15px;width:15px}.form-fieldset label:nth-child(2){margin-right:20px}table{width:100%;max-width:200px}table th,table td{vertical-align:top}.view,.view label{cursor:inherit!important}.disabled{background-color:#8fdfe8!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+TCloudUiChoiceIssuesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiChoiceIssuesComponent, selector: "tcloud-ui-choice-issues", inputs: { view: "view", titulo: "titulo", subTitulo: "subTitulo", disabled: "disabled" }, outputs: { onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$3], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["campo"], descendants: true, read: true }], ngImport: i0, template: "\r\n\r\n<input #campo [(ngModel)]=\"value\" type=\"hidden\" [value]=\"false\" >\r\n<div class=\"box p-2 mt-3 mb-2\">\r\n  <div class=\"row\">\r\n    <div class=\"col-md-8\">\r\n      <p class=\"titulo\">{{ titulo }}</p>      \r\n    </div>\r\n    <div class=\"col-md-4 text-right\">  \r\n\r\n      <table class=\"mt-2 mr-2\" *ngIf=\"!view\" >\r\n        <tr>\r\n          <td>\r\n            <div class=\"form-fieldset\">\r\n              <label [class.v-true]=\"value\" class=\"mr-1\"><input #campo name=\"{{ ID }}\" [value]=\"true\" type=\"radio\" [(ngModel)]=\"value\" (click)=\"setV(true)\" >Sim</label>\r\n            </div>\r\n          </td>\r\n          <td>\r\n            <div class=\"form-fieldset\">\r\n              <label [class.v-true]=\"!value\" class=\"ml-2\"><input #campo name=\"{{ ID }}\" [value]=\"false\" type=\"radio\" [(ngModel)]=\"value\" (click)=\"setV(false)\" >N\u00E3o</label>\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      </table>    \r\n\r\n      <table class=\"mt-2 mr-2\" *ngIf=\"view\" >\r\n        <tr>\r\n          <td>\r\n            <div class=\"form-fieldset view\" >\r\n              <label *ngIf=\"value\" class=\"v-true disabled\" >Sim</label>\r\n              <label *ngIf=\"!value\">N\u00E3o</label>\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n    <div class=\"col-md-12 mt-1\">\r\n      <p class=\"sub-titulo\">{{ subTitulo }}</p>\r\n    </div>\r\n    <div class=\"col-md-12 mt-2 mb-1\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".titulo{font-size:1rem;color:var(--cinza)}.sub-titulo{color:#b0adaa}.box{border:1px solid var(--cinza3);border-radius:10px}.box.box-icon{display:flex;justify-content:center;padding:35px 20px}.form-fieldset input{display:none}.form-fieldset .v-true{background:var(--verde);color:#fff}.form-fieldset label{font-size:11px;background:var(--cinza4);cursor:pointer;position:relative;display:inline-flex;align-items:center;justify-content:space-around;text-transform:uppercase;border-radius:30px;padding:7px;margin:0;width:66px}.form-fieldset label:before{content:\"\";background:#fff;border-radius:50%;height:15px;width:15px}.form-fieldset label:nth-child(2){margin-right:20px}table{width:100%;max-width:200px}table th,table td{vertical-align:top}.view,.view label{cursor:inherit!important}.disabled{background-color:#8fdfe8!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiChoiceIssuesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-choice-issues', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1], template: "\r\n\r\n<input #campo [(ngModel)]=\"value\" type=\"hidden\" [value]=\"false\" >\r\n<div class=\"box p-2 mt-3 mb-2\">\r\n  <div class=\"row\">\r\n    <div class=\"col-md-8\">\r\n      <p class=\"titulo\">{{ titulo }}</p>      \r\n    </div>\r\n    <div class=\"col-md-4 text-right\">  \r\n\r\n      <table class=\"mt-2 mr-2\" *ngIf=\"!view\" >\r\n        <tr>\r\n          <td>\r\n            <div class=\"form-fieldset\">\r\n              <label [class.v-true]=\"value\" class=\"mr-1\"><input #campo name=\"{{ ID }}\" [value]=\"true\" type=\"radio\" [(ngModel)]=\"value\" (click)=\"setV(true)\" >Sim</label>\r\n            </div>\r\n          </td>\r\n          <td>\r\n            <div class=\"form-fieldset\">\r\n              <label [class.v-true]=\"!value\" class=\"ml-2\"><input #campo name=\"{{ ID }}\" [value]=\"false\" type=\"radio\" [(ngModel)]=\"value\" (click)=\"setV(false)\" >N\u00E3o</label>\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      </table>    \r\n\r\n      <table class=\"mt-2 mr-2\" *ngIf=\"view\" >\r\n        <tr>\r\n          <td>\r\n            <div class=\"form-fieldset view\" >\r\n              <label *ngIf=\"value\" class=\"v-true disabled\" >Sim</label>\r\n              <label *ngIf=\"!value\">N\u00E3o</label>\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n    <div class=\"col-md-12 mt-1\">\r\n      <p class=\"sub-titulo\">{{ subTitulo }}</p>\r\n    </div>\r\n    <div class=\"col-md-12 mt-2 mb-1\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".titulo{font-size:1rem;color:var(--cinza)}.sub-titulo{color:#b0adaa}.box{border:1px solid var(--cinza3);border-radius:10px}.box.box-icon{display:flex;justify-content:center;padding:35px 20px}.form-fieldset input{display:none}.form-fieldset .v-true{background:var(--verde);color:#fff}.form-fieldset label{font-size:11px;background:var(--cinza4);cursor:pointer;position:relative;display:inline-flex;align-items:center;justify-content:space-around;text-transform:uppercase;border-radius:30px;padding:7px;margin:0;width:66px}.form-fieldset label:before{content:\"\";background:#fff;border-radius:50%;height:15px;width:15px}.form-fieldset label:nth-child(2){margin-right:20px}table{width:100%;max-width:200px}table th,table td{vertical-align:top}.view,.view label{cursor:inherit!important}.disabled{background-color:#8fdfe8!important}\n"] }]
+            args: [{ selector: 'tcloud-ui-choice-issues', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$3], template: "\r\n\r\n<input #campo [(ngModel)]=\"value\" type=\"hidden\" [value]=\"false\" >\r\n<div class=\"box p-2 mt-3 mb-2\">\r\n  <div class=\"row\">\r\n    <div class=\"col-md-8\">\r\n      <p class=\"titulo\">{{ titulo }}</p>      \r\n    </div>\r\n    <div class=\"col-md-4 text-right\">  \r\n\r\n      <table class=\"mt-2 mr-2\" *ngIf=\"!view\" >\r\n        <tr>\r\n          <td>\r\n            <div class=\"form-fieldset\">\r\n              <label [class.v-true]=\"value\" class=\"mr-1\"><input #campo name=\"{{ ID }}\" [value]=\"true\" type=\"radio\" [(ngModel)]=\"value\" (click)=\"setV(true)\" >Sim</label>\r\n            </div>\r\n          </td>\r\n          <td>\r\n            <div class=\"form-fieldset\">\r\n              <label [class.v-true]=\"!value\" class=\"ml-2\"><input #campo name=\"{{ ID }}\" [value]=\"false\" type=\"radio\" [(ngModel)]=\"value\" (click)=\"setV(false)\" >N\u00E3o</label>\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      </table>    \r\n\r\n      <table class=\"mt-2 mr-2\" *ngIf=\"view\" >\r\n        <tr>\r\n          <td>\r\n            <div class=\"form-fieldset view\" >\r\n              <label *ngIf=\"value\" class=\"v-true disabled\" >Sim</label>\r\n              <label *ngIf=\"!value\">N\u00E3o</label>\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n    <div class=\"col-md-12 mt-1\">\r\n      <p class=\"sub-titulo\">{{ subTitulo }}</p>\r\n    </div>\r\n    <div class=\"col-md-12 mt-2 mb-1\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".titulo{font-size:1rem;color:var(--cinza)}.sub-titulo{color:#b0adaa}.box{border:1px solid var(--cinza3);border-radius:10px}.box.box-icon{display:flex;justify-content:center;padding:35px 20px}.form-fieldset input{display:none}.form-fieldset .v-true{background:var(--verde);color:#fff}.form-fieldset label{font-size:11px;background:var(--cinza4);cursor:pointer;position:relative;display:inline-flex;align-items:center;justify-content:space-around;text-transform:uppercase;border-radius:30px;padding:7px;margin:0;width:66px}.form-fieldset label:before{content:\"\";background:#fff;border-radius:50%;height:15px;width:15px}.form-fieldset label:nth-child(2){margin-right:20px}table{width:100%;max-width:200px}table th,table td{vertical-align:top}.view,.view label{cursor:inherit!important}.disabled{background-color:#8fdfe8!important}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { view: [{
                 type: Input
             }], titulo: [{
@@ -1649,12 +1649,12 @@ const CUSTOM_INPUT_VALIDATORS = {
     useExisting: forwardRef(() => TCloudUiMultiInputComponent),
     multi: true
 };
-const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
+const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2 = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => TCloudUiMultiInputComponent),
     multi: true
 };
-const noop = () => {
+const noop$2 = () => {
 };
 class TCloudUiMultiInputComponent {
     constructor() {
@@ -1667,8 +1667,8 @@ class TCloudUiMultiInputComponent {
         this.onChange = new EventEmitter();
         //Placeholders for the callbacks which are later providesd
         //by the Control Value Accessor
-        this.onTouchedCallback = noop;
-        this.onChangeCallback = noop;
+        this.onTouchedCallback = noop$2;
+        this.onChangeCallback = noop$2;
     }
     ngOnInit() {
         setTimeout(() => {
@@ -1787,10 +1787,10 @@ class TCloudUiMultiInputComponent {
     }
 }
 TCloudUiMultiInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TCloudUiMultiInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiMultiInputComponent, selector: "tcloud-ui-multi-input", inputs: { tcList: "tcList", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required" }, outputs: { tcChange: "tcChange", onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, CUSTOM_INPUT_VALIDATORS], ngImport: i0, template: "<div>\n\n    <table>\n      <tr>\n        <td>\n          <input class=\"tc-form-control\" (blur)=\"onChangeTouched()\" [(ngModel)]=\"item_value\" [class.tc-parent-validation]=\"use_validation_required\" type=\"text\" [(ngModel)]=\"input_value\" [disabled]=\"disabled || loading\" name=\"input_value\">\n        </td>\n        <td>\n          <button\n            [disabled]=\"!item_value || disabled || loading\"\n            title=\"Adicionar\"\n            class=\"btn-plus-select\"\n            (click)=\"addItem(input_value);onChangeTouched()\"\n            type=\"button\">\n            <i class=\"fas fa-plus\"></i>\n          </button>\n        </td>\n      </tr>\n    </table>\n  \n    <div class=\"box-itens-selected\" *ngIf=\"(tcList && tcList.length > 0)\">\n      <ng-container *ngFor=\"let item of tcList; let i = index\">\n        \n        <div class=\"box-label\" [ngStyle]=\"item_width(item.value)\">\n          <div class=\"box-value\" [title]=\"item.value\"  >\n            {{ item.value }}          \n          </div>\n          <div class=\"box-action\">\n            <button\n              [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\n              title=\"Remover\"\n              type=\"button\"\n              (click)=\"removeItem(item.value, i);onChangeTouched()\">\n              <i class=\"fas fa-times\"></i>\n            </button>\n          </div>\n        </div>\n\n      </ng-container>\n    </div>\n \n</div>\n  ", styles: ["table{width:100%;border-collapse:collapse;border:none}table td{vertical-align:top}table td:first-child{width:100%}input{font-size:.8rem;height:40px;border:1px solid #999;border-radius:4px 0 0 4px;padding:6px 10px;white-space:nowrap;text-overflow:ellipsis;width:100%;background-color:#fff;color:#888}.btn-plus-select{width:30px;height:40px;border:none;color:#fff;background-color:var(--verde);border-radius:0 4px 4px 0}.box-itens-selected{display:block;padding:9px;background-color:#ededed;border-radius:4px;width:100%}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{position:relative;display:inline-block;height:35px;min-width:60px;background-color:var(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px;width:100%}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{position:absolute;right:4px;top:7px}.box-label .box-action button{color:#d72020;background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}\n"], dependencies: [{ kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+TCloudUiMultiInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiMultiInputComponent, selector: "tcloud-ui-multi-input", inputs: { tcList: "tcList", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required" }, outputs: { tcChange: "tcChange", onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2, CUSTOM_INPUT_VALIDATORS], ngImport: i0, template: "<div>\n\n    <table>\n      <tr>\n        <td>\n          <input class=\"tc-form-control\" (blur)=\"onChangeTouched()\" [(ngModel)]=\"item_value\" [class.tc-parent-validation]=\"use_validation_required\" type=\"text\" [(ngModel)]=\"input_value\" [disabled]=\"disabled || loading\" name=\"input_value\">\n        </td>\n        <td>\n          <button\n            [disabled]=\"!item_value || disabled || loading\"\n            title=\"Adicionar\"\n            class=\"btn-plus-select\"\n            (click)=\"addItem(input_value);onChangeTouched()\"\n            type=\"button\">\n            <i class=\"fas fa-plus\"></i>\n          </button>\n        </td>\n      </tr>\n    </table>\n  \n    <div class=\"box-itens-selected\" *ngIf=\"(tcList && tcList.length > 0)\">\n      <ng-container *ngFor=\"let item of tcList; let i = index\">\n        \n        <div class=\"box-label\" [ngStyle]=\"item_width(item.value)\">\n          <div class=\"box-value\" [title]=\"item.value\"  >\n            {{ item.value }}          \n          </div>\n          <div class=\"box-action\">\n            <button\n              [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\n              title=\"Remover\"\n              type=\"button\"\n              (click)=\"removeItem(item.value, i);onChangeTouched()\">\n              <i class=\"fas fa-times\"></i>\n            </button>\n          </div>\n        </div>\n\n      </ng-container>\n    </div>\n \n</div>\n  ", styles: ["table{width:100%;border-collapse:collapse;border:none}table td{vertical-align:top}table td:first-child{width:100%}input{font-size:.8rem;height:40px;border:1px solid #999;border-radius:4px 0 0 4px;padding:6px 10px;white-space:nowrap;text-overflow:ellipsis;width:100%;background-color:#fff;color:#888}.btn-plus-select{width:30px;height:40px;border:none;color:#fff;background-color:var(--verde);border-radius:0 4px 4px 0}.box-itens-selected{display:block;padding:9px;background-color:#ededed;border-radius:4px;width:100%}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{position:relative;display:inline-block;height:35px;min-width:60px;background-color:var(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px;width:100%}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{position:absolute;right:4px;top:7px}.box-label .box-action button{color:#d72020;background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}\n"], dependencies: [{ kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-multi-input', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, CUSTOM_INPUT_VALIDATORS], template: "<div>\n\n    <table>\n      <tr>\n        <td>\n          <input class=\"tc-form-control\" (blur)=\"onChangeTouched()\" [(ngModel)]=\"item_value\" [class.tc-parent-validation]=\"use_validation_required\" type=\"text\" [(ngModel)]=\"input_value\" [disabled]=\"disabled || loading\" name=\"input_value\">\n        </td>\n        <td>\n          <button\n            [disabled]=\"!item_value || disabled || loading\"\n            title=\"Adicionar\"\n            class=\"btn-plus-select\"\n            (click)=\"addItem(input_value);onChangeTouched()\"\n            type=\"button\">\n            <i class=\"fas fa-plus\"></i>\n          </button>\n        </td>\n      </tr>\n    </table>\n  \n    <div class=\"box-itens-selected\" *ngIf=\"(tcList && tcList.length > 0)\">\n      <ng-container *ngFor=\"let item of tcList; let i = index\">\n        \n        <div class=\"box-label\" [ngStyle]=\"item_width(item.value)\">\n          <div class=\"box-value\" [title]=\"item.value\"  >\n            {{ item.value }}          \n          </div>\n          <div class=\"box-action\">\n            <button\n              [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\n              title=\"Remover\"\n              type=\"button\"\n              (click)=\"removeItem(item.value, i);onChangeTouched()\">\n              <i class=\"fas fa-times\"></i>\n            </button>\n          </div>\n        </div>\n\n      </ng-container>\n    </div>\n \n</div>\n  ", styles: ["table{width:100%;border-collapse:collapse;border:none}table td{vertical-align:top}table td:first-child{width:100%}input{font-size:.8rem;height:40px;border:1px solid #999;border-radius:4px 0 0 4px;padding:6px 10px;white-space:nowrap;text-overflow:ellipsis;width:100%;background-color:#fff;color:#888}.btn-plus-select{width:30px;height:40px;border:none;color:#fff;background-color:var(--verde);border-radius:0 4px 4px 0}.box-itens-selected{display:block;padding:9px;background-color:#ededed;border-radius:4px;width:100%}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{position:relative;display:inline-block;height:35px;min-width:60px;background-color:var(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px;width:100%}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{position:absolute;right:4px;top:7px}.box-label .box-action button{color:#d72020;background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}\n"] }]
+            args: [{ selector: 'tcloud-ui-multi-input', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2, CUSTOM_INPUT_VALIDATORS], template: "<div>\n\n    <table>\n      <tr>\n        <td>\n          <input class=\"tc-form-control\" (blur)=\"onChangeTouched()\" [(ngModel)]=\"item_value\" [class.tc-parent-validation]=\"use_validation_required\" type=\"text\" [(ngModel)]=\"input_value\" [disabled]=\"disabled || loading\" name=\"input_value\">\n        </td>\n        <td>\n          <button\n            [disabled]=\"!item_value || disabled || loading\"\n            title=\"Adicionar\"\n            class=\"btn-plus-select\"\n            (click)=\"addItem(input_value);onChangeTouched()\"\n            type=\"button\">\n            <i class=\"fas fa-plus\"></i>\n          </button>\n        </td>\n      </tr>\n    </table>\n  \n    <div class=\"box-itens-selected\" *ngIf=\"(tcList && tcList.length > 0)\">\n      <ng-container *ngFor=\"let item of tcList; let i = index\">\n        \n        <div class=\"box-label\" [ngStyle]=\"item_width(item.value)\">\n          <div class=\"box-value\" [title]=\"item.value\"  >\n            {{ item.value }}          \n          </div>\n          <div class=\"box-action\">\n            <button\n              [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\n              title=\"Remover\"\n              type=\"button\"\n              (click)=\"removeItem(item.value, i);onChangeTouched()\">\n              <i class=\"fas fa-times\"></i>\n            </button>\n          </div>\n        </div>\n\n      </ng-container>\n    </div>\n \n</div>\n  ", styles: ["table{width:100%;border-collapse:collapse;border:none}table td{vertical-align:top}table td:first-child{width:100%}input{font-size:.8rem;height:40px;border:1px solid #999;border-radius:4px 0 0 4px;padding:6px 10px;white-space:nowrap;text-overflow:ellipsis;width:100%;background-color:#fff;color:#888}.btn-plus-select{width:30px;height:40px;border:none;color:#fff;background-color:var(--verde);border-radius:0 4px 4px 0}.box-itens-selected{display:block;padding:9px;background-color:#ededed;border-radius:4px;width:100%}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{position:relative;display:inline-block;height:35px;min-width:60px;background-color:var(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px;width:100%}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{position:absolute;right:4px;top:7px}.box-label .box-action button{color:#d72020;background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { tcList: [{
                 type: Input
             }], placeholder: [{
@@ -2085,6 +2085,106 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             args: [{ name: 'bytes' }]
         }] });
 
+class DateBRPipe {
+    constructor() {
+        this.mascara = "##/##/####";
+    }
+    createMask(v) {
+        const mask = this.mascara;
+        let str = v.replace(/\s/g, '');
+        let strMask = '';
+        if (str.length <= 10) {
+            let j = 0;
+            for (let i = 0; i < mask.length; i++) {
+                if (mask[i] == '#') {
+                    strMask += str[j++];
+                }
+                else {
+                    strMask += mask[i];
+                }
+            }
+        }
+        else {
+            return v;
+        }
+        return strMask;
+    }
+    createMask4(v) {
+        const mask = "##/##";
+        let str = v.replace(/\s/g, '');
+        let strMask = '';
+        if (str.length <= 10) {
+            let j = 0;
+            for (let i = 0; i < mask.length; i++) {
+                if (mask[i] == '#') {
+                    strMask += str[j++];
+                }
+                else {
+                    strMask += mask[i];
+                }
+            }
+        }
+        else {
+            return v;
+        }
+        return strMask;
+    }
+    create_mask(v, _mask) {
+        const mask = _mask;
+        let str = v.replace(/\s/g, '');
+        let strMask = '';
+        if (str.length <= 10) {
+            let j = 0;
+            for (let i = 0; i < mask.length; i++) {
+                if (mask[i] == '#') {
+                    strMask += str[j++];
+                }
+                else {
+                    strMask += mask[i];
+                }
+            }
+        }
+        else {
+            return v;
+        }
+        return strMask;
+    }
+    transform(v) {
+        if (v) {
+            v = (v).replace(/\//g, "");
+            if ((v).length == 1) {
+                return this.create_mask(v, '#');
+            }
+            if ((v).length == 2) {
+                return this.create_mask(v, '##/');
+            }
+            if ((v).length == 3) {
+                return this.create_mask(v, '##/#');
+            }
+            if ((v).length == 4) {
+                return this.create_mask(v, '##/##');
+            }
+            if ((v).length == 5) {
+                return this.create_mask(v, '##/##/#');
+            }
+            if ((v).length == 6) {
+                return this.create_mask(v, '##/##/##');
+            }
+            if ((v).length == 7) {
+                return this.create_mask(v, '##/##/###');
+            }
+            return this.create_mask(v, '##/##/####');
+        }
+        return '';
+    }
+}
+DateBRPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DateBRPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+DateBRPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DateBRPipe, name: "datebr" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DateBRPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'datebr' }]
+        }] });
+
 class TCloudUiSearchInObjectService {
     constructor(datepipe, statusinfo) {
         this.datepipe = datepipe;
@@ -2495,355 +2595,534 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 }]
         }] });
 
-class TCloudUiAlignDirective {
-    constructor(el, renderer) {
-        this.el = el;
-        this.renderer = renderer;
-        this._direction = 'start';
+var TCFiltersType;
+(function (TCFiltersType) {
+    TCFiltersType["text"] = "text";
+    TCFiltersType["number"] = "number";
+    TCFiltersType["select"] = "select";
+    TCFiltersType["boolean"] = "boolean";
+    TCFiltersType["datetime"] = "datetime-local";
+})(TCFiltersType || (TCFiltersType = {}));
+var TCCondition;
+(function (TCCondition) {
+    TCCondition["equal"] = "equal";
+    TCCondition["gte"] = "gte";
+    TCCondition["lte"] = "lte";
+    TCCondition["lt"] = "lt";
+    TCCondition["gt"] = "gt";
+})(TCCondition || (TCCondition = {}));
+
+var translation = {
+    ptBR: {
+        days: ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado"],
+        daysShort: ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"],
+        daysMin: ["Do", "Se", "Te", "Qu", "Qu", "Se", "Sa"],
+        months: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
+        monthsShort: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
+        today: "Hoje",
+        clear: "Limpar",
+        titleFormat: "MM y",
+        format: "dd/mm/yyyy",
+        weekStart: 0
     }
-    set TCalign(direction) {
-        if (direction) {
-            this._direction = direction;
-            this.setStyle(this.el.nativeElement);
+};
+const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1 = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => TCloudUiDatepickerComponent),
+    multi: true
+};
+const noop$1 = () => {
+};
+class TCloudUiDatepickerComponent {
+    constructor(_DateBRPipe, _changeDetectorRef) {
+        this._DateBRPipe = _DateBRPipe;
+        this._changeDetectorRef = _changeDetectorRef;
+        // multiple permite selecionar multiplas datas
+        this.multiple = false;
+        // maxNumberOfDates - Maximum number of dates users can select. No limit is applied if 0 is set.
+        // Depende de: multiple como true
+        this.maxNumberOfDates = 0;
+        // daysOfWeekDisabled - Dias da semana desabilidatos = 0 para sabado até 6 para domingo
+        this.daysOfWeekDisabled = [];
+        // minDate - Data minima para exibicao do calendario - ex: 01/01/2020
+        this.minDate = '';
+        // maxDate - Data maxima para exibicao do calendario - ex: 31/12/2020
+        this.maxDate = '';
+        // datesDisabled - Datas desabilitadas - Ex: ['12/10/2020','25/12/2020']
+        this.datesDisabled = [];
+        // modeInput - Exibe um input para quando clicar abrir o calendario
+        this.modeInput = false;
+        this.useBorder = true;
+        // onChange - Dispara a data selecionada
+        this.onChange = new EventEmitter();
+        this.ngModelChange = new EventEmitter();
+        this.code = 'tcloud-ui-datepicker';
+        this.ID = '';
+        //Placeholders for the callbacks which are later providesd
+        //by the Control Value Accessor
+        this.onTouchedCallback = noop$1;
+        this.onChangeCallback = noop$1;
+    }
+    set ngModel(v) {
+        //console.log('ngModel', v);
+        if (v && v !== this.innerValue) {
+            this.innerValue = v; //this.toSetMask(v); 
         }
     }
     ngOnInit() {
+        this.ID = this.generateID();
+        Datepicker.locales.ptBR = translation.ptBR;
+        this.start_datepicker();
     }
-    setStyle(el) {
-        if (this._direction === 'start') {
-            this.renderer.setStyle(el, 'text-align', 'left');
+    generateID() {
+        return `tcloud-ui-datepicker-${Math.floor(Math.random() * Math.floor(Math.random() * Date.now()))}`;
+    }
+    toSetMask(v) {
+        return this._DateBRPipe.transform(v);
+    }
+    get_options() {
+        let options = {
+            nextArrow: `<i class="fas fa-caret-right"></i>`,
+            prevArrow: `<i class="fas fa-caret-left"></i>`,
+            format: 'dd/mm/yyyy',
+            daysOfWeekHighlighted: [0, 6],
+            language: 'ptBR'
+        };
+        if ((this.daysOfWeekDisabled).length > 0) {
+            options['daysOfWeekDisabled'] = this.daysOfWeekDisabled;
         }
-        if (this._direction === 'center') {
-            this.renderer.setStyle(el, 'text-align', 'center');
+        if ((this.datesDisabled).length > 0) {
+            options['datesDisabled'] = this.datesDisabled;
         }
-        if (this._direction === 'end') {
-            this.renderer.setStyle(el, 'text-align', 'right');
+        if (this.minDate !== '') {
+            options['minDate'] = this.minDate;
         }
+        if (this.maxDate !== '') {
+            options['maxDate'] = this.maxDate;
+        }
+        if (this.multiple) {
+            options['maxNumberOfDates'] = this.maxNumberOfDates;
+        }
+        return options;
     }
-}
-TCloudUiAlignDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiAlignDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-TCloudUiAlignDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiAlignDirective, selector: "[TCalign]", inputs: { TCalign: "TCalign" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiAlignDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[TCalign]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { TCalign: [{
-                type: Input
-            }] } });
-
-class TCloudUiTooltipDirective {
-    constructor(el, renderer) {
-        this.el = el;
-        this.renderer = renderer;
-        this._direction = 'top';
-        // main
-        this.el_height = 0;
-        this.el_width = 0;
-        this.el_center = 0;
-        this.el_position = 0;
-        // tooltip
-        this.target_height = 0;
-        this.target_width = 0;
-        this.target_center = 0;
-        this.ID = '';
-        this.info_text = '';
+    clearDate() {
+        if (this.datepicker) {
+            this.datepicker.setDate({ clear: true });
+        }
     }
-    onMouseOver() {
-        if (this.getElement()) {
-            this.renderer.addClass(this.el.nativeElement, 'main-tooltip');
-            const el = this.getElement();
-            el.style.display = 'inline';
-            setTimeout(() => {
-                var _a;
-                this.el_height = this.el.nativeElement.offsetHeight;
-                this.el_width = this.el.nativeElement.offsetWidth;
-                this.el_center = this.el_width / 2;
-                const rect = (_a = this.el.nativeElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-                this.el_position = (rect === null || rect === void 0 ? void 0 : rect.left) || 0;
-                // console.log('this.el_width', this.el_width);
-                // console.log('this.el_center', this.el_center);
-                // console.log('this.el_position', this.el_position);
-                this.target_height = el.offsetHeight;
-                this.target_width = el.offsetWidth;
-                this.target_center = this.target_width / 2;
-                // console.log('target_heigth', this.target_height);
-                // console.log('target_width', this.target_width);
-                // console.log('target_center', this.target_center);
-                // this.renderer.setStyle(el, 'bottom', `${this.el_position}px`);
-                switch (this._direction) {
-                    case 'top':
-                        this.to_top(el);
-                        break;
-                    case 'bottom':
-                        this.to_bottom(el);
-                        break;
-                    case 'left':
-                        this.to_left(el);
-                        break;
-                    case 'right':
-                        this.to_right(el);
-                        break;
+    start_datepicker() {
+        setTimeout(() => {
+            var _a;
+            const input_datepicker = (_a = this.input_datepicker) === null || _a === void 0 ? void 0 : _a.nativeElement;
+            if (input_datepicker) {
+                input_datepicker.setAttribute('placeholder', 'DD/MM/YYYY');
+                if (!this.useBorder) {
+                    input_datepicker.setAttribute('style', 'border:none; text-align: center; max-width: 105px; padding: 0;');
                 }
-            });
-        }
+                this.datepicker = new Datepicker(input_datepicker, this.get_options());
+                if (this.innerValue && this.innerValue !== '') {
+                    this.toSetDefaultDate(this.innerValue);
+                }
+                input_datepicker.addEventListener('keyup', (event) => {
+                    var _a;
+                    const v = (input_datepicker['value']) ? input_datepicker['value'] : '';
+                    input_datepicker['value'] = this.toSetMask(v);
+                    if ((input_datepicker['value']).length >= 10) {
+                        const v = (input_datepicker['value']).substring(0, 10);
+                        const part_date = (v).split('/');
+                        if ((part_date).length === 3) {
+                            let dia = part_date[0];
+                            let mes = part_date[1];
+                            let ano = part_date[2];
+                            mes = (+(mes) < 10) ? `0${+mes}` : mes;
+                            dia = (+(dia) < 10) ? `0${+dia}` : dia;
+                            const dt = new Date(ano + '-' + mes + '-' + dia);
+                            if (dt) {
+                                input_datepicker === null || input_datepicker === void 0 ? void 0 : input_datepicker.changeDate;
+                                (_a = document.getElementById(this.ID)) === null || _a === void 0 ? void 0 : _a.blur();
+                                this.onChange.emit(this.innerValue);
+                                this.ngModelChange.emit(this.innerValue);
+                            }
+                        }
+                    }
+                    else {
+                        this.innerValue = undefined;
+                        this.onChange.emit(this.innerValue);
+                        this.ngModelChange.emit(this.innerValue);
+                    }
+                    //console.log('input_datepicker', input_datepicker['value'] );
+                });
+                input_datepicker.addEventListener('changeDate', (event) => {
+                    var _a;
+                    //console.log(event);
+                    if ((_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.date) {
+                        this.toSelectedDate(event.detail);
+                    }
+                    else {
+                        //console.log('event null');
+                        this.innerValue = '';
+                        this.ngModelChange.emit(this.innerValue);
+                    }
+                });
+            }
+        });
     }
-    onMouseOut() {
-        if (this.getElement()) {
-            const el = this.getElement();
-            el.style.display = 'none';
-            this.renderer.removeClass(this.el.nativeElement, 'main-tooltip');
+    toSetDate() {
+        // Ex de uso
+        const dates = ['18/11/2022'];
+        if (this.datepicker) {
+            this.datepicker.setDate(dates);
         }
     }
-    set TCtooltip(tooltip) {
-        if (tooltip) {
-            this.check(tooltip);
+    toSetDefaultDate(date) {
+        if (date === undefined || date === null || date === '') {
+            this.clearDate();
+            return;
         }
-    }
-    set TCdirection(direction) {
-        if (direction) {
-            this._direction = direction;
+        let dates = [];
+        if (date && typeof date === 'string') {
+            if ((date).includes(',')) {
+                const dates = (date).split(',');
+                date = dates;
+                if (!this.multiple) {
+                    this.innerValue = date = dates[0];
+                    this.ngModelChange.emit(this.innerValue);
+                }
+            }
+        }
+        if (date && typeof date === 'string') {
+            (dates).push(date);
+        }
+        else {
+            dates = date;
+        }
+        if (this.datepicker) {
+            this.datepicker.setDate(dates);
         }
     }
-    ngOnInit() {
-    }
-    generateID() {
-        return `tc-tooltip-${Math.floor(Math.random() * Math.floor(Math.random() * Date.now()))}`;
-    }
-    getElement() {
-        return document.getElementById(this.ID) || undefined;
-    }
-    check(tooltip) {
-        this.ID = this.generateID();
-        this.info_text = tooltip;
-        let el = this.el.nativeElement;
-        this.main_el = el;
-        if (el) {
-            this.create_tooltip(tooltip, el);
+    toSelectedDate(detail) {
+        if (detail.datepicker.dates && (detail.datepicker.dates).length > 0) {
+            if (this.multiple) {
+                let dates = [];
+                for (let i = 0; i < (detail.datepicker.dates).length; i++) {
+                    const timeStamp = detail.datepicker.dates[i];
+                    (dates).push(this.format_date(timeStamp));
+                }
+                this.innerValue = dates;
+                this.onChange.emit(this.innerValue);
+            }
+            else {
+                const timeStamp = detail.datepicker.dates[0];
+                const date = this.format_date(timeStamp);
+                this.onChange.emit(date);
+                this.innerValue = date;
+            }
         }
         else {
-            console.log("TCL: tooltip -> el", this.el.nativeElement);
-        }
+            this.clearDate();
+            this.innerValue = null;
+            this.onChange.emit(this.innerValue);
+        }
+        this.value = this.innerValue;
+        this.ngModelChange.emit(this.innerValue);
+    }
+    format_date(timeStamp) {
+        var date = new Date(timeStamp);
+        let dia = `${date.getDate()}`;
+        let mes = `${date.getMonth() + 1}`;
+        let ano = `${date.getFullYear()}`;
+        dia = (+(dia) < 10) ? `0${+dia}` : dia;
+        mes = (+(mes) < 10) ? `0${+mes}` : mes;
+        const dateFormat = `${dia}/${mes}/${ano}`;
+        return dateFormat;
+    }
+    toClickIn(id) {
+        const element = document.getElementById(id);
+        setTimeout(() => {
+            var _a;
+            (_a = element === null || element === void 0 ? void 0 : element.datepicker) === null || _a === void 0 ? void 0 : _a.show();
+        });
     }
-    setStyle(el) {
-        // this.renderer.setStyle(el, 'position', 'relative');
-        // this.renderer.setStyle(el, 'display', 'inline');
+    //get accessor
+    get value() {
+        return this.innerValue;
     }
-    create_tooltip(tip, el) {
-        this.setStyle(el);
-        const tooltip = document.createElement("div");
-        tooltip.setAttribute('id', this.ID);
-        tooltip.setAttribute('style', `
-      position: absolute;  
-      display: none;
-      padding: 10px;
-      border-radius: 10px;
-      text-align: center;
-      width: max-content;
-      max-width: 250px;
-      background-color: transparent;
-      color: transparent;
-      z-index: 1090;
-      bottom: ${this.el_position}px;
-      left: ${this.target_center}px;
-    `);
-        tooltip.innerHTML = tip;
-        el.insertBefore(tooltip, null);
+    ;
+    //set accessor including call the onchange callback
+    set value(v) {
+        //console.log('value', v);
+        if (v !== this.innerValue) {
+            this.innerValue = v; // this.toSetMask(v);      
+            this.onChangeCallback(v);
+        }
+        else {
+            // this.innerValue = '';
+        }
     }
-    to_top(el) {
-        const pos = this.el_center - (this.target_center);
-        this.renderer.setStyle(el, 'left', `${(pos)}px`);
-        this.renderer.setStyle(el, 'bottom', `${(this.el_height + 7)}px`);
-        el.setAttribute('class', 'tc-directive-tooltip tc-directive-tooltip-top');
+    //Set touched on blur
+    onBlur() {
+        this.onTouchedCallback();
     }
-    to_bottom(el) {
-        const pos = this.el_center - (this.target_center);
-        this.renderer.setStyle(el, 'left', `${(pos)}px`);
-        this.renderer.setStyle(el, 'bottom', `-${(this.target_height + 7)}px`);
-        el.setAttribute('class', 'tc-directive-tooltip tc-directive-tooltip-bottom');
+    //From ControlValueAccessor interface
+    writeValue(value) {
+        if (value !== this.innerValue) {
+            this.innerValue = value;
+            this.toSetDefaultDate(value);
+        }
     }
-    to_right(el) {
-        const pos = this.el_width;
-        this.renderer.setStyle(el, 'left', `${(pos + 11)}px`);
-        this.renderer.setStyle(el, 'bottom', `-${(((this.target_height) / 2) - (this.el_height / 2))}px`);
-        el.setAttribute('class', 'tc-directive-tooltip tc-directive-tooltip-right');
+    //From ControlValueAccessor interface
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
     }
-    to_left(el) {
-        const pos = -((this.target_width));
-        this.renderer.setStyle(el, 'left', `${(pos - 11)}px`);
-        this.renderer.setStyle(el, 'bottom', `-${(((this.target_height) / 2) - (this.el_height / 2))}px`);
-        el.setAttribute('class', 'tc-directive-tooltip tc-directive-tooltip-left');
+    //From ControlValueAccessor interface
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
     }
 }
-TCloudUiTooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-TCloudUiTooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiTooltipDirective, selector: "[TCtooltip]", inputs: { TCtooltip: "TCtooltip", TCdirection: "TCdirection" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseout": "onMouseOut()" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTooltipDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[TCtooltip]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { onMouseOver: [{
-                type: HostListener,
-                args: ['mouseover']
-            }], onMouseOut: [{
-                type: HostListener,
-                args: ['mouseout']
-            }], TCtooltip: [{
+TCloudUiDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDatepickerComponent, deps: [{ token: DateBRPipe }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TCloudUiDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiDatepickerComponent, selector: "tcloud-ui-datepicker", inputs: { multiple: "multiple", maxNumberOfDates: "maxNumberOfDates", daysOfWeekDisabled: "daysOfWeekDisabled", minDate: "minDate", maxDate: "maxDate", datesDisabled: "datesDisabled", modeInput: "modeInput", useBorder: "useBorder", ngModel: "ngModel", code: "code" }, outputs: { onChange: "onChange", ngModelChange: "ngModelChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1], viewQueries: [{ propertyName: "input_datepicker", first: true, predicate: ["input_datepicker"], descendants: true }], ngImport: i0, template: "<!-- Input mode -->\r\n<ng-container *ngIf=\"modeInput\">\r\n\r\n  <div class=\"input-tc-datepicker\" [class.no-border]=\"!useBorder\">\r\n    <table class=\"table-box-input\">\r\n      <tr>\r\n        <td>\r\n          <div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fas fa-calendar-alt\"></i></div>\r\n        </td>\r\n        <td>\r\n          <input #input_datepicker type=\"text\" name=\"{{ID}}\" id=\"{{ID}}\" class=\"form-control\" >\r\n        </td>\r\n      </tr>\r\n    </table>\r\n  </div>\r\n\r\n  \r\n  \r\n</ng-container>\r\n\r\n<!-- Inline mode -->\r\n<ng-container *ngIf=\"!modeInput\">  \r\n  <div #input_datepicker id=\"{{ID}}\" pattern=\"/^\\d{2}\\/\\d{2}\\/\\d{4}$/\"></div>\r\n</ng-container>\r\n\r\n\r\n<!-- EX de uso \r\n  <tc-datepicker \r\n    [multiple]=\"false\"\r\n    [daysOfWeekDisabled]=\"[0,6]\"\r\n    [minDate]=\"'18/11/2021'\"\r\n    [maxDate]=\"'18/12/2023'\"\r\n    [datesDisabled]=\"['12/10/2022','25/12/2022']\"\r\n    [modeInput]=\"false\"\r\n    [(ngModel)]=\"dateValue\" >\r\n  </tc-datepicker>\r\n  \r\n  // multiple = false\r\n  // dateValue - string - pode ser: 12/12/2022 \r\n\r\n  // multiple = true\r\n  // dateValue - string - pode ser: 11/12/2022,12/12/2022 ... \r\n\r\n  <pre>data: {{ dateValue }}</pre>\r\n-->\r\n", styles: [".input_datepicker{width:100%;max-width:290px}.input-tc-datepicker{border:1px solid #ccc;border-radius:3px}.input-tc-datepicker.no-border{border:none!important}.input-tc-datepicker .table-box-input{width:100%}.input-tc-datepicker .table-box-input td:first-child{width:20px}.input-tc-datepicker .table-box-input td:first-child .delimiter-time-icon{text-align:center;cursor:pointer}.input-tc-datepicker .table-box-input input{border:none}\n", ".datepicker{display:none}.datepicker.active{display:block}.datepicker-dropdown{left:0;padding-top:4px;position:absolute;top:0;z-index:20}.datepicker-dropdown.datepicker-orient-top{padding-bottom:4px;padding-top:0}.datepicker-picker{background-color:#fff;border-radius:4px;display:inline-block}.datepicker-dropdown .datepicker-picker{box-shadow:0 2px 3px #0a0a0a1a,0 0 0 1px #0a0a0a1a}.datepicker-picker span{-webkit-touch-callout:none;border:0;border-radius:4px;cursor:default;display:block;flex:1;text-align:center;-webkit-user-select:none;user-select:none}.datepicker-main{padding:2px}.datepicker-footer{background-color:#f5f5f5;box-shadow:inset 0 1px 1px #0a0a0a1a}.datepicker-controls,.datepicker-grid,.datepicker-view,.datepicker-view .days-of-week{display:flex}.datepicker-grid{flex-wrap:wrap}.datepicker-view .days .datepicker-cell,.datepicker-view .dow{flex-basis:14.2857142857%}.datepicker-view.datepicker-grid .datepicker-cell{flex-basis:25%}.datepicker-cell,.datepicker-view .week{height:2.25rem;line-height:2.25rem}.datepicker-title{background-color:#f5f5f5;box-shadow:inset 0 -1px 1px #0a0a0a1a;font-weight:700;padding:.375rem .75rem;text-align:center}.datepicker-header .datepicker-controls{padding:2px 2px 0}.datepicker-controls .button{align-items:center;background-color:#fff;border:1px solid #dbdbdb;border-radius:4px;box-shadow:none;color:#363636;cursor:pointer;display:inline-flex;font-size:1rem;height:2.25em;justify-content:center;line-height:1.5;margin:0;padding:calc(.375em - 1px) .75em;position:relative;text-align:center;vertical-align:top;white-space:nowrap}.datepicker-controls .button:active,.datepicker-controls .button:focus{outline:none}.datepicker-controls .button:hover{border-color:#b5b5b5;color:#363636}.datepicker-controls .button:focus{border-color:#3273dc;color:#363636}.datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em #3273dc40}.datepicker-controls .button:active{border-color:#4a4a4a;color:#363636}.datepicker-controls .button[disabled]{cursor:not-allowed}.datepicker-header .datepicker-controls .button{border-color:transparent;font-weight:700}.datepicker-header .datepicker-controls .button:hover{background-color:#f9f9f9}.datepicker-header .datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em #ffffff40}.datepicker-header .datepicker-controls .button:active{background-color:#f2f2f2}.datepicker-header .datepicker-controls .button[disabled]{box-shadow:none}.datepicker-footer .datepicker-controls .button{border-radius:2px;font-size:.75rem;margin:calc(.375rem - 1px) .375rem;width:100%}.datepicker-controls .view-switch{flex:auto}.datepicker-controls .next-btn,.datepicker-controls .prev-btn{padding-left:.375rem;padding-right:.375rem;width:2.25rem}.datepicker-controls .next-btn.disabled,.datepicker-controls .prev-btn.disabled{visibility:hidden}.datepicker-view .dow{font-size:.875rem;font-weight:700;height:1.5rem;line-height:1.5rem}.datepicker-view .week{color:#b5b5b5;font-size:.75rem;width:2.25rem}@media (max-width:22.5rem){.datepicker-view .week{width:1.96875rem}}.datepicker-grid{width:15.75rem}@media (max-width:22.5rem){.calendar-weeks+.days .datepicker-grid{width:13.78125rem}}.datepicker-cell:not(.disabled):hover{background-color:#f9f9f9;cursor:pointer}.datepicker-cell.focused:not(.selected){background-color:#e8e8e8}.datepicker-cell.selected,.datepicker-cell.selected:hover{background-color:#3273dc;color:#fff;font-weight:600}.datepicker-cell.disabled{color:#dbdbdb}.datepicker-cell.next:not(.disabled),.datepicker-cell.prev:not(.disabled){color:#7a7a7a}.datepicker-cell.next.selected,.datepicker-cell.prev.selected{color:#e6e6e6}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today){background-color:#f5f5f5;border-radius:0}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover{background-color:#eee}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused{background-color:#e8e8e8}.datepicker-cell.today:not(.selected){background-color:#00d1b2}.datepicker-cell.today:not(.selected):not(.disabled){color:#fff}.datepicker-cell.today.focused:not(.selected){background-color:#00c4a7}.datepicker-cell.range-end:not(.selected),.datepicker-cell.range-start:not(.selected){background-color:#b5b5b5;color:#fff}.datepicker-cell.range-end.focused:not(.selected),.datepicker-cell.range-start.focused:not(.selected){background-color:#afafaf}.datepicker-cell.range-start{border-radius:4px 0 0 4px}.datepicker-cell.range-end{border-radius:0 4px 4px 0}.datepicker-cell.range{background-color:#dbdbdb;border-radius:0}.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover{background-color:#d5d5d5}.datepicker-cell.range.disabled{color:#c2c2c2}.datepicker-cell.range.focused{background-color:#cfcfcf}.datepicker-view.datepicker-grid .datepicker-cell{height:4.5rem;line-height:4.5rem}.datepicker-input.in-edit{border-color:#2366d1}.datepicker-input.in-edit:active,.datepicker-input.in-edit:focus{box-shadow:0 0 .25em .25em #2366d133}\n", ".datepicker-picker{border:1px solid #ccc;padding:10px 15px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tcloud-ui-datepicker', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1], encapsulation: ViewEncapsulation.None, template: "<!-- Input mode -->\r\n<ng-container *ngIf=\"modeInput\">\r\n\r\n  <div class=\"input-tc-datepicker\" [class.no-border]=\"!useBorder\">\r\n    <table class=\"table-box-input\">\r\n      <tr>\r\n        <td>\r\n          <div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fas fa-calendar-alt\"></i></div>\r\n        </td>\r\n        <td>\r\n          <input #input_datepicker type=\"text\" name=\"{{ID}}\" id=\"{{ID}}\" class=\"form-control\" >\r\n        </td>\r\n      </tr>\r\n    </table>\r\n  </div>\r\n\r\n  \r\n  \r\n</ng-container>\r\n\r\n<!-- Inline mode -->\r\n<ng-container *ngIf=\"!modeInput\">  \r\n  <div #input_datepicker id=\"{{ID}}\" pattern=\"/^\\d{2}\\/\\d{2}\\/\\d{4}$/\"></div>\r\n</ng-container>\r\n\r\n\r\n<!-- EX de uso \r\n  <tc-datepicker \r\n    [multiple]=\"false\"\r\n    [daysOfWeekDisabled]=\"[0,6]\"\r\n    [minDate]=\"'18/11/2021'\"\r\n    [maxDate]=\"'18/12/2023'\"\r\n    [datesDisabled]=\"['12/10/2022','25/12/2022']\"\r\n    [modeInput]=\"false\"\r\n    [(ngModel)]=\"dateValue\" >\r\n  </tc-datepicker>\r\n  \r\n  // multiple = false\r\n  // dateValue - string - pode ser: 12/12/2022 \r\n\r\n  // multiple = true\r\n  // dateValue - string - pode ser: 11/12/2022,12/12/2022 ... \r\n\r\n  <pre>data: {{ dateValue }}</pre>\r\n-->\r\n", styles: [".input_datepicker{width:100%;max-width:290px}.input-tc-datepicker{border:1px solid #ccc;border-radius:3px}.input-tc-datepicker.no-border{border:none!important}.input-tc-datepicker .table-box-input{width:100%}.input-tc-datepicker .table-box-input td:first-child{width:20px}.input-tc-datepicker .table-box-input td:first-child .delimiter-time-icon{text-align:center;cursor:pointer}.input-tc-datepicker .table-box-input input{border:none}\n", ".datepicker{display:none}.datepicker.active{display:block}.datepicker-dropdown{left:0;padding-top:4px;position:absolute;top:0;z-index:20}.datepicker-dropdown.datepicker-orient-top{padding-bottom:4px;padding-top:0}.datepicker-picker{background-color:#fff;border-radius:4px;display:inline-block}.datepicker-dropdown .datepicker-picker{box-shadow:0 2px 3px #0a0a0a1a,0 0 0 1px #0a0a0a1a}.datepicker-picker span{-webkit-touch-callout:none;border:0;border-radius:4px;cursor:default;display:block;flex:1;text-align:center;-webkit-user-select:none;user-select:none}.datepicker-main{padding:2px}.datepicker-footer{background-color:#f5f5f5;box-shadow:inset 0 1px 1px #0a0a0a1a}.datepicker-controls,.datepicker-grid,.datepicker-view,.datepicker-view .days-of-week{display:flex}.datepicker-grid{flex-wrap:wrap}.datepicker-view .days .datepicker-cell,.datepicker-view .dow{flex-basis:14.2857142857%}.datepicker-view.datepicker-grid .datepicker-cell{flex-basis:25%}.datepicker-cell,.datepicker-view .week{height:2.25rem;line-height:2.25rem}.datepicker-title{background-color:#f5f5f5;box-shadow:inset 0 -1px 1px #0a0a0a1a;font-weight:700;padding:.375rem .75rem;text-align:center}.datepicker-header .datepicker-controls{padding:2px 2px 0}.datepicker-controls .button{align-items:center;background-color:#fff;border:1px solid #dbdbdb;border-radius:4px;box-shadow:none;color:#363636;cursor:pointer;display:inline-flex;font-size:1rem;height:2.25em;justify-content:center;line-height:1.5;margin:0;padding:calc(.375em - 1px) .75em;position:relative;text-align:center;vertical-align:top;white-space:nowrap}.datepicker-controls .button:active,.datepicker-controls .button:focus{outline:none}.datepicker-controls .button:hover{border-color:#b5b5b5;color:#363636}.datepicker-controls .button:focus{border-color:#3273dc;color:#363636}.datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em #3273dc40}.datepicker-controls .button:active{border-color:#4a4a4a;color:#363636}.datepicker-controls .button[disabled]{cursor:not-allowed}.datepicker-header .datepicker-controls .button{border-color:transparent;font-weight:700}.datepicker-header .datepicker-controls .button:hover{background-color:#f9f9f9}.datepicker-header .datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em #ffffff40}.datepicker-header .datepicker-controls .button:active{background-color:#f2f2f2}.datepicker-header .datepicker-controls .button[disabled]{box-shadow:none}.datepicker-footer .datepicker-controls .button{border-radius:2px;font-size:.75rem;margin:calc(.375rem - 1px) .375rem;width:100%}.datepicker-controls .view-switch{flex:auto}.datepicker-controls .next-btn,.datepicker-controls .prev-btn{padding-left:.375rem;padding-right:.375rem;width:2.25rem}.datepicker-controls .next-btn.disabled,.datepicker-controls .prev-btn.disabled{visibility:hidden}.datepicker-view .dow{font-size:.875rem;font-weight:700;height:1.5rem;line-height:1.5rem}.datepicker-view .week{color:#b5b5b5;font-size:.75rem;width:2.25rem}@media (max-width:22.5rem){.datepicker-view .week{width:1.96875rem}}.datepicker-grid{width:15.75rem}@media (max-width:22.5rem){.calendar-weeks+.days .datepicker-grid{width:13.78125rem}}.datepicker-cell:not(.disabled):hover{background-color:#f9f9f9;cursor:pointer}.datepicker-cell.focused:not(.selected){background-color:#e8e8e8}.datepicker-cell.selected,.datepicker-cell.selected:hover{background-color:#3273dc;color:#fff;font-weight:600}.datepicker-cell.disabled{color:#dbdbdb}.datepicker-cell.next:not(.disabled),.datepicker-cell.prev:not(.disabled){color:#7a7a7a}.datepicker-cell.next.selected,.datepicker-cell.prev.selected{color:#e6e6e6}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today){background-color:#f5f5f5;border-radius:0}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover{background-color:#eee}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused{background-color:#e8e8e8}.datepicker-cell.today:not(.selected){background-color:#00d1b2}.datepicker-cell.today:not(.selected):not(.disabled){color:#fff}.datepicker-cell.today.focused:not(.selected){background-color:#00c4a7}.datepicker-cell.range-end:not(.selected),.datepicker-cell.range-start:not(.selected){background-color:#b5b5b5;color:#fff}.datepicker-cell.range-end.focused:not(.selected),.datepicker-cell.range-start.focused:not(.selected){background-color:#afafaf}.datepicker-cell.range-start{border-radius:4px 0 0 4px}.datepicker-cell.range-end{border-radius:0 4px 4px 0}.datepicker-cell.range{background-color:#dbdbdb;border-radius:0}.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover{background-color:#d5d5d5}.datepicker-cell.range.disabled{color:#c2c2c2}.datepicker-cell.range.focused{background-color:#cfcfcf}.datepicker-view.datepicker-grid .datepicker-cell{height:4.5rem;line-height:4.5rem}.datepicker-input.in-edit{border-color:#2366d1}.datepicker-input.in-edit:active,.datepicker-input.in-edit:focus{box-shadow:0 0 .25em .25em #2366d133}\n", ".datepicker-picker{border:1px solid #ccc;padding:10px 15px}\n"] }]
+        }], ctorParameters: function () { return [{ type: DateBRPipe }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { multiple: [{
                 type: Input
-            }], TCdirection: [{
+            }], maxNumberOfDates: [{
+                type: Input
+            }], daysOfWeekDisabled: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], datesDisabled: [{
+                type: Input
+            }], modeInput: [{
+                type: Input
+            }], useBorder: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }], ngModel: [{
+                type: Input
+            }], ngModelChange: [{
+                type: Output
+            }], input_datepicker: [{
+                type: ViewChild,
+                args: ['input_datepicker', { static: false }]
+            }], code: [{
                 type: Input
             }] } });
 
-class TCloudUiDirectiveModule {
-}
-TCloudUiDirectiveModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TCloudUiDirectiveModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDirectiveModule, declarations: [TCloudUiTooltipDirective,
-        TCloudUiAlignDirective], exports: [TCloudUiTooltipDirective,
-        TCloudUiAlignDirective] });
-TCloudUiDirectiveModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDirectiveModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDirectiveModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        TCloudUiTooltipDirective,
-                        TCloudUiAlignDirective
-                    ],
-                    exports: [
-                        TCloudUiTooltipDirective,
-                        TCloudUiAlignDirective
-                    ],
-                }]
-        }] });
-
-class TCloudUiPipesModule {
-}
-TCloudUiPipesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiPipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TCloudUiPipesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiPipesModule, declarations: [MonthNamePipe,
-        StatusInfoPipe,
-        RespectivePipe,
-        CNPJPipe,
-        CPFPipe,
-        BytesPipe], imports: [CommonModule], exports: [DatePipe,
-        MonthNamePipe,
-        StatusInfoPipe,
-        RespectivePipe,
-        CNPJPipe,
-        CPFPipe,
-        BytesPipe] });
-TCloudUiPipesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiPipesModule, providers: [
-        DatePipe,
-        MonthNamePipe,
-        StatusInfoPipe,
-        RespectivePipe,
-        CNPJPipe,
-        CPFPipe,
-        BytesPipe
-    ], imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiPipesModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                    ],
-                    declarations: [
-                        MonthNamePipe,
-                        StatusInfoPipe,
-                        RespectivePipe,
-                        CNPJPipe,
-                        CPFPipe,
-                        BytesPipe
-                    ],
-                    exports: [
-                        DatePipe,
-                        MonthNamePipe,
-                        StatusInfoPipe,
-                        RespectivePipe,
-                        CNPJPipe,
-                        CPFPipe,
-                        BytesPipe
-                    ],
-                    providers: [
-                        DatePipe,
-                        MonthNamePipe,
-                        StatusInfoPipe,
-                        RespectivePipe,
-                        CNPJPipe,
-                        CPFPipe,
-                        BytesPipe
-                    ]
-                }]
-        }] });
-
-class TCloudUiLoadingTransitionsService {
+const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => TCloudUiDatepickerTimeComponent),
+    multi: true
+};
+const noop = () => {
+};
+class TCloudUiDatepickerTimeComponent {
     constructor() {
-        this.ID = 'tcloud-ui-loading-transitions';
+        this.ngModelChange = new EventEmitter();
+        this.onChange = new EventEmitter();
+        this.eventChange = new EventEmitter();
+        this.DD_MM_YYYY = '';
+        this.HH = '';
+        this.MM = '';
+        this.ID = '';
+        //Placeholders for the callbacks which are later providesd
+        //by the Control Value Accessor
+        this.onTouchedCallback = noop;
+        this.onChangeCallback = noop;
     }
-    /**
-     * Inicia a tela de bloqueio para carregamento de tarefa
-     */
-    start() {
-        this.create_loading_transition();
-        if (document.getElementById(this.ID)) {
-            const box = document.getElementById(this.ID);
-            box === null || box === void 0 ? void 0 : box.classList.add('tcloud-ui-start-loading');
+    set ngModel(v) {
+        if (v && v !== this.innerValue) {
+            this.innerValue = v;
         }
     }
-    /**
-     * Encerra a tela de bloqueio
-     */
-    stop() {
-        if (document.getElementById(this.ID)) {
-            const box = document.getElementById(this.ID);
-            box === null || box === void 0 ? void 0 : box.classList.remove('tcloud-ui-start-loading');
-            const body = document.getElementsByTagName('body')[0];
-            body.classList.remove('tcloud-ui-body-loading-transitions');
+    ngOnInit() {
+        this.ID = this.generateID();
+    }
+    generateID() {
+        return `tcloud-ui-datepicker-time-${Math.floor(Math.random() * Math.floor(Math.random() * Date.now()))}`;
+    }
+    toSetDate(date) {
+        console.log('toSetDate', date);
+        this.set_date_by_datepicker(date);
+    }
+    toSetTime() {
+        if (this.DD_MM_YYYY && ((this.DD_MM_YYYY).trim()).length === 10) {
+            const date = (this.DD_MM_YYYY).replace(/-/g, '/');
+            let date_part = (date).split('/');
+            let dd = date_part[0];
+            let mm = date_part[1];
+            let yy = date_part[2];
+            const datetime = new Date(`${yy}-${mm}-${dd}`);
+            if (this.checkIsDate(datetime)) {
+                this.set_date_by_datepicker(date);
+            }
         }
     }
-    create_loading_transition() {
-        let box = null;
-        if (document.getElementById(this.ID)) {
-            box = document.getElementById(this.ID);
+    set_date_by_datepicker(date) {
+        var _a, _b;
+        if (date) {
+            date = (date).replace(/-/g, '/');
+            let date_part = (date).split('/');
+            let dia = date_part[0];
+            let mes = date_part[1];
+            let ano = date_part[2];
+            let hh = this.HH;
+            if (!hh) {
+                hh = '00';
+            }
+            else {
+                if ((+(hh) >= 0 && +(hh) < 24)) {
+                    hh = (+(hh) < 10) ? `0${+(hh)}` : `${+(hh)}`;
+                }
+                else {
+                    hh = '00';
+                }
+            }
+            let mm = this.MM;
+            if (!mm) {
+                mm = '00';
+            }
+            else {
+                if ((+(mm) >= 0 && +(mm) < 60)) {
+                    mm = (+(mm) < 10) ? `0${+(mm)}` : `${+(mm)}`;
+                }
+                else {
+                    mm = '00';
+                }
+            }
+            if (hh === '00') {
+                this.HH = hh;
+            }
+            if (mm === '00') {
+                this.MM = mm;
+            }
+            const str_date = `${ano}-${mes}-${dia}T${hh}:${mm}:00`;
+            const datetime = new Date(str_date);
+            if (this.checkIsDate(datetime)) {
+                this.innerValue = datetime;
+            }
+            else {
+                this.innerValue = undefined;
+            }
+            this.ngModelChange.emit(this.innerValue);
+            this.onChange.emit(this.innerValue);
+            this.eventChange.emit((_a = this.datepickertime) === null || _a === void 0 ? void 0 : _a.nativeElement);
+            console.log('str_date', str_date);
         }
         else {
-            box = document.createElement("div");
-            box.setAttribute('id', this.ID);
+            this.innerValue = undefined;
+            this.ngModelChange.emit(this.innerValue);
+            this.onChange.emit(this.innerValue);
+            this.eventChange.emit((_b = this.datepickertime) === null || _b === void 0 ? void 0 : _b.nativeElement);
+        }
+    }
+    // Distribuir os valores da data por pedaços: data - hora - min
+    to_date_hh_mm(d) {
+        let dia = `${(d).getDate()}`;
+        dia = (+(dia) < 10) ? `0${+dia}` : dia;
+        let mes = `${(d).getMonth() + 1}`;
+        mes = (+(mes) < 10) ? `0${+mes}` : mes;
+        let ano = `${(d).getFullYear()}`;
+        let hh = `${(d).getHours()}`;
+        let mm = `${(d).getMinutes()}`;
+        if (hh && (+(hh) < 0 || +(hh) > 23)) {
+            hh = '00';
+        }
+        hh = (hh) ? ((+(hh) < 10) ? `0${hh}` : hh) : '00';
+        if (mm && (+(mm) < 0 || +(mm) > 59)) {
+            mm = '00';
+        }
+        mm = (mm) ? ((+(mm) < 10) ? `0${mm}` : mm) : '00';
+        this.MM = mm;
+        this.HH = hh;
+        this.DD_MM_YYYY = `${dia}/${mes}/${ano}`;
+    }
+    checkIsDate(d) {
+        if (Object.prototype.toString.call(d) === "[object Date]") {
+            if (isNaN(d)) {
+                return false;
+            }
+            else {
+                return true;
+            }
         }
-        box.style.display = 'none';
-        box.innerHTML = `<div class="tc-loading-icon"><i class="fas fa-spinner fa-spin"></i></div>`;
-        const body = document.getElementsByTagName('body')[0];
-        body.appendChild(box);
-        body.classList.add('tcloud-ui-body-loading-transitions');
+        return false;
+    }
+    clean() {
+        this.DD_MM_YYYY = '';
+        this.HH = '';
+        this.MM = '';
+    }
+    toClickIn(id) {
+        var _a;
+        (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    //get accessor
+    get value() {
+        return this.innerValue;
+    }
+    ;
+    //set accessor including call the onchange callback
+    set value(v) {
+        //console.log('set value', v);
+        if (v !== this.innerValue) {
+            //console.log('set value this.innerValue', this.innerValue);
+            this.innerValue = v;
+            this.onChangeCallback(v);
+        }
+    }
+    //Set touched on blur
+    onBlur() {
+        this.onTouchedCallback();
+    }
+    //From ControlValueAccessor interface
+    writeValue(value) {
+        if (value !== this.innerValue) {
+            this.innerValue = value;
+            console.log('writeValue this.innerValue', this.innerValue);
+            if (this.checkIsDate(value)) {
+                this.to_date_hh_mm(value);
+            }
+            else {
+                this.clean();
+            }
+        }
+    }
+    //From ControlValueAccessor interface
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    //From ControlValueAccessor interface
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
     }
 }
-TCloudUiLoadingTransitionsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiLoadingTransitionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-TCloudUiLoadingTransitionsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiLoadingTransitionsService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiLoadingTransitionsService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return []; } });
-
-var TCFiltersType;
-(function (TCFiltersType) {
-    TCFiltersType["text"] = "text";
-    TCFiltersType["number"] = "number";
-    TCFiltersType["select"] = "select";
-    TCFiltersType["boolean"] = "boolean";
-    TCFiltersType["datetime"] = "datetime-local";
-})(TCFiltersType || (TCFiltersType = {}));
-var TCCondition;
-(function (TCCondition) {
-    TCCondition["equal"] = "equal";
-    TCCondition["gte"] = "gte";
-    TCCondition["lte"] = "lte";
-    TCCondition["lt"] = "lt";
-    TCCondition["gt"] = "gt";
-})(TCCondition || (TCCondition = {}));
+TCloudUiDatepickerTimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDatepickerTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TCloudUiDatepickerTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiDatepickerTimeComponent, selector: "tcloud-ui-datepicker-time", inputs: { ngModel: "ngModel" }, outputs: { ngModelChange: "ngModelChange", onChange: "onChange", eventChange: "eventChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "datepickertime", first: true, predicate: ["_datepickertime"], descendants: true }], ngImport: i0, template: "<input type=\"hidden\" value=\"{{ innerValue }}\" #_datepickertime >\r\n<form #_formulario=\"ngForm\">\r\n  <div class=\"input-control-time\">\r\n    <div class=\"form-control-time\">\r\n      <table class=\"form-time\">\r\n        <tr>\r\n          <!-- <td class=\"area-icon\"><div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fas fa-calendar-alt\"></i></div></td> -->\r\n          <td class=\"area-input-date\"><tcloud-ui-datepicker #_tclouddatepickertime [modeInput]=\"true\" name=\"date\" [useBorder]=\"false\" [(ngModel)]=\"DD_MM_YYYY\" (onChange)=\"toSetDate($event)\" ></tcloud-ui-datepicker></td>\r\n          <td class=\"area-delimiter\"><div class=\"delimiter-time\"></div></td>\r\n          <td class=\"area-input-hour\"><input type=\"text\" placeholder=\"HH\" (keyup)=\"toSetTime()\" [(ngModel)]=\"HH\" maxlength=\"2\" name=\"hh\" pattern=\"[0][0-9]|[1][0-9]|2[0-3]\"></td>\r\n          <td class=\"area-delimiter\"><div class=\"delimiter-time\">:</div></td>\r\n          <td class=\"area-input-minute\"><input type=\"text\" placeholder=\"MM\" (keyup)=\"toSetTime()\" [(ngModel)]=\"MM\" maxlength=\"2\" name=\"mm\" pattern=\"[012345][0-9]\"></td>\r\n          <td class=\"area-clean\"></td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n  </div>\r\n</form>", styles: [".input-control-time{border:1px solid #ccc;border-radius:3px;width:100%}.form-control-time{max-width:220px;border:none}.form-control-time input{text-align:center}.form-time{width:100%}.delimiter-time{width:100%;text-align:center}.delimiter-time-icon{border:none;height:35px;width:10px;padding:4px;font-size:17px;text-align:center;opacity:.6}.area-icon{width:25px}.area-input-date{width:105px}.area-delimiter{width:2px;text-align:center}.area-input-hour,.area-input-minute{text-align:center;width:28px}.area-input-hour input,.area-input-minute input{height:35px;width:28px;text-align:center;color:#999;font-weight:600;font-style:italic}.area-input-hour input:focus,.area-input-minute input:focus{outline:none}.area-clean{width:15px}input,.datepicker-input{border:none!important}\n"], dependencies: [{ kind: "component", type: TCloudUiDatepickerComponent, selector: "tcloud-ui-datepicker", inputs: ["multiple", "maxNumberOfDates", "daysOfWeekDisabled", "minDate", "maxDate", "datesDisabled", "modeInput", "useBorder", "ngModel", "code"], outputs: ["onChange", "ngModelChange"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDatepickerTimeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tcloud-ui-datepicker-time', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], template: "<input type=\"hidden\" value=\"{{ innerValue }}\" #_datepickertime >\r\n<form #_formulario=\"ngForm\">\r\n  <div class=\"input-control-time\">\r\n    <div class=\"form-control-time\">\r\n      <table class=\"form-time\">\r\n        <tr>\r\n          <!-- <td class=\"area-icon\"><div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fas fa-calendar-alt\"></i></div></td> -->\r\n          <td class=\"area-input-date\"><tcloud-ui-datepicker #_tclouddatepickertime [modeInput]=\"true\" name=\"date\" [useBorder]=\"false\" [(ngModel)]=\"DD_MM_YYYY\" (onChange)=\"toSetDate($event)\" ></tcloud-ui-datepicker></td>\r\n          <td class=\"area-delimiter\"><div class=\"delimiter-time\"></div></td>\r\n          <td class=\"area-input-hour\"><input type=\"text\" placeholder=\"HH\" (keyup)=\"toSetTime()\" [(ngModel)]=\"HH\" maxlength=\"2\" name=\"hh\" pattern=\"[0][0-9]|[1][0-9]|2[0-3]\"></td>\r\n          <td class=\"area-delimiter\"><div class=\"delimiter-time\">:</div></td>\r\n          <td class=\"area-input-minute\"><input type=\"text\" placeholder=\"MM\" (keyup)=\"toSetTime()\" [(ngModel)]=\"MM\" maxlength=\"2\" name=\"mm\" pattern=\"[012345][0-9]\"></td>\r\n          <td class=\"area-clean\"></td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n  </div>\r\n</form>", styles: [".input-control-time{border:1px solid #ccc;border-radius:3px;width:100%}.form-control-time{max-width:220px;border:none}.form-control-time input{text-align:center}.form-time{width:100%}.delimiter-time{width:100%;text-align:center}.delimiter-time-icon{border:none;height:35px;width:10px;padding:4px;font-size:17px;text-align:center;opacity:.6}.area-icon{width:25px}.area-input-date{width:105px}.area-delimiter{width:2px;text-align:center}.area-input-hour,.area-input-minute{text-align:center;width:28px}.area-input-hour input,.area-input-minute input{height:35px;width:28px;text-align:center;color:#999;font-weight:600;font-style:italic}.area-input-hour input:focus,.area-input-minute input:focus{outline:none}.area-clean{width:15px}input,.datepicker-input{border:none!important}\n"] }]
+        }], propDecorators: { ngModel: [{
+                type: Input
+            }], ngModelChange: [{
+                type: Output
+            }], onChange: [{
+                type: Output
+            }], eventChange: [{
+                type: Output
+            }], datepickertime: [{
+                type: ViewChild,
+                args: ['_datepickertime', { static: false }]
+            }] } });
 
 class TCloudUiFiltersComponent {
     constructor(datepipe) {
         this.datepipe = datepipe;
+        this.datepickers = [];
         this.inputs = [];
         this.show_filters = false;
         this.submitText = 'Filtrar';
@@ -2891,7 +3170,8 @@ class TCloudUiFiltersComponent {
             this.show_filters = true;
             if (this.filters && (this.filters).length > 0) {
                 (this.filters).forEach((filter) => {
-                    this.searchIn(filter, undefined);
+                    console.log('init filter', filter);
+                    this.searchIn(filter, 'sync');
                 });
             }
             // this.toResult();
@@ -2977,33 +3257,43 @@ class TCloudUiFiltersComponent {
         }
         return current;
     }
-    searchIn(item, event) {
-        var _a;
+    searchIn(item, event, value) {
+        var _a, _b;
         this.start_filter_fc = undefined;
-        if (event !== undefined) {
-            if (typeof event === 'boolean') {
-                item.searchText = event;
-                this.onChange.emit(true);
-            }
-            else {
-                if (event === null) {
-                    item.searchText = '';
-                }
-                else {
-                    if (event.target) {
-                        if (event.target.valueAsDate) {
-                            item.searchText = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.valueAsDate;
-                        }
-                        else {
-                            if (event.target.value) {
-                                // item.searchText = (event.target.value).toUpperCase();
-                                item.searchText = this.normalize(event.target.value);
-                            }
-                        }
-                    }
-                    this.onChange.emit(true);
-                }
-            }
+        if (value) {
+            console.log('searchIn item', item);
+            console.log('searchIn event', event);
+        }
+        let isValid = true;
+        if (event === 'sync' && isValid) {
+            isValid = false;
+            this.onChange.emit(true);
+        }
+        if (typeof event === 'boolean' && isValid) {
+            isValid = false;
+            item.searchText = event;
+            this.onChange.emit(true);
+        }
+        if (event === undefined || event === null || event === '' && isValid) {
+            isValid = false;
+            item.searchText = '';
+            this.onChange.emit(true);
+        }
+        if ((event === null || event === void 0 ? void 0 : event.datepickertime) && isValid) {
+            isValid = false;
+            console.log('is a date', event === null || event === void 0 ? void 0 : event.innerValue);
+            item.searchText = event === null || event === void 0 ? void 0 : event.innerValue;
+            this.onChange.emit(true);
+        }
+        if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value) && isValid) {
+            isValid = false;
+            item.searchText = this.normalize(event.target.value);
+            this.onChange.emit(true);
+        }
+        if (((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.value) === '' && isValid) {
+            isValid = false;
+            item.searchText = '';
+            this.onChange.emit(true);
         }
         if (this.useOnChangeSubmit) {
             this.start_filter_fc = this.start_filter();
@@ -3012,6 +3302,43 @@ class TCloudUiFiltersComponent {
             this.emitSubmitFilters();
         }
     }
+    // searchIn(item: TCDataFilters, event?: any, value?: any){
+    //   if( value ){
+    //     console.log('searchIn item', item);
+    //     console.log('searchIn event', event);
+    //   }
+    //   this.start_filter_fc = undefined;
+    //   if( event !== undefined ){
+    //     if( typeof event === 'boolean' ){
+    //       item.searchText = event;
+    //       this.onChange.emit(true);
+    //     }else{
+    //       if( event === null ){
+    //         item.searchText = '';
+    //       }else{
+    //         if( event.defaultValue ){
+    //           item.searchText = event.defaultValue;
+    //         }else if( event.target ){
+    //           if( event.target.valueAsDate ){
+    //             item.searchText = event?.target?.valueAsDate;
+    //           }else{
+    //             if( event.target.value ){
+    //               // item.searchText = (event.target.value).toUpperCase();
+    //               item.searchText = this.normalize(event.target.value);
+    //             }            
+    //           }
+    //         } 
+    //         this.onChange.emit(true);
+    //       }
+    //     }
+    //   }
+    //   if( this.useOnChangeSubmit ){      
+    //     this.start_filter_fc = this.start_filter();
+    //   }
+    //   if( !this.useButtonSubmit ){
+    //     this.emitSubmitFilters();
+    //   } 
+    // }
     start_filter() {
         for (let i = 0; i < (this.data).length; i++) {
             this.setDataIndex(i, true);
@@ -3152,10 +3479,10 @@ class TCloudUiFiltersComponent {
     }
 }
 TCloudUiFiltersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiFiltersComponent, deps: [{ token: i1.DatePipe }], target: i0.ɵɵFactoryTarget.Component });
-TCloudUiFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiFiltersComponent, selector: "tcloud-ui-filters", inputs: { data: "data", filters: "filters", submitText: "submitText", useOnChangeSubmit: "useOnChangeSubmit", useButtonSubmit: "useButtonSubmit", useNormalizeCaseSensitive: "useNormalizeCaseSensitive" }, outputs: { result: "result", onFilter: "onFilter", onChange: "onChange", onSubmit: "onSubmit" }, viewQueries: [{ propertyName: "_formulario", first: true, predicate: ["_formulario"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"show_filters\" class=\"area-filter\">\n    <ng-container *ngFor=\"let item of filters; let i = index\">\n\n        <ng-container *ngIf=\"!item.type || (item.type && item.type !== 'boolean')\">\n        \n            <div class=\"box-filter-input\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n                \n                <ng-container *ngIf=\"item.type !== 'select'\">\n                    <div class=\"m-description\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n                    <div>\n                        <input \n                            [attr.data-date-format]=\"( item.type === 'datetime-local' ) ? 'MM-DD-YYYY HH:mm' : null \"\n                            #_input\n                            placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n                            name=\"input_{{i+1}}\" \n                            type=\"{{ (item.type === 'number') ? 'text' : item.type }}\" \n                            class=\"form-control tc-form-control\"                     \n                            (keyup)=\"searchIn(item, $event)\">\n                        <button class=\"btn-clear-filter-text\" [class.to-hide]=\"_input.value === ''\" (click)=\"searchIn(item, null); _input.value = ''\">\n                            <i class=\"fas fa-times\"></i>\n                        </button>\n                    </div>\n                </ng-container>\n\n                <ng-container *ngIf=\"item.type === 'select' && item.data && (item.data).length > 0\" >\n                    <div class=\"m-description\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n                    <div>\n                        <select \n                            #_input\n                            name=\"input_{{i+1}}\" \n                            class=\"form-control tc-form-control\"                     \n                            (change)=\"searchIn(item, $event)\">\n                            <option [ngValue]=\"\"></option>\n                            <ng-container *ngFor=\"let v of item.data\">\n                                <option [ngValue]=\"v.value\">{{ v.description }}</option>\n                            </ng-container>\n                        </select>\n                        <!-- <button class=\"btn-clear-filter-text\" [class.to-hide]=\"_input.value === ''\" (click)=\"searchIn(item, null); _input.value = ''\">\n                            <i class=\"fas fa-times\"></i>\n                        </button> -->\n                    </div>\n                </ng-container>\n\n            </div>\n\n\n    \n        </ng-container>\n\n        <ng-container *ngIf=\"item.type && item.type === 'boolean'\">\n            \n            <div class=\"box-filter-input\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n                <div class=\"m-description\"><i [class.to-active]=\"_input.checked === true\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n                <div class=\"area-input-checkbox\">\n                    <div class=\"form-control tc-form-control\">\n                        <label>\n                            {{ item.placeholder }}\n                            <input \n                                #_input\n                                placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n                                name=\"input_{{i+1}}\" \n                                type=\"checkbox\"                   \n                                (change)=\"searchIn(item, _input.checked)\">   \n                        </label>\n                    </div>                 \n                </div>\n            </div>\n\n        </ng-container>\n\n\n    </ng-container>\n\n    <div class=\"text-right mb-1 mr-1\" *ngIf=\"useButtonSubmit\">\n        <button type=\"button\" class=\"tc-btn btn-new-grey\" (click)=\"toSubmit()\" >{{ submitText }}&nbsp;<i class=\"fas fa-filter icon-filter\"></i></button>\n    </div>\n\n</div>\n\n<!-- <pre>{{ inputs | json }}</pre> -->\n    <!-- <pre> {{ data | json }} </pre> -->\n<!-- \n<p>FILTERS</p>\n<pre> {{ filters | json }}</pre> -->", styles: [".box-filter-input{display:inline-block;padding:10px 5px;position:relative}.area-filter{border:1px solid #eeeeee;border-radius:5px;margin-bottom:5px}.btn-clear-filter-text{position:absolute;right:8px;top:38px;background-color:#fff;border:none;cursor:pointer;color:#aaa}.to-hide{display:none}.icon-filter{color:#ccc}.to-active{color:var(--verde)}.area-input-checkbox label{cursor:pointer;margin-bottom:0;color:#9f9f9f}.m-description{margin-bottom:3px}input{color:#535353}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
+TCloudUiFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiFiltersComponent, selector: "tcloud-ui-filters", inputs: { data: "data", filters: "filters", submitText: "submitText", useOnChangeSubmit: "useOnChangeSubmit", useButtonSubmit: "useButtonSubmit", useNormalizeCaseSensitive: "useNormalizeCaseSensitive" }, outputs: { result: "result", onFilter: "onFilter", onChange: "onChange", onSubmit: "onSubmit" }, viewQueries: [{ propertyName: "_formulario", first: true, predicate: ["_formulario"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"show_filters\" class=\"area-filter\">\n    <ng-container *ngFor=\"let item of filters; let i = index\">\n\n        <ng-container *ngIf=\"!item.type || (item.type && item.type !== 'boolean')\">\n        \n            <div class=\"box-filter-input\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n\n                <ng-container *ngIf=\"item.type === 'datetime-local'\">\n                    <div class=\"m-description\"><i [class.to-active]=\"(datepickers[i] !== undefined && datepickers[i] !== null && datepickers[i] !== '')\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n                    <div>\n                        <tcloud-ui-datepicker-time #_input [(ngModel)]=\"datepickers[i]\" name=\"input_{{i+1}}\" (eventChange)=\"searchIn(item, _input, 'teste')\" > </tcloud-ui-datepicker-time>\n                        <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(datepickers[i] !== undefined && datepickers[i] !== null && datepickers[i] !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; datepickers[i] = ''\">\n                            <i class=\"fas fa-times\"></i>\n                        </button>\n                    </div>                    \n                </ng-container>\n                \n                <ng-container *ngIf=\"item.type !== 'select' && item.type !== 'datetime-local'\">\n                    <div class=\"m-description\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n                    <div>\n                        <input \n                            #_input\n                            placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n                            name=\"input_{{i+1}}\" \n                            type=\"{{ (item.type === 'number') ? 'text' : item.type }}\" \n                            class=\"form-control tc-form-control\"                     \n                            (keyup)=\"searchIn(item, $event)\">                    \n                        <button class=\"btn-clear-filter-text\" [class.to-hide]=\"_input.value === ''\" (click)=\"searchIn(item, null); _input.value = ''\">\n                            <i class=\"fas fa-times\"></i>\n                        </button>\n                    </div>\n                </ng-container>\n\n                <ng-container *ngIf=\"item.type === 'select' && item.data && (item.data).length > 0\" >\n                    <div class=\"m-description\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n                    <div>\n                        <select \n                            #_input\n                            name=\"input_{{i+1}}\" \n                            class=\"form-control tc-form-control\"                     \n                            (change)=\"searchIn(item, $event)\">\n                            <option [ngValue]=\"\"></option>\n                            <ng-container *ngFor=\"let v of item.data\">\n                                <option [ngValue]=\"v.value\">{{ v.description }}</option>\n                            </ng-container>\n                        </select>\n                        <!-- <button class=\"btn-clear-filter-text\" [class.to-hide]=\"_input.value === ''\" (click)=\"searchIn(item, null); _input.value = ''\">\n                            <i class=\"fas fa-times\"></i>\n                        </button> -->\n                    </div>\n                </ng-container>\n\n            </div>\n\n\n    \n        </ng-container>\n\n        <ng-container *ngIf=\"item.type && item.type === 'boolean'\">\n            \n            <div class=\"box-filter-input\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n                <div class=\"m-description\"><i [class.to-active]=\"_input.checked === true\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n                <div class=\"area-input-checkbox\">\n                    <div class=\"form-control tc-form-control\">\n                        <label>\n                            {{ item.placeholder }}\n                            <input \n                                #_input\n                                placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n                                name=\"input_{{i+1}}\" \n                                type=\"checkbox\"                   \n                                (change)=\"searchIn(item, _input.checked)\">   \n                        </label>\n                    </div>                 \n                </div>\n            </div>\n\n        </ng-container>\n\n\n    </ng-container>\n\n    <div class=\"text-right mb-1 mr-1\" *ngIf=\"useButtonSubmit\">\n        <button type=\"button\" class=\"tc-btn btn-new-grey\" (click)=\"toSubmit()\" >{{ submitText }}&nbsp;<i class=\"fas fa-filter icon-filter\"></i></button>\n    </div>\n\n</div>\n\n<!-- <pre>{{ inputs | json }}</pre> -->\n    <!-- <pre> {{ data | json }} </pre> -->\n<!-- \n<p>FILTERS</p>\n<pre> {{ filters | json }}</pre> -->", styles: [".box-filter-input{display:inline-grid;padding:10px 5px;position:relative}.area-filter{border:1px solid #eeeeee;border-radius:5px;margin-bottom:5px}.btn-clear-filter-text{position:absolute;right:8px;top:38px;background-color:#fff;border:none;cursor:pointer;color:#aaa}.to-hide{display:none}.icon-filter{color:#ccc}.to-active{color:var(--verde)}.area-input-checkbox label{cursor:pointer;margin-bottom:0;color:#9f9f9f}.m-description{margin-bottom:3px}input{color:#535353}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TCloudUiDatepickerTimeComponent, selector: "tcloud-ui-datepicker-time", inputs: ["ngModel"], outputs: ["ngModelChange", "onChange", "eventChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiFiltersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-filters', template: "<div *ngIf=\"show_filters\" class=\"area-filter\">\n    <ng-container *ngFor=\"let item of filters; let i = index\">\n\n        <ng-container *ngIf=\"!item.type || (item.type && item.type !== 'boolean')\">\n        \n            <div class=\"box-filter-input\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n                \n                <ng-container *ngIf=\"item.type !== 'select'\">\n                    <div class=\"m-description\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n                    <div>\n                        <input \n                            [attr.data-date-format]=\"( item.type === 'datetime-local' ) ? 'MM-DD-YYYY HH:mm' : null \"\n                            #_input\n                            placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n                            name=\"input_{{i+1}}\" \n                            type=\"{{ (item.type === 'number') ? 'text' : item.type }}\" \n                            class=\"form-control tc-form-control\"                     \n                            (keyup)=\"searchIn(item, $event)\">\n                        <button class=\"btn-clear-filter-text\" [class.to-hide]=\"_input.value === ''\" (click)=\"searchIn(item, null); _input.value = ''\">\n                            <i class=\"fas fa-times\"></i>\n                        </button>\n                    </div>\n                </ng-container>\n\n                <ng-container *ngIf=\"item.type === 'select' && item.data && (item.data).length > 0\" >\n                    <div class=\"m-description\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n                    <div>\n                        <select \n                            #_input\n                            name=\"input_{{i+1}}\" \n                            class=\"form-control tc-form-control\"                     \n                            (change)=\"searchIn(item, $event)\">\n                            <option [ngValue]=\"\"></option>\n                            <ng-container *ngFor=\"let v of item.data\">\n                                <option [ngValue]=\"v.value\">{{ v.description }}</option>\n                            </ng-container>\n                        </select>\n                        <!-- <button class=\"btn-clear-filter-text\" [class.to-hide]=\"_input.value === ''\" (click)=\"searchIn(item, null); _input.value = ''\">\n                            <i class=\"fas fa-times\"></i>\n                        </button> -->\n                    </div>\n                </ng-container>\n\n            </div>\n\n\n    \n        </ng-container>\n\n        <ng-container *ngIf=\"item.type && item.type === 'boolean'\">\n            \n            <div class=\"box-filter-input\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n                <div class=\"m-description\"><i [class.to-active]=\"_input.checked === true\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n                <div class=\"area-input-checkbox\">\n                    <div class=\"form-control tc-form-control\">\n                        <label>\n                            {{ item.placeholder }}\n                            <input \n                                #_input\n                                placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n                                name=\"input_{{i+1}}\" \n                                type=\"checkbox\"                   \n                                (change)=\"searchIn(item, _input.checked)\">   \n                        </label>\n                    </div>                 \n                </div>\n            </div>\n\n        </ng-container>\n\n\n    </ng-container>\n\n    <div class=\"text-right mb-1 mr-1\" *ngIf=\"useButtonSubmit\">\n        <button type=\"button\" class=\"tc-btn btn-new-grey\" (click)=\"toSubmit()\" >{{ submitText }}&nbsp;<i class=\"fas fa-filter icon-filter\"></i></button>\n    </div>\n\n</div>\n\n<!-- <pre>{{ inputs | json }}</pre> -->\n    <!-- <pre> {{ data | json }} </pre> -->\n<!-- \n<p>FILTERS</p>\n<pre> {{ filters | json }}</pre> -->", styles: [".box-filter-input{display:inline-block;padding:10px 5px;position:relative}.area-filter{border:1px solid #eeeeee;border-radius:5px;margin-bottom:5px}.btn-clear-filter-text{position:absolute;right:8px;top:38px;background-color:#fff;border:none;cursor:pointer;color:#aaa}.to-hide{display:none}.icon-filter{color:#ccc}.to-active{color:var(--verde)}.area-input-checkbox label{cursor:pointer;margin-bottom:0;color:#9f9f9f}.m-description{margin-bottom:3px}input{color:#535353}\n"] }]
+            args: [{ selector: 'tcloud-ui-filters', template: "<div *ngIf=\"show_filters\" class=\"area-filter\">\n    <ng-container *ngFor=\"let item of filters; let i = index\">\n\n        <ng-container *ngIf=\"!item.type || (item.type && item.type !== 'boolean')\">\n        \n            <div class=\"box-filter-input\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n\n                <ng-container *ngIf=\"item.type === 'datetime-local'\">\n                    <div class=\"m-description\"><i [class.to-active]=\"(datepickers[i] !== undefined && datepickers[i] !== null && datepickers[i] !== '')\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n                    <div>\n                        <tcloud-ui-datepicker-time #_input [(ngModel)]=\"datepickers[i]\" name=\"input_{{i+1}}\" (eventChange)=\"searchIn(item, _input, 'teste')\" > </tcloud-ui-datepicker-time>\n                        <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(datepickers[i] !== undefined && datepickers[i] !== null && datepickers[i] !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; datepickers[i] = ''\">\n                            <i class=\"fas fa-times\"></i>\n                        </button>\n                    </div>                    \n                </ng-container>\n                \n                <ng-container *ngIf=\"item.type !== 'select' && item.type !== 'datetime-local'\">\n                    <div class=\"m-description\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n                    <div>\n                        <input \n                            #_input\n                            placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n                            name=\"input_{{i+1}}\" \n                            type=\"{{ (item.type === 'number') ? 'text' : item.type }}\" \n                            class=\"form-control tc-form-control\"                     \n                            (keyup)=\"searchIn(item, $event)\">                    \n                        <button class=\"btn-clear-filter-text\" [class.to-hide]=\"_input.value === ''\" (click)=\"searchIn(item, null); _input.value = ''\">\n                            <i class=\"fas fa-times\"></i>\n                        </button>\n                    </div>\n                </ng-container>\n\n                <ng-container *ngIf=\"item.type === 'select' && item.data && (item.data).length > 0\" >\n                    <div class=\"m-description\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n                    <div>\n                        <select \n                            #_input\n                            name=\"input_{{i+1}}\" \n                            class=\"form-control tc-form-control\"                     \n                            (change)=\"searchIn(item, $event)\">\n                            <option [ngValue]=\"\"></option>\n                            <ng-container *ngFor=\"let v of item.data\">\n                                <option [ngValue]=\"v.value\">{{ v.description }}</option>\n                            </ng-container>\n                        </select>\n                        <!-- <button class=\"btn-clear-filter-text\" [class.to-hide]=\"_input.value === ''\" (click)=\"searchIn(item, null); _input.value = ''\">\n                            <i class=\"fas fa-times\"></i>\n                        </button> -->\n                    </div>\n                </ng-container>\n\n            </div>\n\n\n    \n        </ng-container>\n\n        <ng-container *ngIf=\"item.type && item.type === 'boolean'\">\n            \n            <div class=\"box-filter-input\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n                <div class=\"m-description\"><i [class.to-active]=\"_input.checked === true\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n                <div class=\"area-input-checkbox\">\n                    <div class=\"form-control tc-form-control\">\n                        <label>\n                            {{ item.placeholder }}\n                            <input \n                                #_input\n                                placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n                                name=\"input_{{i+1}}\" \n                                type=\"checkbox\"                   \n                                (change)=\"searchIn(item, _input.checked)\">   \n                        </label>\n                    </div>                 \n                </div>\n            </div>\n\n        </ng-container>\n\n\n    </ng-container>\n\n    <div class=\"text-right mb-1 mr-1\" *ngIf=\"useButtonSubmit\">\n        <button type=\"button\" class=\"tc-btn btn-new-grey\" (click)=\"toSubmit()\" >{{ submitText }}&nbsp;<i class=\"fas fa-filter icon-filter\"></i></button>\n    </div>\n\n</div>\n\n<!-- <pre>{{ inputs | json }}</pre> -->\n    <!-- <pre> {{ data | json }} </pre> -->\n<!-- \n<p>FILTERS</p>\n<pre> {{ filters | json }}</pre> -->", styles: [".box-filter-input{display:inline-grid;padding:10px 5px;position:relative}.area-filter{border:1px solid #eeeeee;border-radius:5px;margin-bottom:5px}.btn-clear-filter-text{position:absolute;right:8px;top:38px;background-color:#fff;border:none;cursor:pointer;color:#aaa}.to-hide{display:none}.icon-filter{color:#ccc}.to-active{color:var(--verde)}.area-input-checkbox label{cursor:pointer;margin-bottom:0;color:#9f9f9f}.m-description{margin-bottom:3px}input{color:#535353}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.DatePipe }]; }, propDecorators: { _formulario: [{
                 type: ViewChild,
                 args: ['_formulario']
@@ -3181,231 +3508,684 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Output
             }] } });
 
+class TCloudUiDatepickerModule {
+}
+TCloudUiDatepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TCloudUiDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDatepickerModule, declarations: [TCloudUiDatepickerComponent], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule], exports: [TCloudUiDatepickerComponent] });
+TCloudUiDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDatepickerModule, imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDatepickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        TCloudUiDatepickerComponent
+                    ],
+                    exports: [
+                        TCloudUiDatepickerComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule
+                    ]
+                }]
+        }] });
+
+class TCloudUiDatepickerTimeModule {
+}
+TCloudUiDatepickerTimeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDatepickerTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TCloudUiDatepickerTimeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDatepickerTimeModule, declarations: [TCloudUiDatepickerTimeComponent], imports: [CommonModule,
+        TCloudUiDatepickerModule,
+        FormsModule,
+        ReactiveFormsModule], exports: [TCloudUiDatepickerTimeComponent] });
+TCloudUiDatepickerTimeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDatepickerTimeModule, imports: [CommonModule,
+        TCloudUiDatepickerModule,
+        FormsModule,
+        ReactiveFormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDatepickerTimeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        TCloudUiDatepickerTimeComponent
+                    ],
+                    exports: [
+                        TCloudUiDatepickerTimeComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        TCloudUiDatepickerModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                    ]
+                }]
+        }] });
+
 class TCloudUiFiltersModule {
 }
 TCloudUiFiltersModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiFiltersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 TCloudUiFiltersModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiFiltersModule, declarations: [TCloudUiFiltersComponent], imports: [CommonModule,
-        FormsModule], exports: [TCloudUiFiltersComponent] });
+        FormsModule,
+        TCloudUiDatepickerTimeModule], exports: [TCloudUiFiltersComponent] });
 TCloudUiFiltersModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiFiltersModule, imports: [CommonModule,
-        FormsModule] });
+        FormsModule,
+        TCloudUiDatepickerTimeModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiFiltersModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
-                        TCloudUiFiltersComponent
+                        TCloudUiFiltersComponent
+                    ],
+                    exports: [
+                        TCloudUiFiltersComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        TCloudUiDatepickerTimeModule
+                    ]
+                }]
+        }] });
+
+class TCloudUiAccordionService {
+    constructor() {
+        this._stateToggle = new Subject();
+        this.stateToggle$ = this._stateToggle.asObservable();
+        this._stateLoading = new Subject();
+        this.stateLoading$ = this._stateLoading.asObservable();
+        this._stateDisabled = new Subject();
+        this.stateDisabled$ = this._stateDisabled.asObservable();
+    }
+    toggle(action) {
+        this._stateToggle.next(action);
+    }
+    getLoading() {
+        return this.loading;
+    }
+    setLoading(loading) {
+        this.loading = loading;
+        this._stateLoading.next(loading);
+    }
+    getShow() {
+        return this.show;
+    }
+    setDisabled(disabled) {
+        this._stateDisabled.next(disabled);
+    }
+    getDisabled() {
+        return this.disabled;
+    }
+}
+TCloudUiAccordionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiAccordionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TCloudUiAccordionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiAccordionService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiAccordionService, decorators: [{
+            type: Injectable
+        }] });
+
+class TCloudUiAccordionComponent {
+    constructor(_tCloudUiAccordionService) {
+        this._tCloudUiAccordionService = _tCloudUiAccordionService;
+        this._disabled = false;
+        this._show = false;
+        this.onAction = new EventEmitter();
+        this._loading = false;
+    }
+    set disabled(v) {
+        this._disabled = v;
+        if (this._disabled) {
+            setTimeout(() => {
+                this._tCloudUiAccordionService.setDisabled(this._disabled);
+                this._tCloudUiAccordionService.toggle(false);
+            });
+        }
+    }
+    get disabled() { return this._disabled; }
+    set show(v) {
+        if (this._show !== v) {
+            this._show = v;
+            if (!this.disabled) {
+                setTimeout(() => { this._tCloudUiAccordionService.toggle(this._show); });
+            }
+        }
+    }
+    get show() { return this._show; }
+    /**
+     * loading - boolean - Coloca o modal em modo de carregamento - default false
+     */
+    set loading(loading) {
+        this._loading = loading;
+        this._tCloudUiAccordionService.setLoading(loading);
+    }
+    get loading() { return this._loading; }
+    ngOnInit() {
+        this.subscription_01 = this._tCloudUiAccordionService.stateLoading$.subscribe((loading) => {
+            this.loading = loading;
+        });
+        this.subscription_02 = this._tCloudUiAccordionService.stateToggle$.subscribe((show) => {
+            this.onAction.emit((show === true) ? 'open' : 'close');
+        });
+    }
+    ngOnDestroy() {
+        if (this.subscription_01) {
+            this.subscription_01.unsubscribe();
+        }
+        if (this.subscription_02) {
+            this.subscription_02.unsubscribe();
+        }
+    }
+}
+TCloudUiAccordionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiAccordionComponent, deps: [{ token: TCloudUiAccordionService }], target: i0.ɵɵFactoryTarget.Component });
+TCloudUiAccordionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiAccordionComponent, selector: "tcloud-ui-accordion", inputs: { disabled: "disabled", show: "show", loading: "loading" }, outputs: { onAction: "onAction" }, providers: [
+        TCloudUiAccordionService
+    ], ngImport: i0, template: "<div class=\"tc-accordion\" [class.tc-accordion-disabled]=\"disabled\">\n    <ng-content></ng-content>\n</div>", styles: [".tc-accordion{border:1px solid #ccc;padding:8px 12px;border-radius:15px;margin-bottom:5px}.tc-accordion-disabled{background-color:#e3e3e3;opacity:.6}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiAccordionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tcloud-ui-accordion', providers: [
+                        TCloudUiAccordionService
+                    ], template: "<div class=\"tc-accordion\" [class.tc-accordion-disabled]=\"disabled\">\n    <ng-content></ng-content>\n</div>", styles: [".tc-accordion{border:1px solid #ccc;padding:8px 12px;border-radius:15px;margin-bottom:5px}.tc-accordion-disabled{background-color:#e3e3e3;opacity:.6}\n"] }]
+        }], ctorParameters: function () { return [{ type: TCloudUiAccordionService }]; }, propDecorators: { disabled: [{
+                type: Input
+            }], show: [{
+                type: Input
+            }], onAction: [{
+                type: Output
+            }], loading: [{
+                type: Input
+            }] } });
+
+class TCloudUiAccordionTitleComponent {
+    constructor(_tCloudUiAccordionService) {
+        this._tCloudUiAccordionService = _tCloudUiAccordionService;
+        this.show = false;
+        this.loading = false;
+        this.disabled = false;
+    }
+    ngOnInit() {
+        this.loading = this._tCloudUiAccordionService.getLoading() || false;
+        this.subscription_01 = this._tCloudUiAccordionService.stateLoading$.subscribe((loading) => {
+            this.loading = loading;
+        });
+        this.show = this._tCloudUiAccordionService.getShow() || false;
+        this.subscription_02 = this._tCloudUiAccordionService.stateToggle$.subscribe((show) => {
+            this.show = show;
+        });
+        this.disabled = this._tCloudUiAccordionService.getDisabled() || false;
+        this.subscription_03 = this._tCloudUiAccordionService.stateDisabled$.subscribe((disabled) => {
+            this.disabled = disabled;
+        });
+    }
+    toggle() {
+        if (this.disabled) {
+            return;
+        }
+        this.show = !this.show;
+        this._tCloudUiAccordionService.toggle(this.show);
+    }
+    toggle_title() {
+        this.toggle();
+    }
+    ngOnDestroy() {
+        if (this.subscription_01) {
+            this.subscription_01.unsubscribe();
+        }
+        if (this.subscription_02) {
+            this.subscription_02.unsubscribe();
+        }
+        if (this.subscription_03) {
+            this.subscription_03.unsubscribe();
+        }
+    }
+}
+TCloudUiAccordionTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiAccordionTitleComponent, deps: [{ token: TCloudUiAccordionService }], target: i0.ɵɵFactoryTarget.Component });
+TCloudUiAccordionTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiAccordionTitleComponent, selector: "tcloud-ui-accordion-title", ngImport: i0, template: "<div class=\"tc-accordion-title\">\n    <table class=\"tc-accordion-table\">\n        <tr>\n            <td class=\"area-title\" (click)=\"toggle_title()\" >\n                <ng-content></ng-content>\n            </td>\n            <td class=\"tc-accordion-actions\">\n                <button type=\"button\" class=\"tc-btn-accordion-toggle\" [disabled]=\"disabled\" (click)=\"toggle()\" >\n\n                    <i class=\"fas fa-chevron-right icon-toggle\" *ngIf=\"!show\"></i>\n                    <i class=\"fas fa-chevron-down icon-toggle\" *ngIf=\"show\"></i>\n\n                </button>\n            </td>\n        </tr>\n    </table>\n</div>", styles: [".tc-accordion-table{width:100%}.tc-accordion-actions{width:15px}.tc-btn-accordion-toggle{font-size:20px;border:none;background-color:transparent;background:none;cursor:pointer;margin:auto}.tc-btn-accordion-toggle:disabled{cursor:not-allowed!important;opacity:.6}.icon-toggle{color:var(--verde)}.area-title{width:100;cursor:pointer;color:var(--verde)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiAccordionTitleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tcloud-ui-accordion-title', template: "<div class=\"tc-accordion-title\">\n    <table class=\"tc-accordion-table\">\n        <tr>\n            <td class=\"area-title\" (click)=\"toggle_title()\" >\n                <ng-content></ng-content>\n            </td>\n            <td class=\"tc-accordion-actions\">\n                <button type=\"button\" class=\"tc-btn-accordion-toggle\" [disabled]=\"disabled\" (click)=\"toggle()\" >\n\n                    <i class=\"fas fa-chevron-right icon-toggle\" *ngIf=\"!show\"></i>\n                    <i class=\"fas fa-chevron-down icon-toggle\" *ngIf=\"show\"></i>\n\n                </button>\n            </td>\n        </tr>\n    </table>\n</div>", styles: [".tc-accordion-table{width:100%}.tc-accordion-actions{width:15px}.tc-btn-accordion-toggle{font-size:20px;border:none;background-color:transparent;background:none;cursor:pointer;margin:auto}.tc-btn-accordion-toggle:disabled{cursor:not-allowed!important;opacity:.6}.icon-toggle{color:var(--verde)}.area-title{width:100;cursor:pointer;color:var(--verde)}\n"] }]
+        }], ctorParameters: function () { return [{ type: TCloudUiAccordionService }]; } });
+
+class TCloudUiAccordionBodyComponent {
+    constructor(_tCloudUiAccordionService) {
+        this._tCloudUiAccordionService = _tCloudUiAccordionService;
+        this.show = false;
+    }
+    ngOnInit() {
+        this.show = this._tCloudUiAccordionService.getShow() || false;
+        this._tCloudUiAccordionService.stateToggle$.subscribe((show) => {
+            this.show = show;
+        });
+    }
+}
+TCloudUiAccordionBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiAccordionBodyComponent, deps: [{ token: TCloudUiAccordionService }], target: i0.ɵɵFactoryTarget.Component });
+TCloudUiAccordionBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiAccordionBodyComponent, selector: "tcloud-ui-accordion-body", ngImport: i0, template: "<div class=\"tc-accordion-content\" style=\"display: none;\" [class.show]=\"show\">\n    <ng-content></ng-content>\n</div>", styles: [".show{display:block!important}.tc-accordion-content{padding-top:15px;padding-bottom:15px}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiAccordionBodyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tcloud-ui-accordion-body', template: "<div class=\"tc-accordion-content\" style=\"display: none;\" [class.show]=\"show\">\n    <ng-content></ng-content>\n</div>", styles: [".show{display:block!important}.tc-accordion-content{padding-top:15px;padding-bottom:15px}\n"] }]
+        }], ctorParameters: function () { return [{ type: TCloudUiAccordionService }]; } });
+
+class TCloudUiAccordionModule {
+}
+TCloudUiAccordionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TCloudUiAccordionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiAccordionModule, declarations: [TCloudUiAccordionComponent,
+        TCloudUiAccordionTitleComponent,
+        TCloudUiAccordionBodyComponent], imports: [CommonModule], exports: [TCloudUiAccordionComponent,
+        TCloudUiAccordionTitleComponent,
+        TCloudUiAccordionBodyComponent] });
+TCloudUiAccordionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiAccordionModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiAccordionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        TCloudUiAccordionComponent,
+                        TCloudUiAccordionTitleComponent,
+                        TCloudUiAccordionBodyComponent
+                    ],
+                    exports: [
+                        TCloudUiAccordionComponent,
+                        TCloudUiAccordionTitleComponent,
+                        TCloudUiAccordionBodyComponent
+                    ],
+                    imports: [
+                        CommonModule
+                    ]
+                }]
+        }] });
+
+class TCloudUiAlignDirective {
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+        this._direction = 'start';
+    }
+    set TCalign(direction) {
+        if (direction) {
+            this._direction = direction;
+            this.setStyle(this.el.nativeElement);
+        }
+    }
+    ngOnInit() {
+    }
+    setStyle(el) {
+        if (this._direction === 'start') {
+            this.renderer.setStyle(el, 'text-align', 'left');
+        }
+        if (this._direction === 'center') {
+            this.renderer.setStyle(el, 'text-align', 'center');
+        }
+        if (this._direction === 'end') {
+            this.renderer.setStyle(el, 'text-align', 'right');
+        }
+    }
+}
+TCloudUiAlignDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiAlignDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+TCloudUiAlignDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiAlignDirective, selector: "[TCalign]", inputs: { TCalign: "TCalign" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiAlignDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[TCalign]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { TCalign: [{
+                type: Input
+            }] } });
+
+class TCloudUiHoverParentDirective {
+    constructor(renderer) {
+        this.renderer = renderer;
+    }
+    onMouseOver() {
+        if (this.getElement()) {
+            const el = this.getElement();
+            if (el) {
+                this.renderer.addClass(el, (this.CLASS) ? this.CLASS : 'tcloud-hover-parent');
+            }
+        }
+    }
+    onMouseOut() {
+        if (this.getElement()) {
+            const el = this.getElement();
+            if (el) {
+                this.renderer.removeClass(el, (this.CLASS) ? this.CLASS : 'tcloud-hover-parent');
+            }
+        }
+    }
+    set TCHoverParent(id) {
+        if (id) {
+            this.ID = id;
+        }
+    }
+    set TCHoverParentClass(clss) {
+        if (clss) {
+            this.CLASS = clss;
+        }
+    }
+    getElement() {
+        if (this.ID) {
+            return document.getElementById(this.ID) || undefined;
+        }
+        return undefined;
+    }
+}
+TCloudUiHoverParentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiHoverParentDirective, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+TCloudUiHoverParentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiHoverParentDirective, selector: "[TCHoverParent]", inputs: { TCHoverParent: "TCHoverParent", TCHoverParentClass: "TCHoverParentClass" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseout": "onMouseOut()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiHoverParentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[TCHoverParent]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { onMouseOver: [{
+                type: HostListener,
+                args: ['mouseover']
+            }], onMouseOut: [{
+                type: HostListener,
+                args: ['mouseout']
+            }], TCHoverParent: [{
+                type: Input
+            }], TCHoverParentClass: [{
+                type: Input
+            }] } });
+
+class TCloudUiTooltipDirective {
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+        this._direction = 'top';
+        // main
+        this.el_height = 0;
+        this.el_width = 0;
+        this.el_center = 0;
+        this.el_position = 0;
+        // tooltip
+        this.target_height = 0;
+        this.target_width = 0;
+        this.target_center = 0;
+        this.ID = '';
+        this.info_text = '';
+    }
+    onMouseOver() {
+        if (this.getElement()) {
+            this.renderer.addClass(this.el.nativeElement, 'main-tooltip');
+            const el = this.getElement();
+            el.style.display = 'inline';
+            setTimeout(() => {
+                var _a;
+                this.el_height = this.el.nativeElement.offsetHeight;
+                this.el_width = this.el.nativeElement.offsetWidth;
+                this.el_center = this.el_width / 2;
+                const rect = (_a = this.el.nativeElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+                this.el_position = (rect === null || rect === void 0 ? void 0 : rect.left) || 0;
+                // console.log('this.el_width', this.el_width);
+                // console.log('this.el_center', this.el_center);
+                // console.log('this.el_position', this.el_position);
+                this.target_height = el.offsetHeight;
+                this.target_width = el.offsetWidth;
+                this.target_center = this.target_width / 2;
+                // console.log('target_heigth', this.target_height);
+                // console.log('target_width', this.target_width);
+                // console.log('target_center', this.target_center);
+                // this.renderer.setStyle(el, 'bottom', `${this.el_position}px`);
+                switch (this._direction) {
+                    case 'top':
+                        this.to_top(el);
+                        break;
+                    case 'bottom':
+                        this.to_bottom(el);
+                        break;
+                    case 'left':
+                        this.to_left(el);
+                        break;
+                    case 'right':
+                        this.to_right(el);
+                        break;
+                }
+            });
+        }
+    }
+    onMouseOut() {
+        if (this.getElement()) {
+            const el = this.getElement();
+            el.style.display = 'none';
+            this.renderer.removeClass(this.el.nativeElement, 'main-tooltip');
+        }
+    }
+    set TCtooltip(tooltip) {
+        if (tooltip) {
+            this.check(tooltip);
+        }
+    }
+    set TCdirection(direction) {
+        if (direction) {
+            this._direction = direction;
+        }
+    }
+    ngOnInit() {
+    }
+    generateID() {
+        return `tc-tooltip-${Math.floor(Math.random() * Math.floor(Math.random() * Date.now()))}`;
+    }
+    getElement() {
+        return document.getElementById(this.ID) || undefined;
+    }
+    check(tooltip) {
+        this.ID = this.generateID();
+        this.info_text = tooltip;
+        let el = this.el.nativeElement;
+        this.main_el = el;
+        if (el) {
+            this.create_tooltip(tooltip, el);
+        }
+        else {
+            console.log("TCL: tooltip -> el", this.el.nativeElement);
+        }
+    }
+    setStyle(el) {
+        // this.renderer.setStyle(el, 'position', 'relative');
+        // this.renderer.setStyle(el, 'display', 'inline');
+    }
+    create_tooltip(tip, el) {
+        this.setStyle(el);
+        const tooltip = document.createElement("div");
+        tooltip.setAttribute('id', this.ID);
+        tooltip.setAttribute('style', `
+      position: absolute;  
+      display: none;
+      padding: 10px;
+      border-radius: 10px;
+      text-align: center;
+      width: max-content;
+      max-width: 250px;
+      background-color: transparent;
+      color: transparent;
+      z-index: 1090;
+      bottom: ${this.el_position}px;
+      left: ${this.target_center}px;
+    `);
+        tooltip.innerHTML = tip;
+        el.insertBefore(tooltip, null);
+    }
+    to_top(el) {
+        const pos = this.el_center - (this.target_center);
+        this.renderer.setStyle(el, 'left', `${(pos)}px`);
+        this.renderer.setStyle(el, 'bottom', `${(this.el_height + 7)}px`);
+        el.setAttribute('class', 'tc-directive-tooltip tc-directive-tooltip-top');
+    }
+    to_bottom(el) {
+        const pos = this.el_center - (this.target_center);
+        this.renderer.setStyle(el, 'left', `${(pos)}px`);
+        this.renderer.setStyle(el, 'bottom', `-${(this.target_height + 7)}px`);
+        el.setAttribute('class', 'tc-directive-tooltip tc-directive-tooltip-bottom');
+    }
+    to_right(el) {
+        const pos = this.el_width;
+        this.renderer.setStyle(el, 'left', `${(pos + 11)}px`);
+        this.renderer.setStyle(el, 'bottom', `-${(((this.target_height) / 2) - (this.el_height / 2))}px`);
+        el.setAttribute('class', 'tc-directive-tooltip tc-directive-tooltip-right');
+    }
+    to_left(el) {
+        const pos = -((this.target_width));
+        this.renderer.setStyle(el, 'left', `${(pos - 11)}px`);
+        this.renderer.setStyle(el, 'bottom', `-${(((this.target_height) / 2) - (this.el_height / 2))}px`);
+        el.setAttribute('class', 'tc-directive-tooltip tc-directive-tooltip-left');
+    }
+}
+TCloudUiTooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+TCloudUiTooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiTooltipDirective, selector: "[TCtooltip]", inputs: { TCtooltip: "TCtooltip", TCdirection: "TCdirection" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseout": "onMouseOut()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[TCtooltip]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { onMouseOver: [{
+                type: HostListener,
+                args: ['mouseover']
+            }], onMouseOut: [{
+                type: HostListener,
+                args: ['mouseout']
+            }], TCtooltip: [{
+                type: Input
+            }], TCdirection: [{
+                type: Input
+            }] } });
+
+class TCloudUiDirectiveModule {
+}
+TCloudUiDirectiveModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TCloudUiDirectiveModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDirectiveModule, declarations: [TCloudUiTooltipDirective,
+        TCloudUiAlignDirective,
+        TCloudUiHoverParentDirective], exports: [TCloudUiTooltipDirective,
+        TCloudUiAlignDirective,
+        TCloudUiHoverParentDirective] });
+TCloudUiDirectiveModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDirectiveModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDirectiveModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        TCloudUiTooltipDirective,
+                        TCloudUiAlignDirective,
+                        TCloudUiHoverParentDirective
+                    ],
+                    exports: [
+                        TCloudUiTooltipDirective,
+                        TCloudUiAlignDirective,
+                        TCloudUiHoverParentDirective
+                    ],
+                }]
+        }] });
+
+class TCloudUiPipesModule {
+}
+TCloudUiPipesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiPipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TCloudUiPipesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiPipesModule, declarations: [MonthNamePipe,
+        StatusInfoPipe,
+        RespectivePipe,
+        CNPJPipe,
+        CPFPipe,
+        BytesPipe,
+        DateBRPipe], imports: [CommonModule], exports: [DatePipe,
+        MonthNamePipe,
+        StatusInfoPipe,
+        RespectivePipe,
+        CNPJPipe,
+        CPFPipe,
+        BytesPipe,
+        DateBRPipe] });
+TCloudUiPipesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiPipesModule, providers: [
+        DatePipe,
+        MonthNamePipe,
+        StatusInfoPipe,
+        RespectivePipe,
+        CNPJPipe,
+        CPFPipe,
+        BytesPipe,
+        DateBRPipe
+    ], imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiPipesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                    ],
+                    declarations: [
+                        MonthNamePipe,
+                        StatusInfoPipe,
+                        RespectivePipe,
+                        CNPJPipe,
+                        CPFPipe,
+                        BytesPipe,
+                        DateBRPipe
                     ],
                     exports: [
-                        TCloudUiFiltersComponent
+                        DatePipe,
+                        MonthNamePipe,
+                        StatusInfoPipe,
+                        RespectivePipe,
+                        CNPJPipe,
+                        CPFPipe,
+                        BytesPipe,
+                        DateBRPipe
                     ],
-                    imports: [
-                        CommonModule,
-                        FormsModule
+                    providers: [
+                        DatePipe,
+                        MonthNamePipe,
+                        StatusInfoPipe,
+                        RespectivePipe,
+                        CNPJPipe,
+                        CPFPipe,
+                        BytesPipe,
+                        DateBRPipe
                     ]
                 }]
         }] });
 
-class TCloudUiAccordionService {
+class TCloudUiLoadingTransitionsService {
     constructor() {
-        this._stateToggle = new Subject();
-        this.stateToggle$ = this._stateToggle.asObservable();
-        this._stateLoading = new Subject();
-        this.stateLoading$ = this._stateLoading.asObservable();
-        this._stateDisabled = new Subject();
-        this.stateDisabled$ = this._stateDisabled.asObservable();
-    }
-    toggle(action) {
-        this._stateToggle.next(action);
-    }
-    getLoading() {
-        return this.loading;
-    }
-    setLoading(loading) {
-        this.loading = loading;
-        this._stateLoading.next(loading);
-    }
-    getShow() {
-        return this.show;
-    }
-    setDisabled(disabled) {
-        this._stateDisabled.next(disabled);
-    }
-    getDisabled() {
-        return this.disabled;
-    }
-}
-TCloudUiAccordionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiAccordionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-TCloudUiAccordionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiAccordionService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiAccordionService, decorators: [{
-            type: Injectable
-        }] });
-
-class TCloudUiAccordionComponent {
-    constructor(_tCloudUiAccordionService) {
-        this._tCloudUiAccordionService = _tCloudUiAccordionService;
-        this._disabled = false;
-        this._show = false;
-        this.onAction = new EventEmitter();
-        this._loading = false;
-    }
-    set disabled(v) {
-        this._disabled = v;
-        if (this._disabled) {
-            setTimeout(() => {
-                this._tCloudUiAccordionService.setDisabled(this._disabled);
-                this._tCloudUiAccordionService.toggle(false);
-            });
-        }
-    }
-    get disabled() { return this._disabled; }
-    set show(v) {
-        if (this._show !== v) {
-            this._show = v;
-            if (!this.disabled) {
-                setTimeout(() => { this._tCloudUiAccordionService.toggle(this._show); });
-            }
-        }
+        this.ID = 'tcloud-ui-loading-transitions';
     }
-    get show() { return this._show; }
     /**
-     * loading - boolean - Coloca o modal em modo de carregamento - default false
+     * Inicia a tela de bloqueio para carregamento de tarefa
      */
-    set loading(loading) {
-        this._loading = loading;
-        this._tCloudUiAccordionService.setLoading(loading);
-    }
-    get loading() { return this._loading; }
-    ngOnInit() {
-        this.subscription_01 = this._tCloudUiAccordionService.stateLoading$.subscribe((loading) => {
-            this.loading = loading;
-        });
-        this.subscription_02 = this._tCloudUiAccordionService.stateToggle$.subscribe((show) => {
-            this.onAction.emit((show === true) ? 'open' : 'close');
-        });
-    }
-    ngOnDestroy() {
-        if (this.subscription_01) {
-            this.subscription_01.unsubscribe();
-        }
-        if (this.subscription_02) {
-            this.subscription_02.unsubscribe();
+    start() {
+        this.create_loading_transition();
+        if (document.getElementById(this.ID)) {
+            const box = document.getElementById(this.ID);
+            box === null || box === void 0 ? void 0 : box.classList.add('tcloud-ui-start-loading');
         }
     }
-}
-TCloudUiAccordionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiAccordionComponent, deps: [{ token: TCloudUiAccordionService }], target: i0.ɵɵFactoryTarget.Component });
-TCloudUiAccordionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiAccordionComponent, selector: "tcloud-ui-accordion", inputs: { disabled: "disabled", show: "show", loading: "loading" }, outputs: { onAction: "onAction" }, providers: [
-        TCloudUiAccordionService
-    ], ngImport: i0, template: "<div class=\"tc-accordion\" [class.tc-accordion-disabled]=\"disabled\">\n    <ng-content></ng-content>\n</div>", styles: [".tc-accordion{border:1px solid #ccc;padding:8px 12px;border-radius:15px;margin-bottom:5px}.tc-accordion-disabled{background-color:#e3e3e3;opacity:.6}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiAccordionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tcloud-ui-accordion', providers: [
-                        TCloudUiAccordionService
-                    ], template: "<div class=\"tc-accordion\" [class.tc-accordion-disabled]=\"disabled\">\n    <ng-content></ng-content>\n</div>", styles: [".tc-accordion{border:1px solid #ccc;padding:8px 12px;border-radius:15px;margin-bottom:5px}.tc-accordion-disabled{background-color:#e3e3e3;opacity:.6}\n"] }]
-        }], ctorParameters: function () { return [{ type: TCloudUiAccordionService }]; }, propDecorators: { disabled: [{
-                type: Input
-            }], show: [{
-                type: Input
-            }], onAction: [{
-                type: Output
-            }], loading: [{
-                type: Input
-            }] } });
-
-class TCloudUiAccordionTitleComponent {
-    constructor(_tCloudUiAccordionService) {
-        this._tCloudUiAccordionService = _tCloudUiAccordionService;
-        this.show = false;
-        this.loading = false;
-        this.disabled = false;
-    }
-    ngOnInit() {
-        this.loading = this._tCloudUiAccordionService.getLoading() || false;
-        this.subscription_01 = this._tCloudUiAccordionService.stateLoading$.subscribe((loading) => {
-            this.loading = loading;
-        });
-        this.show = this._tCloudUiAccordionService.getShow() || false;
-        this.subscription_02 = this._tCloudUiAccordionService.stateToggle$.subscribe((show) => {
-            this.show = show;
-        });
-        this.disabled = this._tCloudUiAccordionService.getDisabled() || false;
-        this.subscription_03 = this._tCloudUiAccordionService.stateDisabled$.subscribe((disabled) => {
-            this.disabled = disabled;
-        });
-    }
-    toggle() {
-        if (this.disabled) {
-            return;
+    /**
+     * Encerra a tela de bloqueio
+     */
+    stop() {
+        if (document.getElementById(this.ID)) {
+            const box = document.getElementById(this.ID);
+            box === null || box === void 0 ? void 0 : box.classList.remove('tcloud-ui-start-loading');
+            const body = document.getElementsByTagName('body')[0];
+            body.classList.remove('tcloud-ui-body-loading-transitions');
         }
-        this.show = !this.show;
-        this._tCloudUiAccordionService.toggle(this.show);
     }
-    toggle_title() {
-        this.toggle();
-    }
-    ngOnDestroy() {
-        if (this.subscription_01) {
-            this.subscription_01.unsubscribe();
-        }
-        if (this.subscription_02) {
-            this.subscription_02.unsubscribe();
+    create_loading_transition() {
+        let box = null;
+        if (document.getElementById(this.ID)) {
+            box = document.getElementById(this.ID);
         }
-        if (this.subscription_03) {
-            this.subscription_03.unsubscribe();
+        else {
+            box = document.createElement("div");
+            box.setAttribute('id', this.ID);
         }
+        box.style.display = 'none';
+        box.innerHTML = `<div class="tc-loading-icon"><i class="fas fa-spinner fa-spin"></i></div>`;
+        const body = document.getElementsByTagName('body')[0];
+        body.appendChild(box);
+        body.classList.add('tcloud-ui-body-loading-transitions');
     }
 }
-TCloudUiAccordionTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiAccordionTitleComponent, deps: [{ token: TCloudUiAccordionService }], target: i0.ɵɵFactoryTarget.Component });
-TCloudUiAccordionTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiAccordionTitleComponent, selector: "tcloud-ui-accordion-title", ngImport: i0, template: "<div class=\"tc-accordion-title\">\n    <table class=\"tc-accordion-table\">\n        <tr>\n            <td class=\"area-title\" (click)=\"toggle_title()\" >\n                <ng-content></ng-content>\n            </td>\n            <td class=\"tc-accordion-actions\">\n                <button type=\"button\" class=\"tc-btn-accordion-toggle\" [disabled]=\"disabled\" (click)=\"toggle()\" >\n\n                    <i class=\"fas fa-chevron-right icon-toggle\" *ngIf=\"!show\"></i>\n                    <i class=\"fas fa-chevron-down icon-toggle\" *ngIf=\"show\"></i>\n\n                </button>\n            </td>\n        </tr>\n    </table>\n</div>", styles: [".tc-accordion-table{width:100%}.tc-accordion-actions{width:15px}.tc-btn-accordion-toggle{font-size:20px;border:none;background-color:transparent;background:none;cursor:pointer;margin:auto}.tc-btn-accordion-toggle:disabled{cursor:not-allowed!important;opacity:.6}.icon-toggle{color:var(--verde)}.area-title{width:100;cursor:pointer;color:var(--verde)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiAccordionTitleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tcloud-ui-accordion-title', template: "<div class=\"tc-accordion-title\">\n    <table class=\"tc-accordion-table\">\n        <tr>\n            <td class=\"area-title\" (click)=\"toggle_title()\" >\n                <ng-content></ng-content>\n            </td>\n            <td class=\"tc-accordion-actions\">\n                <button type=\"button\" class=\"tc-btn-accordion-toggle\" [disabled]=\"disabled\" (click)=\"toggle()\" >\n\n                    <i class=\"fas fa-chevron-right icon-toggle\" *ngIf=\"!show\"></i>\n                    <i class=\"fas fa-chevron-down icon-toggle\" *ngIf=\"show\"></i>\n\n                </button>\n            </td>\n        </tr>\n    </table>\n</div>", styles: [".tc-accordion-table{width:100%}.tc-accordion-actions{width:15px}.tc-btn-accordion-toggle{font-size:20px;border:none;background-color:transparent;background:none;cursor:pointer;margin:auto}.tc-btn-accordion-toggle:disabled{cursor:not-allowed!important;opacity:.6}.icon-toggle{color:var(--verde)}.area-title{width:100;cursor:pointer;color:var(--verde)}\n"] }]
-        }], ctorParameters: function () { return [{ type: TCloudUiAccordionService }]; } });
-
-class TCloudUiAccordionBodyComponent {
-    constructor(_tCloudUiAccordionService) {
-        this._tCloudUiAccordionService = _tCloudUiAccordionService;
-        this.show = false;
-    }
-    ngOnInit() {
-        this.show = this._tCloudUiAccordionService.getShow() || false;
-        this._tCloudUiAccordionService.stateToggle$.subscribe((show) => {
-            this.show = show;
-        });
-    }
-}
-TCloudUiAccordionBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiAccordionBodyComponent, deps: [{ token: TCloudUiAccordionService }], target: i0.ɵɵFactoryTarget.Component });
-TCloudUiAccordionBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiAccordionBodyComponent, selector: "tcloud-ui-accordion-body", ngImport: i0, template: "<div class=\"tc-accordion-content\" style=\"display: none;\" [class.show]=\"show\">\n    <ng-content></ng-content>\n</div>", styles: [".show{display:block!important}.tc-accordion-content{padding-top:15px;padding-bottom:15px}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiAccordionBodyComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tcloud-ui-accordion-body', template: "<div class=\"tc-accordion-content\" style=\"display: none;\" [class.show]=\"show\">\n    <ng-content></ng-content>\n</div>", styles: [".show{display:block!important}.tc-accordion-content{padding-top:15px;padding-bottom:15px}\n"] }]
-        }], ctorParameters: function () { return [{ type: TCloudUiAccordionService }]; } });
-
-class TCloudUiAccordionModule {
-}
-TCloudUiAccordionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TCloudUiAccordionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiAccordionModule, declarations: [TCloudUiAccordionComponent,
-        TCloudUiAccordionTitleComponent,
-        TCloudUiAccordionBodyComponent], imports: [CommonModule], exports: [TCloudUiAccordionComponent,
-        TCloudUiAccordionTitleComponent,
-        TCloudUiAccordionBodyComponent] });
-TCloudUiAccordionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiAccordionModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiAccordionModule, decorators: [{
-            type: NgModule,
+TCloudUiLoadingTransitionsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiLoadingTransitionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TCloudUiLoadingTransitionsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiLoadingTransitionsService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiLoadingTransitionsService, decorators: [{
+            type: Injectable,
             args: [{
-                    declarations: [
-                        TCloudUiAccordionComponent,
-                        TCloudUiAccordionTitleComponent,
-                        TCloudUiAccordionBodyComponent
-                    ],
-                    exports: [
-                        TCloudUiAccordionComponent,
-                        TCloudUiAccordionTitleComponent,
-                        TCloudUiAccordionBodyComponent
-                    ],
-                    imports: [
-                        CommonModule
-                    ]
+                    providedIn: 'root',
                 }]
-        }] });
+        }], ctorParameters: function () { return []; } });
 
 class TCloudUiModule {
 }
@@ -3425,6 +4205,8 @@ TCloudUiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         TCloudUiScrollBoxModule,
         TCloudUiFiltersModule,
         TCloudUiAccordionModule,
+        TCloudUiDatepickerModule,
+        TCloudUiDatepickerTimeModule,
         // Directives
         TCloudUiDirectiveModule,
         // Pipes
@@ -3443,6 +4225,8 @@ TCloudUiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         TCloudUiScrollBoxModule,
         TCloudUiFiltersModule,
         TCloudUiAccordionModule,
+        TCloudUiDatepickerModule,
+        TCloudUiDatepickerTimeModule,
         // Directives
         TCloudUiDirectiveModule,
         // Pipes
@@ -3465,6 +4249,8 @@ TCloudUiModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
         TCloudUiScrollBoxModule,
         TCloudUiFiltersModule,
         TCloudUiAccordionModule,
+        TCloudUiDatepickerModule,
+        TCloudUiDatepickerTimeModule,
         // Directives
         TCloudUiDirectiveModule,
         // Pipes
@@ -3483,6 +4269,8 @@ TCloudUiModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
         TCloudUiScrollBoxModule,
         TCloudUiFiltersModule,
         TCloudUiAccordionModule,
+        TCloudUiDatepickerModule,
+        TCloudUiDatepickerTimeModule,
         // Directives
         TCloudUiDirectiveModule,
         // Pipes
@@ -3506,6 +4294,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         TCloudUiScrollBoxModule,
                         TCloudUiFiltersModule,
                         TCloudUiAccordionModule,
+                        TCloudUiDatepickerModule,
+                        TCloudUiDatepickerTimeModule,
                         // Directives
                         TCloudUiDirectiveModule,
                         // Pipes
@@ -3527,6 +4317,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         TCloudUiScrollBoxModule,
                         TCloudUiFiltersModule,
                         TCloudUiAccordionModule,
+                        TCloudUiDatepickerModule,
+                        TCloudUiDatepickerTimeModule,
                         // Directives
                         TCloudUiDirectiveModule,
                         // Pipes
@@ -3547,5 +4339,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BytesPipe, CNPJPipe, CPFPipe, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2 as CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, MonthNamePipe, RespectivePipe, StatusInfoPipe, TCCondition, TCFiltersType, TCloudUiAccordionBodyComponent, TCloudUiAccordionComponent, TCloudUiAccordionModule, TCloudUiAccordionTitleComponent, TCloudUiAlignDirective, TCloudUiChoiceIssuesComponent, TCloudUiChoiceIssuesModule, TCloudUiDataListComponent, TCloudUiDataListModule, TCloudUiDataListOptionComponent, TCloudUiDirectiveModule, TCloudUiFiltersComponent, TCloudUiFiltersModule, TCloudUiInputSearchComponent, TCloudUiInputSearchModule, TCloudUiLineStepCircleComponent, TCloudUiLineStepCircleModule, TCloudUiLinhaLogoComponent, TCloudUiLinhaLogoModule, TCloudUiLoadingTransitionsService, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModalModule, TCloudUiModule, TCloudUiMultiInputComponent, TCloudUiMultiInputModule, TCloudUiMultiSelectComponent, TCloudUiMultiSelectModule, TCloudUiNotFoundComponent, TCloudUiNotFoundModule, TCloudUiNumberStepComponent, TCloudUiNumberStepModule, TCloudUiPipesModule, TCloudUiScrollBoxComponent, TCloudUiScrollBoxModule, TCloudUiSearchInObjectService, TCloudUiTabContentComponent, TCloudUiTabHeadComponent, TCloudUiTabMenuComponent, TCloudUiTabMenuModule, TCloudUiTabSubtitleComponent, TCloudUiTabTitleComponent, TCloudUiTableComponent, TCloudUiTableModule, TCloudUiTooltipDirective };
+export { BytesPipe, CNPJPipe, CPFPipe, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$4 as CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, DateBRPipe, MonthNamePipe, RespectivePipe, StatusInfoPipe, TCCondition, TCFiltersType, TCloudUiAccordionBodyComponent, TCloudUiAccordionComponent, TCloudUiAccordionModule, TCloudUiAccordionTitleComponent, TCloudUiAlignDirective, TCloudUiChoiceIssuesComponent, TCloudUiChoiceIssuesModule, TCloudUiDataListComponent, TCloudUiDataListModule, TCloudUiDataListOptionComponent, TCloudUiDatepickerComponent, TCloudUiDatepickerModule, TCloudUiDatepickerTimeComponent, TCloudUiDatepickerTimeModule, TCloudUiDirectiveModule, TCloudUiFiltersComponent, TCloudUiFiltersModule, TCloudUiHoverParentDirective, TCloudUiInputSearchComponent, TCloudUiInputSearchModule, TCloudUiLineStepCircleComponent, TCloudUiLineStepCircleModule, TCloudUiLinhaLogoComponent, TCloudUiLinhaLogoModule, TCloudUiLoadingTransitionsService, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModalModule, TCloudUiModule, TCloudUiMultiInputComponent, TCloudUiMultiInputModule, TCloudUiMultiSelectComponent, TCloudUiMultiSelectModule, TCloudUiNotFoundComponent, TCloudUiNotFoundModule, TCloudUiNumberStepComponent, TCloudUiNumberStepModule, TCloudUiPipesModule, TCloudUiScrollBoxComponent, TCloudUiScrollBoxModule, TCloudUiSearchInObjectService, TCloudUiTabContentComponent, TCloudUiTabHeadComponent, TCloudUiTabMenuComponent, TCloudUiTabMenuModule, TCloudUiTabSubtitleComponent, TCloudUiTabTitleComponent, TCloudUiTableComponent, TCloudUiTableModule, TCloudUiTooltipDirective };
 //# sourceMappingURL=dev-tcloud-tcloud-ui.mjs.map