@dev-tcloud/tcloud-ui 0.0.6 → 0.0.7

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

@@ -933,10 +933,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" }, outputs: { tcChange: "tcChange" }, ngImport: i0, template: "<div>\r\n  <table>\r\n    <tr *ngIf=\"tcList\">\r\n      <td>\r\n        <select\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]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n          title=\"Adicionar\"\r\n          class=\"btn-plus-select\"\r\n          (click)=\"addItem(_select.value)\"\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\">\r\n    <ng-container *ngFor=\"let item of tcList\">\r\n      <div class=\"itens-selected\" *ngIf=\"item.active\" [title]=\"item.description\">\r\n        {{ item.description }}\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)\">\r\n          <i class=\"fas fa-times\"></i>\r\n        </button>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n", styles: ["table{width:100%;border-collapse:collapse;border:none}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}.itens-selected{display:inline;width:100%;max-width:200px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:1px solid #ccc;height:35px;min-width:100px;background-color:var(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px}.itens-selected button{position:relative;right:0;z-index:1;float:right;line-height:1;top:2px;left:10px;color:#d72020;background-color:var(--verde);border:none;font-weight:700;cursor:pointer}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!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"] }] });
+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" }, outputs: { tcChange: "tcChange" }, ngImport: i0, template: "<div>\r\n  <table>\r\n    <tr *ngIf=\"tcList\">\r\n      <td>\r\n        <select\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]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n          title=\"Adicionar\"\r\n          class=\"btn-plus-select\"\r\n          (click)=\"addItem(_select.value)\"\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\">\r\n    <ng-container *ngFor=\"let item of tcList\">\r\n\r\n      <ng-container *ngIf=\"item.active\">\r\n        <div class=\"box-label\">\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)\">\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: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{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: 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: TCloudUiMultiSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-multi-select', template: "<div>\r\n  <table>\r\n    <tr *ngIf=\"tcList\">\r\n      <td>\r\n        <select\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]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n          title=\"Adicionar\"\r\n          class=\"btn-plus-select\"\r\n          (click)=\"addItem(_select.value)\"\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\">\r\n    <ng-container *ngFor=\"let item of tcList\">\r\n      <div class=\"itens-selected\" *ngIf=\"item.active\" [title]=\"item.description\">\r\n        {{ item.description }}\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)\">\r\n          <i class=\"fas fa-times\"></i>\r\n        </button>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n", styles: ["table{width:100%;border-collapse:collapse;border:none}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}.itens-selected{display:inline;width:100%;max-width:200px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:1px solid #ccc;height:35px;min-width:100px;background-color:var(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px}.itens-selected button{position:relative;right:0;z-index:1;float:right;line-height:1;top:2px;left:10px;color:#d72020;background-color:var(--verde);border:none;font-weight:700;cursor:pointer}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}\n"] }]
+            args: [{ selector: 'tcloud-ui-multi-select', template: "<div>\r\n  <table>\r\n    <tr *ngIf=\"tcList\">\r\n      <td>\r\n        <select\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]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n          title=\"Adicionar\"\r\n          class=\"btn-plus-select\"\r\n          (click)=\"addItem(_select.value)\"\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\">\r\n    <ng-container *ngFor=\"let item of tcList\">\r\n\r\n      <ng-container *ngIf=\"item.active\">\r\n        <div class=\"box-label\">\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)\">\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: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{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: [{
@@ -1329,7 +1329,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 }]
         }] });
 
-class TooltipDirective {
+class TCloudUiTooltipDirective {
     constructor(el, renderer) {
         this.el = el;
         this.renderer = renderer;
@@ -1348,6 +1348,7 @@ class TooltipDirective {
     }
     onMouseOver() {
         if (this.getElement()) {
+            this.renderer.addClass(this.el.nativeElement, 'main-tooltip');
             const el = this.getElement();
             el.style.display = 'inline';
             setTimeout(() => {
@@ -1387,6 +1388,7 @@ class TooltipDirective {
         if (this.getElement()) {
             const el = this.getElement();
             el.style.display = 'none';
+            this.renderer.removeClass(this.el.nativeElement, 'main-tooltip');
         }
     }
     set tooltip(tooltip) {
@@ -1422,9 +1424,8 @@ class TooltipDirective {
         }
     }
     setStyle(el) {
-        this.renderer.setStyle(el, 'position', 'relative');
-        this.renderer.setStyle(el, 'border', '1px');
-        this.renderer.setStyle(el, 'display', 'inline');
+        // this.renderer.setStyle(el, 'position', 'relative');
+        // this.renderer.setStyle(el, 'display', 'inline');
     }
     create_tooltip(tip, el) {
         this.setStyle(el);
@@ -1433,7 +1434,7 @@ class TooltipDirective {
         tooltip.setAttribute('style', `
       position: absolute;  
       display: none;
-      padding: .5rem;
+      padding: 10px;
       border-radius: 10px;
       text-align: center;
       width: max-content;
@@ -1450,7 +1451,7 @@ class TooltipDirective {
     to_top(el) {
         const pos = this.el_center - (this.target_center);
         this.renderer.setStyle(el, 'left', `${(pos)}px`);
-        this.renderer.setStyle(el, 'bottom', `24px`);
+        this.renderer.setStyle(el, 'bottom', `${(this.el_height + 7)}px`);
         el.setAttribute('class', 'tc-directive-tooltip tc-directive-tooltip-top');
     }
     to_bottom(el) {
@@ -1472,9 +1473,9 @@ class TooltipDirective {
         el.setAttribute('class', 'tc-directive-tooltip tc-directive-tooltip-left');
     }
 }
-TooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-TooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: TooltipDirective, 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: TooltipDirective, decorators: [{
+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]'
@@ -1491,16 +1492,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Input
             }] } });
 
-class TCloudAccessModule {
+class TCloudUiDirectiveModule {
 }
-TCloudAccessModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudAccessModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TCloudAccessModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TCloudAccessModule, declarations: [TooltipDirective], exports: [TooltipDirective] });
-TCloudAccessModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudAccessModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudAccessModule, decorators: [{
+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: [TooltipDirective],
-                    exports: [TooltipDirective],
+                    declarations: [TCloudUiTooltipDirective],
+                    exports: [TCloudUiTooltipDirective],
                 }]
         }] });
 
@@ -1739,23 +1740,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             args: [{ name: 'cpf' }]
         }] });
 
-class TCloudPipesModule {
+class TCloudUiPipesModule {
 }
-TCloudPipesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudPipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TCloudPipesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TCloudPipesModule, declarations: [MonthNamePipe,
+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,
         StatusInfoPipe,
         RespectivePipe,
         CNPJPipe] });
-TCloudPipesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudPipesModule, providers: [
+TCloudUiPipesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiPipesModule, providers: [
         MonthNamePipe,
         StatusInfoPipe,
         RespectivePipe,
         CNPJPipe
     ], imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudPipesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiPipesModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1782,6 +1783,97 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 }]
         }] });
 
+class TCloudUiMultiInputComponent {
+    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.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);
+            }
+        }
+        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 TCloudUiModule {
 }
 TCloudUiModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1791,38 +1883,42 @@ TCloudUiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         TCloudUiLineStepCircleModule,
         TCloudUiMultiSelectModule,
         TCloudUiDataListModule,
+        TCloudUiMultiInputModule,
         // Directives
-        TCloudAccessModule,
+        TCloudUiDirectiveModule,
         // Pipes
-        TCloudPipesModule], exports: [TCloudUiModalModule,
+        TCloudUiPipesModule], exports: [TCloudUiModalModule,
         TCloudUiTabMenuModule,
         TCloudUiLinhaLogoModule,
         TCloudUiLineStepCircleModule,
         TCloudUiMultiSelectModule,
         TCloudUiDataListModule,
+        TCloudUiMultiInputModule,
         // Directives
-        TCloudAccessModule,
+        TCloudUiDirectiveModule,
         // Pipes
-        TCloudPipesModule] });
+        TCloudUiPipesModule] });
 TCloudUiModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiModule, imports: [TCloudUiModalModule,
         TCloudUiTabMenuModule,
         TCloudUiLinhaLogoModule,
         TCloudUiLineStepCircleModule,
         TCloudUiMultiSelectModule,
         TCloudUiDataListModule,
+        TCloudUiMultiInputModule,
         // Directives
-        TCloudAccessModule,
+        TCloudUiDirectiveModule,
         // Pipes
-        TCloudPipesModule, TCloudUiModalModule,
+        TCloudUiPipesModule, TCloudUiModalModule,
         TCloudUiTabMenuModule,
         TCloudUiLinhaLogoModule,
         TCloudUiLineStepCircleModule,
         TCloudUiMultiSelectModule,
         TCloudUiDataListModule,
+        TCloudUiMultiInputModule,
         // Directives
-        TCloudAccessModule,
+        TCloudUiDirectiveModule,
         // Pipes
-        TCloudPipesModule] });
+        TCloudUiPipesModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiModule, decorators: [{
             type: NgModule,
             args: [{
@@ -1833,10 +1929,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         TCloudUiLineStepCircleModule,
                         TCloudUiMultiSelectModule,
                         TCloudUiDataListModule,
+                        TCloudUiMultiInputModule,
                         // Directives
-                        TCloudAccessModule,
+                        TCloudUiDirectiveModule,
                         // Pipes
-                        TCloudPipesModule
+                        TCloudUiPipesModule
                     ],
                     exports: [
                         TCloudUiModalModule,
@@ -1845,10 +1942,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         TCloudUiLineStepCircleModule,
                         TCloudUiMultiSelectModule,
                         TCloudUiDataListModule,
+                        TCloudUiMultiInputModule,
                         // Directives
-                        TCloudAccessModule,
+                        TCloudUiDirectiveModule,
                         // Pipes
-                        TCloudPipesModule
+                        TCloudUiPipesModule
                     ]
                 }]
         }] });
@@ -1861,5 +1959,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, TCloudAccessModule, TCloudPipesModule, TCloudUiDataListComponent, TCloudUiDataListModule, TCloudUiDataListOptionComponent, TCloudUiLineStepCircleComponent, TCloudUiLineStepCircleModule, TCloudUiLinhaLogoComponent, TCloudUiLinhaLogoModule, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModalModule, TCloudUiModule, TCloudUiMultiSelectComponent, TCloudUiMultiSelectModule, TCloudUiTabContentComponent, TCloudUiTabHeadComponent, TCloudUiTabMenuComponent, TCloudUiTabMenuModule, TCloudUiTabSubtitleComponent, TCloudUiTabTitleComponent, TooltipDirective };
+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 };
 //# sourceMappingURL=dev-tcloud-tcloud-ui.mjs.map