@dev-tcloud/tcloud-ui 0.0.7 → 0.0.9

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { Component, Input, NgModule, Injectable, EventEmitter, Output, ViewChild, forwardRef, Directive, HostListener, Pipe } from '@angular/core';
+import { Component, Input, NgModule, Injectable, EventEmitter, Output, ViewChild, forwardRef, Pipe, Directive, HostListener } from '@angular/core';
 import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { CommonModule, DatePipe } from '@angular/common';
 import { Buffer } from 'buffer';
 import { Subject } from 'rxjs';
 import * as i1$1 from '@angular/router';
@@ -495,13 +495,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
 class TCloudUiModalComponent {
     constructor(tcloudModalService) {
         this.tcloudModalService = tcloudModalService;
+        /**
+        * tcloud-ui-modal - Cria e exibe um modal
+        *
+        * toAction - (toAction) - Resultado do evento - 'confirmed'|'cancel'|'close'
+        * toConfirm - (toConfirm) - Indica que a ação foi confirmada - resultado true
+        * toCancel - (toCancel() - Indica que a ação foi cancelada - resultado false
+        */
         this.param_confirm = {};
         /* BEGIN - Parametros para modo confirmacao */
         this._confirm = false;
         this._confirmText = 'Confirmo';
+        /**
+         * autoClose boolean - Indica se deverá ser fechado quando confirmar uma ação - default true
+         */
         this.autoClose = true;
+        /**
+         * maxWidth - number - Largura máxima do modal - default 500px
+         */
         this.maxWidth = 500;
-        // psg
         this._open = false;
         this._loading = false;
         this.openChange = new EventEmitter();
@@ -509,16 +521,25 @@ class TCloudUiModalComponent {
         this.toCancel = new EventEmitter();
         this.toAction = new EventEmitter();
     }
+    /**
+     * confirm boolean - Indica se será um modal do tipo confirmação - default false
+     */
     set confirm(v) {
         this._confirm = v;
         this.param_confirm.confirm = this._confirm;
         this.param_confirm.confirmText = this._confirmText;
     }
+    /**
+     * confirmText string - Texto que deverá ser digitado - defualt Confirmo
+     */
     set confirmText(v) {
         this._confirmText = v;
         this.param_confirm.confirmText = this._confirmText;
         this.param_confirm.confirm = this._confirm;
     }
+    /**
+     * window - string - nome referente ao tamanho do modal - não utilizar maxWidth se for utilizar window - default 500 (medium)
+     */
     set window(size) {
         switch (size) {
             case 'small':
@@ -538,11 +559,17 @@ class TCloudUiModalComponent {
                 break;
         }
     }
+    /**
+     * open - boolean - Variável de controle para exibição do modal - obrigatório
+     */
     set open(open) {
         this._open = open;
         this.fixed_body((open) ? 'on' : 'off');
     }
     get open() { return this._open; }
+    /**
+     * loading - boolean - Coloca o modal em modo de carregamento - default false
+     */
     set loading(loading) {
         this._loading = loading;
         this.tcloudModalService.setLoading(loading);
@@ -839,10 +866,10 @@ class TCloudUiLineStepCircleComponent {
     }
 }
 TCloudUiLineStepCircleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiLineStepCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TCloudUiLineStepCircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiLineStepCircleComponent, selector: "tcloud-ui-line-step-circle", inputs: { step: "step", active: "active", inactives: "inactives", complete: "complete" }, ngImport: i0, template: "<table class=\"table-trilha\" cellspacing=\"0\" cellpadding=\"0\">\r\n  <tr>\r\n    <ng-container *ngFor=\"let fase of trilha; let i = index\" >\r\n      <td class=\"area-circle\"><i class=\"fas fa-circle icon-{{ fase.class }} {{ fase.second_class }} \"></i></td>\r\n      <td class=\"area-line\" *ngIf=\"(i+1) < (trilha).length\">\r\n        <div class=\"step-line {{ fase.class }}\"></div>\r\n      </td>\r\n    </ng-container>\r\n  </tr>\r\n</table>", styles: [".table-trilha{width:100%;border-collapse:collapse;margin-top:3px;margin-bottom:2px}.table-trilha td{border:none}.table-trilha .area-circle{width:0px}.table-trilha .step-line{width:100%;height:2px;background-color:#ccc;padding:0;margin-left:-1px;width:110%}table tr{background-color:transparent!important}.step-default{background-color:#d9d9d9}.step-progress{background-color:#039be5!important}.icon-step-default{color:#d9d9d9}.icon-step-progress{color:#039be5}.icon-step-active{color:#ea9b3e}.step-inactive{color:#d9d9d9!important}\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"] }] });
+TCloudUiLineStepCircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiLineStepCircleComponent, selector: "tcloud-ui-line-step-circle", inputs: { step: "step", active: "active", inactives: "inactives", complete: "complete" }, ngImport: i0, template: "<table class=\"table-trilha\" cellspacing=\"0\" cellpadding=\"0\">\r\n  <tr>\r\n    <ng-container *ngFor=\"let fase of trilha; let i = index\" >\r\n      <td class=\"area-circle\"><i class=\"fas fa-circle icon-{{ fase.class }} {{ fase.second_class }} \"></i></td>\r\n      <td class=\"area-line\" *ngIf=\"(i+1) < (trilha).length\">\r\n        <div class=\"step-line {{ fase.class }}\"></div>\r\n      </td>\r\n    </ng-container>\r\n  </tr>\r\n</table>", styles: [".table-trilha{width:100%;border-collapse:collapse;margin-top:3px;margin-bottom:2px}.table-trilha td{border:none}.table-trilha .area-circle{width:0px}.table-trilha .step-line{width:100%;height:2px;background-color:#ccc;padding:0;margin-left:-1px;width:calc(100% + 2px)}table tr{background-color:transparent!important}.step-default{background-color:#d9d9d9}.step-progress{background-color:#039be5!important}.icon-step-default{color:#d9d9d9}.icon-step-progress{color:#039be5}.icon-step-active{color:#ea9b3e}.step-inactive{color:#d9d9d9!important}\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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiLineStepCircleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-line-step-circle', template: "<table class=\"table-trilha\" cellspacing=\"0\" cellpadding=\"0\">\r\n  <tr>\r\n    <ng-container *ngFor=\"let fase of trilha; let i = index\" >\r\n      <td class=\"area-circle\"><i class=\"fas fa-circle icon-{{ fase.class }} {{ fase.second_class }} \"></i></td>\r\n      <td class=\"area-line\" *ngIf=\"(i+1) < (trilha).length\">\r\n        <div class=\"step-line {{ fase.class }}\"></div>\r\n      </td>\r\n    </ng-container>\r\n  </tr>\r\n</table>", styles: [".table-trilha{width:100%;border-collapse:collapse;margin-top:3px;margin-bottom:2px}.table-trilha td{border:none}.table-trilha .area-circle{width:0px}.table-trilha .step-line{width:100%;height:2px;background-color:#ccc;padding:0;margin-left:-1px;width:110%}table tr{background-color:transparent!important}.step-default{background-color:#d9d9d9}.step-progress{background-color:#039be5!important}.icon-step-default{color:#d9d9d9}.icon-step-progress{color:#039be5}.icon-step-active{color:#ea9b3e}.step-inactive{color:#d9d9d9!important}\n"] }]
+            args: [{ selector: 'tcloud-ui-line-step-circle', template: "<table class=\"table-trilha\" cellspacing=\"0\" cellpadding=\"0\">\r\n  <tr>\r\n    <ng-container *ngFor=\"let fase of trilha; let i = index\" >\r\n      <td class=\"area-circle\"><i class=\"fas fa-circle icon-{{ fase.class }} {{ fase.second_class }} \"></i></td>\r\n      <td class=\"area-line\" *ngIf=\"(i+1) < (trilha).length\">\r\n        <div class=\"step-line {{ fase.class }}\"></div>\r\n      </td>\r\n    </ng-container>\r\n  </tr>\r\n</table>", styles: [".table-trilha{width:100%;border-collapse:collapse;margin-top:3px;margin-bottom:2px}.table-trilha td{border:none}.table-trilha .area-circle{width:0px}.table-trilha .step-line{width:100%;height:2px;background-color:#ccc;padding:0;margin-left:-1px;width:calc(100% + 2px)}table tr{background-color:transparent!important}.step-default{background-color:#d9d9d9}.step-progress{background-color:#039be5!important}.icon-step-default{color:#d9d9d9}.icon-step-progress{color:#039be5}.icon-step-active{color:#ea9b3e}.step-inactive{color:#d9d9d9!important}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { step: [{
                 type: Input
             }], active: [{
@@ -1001,12 +1028,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             type: Injectable
         }] });
 
-const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
+const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1 = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => TCloudUiDataListComponent),
     multi: true
 };
-const noop = () => {
+const noop$1 = () => {
 };
 class TCloudUiDataListComponent {
     constructor(dataListService, formBuilder) {
@@ -1029,8 +1056,8 @@ class TCloudUiDataListComponent {
         this.id = '';
         //Placeholders for the callbacks which are later providesd
         //by the Control Value Accessor
-        this.onTouchedCallback = noop;
-        this.onChangeCallback = noop;
+        this.onTouchedCallback = noop$1;
+        this.onChangeCallback = noop$1;
     }
     set disabled(v) {
         this._disabled = v;
@@ -1224,13 +1251,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" }, providers: [
         DataListService,
-        CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR
+        CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1
     ], 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\" \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\" [(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>", 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}.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}\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
+                        CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1
                     ], 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\" \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\" [(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>", 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}.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}\n"] }]
         }], ctorParameters: function () { return [{ type: DataListService }, { type: i2.FormBuilder }]; }, propDecorators: { placeholder: [{
                 type: Input
@@ -1335,197 +1362,220 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 }]
         }] });
 
-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');
-        }
+const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => TCloudUiChoiceIssuesComponent),
+    multi: true
+};
+const noop = () => {
+};
+class TCloudUiChoiceIssuesComponent {
+    constructor() {
+        this.view = false;
+        this.titulo = '';
+        this.subTitulo = '';
+        this.disabled = false;
+        this.onChange = new EventEmitter();
+        this.innerValue = false;
+        //Placeholders for the callbacks which are later providesd
+        //by the Control Value Accessor
+        this.onTouchedCallback = noop;
+        this.onChangeCallback = noop;
+        this.ID = 'tc-issue-' + Math.random().toString(36).substr(2, 9);
     }
-    set tooltip(tooltip) {
-        if (tooltip) {
-            this.check(tooltip);
-        }
+    //get accessor
+    get value() {
+        return this.innerValue;
     }
     ;
-    set direction(direction) {
-        if (direction) {
-            this._direction = direction;
+    //set accessor including call the onchange callback
+    set value(v) {
+        if (v !== this.innerValue) {
+            this.innerValue = v;
+            this.onChangeCallback(v);
         }
     }
-    ;
-    ngOnInit() {
-    }
-    generateID() {
-        return `tc-tooltip-${Math.floor(Math.random() * Math.floor(Math.random() * Date.now()))}`;
-    }
-    getElement() {
-        return document.getElementById(this.ID) || undefined;
+    //Set touched on blur
+    onBlur() {
+        this.onTouchedCallback();
     }
-    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);
+    //From ControlValueAccessor interface
+    writeValue(value) {
+        if (value !== this.innerValue) {
+            this.innerValue = value;
         }
     }
-    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');
+    //From ControlValueAccessor interface
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
     }
-    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
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
     }
-    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');
+    setV(v) {
+        console.log('setV', v);
+        this.value = v;
+        this.onChange.emit(v);
     }
-    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');
+    createID() {
+        // Math.random should be unique because of its seeding algorithm.
+        // Convert it to base 36 (numbers + letters), and grab the first 9 characters
+        // after the decimal.
+        return '_' + Math.random().toString(36).substr(2, 9);
     }
 }
-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: "[tooltip]", inputs: { tooltip: "tooltip", direction: "direction" }, 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: '[tooltip]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { onMouseOver: [{
-                type: HostListener,
-                args: ['mouseover']
-            }], onMouseOut: [{
-                type: HostListener,
-                args: ['mouseout']
-            }], tooltip: [{
+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], 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}.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], 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}.view,.view label{cursor:inherit!important}.disabled{background-color:#8fdfe8!important}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { view: [{
+                type: Input
+            }], titulo: [{
                 type: Input
-            }], direction: [{
+            }], subTitulo: [{
                 type: Input
+            }], disabled: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }], inputRef: [{
+                type: ViewChild,
+                args: ['campo', { read: true, static: false }]
             }] } });
 
-class TCloudUiDirectiveModule {
+class TCloudUiChoiceIssuesModule {
 }
-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], exports: [TCloudUiTooltipDirective] });
-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: [{
+TCloudUiChoiceIssuesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiChoiceIssuesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TCloudUiChoiceIssuesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiChoiceIssuesModule, declarations: [TCloudUiChoiceIssuesComponent], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule], exports: [TCloudUiChoiceIssuesComponent] });
+TCloudUiChoiceIssuesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiChoiceIssuesModule, imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiChoiceIssuesModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [TCloudUiTooltipDirective],
-                    exports: [TCloudUiTooltipDirective],
+                    declarations: [
+                        TCloudUiChoiceIssuesComponent,
+                    ],
+                    exports: [
+                        TCloudUiChoiceIssuesComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule
+                    ]
                 }]
         }] });
 
-class MonthNamePipe {
+class TCloudUiMultiInputComponent {
     constructor() {
-        this.meses = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezenbro'];
+        this.placeholder = '';
+        this.disabled = false;
+        this.loading = false;
+        this.count_actives = 0;
+        this.tcChange = new EventEmitter();
     }
-    transform(yyyy_mm) {
-        if (yyyy_mm !== '') {
-            let part = (yyyy_mm).split('-');
-            if ((part).length === 2) {
-                let yyyy = +part[0];
-                let mm = +part[1];
-                return this.meses[(mm - 1)];
+    ngOnInit() {
+        setTimeout(() => {
+            this.toChange();
+        });
+    }
+    addItem(item) {
+        if (this.disabled) {
+            return;
+        }
+        if (!this.tcList) {
+            this.tcList = [];
+        }
+        (this.tcList).push({ value: item });
+        this.toChange();
+        this.input_value = '';
+    }
+    removeItem(item, index) {
+        if (this.disabled) {
+            return;
+        }
+        if (this.tcList) {
+            for (let i = 0; i < (this.tcList).length; i++) {
+                const row = this.tcList[i];
+                if (item === row.value && i === index) {
+                    (this.tcList).splice(index, 1);
+                    break;
+                }
             }
+            this.toChange();
         }
-        return '';
+    }
+    toChange() {
+        let count_actives = 0;
+        let itens = [];
+        if (this.tcList) {
+            for (let i = 0; i < (this.tcList).length; i++) {
+                const row = this.tcList[i];
+                (itens).push(row);
+            }
+        }
+        this.count_actives = count_actives;
+        this.tcChange.emit(itens);
+    }
+}
+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" }, outputs: { tcChange: "tcChange" }, ngImport: i0, template: "<div>\n  <form #_formulario=\"ngForm\">\n    <table>\n      <tr *ngIf=\"tcList\">\n        <td>\n          <input type=\"text\" [(ngModel)]=\"input_value\" [disabled]=\"disabled || loading\" name=\"input_value\" required>\n        </td>\n        <td>\n          <button\n            [disabled]=\"disabled || loading || !_formulario.valid\"\n            title=\"Adicionar\"\n            class=\"btn-plus-select\"\n            (click)=\"addItem(input_value)\"\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\">\n      <ng-container *ngFor=\"let item of tcList; let i = index\">\n        \n        <div class=\"box-label\">\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)\">\n              <i class=\"fas fa-times\"></i>\n            </button>\n          </div>\n        </div>\n\n      </ng-container>\n    </div>\n  </form>\n</div>\n  ", styles: ["table{width:100%;border-collapse:collapse;border:none}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: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{display:flex;max-width:220px;height:35px;min-width:100px;background-color:var(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{width:8px}.box-label .box-action button{color:#d72020;background-color:var(--verde);border:none;font-weight:700;cursor:pointer}\n"], dependencies: [{ 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tcloud-ui-multi-input', template: "<div>\n  <form #_formulario=\"ngForm\">\n    <table>\n      <tr *ngIf=\"tcList\">\n        <td>\n          <input type=\"text\" [(ngModel)]=\"input_value\" [disabled]=\"disabled || loading\" name=\"input_value\" required>\n        </td>\n        <td>\n          <button\n            [disabled]=\"disabled || loading || !_formulario.valid\"\n            title=\"Adicionar\"\n            class=\"btn-plus-select\"\n            (click)=\"addItem(input_value)\"\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\">\n      <ng-container *ngFor=\"let item of tcList; let i = index\">\n        \n        <div class=\"box-label\">\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)\">\n              <i class=\"fas fa-times\"></i>\n            </button>\n          </div>\n        </div>\n\n      </ng-container>\n    </div>\n  </form>\n</div>\n  ", styles: ["table{width:100%;border-collapse:collapse;border:none}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: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{display:flex;max-width:220px;height:35px;min-width:100px;background-color:var(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{width:8px}.box-label .box-action button{color:#d72020;background-color:var(--verde);border:none;font-weight:700;cursor:pointer}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { tcList: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], tcChange: [{
+                type: Output
+            }] } });
+
+class TCloudUiMultiInputModule {
+}
+TCloudUiMultiInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TCloudUiMultiInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiInputModule, declarations: [TCloudUiMultiInputComponent], imports: [FormsModule,
+        ReactiveFormsModule,
+        CommonModule], exports: [TCloudUiMultiInputComponent] });
+TCloudUiMultiInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiInputModule, imports: [FormsModule,
+        ReactiveFormsModule,
+        CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiInputModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [TCloudUiMultiInputComponent],
+                    exports: [TCloudUiMultiInputComponent],
+                    imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        CommonModule
+                    ]
+                }]
+        }] });
+
+class MonthNamePipe {
+    constructor() {
+        this.meses = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezenbro'];
+    }
+    transform(yyyy_mm) {
+        if (yyyy_mm !== '') {
+            let part = (yyyy_mm).split('-');
+            if ((part).length === 2) {
+                let yyyy = +part[0];
+                let mm = +part[1];
+                return this.meses[(mm - 1)];
+            }
+        }
+        return '';
     }
 }
 MonthNamePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MonthNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
@@ -1747,17 +1797,367 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             args: [{ name: 'cpf' }]
         }] });
 
+class TCloudUiSearchInObjectService {
+    constructor(datepipe, statusinfo) {
+        this.datepipe = datepipe;
+        this.statusinfo = statusinfo;
+    }
+    isADate(d) {
+        if (Object.prototype.toString.call(d) === "[object Date]") {
+            ;
+            if (isNaN(d.getTime())) {
+                return false;
+            }
+            else {
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * meet - Procura em object - filtro utilizado para busca em tabelas
+     * @param valor texto a ser procurado
+     * @param emObject object alvo de onde procurar
+     * @param camposDebusca (Opcional) informa em quais são as keys que deverá procurar
+     */
+    meet(valor, emObject, camposDebusca) {
+        if (valor != "") {
+            if (emObject.length < 1) {
+                return emObject;
+            }
+            if (camposDebusca === undefined || camposDebusca === null) {
+                camposDebusca = [];
+                for (const key in emObject[0]) {
+                    camposDebusca.push(key);
+                }
+            }
+            if (camposDebusca.length < 1) {
+                return emObject;
+            }
+            valor = valor.toLowerCase();
+            var result = [];
+            for (const key in emObject) {
+                var oObject = emObject[key];
+                if (oObject) {
+                    for (const objectvalue of camposDebusca) {
+                        const dt = new Date(oObject[objectvalue]);
+                        if (this.isADate(dt) && typeof ((dt).getMonth) === 'function') {
+                            const data1 = this.datepipe.transform(dt, 'dd/MM/yyyy hh:mm');
+                            const data2 = this.datepipe.transform(dt, 'medium');
+                            const strToTest = (data1 + " " + data2 + " " + oObject[objectvalue]).toLowerCase();
+                            if ((strToTest.indexOf(valor) >= 0) && (result).indexOf(oObject) == -1) {
+                                result.push(oObject);
+                                break;
+                            }
+                        }
+                        else {
+                            const strToTest = (this.statusinfo.transform(oObject[objectvalue], 'ALL') + "").toLowerCase();
+                            if ((strToTest.indexOf(valor) >= 0) && (result).indexOf(oObject) == -1) {
+                                result.push(oObject);
+                                break;
+                            }
+                        }
+                    }
+                }
+            }
+            if (emObject && typeof emObject === 'object' && Array.isArray(emObject)) {
+                // is array 
+                const v = (`${valor}`).toUpperCase();
+                for (let i = 0; i < (emObject).length; i++) {
+                    const item = (`${emObject[i]}`).toUpperCase();
+                    if (item.includes(v) || item === v) {
+                        result.push(emObject[i]);
+                    }
+                }
+            }
+            return result;
+        }
+        return emObject;
+    }
+}
+TCloudUiSearchInObjectService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiSearchInObjectService, deps: [{ token: i1.DatePipe }, { token: StatusInfoPipe }], target: i0.ɵɵFactoryTarget.Injectable });
+TCloudUiSearchInObjectService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiSearchInObjectService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiSearchInObjectService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.DatePipe }, { type: StatusInfoPipe }]; } });
+
+class TCloudUiInputSearchComponent {
+    constructor(searchInObjectService) {
+        this.searchInObjectService = searchInObjectService;
+        /**
+         * tcloud-ui-input-search - Procura pelo valor informado no objeto indicado
+         * @param placeholder string - placeholder no input
+         * @param mirror boolean - Exibir os valores espelhados ou somente os valores encontrados
+         * @param base_object object - Objeto onde ser procurado
+         * @param found - Evite o valor encontrado
+         */
+        this.placeholder = 'Procurar...';
+        this.mirror = true;
+        this.search_text = '';
+        this.found = new EventEmitter();
+    }
+    set base_object(base_object) {
+        if (base_object) {
+            this._base_object = base_object;
+            if (this.mirror) {
+                this.result_object = base_object;
+                this.toFound();
+            }
+        }
+    }
+    get base_object() { return this._base_object; }
+    ngOnInit() {
+    }
+    buscar(value) {
+        this.result_object = this.searchInObjectService.meet(`${value}`, this.base_object);
+        this.toFound();
+    }
+    clean() {
+        if (this.mirror) {
+            this.buscar('');
+        }
+        else {
+            this.result_object = [];
+            this.toFound();
+        }
+        this.search_text = '';
+    }
+    toFound() {
+        this.found.emit(this.result_object);
+    }
+}
+TCloudUiInputSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiInputSearchComponent, deps: [{ token: TCloudUiSearchInObjectService }], target: i0.ɵɵFactoryTarget.Component });
+TCloudUiInputSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiInputSearchComponent, selector: "tcloud-ui-input-search", inputs: { placeholder: "placeholder", mirror: "mirror", base_object: "base_object" }, outputs: { found: "found" }, ngImport: i0, template: "<table class=\"tc-group-input-table\" cellspacing=\"0\" cellpadding=\"0\">\n    <tr>\n        <td><input [(ngModel)]=\"search_text\" type=\"text\" (keyup)=\"buscar(search_text)\" placeholder=\"{{ placeholder }}\" ></td>\n        <td>     \n            <ng-container *ngIf=\"search_text === ''\">  \n                <button type=\"button\" (click)=\"buscar(search_text)\"><i class=\"fas fa-search\"></i></button>\n            </ng-container> \n\n            <ng-container *ngIf=\"search_text !== ''\">  \n                <button type=\"button\" (click)=\"clean()\"><i class=\"fas fa-times\"></i></button>\n            </ng-container>\n        </td>\n    </tr>\n</table>", styles: [".tc-group-input-table{width:100%;border-collapse:collapse;border-spacing:0}.tc-group-input-table td{border:none;border-style:hidden;border-spacing:0}.tc-group-input-table td:first-child input{width:100%;height:35px;border:none;border:1px solid #ccc}.tc-group-input-table td:last-child{width:40px}.tc-group-input-table td:last-child button{width:100%;height:35px;border:none;border-radius:0 10px 10px 0;cursor:pointer}\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.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: TCloudUiInputSearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tcloud-ui-input-search', template: "<table class=\"tc-group-input-table\" cellspacing=\"0\" cellpadding=\"0\">\n    <tr>\n        <td><input [(ngModel)]=\"search_text\" type=\"text\" (keyup)=\"buscar(search_text)\" placeholder=\"{{ placeholder }}\" ></td>\n        <td>     \n            <ng-container *ngIf=\"search_text === ''\">  \n                <button type=\"button\" (click)=\"buscar(search_text)\"><i class=\"fas fa-search\"></i></button>\n            </ng-container> \n\n            <ng-container *ngIf=\"search_text !== ''\">  \n                <button type=\"button\" (click)=\"clean()\"><i class=\"fas fa-times\"></i></button>\n            </ng-container>\n        </td>\n    </tr>\n</table>", styles: [".tc-group-input-table{width:100%;border-collapse:collapse;border-spacing:0}.tc-group-input-table td{border:none;border-style:hidden;border-spacing:0}.tc-group-input-table td:first-child input{width:100%;height:35px;border:none;border:1px solid #ccc}.tc-group-input-table td:last-child{width:40px}.tc-group-input-table td:last-child button{width:100%;height:35px;border:none;border-radius:0 10px 10px 0;cursor:pointer}\n"] }]
+        }], ctorParameters: function () { return [{ type: TCloudUiSearchInObjectService }]; }, propDecorators: { placeholder: [{
+                type: Input
+            }], mirror: [{
+                type: Input
+            }], base_object: [{
+                type: Input
+            }], found: [{
+                type: Output
+            }] } });
+
+class TCloudUiInputSearchModule {
+}
+TCloudUiInputSearchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiInputSearchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TCloudUiInputSearchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiInputSearchModule, declarations: [TCloudUiInputSearchComponent], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule], exports: [TCloudUiInputSearchComponent] });
+TCloudUiInputSearchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiInputSearchModule, imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiInputSearchModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        TCloudUiInputSearchComponent
+                    ],
+                    exports: [
+                        TCloudUiInputSearchComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule
+                    ]
+                }]
+        }] });
+
+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], exports: [TCloudUiTooltipDirective] });
+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],
+                    exports: [TCloudUiTooltipDirective],
+                }]
+        }] });
+
 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], imports: [CommonModule], exports: [MonthNamePipe,
+        CNPJPipe], imports: [CommonModule], exports: [DatePipe,
+        MonthNamePipe,
         StatusInfoPipe,
         RespectivePipe,
         CNPJPipe] });
 TCloudUiPipesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiPipesModule, providers: [
+        DatePipe,
         MonthNamePipe,
         StatusInfoPipe,
         RespectivePipe,
@@ -1776,12 +2176,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         CNPJPipe
                     ],
                     exports: [
+                        DatePipe,
                         MonthNamePipe,
                         StatusInfoPipe,
                         RespectivePipe,
                         CNPJPipe
                     ],
                     providers: [
+                        DatePipe,
                         MonthNamePipe,
                         StatusInfoPipe,
                         RespectivePipe,
@@ -1790,96 +2192,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 }]
         }] });
 
-class TCloudUiMultiInputComponent {
+class TCloudUiLoadingTransitionsService {
     constructor() {
-        this.placeholder = '';
-        this.disabled = false;
-        this.loading = false;
-        this.count_actives = 0;
-        this.tcChange = new EventEmitter();
-    }
-    ngOnInit() {
-        setTimeout(() => {
-            this.toChange();
-        });
-    }
-    addItem(item) {
-        if (this.disabled) {
-            return;
-        }
-        if (!this.tcList) {
-            this.tcList = [];
+        this.ID = 'tcloud-ui-loading-transitions';
+    }
+    /**
+     * 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');
+        }
+    }
+    /**
+     * 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');
+        }
+    }
+    create_loading_transition() {
+        let box = null;
+        if (document.getElementById(this.ID)) {
+            box = document.getElementById(this.ID);
         }
-        (this.tcList).push({ value: item });
-        this.toChange();
-        this.input_value = '';
-    }
-    removeItem(item, index) {
-        if (this.disabled) {
-            return;
-        }
-        if (this.tcList) {
-            for (let i = 0; i < (this.tcList).length; i++) {
-                const row = this.tcList[i];
-                if (item === row.value && i === index) {
-                    (this.tcList).splice(index, 1);
-                    break;
-                }
-            }
-            this.toChange();
-        }
-    }
-    toChange() {
-        let count_actives = 0;
-        let itens = [];
-        if (this.tcList) {
-            for (let i = 0; i < (this.tcList).length; i++) {
-                const row = this.tcList[i];
-                (itens).push(row);
-            }
+        else {
+            box = document.createElement("div");
+            box.setAttribute('id', this.ID);
         }
-        this.count_actives = count_actives;
-        this.tcChange.emit(itens);
+        const body = document.getElementsByTagName('body')[0];
+        body.appendChild(box);
+        body.classList.add('tcloud-ui-body-loading-transitions');
+        // element.classList.remove('bar', 'baz');
     }
 }
-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" }, outputs: { tcChange: "tcChange" }, ngImport: i0, template: "<div>\n  <form #_formulario=\"ngForm\">\n    <table>\n      <tr *ngIf=\"tcList\">\n        <td>\n          <input type=\"text\" [(ngModel)]=\"input_value\" [disabled]=\"disabled || loading\" name=\"input_value\" required>\n        </td>\n        <td>\n          <button\n            [disabled]=\"disabled || loading || !_formulario.valid\"\n            title=\"Adicionar\"\n            class=\"btn-plus-select\"\n            (click)=\"addItem(input_value)\"\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\">\n      <ng-container *ngFor=\"let item of tcList; let i = index\">\n        \n        <div class=\"box-label\">\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)\">\n              <i class=\"fas fa-times\"></i>\n            </button>\n          </div>\n        </div>\n\n      </ng-container>\n    </div>\n  </form>\n</div>\n  ", styles: ["table{width:100%;border-collapse:collapse;border:none}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: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{display:flex;max-width:220px;height:35px;min-width:100px;background-color:var(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{width:8px}.box-label .box-action button{color:#d72020;background-color:var(--verde);border:none;font-weight:700;cursor:pointer}\n"], dependencies: [{ 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tcloud-ui-multi-input', template: "<div>\n  <form #_formulario=\"ngForm\">\n    <table>\n      <tr *ngIf=\"tcList\">\n        <td>\n          <input type=\"text\" [(ngModel)]=\"input_value\" [disabled]=\"disabled || loading\" name=\"input_value\" required>\n        </td>\n        <td>\n          <button\n            [disabled]=\"disabled || loading || !_formulario.valid\"\n            title=\"Adicionar\"\n            class=\"btn-plus-select\"\n            (click)=\"addItem(input_value)\"\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\">\n      <ng-container *ngFor=\"let item of tcList; let i = index\">\n        \n        <div class=\"box-label\">\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)\">\n              <i class=\"fas fa-times\"></i>\n            </button>\n          </div>\n        </div>\n\n      </ng-container>\n    </div>\n  </form>\n</div>\n  ", styles: ["table{width:100%;border-collapse:collapse;border:none}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: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{display:flex;max-width:220px;height:35px;min-width:100px;background-color:var(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{width:8px}.box-label .box-action button{color:#d72020;background-color:var(--verde);border:none;font-weight:700;cursor:pointer}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { tcList: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], tcChange: [{
-                type: Output
-            }] } });
-
-class TCloudUiMultiInputModule {
-}
-TCloudUiMultiInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TCloudUiMultiInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiInputModule, declarations: [TCloudUiMultiInputComponent], imports: [FormsModule,
-        ReactiveFormsModule,
-        CommonModule], exports: [TCloudUiMultiInputComponent] });
-TCloudUiMultiInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiInputModule, imports: [FormsModule,
-        ReactiveFormsModule,
-        CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiInputModule, 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: [TCloudUiMultiInputComponent],
-                    exports: [TCloudUiMultiInputComponent],
-                    imports: [
-                        FormsModule,
-                        ReactiveFormsModule,
-                        CommonModule
-                    ]
+                    providedIn: 'root',
                 }]
-        }] });
+        }], ctorParameters: function () { return []; } });
 
 class TCloudUiModule {
 }
@@ -1891,6 +2251,8 @@ TCloudUiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         TCloudUiMultiSelectModule,
         TCloudUiDataListModule,
         TCloudUiMultiInputModule,
+        TCloudUiChoiceIssuesModule,
+        TCloudUiInputSearchModule,
         // Directives
         TCloudUiDirectiveModule,
         // Pipes
@@ -1901,17 +2263,24 @@ TCloudUiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         TCloudUiMultiSelectModule,
         TCloudUiDataListModule,
         TCloudUiMultiInputModule,
+        TCloudUiChoiceIssuesModule,
+        TCloudUiInputSearchModule,
         // Directives
         TCloudUiDirectiveModule,
         // Pipes
         TCloudUiPipesModule] });
-TCloudUiModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiModule, imports: [TCloudUiModalModule,
+TCloudUiModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiModule, providers: [
+        TCloudUiLoadingTransitionsService,
+        TCloudUiSearchInObjectService,
+    ], imports: [TCloudUiModalModule,
         TCloudUiTabMenuModule,
         TCloudUiLinhaLogoModule,
         TCloudUiLineStepCircleModule,
         TCloudUiMultiSelectModule,
         TCloudUiDataListModule,
         TCloudUiMultiInputModule,
+        TCloudUiChoiceIssuesModule,
+        TCloudUiInputSearchModule,
         // Directives
         TCloudUiDirectiveModule,
         // Pipes
@@ -1922,6 +2291,8 @@ TCloudUiModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
         TCloudUiMultiSelectModule,
         TCloudUiDataListModule,
         TCloudUiMultiInputModule,
+        TCloudUiChoiceIssuesModule,
+        TCloudUiInputSearchModule,
         // Directives
         TCloudUiDirectiveModule,
         // Pipes
@@ -1937,6 +2308,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         TCloudUiMultiSelectModule,
                         TCloudUiDataListModule,
                         TCloudUiMultiInputModule,
+                        TCloudUiChoiceIssuesModule,
+                        TCloudUiInputSearchModule,
                         // Directives
                         TCloudUiDirectiveModule,
                         // Pipes
@@ -1950,10 +2323,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         TCloudUiMultiSelectModule,
                         TCloudUiDataListModule,
                         TCloudUiMultiInputModule,
+                        TCloudUiChoiceIssuesModule,
+                        TCloudUiInputSearchModule,
                         // Directives
                         TCloudUiDirectiveModule,
                         // Pipes
                         TCloudUiPipesModule
+                    ],
+                    providers: [
+                        TCloudUiLoadingTransitionsService,
+                        TCloudUiSearchInObjectService,
                     ]
                 }]
         }] });
@@ -1966,5 +2345,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CNPJPipe, CPFPipe, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, MonthNamePipe, RespectivePipe, StatusInfoPipe, TCloudUiDataListComponent, TCloudUiDataListModule, TCloudUiDataListOptionComponent, TCloudUiDirectiveModule, TCloudUiLineStepCircleComponent, TCloudUiLineStepCircleModule, TCloudUiLinhaLogoComponent, TCloudUiLinhaLogoModule, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModalModule, TCloudUiModule, TCloudUiMultiInputComponent, TCloudUiMultiInputModule, TCloudUiMultiSelectComponent, TCloudUiMultiSelectModule, TCloudUiPipesModule, TCloudUiTabContentComponent, TCloudUiTabHeadComponent, TCloudUiTabMenuComponent, TCloudUiTabMenuModule, TCloudUiTabSubtitleComponent, TCloudUiTabTitleComponent, TCloudUiTooltipDirective };
+export { CNPJPipe, CPFPipe, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1 as CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, MonthNamePipe, RespectivePipe, StatusInfoPipe, TCloudUiChoiceIssuesComponent, TCloudUiChoiceIssuesModule, TCloudUiDataListComponent, TCloudUiDataListModule, TCloudUiDataListOptionComponent, TCloudUiDirectiveModule, TCloudUiInputSearchComponent, TCloudUiInputSearchModule, TCloudUiLineStepCircleComponent, TCloudUiLineStepCircleModule, TCloudUiLinhaLogoComponent, TCloudUiLinhaLogoModule, TCloudUiLoadingTransitionsService, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModalModule, TCloudUiModule, TCloudUiMultiInputComponent, TCloudUiMultiInputModule, TCloudUiMultiSelectComponent, TCloudUiMultiSelectModule, TCloudUiPipesModule, TCloudUiSearchInObjectService, TCloudUiTabContentComponent, TCloudUiTabHeadComponent, TCloudUiTabMenuComponent, TCloudUiTabMenuModule, TCloudUiTabSubtitleComponent, TCloudUiTabTitleComponent, TCloudUiTooltipDirective };
 //# sourceMappingURL=dev-tcloud-tcloud-ui.mjs.map