npm - @dev-tcloud/tcloud-ui - Versions diffs - 0.0.10 → 0.0.12 - Mend

@dev-tcloud/tcloud-ui 0.0.10 → 0.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

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

@@ -5,7 +5,7 @@ import { CommonModule, DatePipe } from '@angular/common';
 import { Subject } from 'rxjs';
 import * as i1$1 from '@angular/router';
 import * as i2 from '@angular/forms';
-import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormControl } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR, FormControl } from '@angular/forms';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 class TCloudUiLinhaLogoComponent {
@@ -199,10 +199,10 @@ class TCloudUiTabMenuComponent {
     }
 }
 TCloudUiTabMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTabMenuComponent, deps: [{ token: TabMenuService }], target: i0.ɵɵFactoryTarget.Component });
-TCloudUiTabMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiTabMenuComponent, selector: "tcloud-ui-tab-menu", inputs: { registerInUrl: "registerInUrl", loading: "loading", active: "active" }, outputs: { onChange: "onChange" }, providers: [TabMenuService], ngImport: i0, template: "<div class=\"tc-tab-menu\" [class.loading]=\"loading\" >\r\n  <ng-content></ng-content>\r\n</div>", styles: [".tc-tab-menu{width:100%;overflow-x:hidden}.loading{opacity:.7;cursor:progress!important}\n"] });
+TCloudUiTabMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiTabMenuComponent, selector: "tcloud-ui-tab-menu", inputs: { registerInUrl: "registerInUrl", loading: "loading", active: "active" }, outputs: { onChange: "onChange" }, providers: [TabMenuService], ngImport: i0, template: "<div class=\"tc-tab-menu\" [class.loading]=\"loading\" >\r\n  <ng-content></ng-content>\r\n</div>", styles: [".tc-tab-menu{width:100%;overflow-x:hidden}.tc-tab-menu .fas{color:var(--primary);margin:0}.loading{opacity:.7;cursor:progress!important}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTabMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-tab-menu', providers: [TabMenuService], template: "<div class=\"tc-tab-menu\" [class.loading]=\"loading\" >\r\n  <ng-content></ng-content>\r\n</div>", styles: [".tc-tab-menu{width:100%;overflow-x:hidden}.loading{opacity:.7;cursor:progress!important}\n"] }]
+            args: [{ selector: 'tcloud-ui-tab-menu', providers: [TabMenuService], template: "<div class=\"tc-tab-menu\" [class.loading]=\"loading\" >\r\n  <ng-content></ng-content>\r\n</div>", styles: [".tc-tab-menu{width:100%;overflow-x:hidden}.tc-tab-menu .fas{color:var(--primary);margin:0}.loading{opacity:.7;cursor:progress!important}\n"] }]
         }], ctorParameters: function () { return [{ type: TabMenuService }]; }, propDecorators: { registerInUrl: [{
                 type: Input
             }], loading: [{
@@ -289,10 +289,10 @@ class TCloudUiTabTitleComponent {
     }
 }
 TCloudUiTabTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTabTitleComponent, deps: [{ token: TabMenuService }], target: i0.ɵɵFactoryTarget.Component });
-TCloudUiTabTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiTabTitleComponent, selector: "tcloud-ui-tab-title", inputs: { tab: "tab", title: "title", active: "active", disabled: "disabled" }, ngImport: i0, template: "<button [class.loading]=\"loading\" [attr.data-id]=\"tab\" [class.tab-title-active]=\"active\" [disabled]=\"disabled || loading\" type=\"button\" (click)=\"toTab()\" class=\"tab-title\" >\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: [".tab-title{color:var(--cinza);border:none;background:none;text-transform:uppercase;font-size:11px;padding:20px;cursor:pointer;min-width:60px;max-width:200px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;transition:all .25s}.tab-title:hover,.tab-title-active{background:var(--verde);color:#fff}@media (max-width: 1580px){.tab-title{font-size:11px;padding:20px 14px}}@media (max-width: 1440px){.tab-title{font-size:10px;padding:20px 13px}}.loading{cursor:progress!important}button:disabled{opacity:.7;cursor:not-allowed!important}\n"] });
+TCloudUiTabTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiTabTitleComponent, selector: "tcloud-ui-tab-title", inputs: { tab: "tab", title: "title", active: "active", disabled: "disabled" }, ngImport: i0, template: "<button [class.loading]=\"loading\" [attr.data-id]=\"tab\" [class.tab-title-active]=\"active\" [disabled]=\"disabled || loading\" type=\"button\" (click)=\"toTab()\" class=\"tab-title\" >\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: [".tab-title{border-radius:0!important;height:initial;display:inline-block;margin:0!important;color:var(--cinza);border:none;background:none;text-transform:uppercase;font-size:11px;padding:20px;cursor:pointer;min-width:60px;max-width:200px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;transition:all .25s}.tab-title:hover,.tab-title-active{background:var(--verde);color:#fff}.loading{cursor:progress!important}button:disabled{opacity:.7;cursor:not-allowed!important}.tab-title:hover,.tab-title-active{background:var(--primary);background:var(--verde)}@media (max-width: 1580px){.tab-title{font-size:11px;padding:20px 14px}}@media (max-width: 1440px){.tab-title{font-size:10px;padding:20px 13px}}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTabTitleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-tab-title', template: "<button [class.loading]=\"loading\" [attr.data-id]=\"tab\" [class.tab-title-active]=\"active\" [disabled]=\"disabled || loading\" type=\"button\" (click)=\"toTab()\" class=\"tab-title\" >\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: [".tab-title{color:var(--cinza);border:none;background:none;text-transform:uppercase;font-size:11px;padding:20px;cursor:pointer;min-width:60px;max-width:200px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;transition:all .25s}.tab-title:hover,.tab-title-active{background:var(--verde);color:#fff}@media (max-width: 1580px){.tab-title{font-size:11px;padding:20px 14px}}@media (max-width: 1440px){.tab-title{font-size:10px;padding:20px 13px}}.loading{cursor:progress!important}button:disabled{opacity:.7;cursor:not-allowed!important}\n"] }]
+            args: [{ selector: 'tcloud-ui-tab-title', template: "<button [class.loading]=\"loading\" [attr.data-id]=\"tab\" [class.tab-title-active]=\"active\" [disabled]=\"disabled || loading\" type=\"button\" (click)=\"toTab()\" class=\"tab-title\" >\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: [".tab-title{border-radius:0!important;height:initial;display:inline-block;margin:0!important;color:var(--cinza);border:none;background:none;text-transform:uppercase;font-size:11px;padding:20px;cursor:pointer;min-width:60px;max-width:200px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;transition:all .25s}.tab-title:hover,.tab-title-active{background:var(--verde);color:#fff}.loading{cursor:progress!important}button:disabled{opacity:.7;cursor:not-allowed!important}.tab-title:hover,.tab-title-active{background:var(--primary);background:var(--verde)}@media (max-width: 1580px){.tab-title{font-size:11px;padding:20px 14px}}@media (max-width: 1440px){.tab-title{font-size:10px;padding:20px 13px}}\n"] }]
         }], ctorParameters: function () { return [{ type: TabMenuService }]; }, propDecorators: { tab: [{
                 type: Input
             }], title: [{
@@ -407,10 +407,10 @@ class TCloudUiTabHeadComponent {
     }
 }
 TCloudUiTabHeadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTabHeadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TCloudUiTabHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiTabHeadComponent, selector: "tcloud-ui-tab-head", inputs: { background: "background" }, ngImport: i0, template: "\r\n\r\n<table class=\"area-navigation\">\r\n  <tr>\r\n    <td>\r\n      <button (click)=\"to_scroll('prev')\"> <i class=\"fas fa-chevron-left\"></i> </button>\r\n    </td>\r\n\r\n    <td>\r\n      \r\n    </td>\r\n\r\n    <td>\r\n      <button (click)=\"to_scroll('next')\"> <i class=\"fas fa-chevron-right\"></i> </button>\r\n    </td>\r\n  </tr>\r\n</table>\r\n\r\n<div class=\"tc-menu {{ ID }}\" [attr.style]=\"'background: ' + background_color + ';'\" >\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".area-navigation{display:none;width:100%;line-height:0}.area-navigation td{width:100%;height:0;line-height:0}.area-navigation td:first-child{width:10px!important;text-align:left}.area-navigation td:first-child button{color:var(--verde);cursor:pointer;position:relative;top:15px;right:6px;border:none;background-color:transparent;font-size:15px;height:30px}.area-navigation td:last-child{width:10px!important;text-align:right}.area-navigation td:last-child button{color:var(--verde);cursor:pointer;position:relative;top:15px;left:6px;border:none;background-color:transparent;font-size:15px;height:30px}.tc-menu{display:flex;align-items:center;border-radius:10px;overflow:hidden;margin-bottom:5px;z-index:1;position:relative}@media (max-width: 1440px){.area-navigation{display:block!important;position:relative;top:0;height:2px}.tc-menu{margin-left:15px;margin-right:15px}}\n"] });
+TCloudUiTabHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiTabHeadComponent, selector: "tcloud-ui-tab-head", inputs: { background: "background" }, ngImport: i0, template: "\r\n\r\n<table class=\"area-navigation\">\r\n  <tr>\r\n    <td>\r\n      <button (click)=\"to_scroll('prev')\"> <i class=\"fas fa-chevron-left\"></i> </button>\r\n    </td>\r\n\r\n    <td>\r\n      \r\n    </td>\r\n\r\n    <td>\r\n      <button (click)=\"to_scroll('next')\"> <i class=\"fas fa-chevron-right\"></i> </button>\r\n    </td>\r\n  </tr>\r\n</table>\r\n\r\n<div class=\"tc-menu {{ ID }}\" [attr.style]=\"'background: ' + background_color + ';'\" >\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".area-navigation{display:none;width:100%;line-height:0}.area-navigation button{padding:0!important}.area-navigation td{width:100%;height:0;line-height:0}.area-navigation td:first-child{width:10px!important;text-align:left}.area-navigation td:first-child button{color:var(--verde);cursor:pointer;position:relative;top:15px;right:6px;border:none;background-color:transparent;font-size:15px;height:30px}.area-navigation td:last-child{width:10px!important;text-align:right}.area-navigation td:last-child button{color:var(--verde);cursor:pointer;position:relative;top:15px;left:6px;border:none;background-color:transparent;font-size:15px;height:30px}.tc-menu{display:flex;align-items:center;border-radius:10px;overflow:hidden;margin-bottom:5px;z-index:1;position:relative}@media (max-width: 1440px){.area-navigation{display:block!important;position:relative;top:0;height:2px}.tc-menu{margin-left:15px;margin-right:15px}}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTabHeadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-tab-head', template: "\r\n\r\n<table class=\"area-navigation\">\r\n  <tr>\r\n    <td>\r\n      <button (click)=\"to_scroll('prev')\"> <i class=\"fas fa-chevron-left\"></i> </button>\r\n    </td>\r\n\r\n    <td>\r\n      \r\n    </td>\r\n\r\n    <td>\r\n      <button (click)=\"to_scroll('next')\"> <i class=\"fas fa-chevron-right\"></i> </button>\r\n    </td>\r\n  </tr>\r\n</table>\r\n\r\n<div class=\"tc-menu {{ ID }}\" [attr.style]=\"'background: ' + background_color + ';'\" >\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".area-navigation{display:none;width:100%;line-height:0}.area-navigation td{width:100%;height:0;line-height:0}.area-navigation td:first-child{width:10px!important;text-align:left}.area-navigation td:first-child button{color:var(--verde);cursor:pointer;position:relative;top:15px;right:6px;border:none;background-color:transparent;font-size:15px;height:30px}.area-navigation td:last-child{width:10px!important;text-align:right}.area-navigation td:last-child button{color:var(--verde);cursor:pointer;position:relative;top:15px;left:6px;border:none;background-color:transparent;font-size:15px;height:30px}.tc-menu{display:flex;align-items:center;border-radius:10px;overflow:hidden;margin-bottom:5px;z-index:1;position:relative}@media (max-width: 1440px){.area-navigation{display:block!important;position:relative;top:0;height:2px}.tc-menu{margin-left:15px;margin-right:15px}}\n"] }]
+            args: [{ selector: 'tcloud-ui-tab-head', template: "\r\n\r\n<table class=\"area-navigation\">\r\n  <tr>\r\n    <td>\r\n      <button (click)=\"to_scroll('prev')\"> <i class=\"fas fa-chevron-left\"></i> </button>\r\n    </td>\r\n\r\n    <td>\r\n      \r\n    </td>\r\n\r\n    <td>\r\n      <button (click)=\"to_scroll('next')\"> <i class=\"fas fa-chevron-right\"></i> </button>\r\n    </td>\r\n  </tr>\r\n</table>\r\n\r\n<div class=\"tc-menu {{ ID }}\" [attr.style]=\"'background: ' + background_color + ';'\" >\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".area-navigation{display:none;width:100%;line-height:0}.area-navigation button{padding:0!important}.area-navigation td{width:100%;height:0;line-height:0}.area-navigation td:first-child{width:10px!important;text-align:left}.area-navigation td:first-child button{color:var(--verde);cursor:pointer;position:relative;top:15px;right:6px;border:none;background-color:transparent;font-size:15px;height:30px}.area-navigation td:last-child{width:10px!important;text-align:right}.area-navigation td:last-child button{color:var(--verde);cursor:pointer;position:relative;top:15px;left:6px;border:none;background-color:transparent;font-size:15px;height:30px}.tc-menu{display:flex;align-items:center;border-radius:10px;overflow:hidden;margin-bottom:5px;z-index:1;position:relative}@media (max-width: 1440px){.area-navigation{display:block!important;position:relative;top:0;height:2px}.tc-menu{margin-left:15px;margin-right:15px}}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { background: [{
                 type: Input
             }] } });
@@ -898,18 +898,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 }]
         }] });
+const CUSTOM_INPUT_VALIDATORS$1 = {
+    provide: NG_VALIDATORS,
+    useExisting: forwardRef(() => TCloudUiMultiSelectComponent),
+    multi: true
+};
+const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$3 = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => TCloudUiMultiSelectComponent),
+    multi: true
+};
+const noop$3 = () => {
+};
 class TCloudUiMultiSelectComponent {
     constructor() {
         this.placeholder = 'Selecione um item';
         this.disabled = false;
         this.loading = false;
-        this.count_actives = 0;
         this.tcChange = new EventEmitter();
+        this.use_validation_required = false;
+        this.count_actives = 0;
+        this.onChange = new EventEmitter();
+        //Placeholders for the callbacks which are later providesd
+        //by the Control Value Accessor
+        this.onTouchedCallback = noop$3;
+        this.onChangeCallback = noop$3;
     }
     ngOnInit() {
-        setTimeout(() => {
-            this.toChange();
-        });
+        setTimeout(() => { this.toChange(); });
     }
     addItem(item) {
         if (this.disabled) {
@@ -953,15 +969,76 @@ class TCloudUiMultiSelectComponent {
                 }
             }
         }
+        this.item_value = null;
         this.count_actives = count_actives;
         this.tcChange.emit(itens);
+        this.onChangeCallback(this.tcList);
+    }
+    check_is_valid() {
+        let active = 0;
+        if (this.tcList) {
+            for (let i = 0; i < (this.tcList).length; i++) {
+                const item = this.tcList[i];
+                if (item && item.active && item.active === true) {
+                    active++;
+                    break;
+                }
+            }
+        }
+        return (active > 0) ? true : false;
+    }
+    onChangeTouched() {
+        this.onTouchedCallback();
+    }
+    //get accessor
+    get value() {
+        return this.innerValue;
+    }
+    ;
+    //set accessor including call the onchange callback
+    set value(v) {
+        if (v !== this.innerValue) {
+            this.innerValue = v;
+            this.onChangeCallback(v);
+        }
+    }
+    //Set touched on blur
+    onBlur() {
+        this.onTouchedCallback();
+    }
+    //From ControlValueAccessor interface
+    writeValue(value) {
+        if (value !== this.innerValue) {
+            this.innerValue = value;
+            this.toSetDefault(value);
+        }
+    }
+    //From ControlValueAccessor interface
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    //From ControlValueAccessor interface
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+    toSetDefault(value) {
+        this.tcList = value;
+    }
+    validate(c) {
+        if (c && (typeof this.required !== 'undefined')) {
+            this.use_validation_required = true;
+            return (this.check_is_valid()) ? null : 'required';
+        }
+        return null;
+    }
+    ngOnDestroy() {
     }
 }
 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\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"] }] });
+TCloudUiMultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiMultiSelectComponent, selector: "tcloud-ui-multi-select", inputs: { tcList: "tcList", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required" }, outputs: { tcChange: "tcChange", onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$3, CUSTOM_INPUT_VALIDATORS$1], ngImport: i0, template: "\r\n  <div>\r\n    <table>\r\n      <tr *ngIf=\"tcList\">\r\n        <td>\r\n          <select  \r\n            [(ngModel)]=\"item_value\"\r\n            [class.tc-parent-validation]=\"use_validation_required\"     \r\n            #_select\r\n            [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n            [title]=\"tcList.length === 0 ? 'Nenhum item dispon\u00EDvel' : placeholder\">\r\n            <option></option>\r\n            <ng-container *ngFor=\"let item of tcList; let i = index\">\r\n              <option [title]=\"item.description\" *ngIf=\"!item.active\" [value]=\"item.value\">{{ item.description }}</option>\r\n            </ng-container>\r\n          </select>\r\n        </td>\r\n        <td>\r\n          <button\r\n            [disabled]=\"!item_value || tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n            title=\"Adicionar\"\r\n            class=\"btn-plus-select\"\r\n            (click)=\"addItem(_select.value);onChangeTouched()\"\r\n            type=\"button\">\r\n            <i class=\"fas fa-plus\"></i>\r\n          </button>\r\n        </td>\r\n      </tr>\r\n    </table>\r\n\r\n    <div class=\"box-itens-selected\" *ngIf=\"count_actives > 0 && (tcList && tcList.length > 0)\">\r\n      <ng-container *ngFor=\"let item of tcList\">\r\n\r\n        <ng-container *ngIf=\"item.active\">\r\n          <div class=\"box-label\">\r\n            <div class=\"box-value\" [title]=\"item.value\">\r\n              {{ item.value }}          \r\n            </div>\r\n            <div class=\"box-action\">\r\n              <button\r\n                [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n                title=\"Remover\"\r\n                type=\"button\"\r\n                (click)=\"removeItem(item.value);onChangeTouched()\">\r\n                <i class=\"fas fa-times\"></i>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n", styles: ["table{width:100%;border-collapse:collapse;border:none}table td: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"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-multi-select', 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"] }]
+            args: [{ selector: 'tcloud-ui-multi-select', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$3, CUSTOM_INPUT_VALIDATORS$1], template: "\r\n  <div>\r\n    <table>\r\n      <tr *ngIf=\"tcList\">\r\n        <td>\r\n          <select  \r\n            [(ngModel)]=\"item_value\"\r\n            [class.tc-parent-validation]=\"use_validation_required\"     \r\n            #_select\r\n            [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n            [title]=\"tcList.length === 0 ? 'Nenhum item dispon\u00EDvel' : placeholder\">\r\n            <option></option>\r\n            <ng-container *ngFor=\"let item of tcList; let i = index\">\r\n              <option [title]=\"item.description\" *ngIf=\"!item.active\" [value]=\"item.value\">{{ item.description }}</option>\r\n            </ng-container>\r\n          </select>\r\n        </td>\r\n        <td>\r\n          <button\r\n            [disabled]=\"!item_value || tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n            title=\"Adicionar\"\r\n            class=\"btn-plus-select\"\r\n            (click)=\"addItem(_select.value);onChangeTouched()\"\r\n            type=\"button\">\r\n            <i class=\"fas fa-plus\"></i>\r\n          </button>\r\n        </td>\r\n      </tr>\r\n    </table>\r\n\r\n    <div class=\"box-itens-selected\" *ngIf=\"count_actives > 0 && (tcList && tcList.length > 0)\">\r\n      <ng-container *ngFor=\"let item of tcList\">\r\n\r\n        <ng-container *ngIf=\"item.active\">\r\n          <div class=\"box-label\">\r\n            <div class=\"box-value\" [title]=\"item.value\">\r\n              {{ item.value }}          \r\n            </div>\r\n            <div class=\"box-action\">\r\n              <button\r\n                [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n                title=\"Remover\"\r\n                type=\"button\"\r\n                (click)=\"removeItem(item.value);onChangeTouched()\">\r\n                <i class=\"fas fa-times\"></i>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n", styles: ["table{width:100%;border-collapse:collapse;border:none}table td: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: [{
@@ -970,22 +1047,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Input
             }], loading: [{
                 type: Input
+            }], required: [{
+                type: Input
             }], tcChange: [{
                 type: Output
+            }], onChange: [{
+                type: Output
             }] } });
 class TCloudUiMultiSelectModule {
 }
 TCloudUiMultiSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TCloudUiMultiSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiSelectModule, declarations: [TCloudUiMultiSelectComponent], imports: [CommonModule], exports: [TCloudUiMultiSelectComponent] });
-TCloudUiMultiSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiSelectModule, imports: [CommonModule] });
+TCloudUiMultiSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiSelectModule, declarations: [TCloudUiMultiSelectComponent], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule], exports: [TCloudUiMultiSelectComponent] });
+TCloudUiMultiSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiSelectModule, imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [TCloudUiMultiSelectComponent],
                     exports: [TCloudUiMultiSelectComponent],
                     imports: [
-                        CommonModule
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule
                     ]
                 }]
         }] });
@@ -1026,12 +1113,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             type: Injectable
         }] });
-const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1 = {
+const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2 = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => TCloudUiDataListComponent),
     multi: true
 };
-const noop$1 = () => {
+const noop$2 = () => {
 };
 class TCloudUiDataListComponent {
     constructor(dataListService, formBuilder) {
@@ -1054,8 +1141,8 @@ class TCloudUiDataListComponent {
         this.id = '';
         //Placeholders for the callbacks which are later providesd
         //by the Control Value Accessor
-        this.onTouchedCallback = noop$1;
-        this.onChangeCallback = noop$1;
+        this.onTouchedCallback = noop$2;
+        this.onChangeCallback = noop$2;
     }
     set disabled(v) {
         this._disabled = v;
@@ -1245,13 +1332,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$1
+        CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2
     ], 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$1
+                        CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2
                     ], 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
@@ -1354,12 +1441,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 }]
         }] });
-const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
+const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1 = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => TCloudUiChoiceIssuesComponent),
     multi: true
 };
-const noop = () => {
+const noop$1 = () => {
 };
 class TCloudUiChoiceIssuesComponent {
     constructor() {
@@ -1371,8 +1458,8 @@ class TCloudUiChoiceIssuesComponent {
         this.innerValue = false;
         //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;
         this.ID = 'tc-issue-' + Math.random().toString(36).substr(2, 9);
     }
     //get accessor
@@ -1418,10 +1505,10 @@ class TCloudUiChoiceIssuesComponent {
     }
 }
 TCloudUiChoiceIssuesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiChoiceIssuesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TCloudUiChoiceIssuesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiChoiceIssuesComponent, selector: "tcloud-ui-choice-issues", inputs: { view: "view", titulo: "titulo", subTitulo: "subTitulo", disabled: "disabled" }, outputs: { onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], 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"] }] });
+TCloudUiChoiceIssuesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiChoiceIssuesComponent, selector: "tcloud-ui-choice-issues", inputs: { view: "view", titulo: "titulo", subTitulo: "subTitulo", disabled: "disabled" }, outputs: { onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["campo"], descendants: true, read: true }], ngImport: i0, template: "\r\n\r\n<input #campo [(ngModel)]=\"value\" type=\"hidden\" [value]=\"false\" >\r\n<div class=\"box p-2 mt-3 mb-2\">\r\n  <div class=\"row\">\r\n    <div class=\"col-md-8\">\r\n      <p class=\"titulo\">{{ titulo }}</p>      \r\n    </div>\r\n    <div class=\"col-md-4 text-right\">  \r\n\r\n      <table class=\"mt-2 mr-2\" *ngIf=\"!view\" >\r\n        <tr>\r\n          <td>\r\n            <div class=\"form-fieldset\">\r\n              <label [class.v-true]=\"value\" class=\"mr-1\"><input #campo name=\"{{ ID }}\" [value]=\"true\" type=\"radio\" [(ngModel)]=\"value\" (click)=\"setV(true)\" >Sim</label>\r\n            </div>\r\n          </td>\r\n          <td>\r\n            <div class=\"form-fieldset\">\r\n              <label [class.v-true]=\"!value\" class=\"ml-2\"><input #campo name=\"{{ ID }}\" [value]=\"false\" type=\"radio\" [(ngModel)]=\"value\" (click)=\"setV(false)\" >N\u00E3o</label>\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      </table>    \r\n\r\n      <table class=\"mt-2 mr-2\" *ngIf=\"view\" >\r\n        <tr>\r\n          <td>\r\n            <div class=\"form-fieldset view\" >\r\n              <label *ngIf=\"value\" class=\"v-true disabled\" >Sim</label>\r\n              <label *ngIf=\"!value\">N\u00E3o</label>\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n    <div class=\"col-md-12 mt-1\">\r\n      <p class=\"sub-titulo\">{{ subTitulo }}</p>\r\n    </div>\r\n    <div class=\"col-md-12 mt-2 mb-1\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".titulo{font-size:1rem;color:var(--cinza)}.sub-titulo{color:#b0adaa}.box{border:1px solid var(--cinza3);border-radius:10px}.box.box-icon{display:flex;justify-content:center;padding:35px 20px}.form-fieldset input{display:none}.form-fieldset .v-true{background:var(--verde);color:#fff}.form-fieldset label{font-size:11px;background:var(--cinza4);cursor:pointer;position:relative;display:inline-flex;align-items:center;justify-content:space-around;text-transform:uppercase;border-radius:30px;padding:7px;margin:0;width:66px}.form-fieldset label:before{content:\"\";background:#fff;border-radius:50%;height:15px;width:15px}.form-fieldset label:nth-child(2){margin-right:20px}table{width:100%;max-width:200px}.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"] }]
+            args: [{ selector: 'tcloud-ui-choice-issues', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1], template: "\r\n\r\n<input #campo [(ngModel)]=\"value\" type=\"hidden\" [value]=\"false\" >\r\n<div class=\"box p-2 mt-3 mb-2\">\r\n  <div class=\"row\">\r\n    <div class=\"col-md-8\">\r\n      <p class=\"titulo\">{{ titulo }}</p>      \r\n    </div>\r\n    <div class=\"col-md-4 text-right\">  \r\n\r\n      <table class=\"mt-2 mr-2\" *ngIf=\"!view\" >\r\n        <tr>\r\n          <td>\r\n            <div class=\"form-fieldset\">\r\n              <label [class.v-true]=\"value\" class=\"mr-1\"><input #campo name=\"{{ ID }}\" [value]=\"true\" type=\"radio\" [(ngModel)]=\"value\" (click)=\"setV(true)\" >Sim</label>\r\n            </div>\r\n          </td>\r\n          <td>\r\n            <div class=\"form-fieldset\">\r\n              <label [class.v-true]=\"!value\" class=\"ml-2\"><input #campo name=\"{{ ID }}\" [value]=\"false\" type=\"radio\" [(ngModel)]=\"value\" (click)=\"setV(false)\" >N\u00E3o</label>\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      </table>    \r\n\r\n      <table class=\"mt-2 mr-2\" *ngIf=\"view\" >\r\n        <tr>\r\n          <td>\r\n            <div class=\"form-fieldset view\" >\r\n              <label *ngIf=\"value\" class=\"v-true disabled\" >Sim</label>\r\n              <label *ngIf=\"!value\">N\u00E3o</label>\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n    <div class=\"col-md-12 mt-1\">\r\n      <p class=\"sub-titulo\">{{ subTitulo }}</p>\r\n    </div>\r\n    <div class=\"col-md-12 mt-2 mb-1\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".titulo{font-size:1rem;color:var(--cinza)}.sub-titulo{color:#b0adaa}.box{border:1px solid var(--cinza3);border-radius:10px}.box.box-icon{display:flex;justify-content:center;padding:35px 20px}.form-fieldset input{display:none}.form-fieldset .v-true{background:var(--verde);color:#fff}.form-fieldset label{font-size:11px;background:var(--cinza4);cursor:pointer;position:relative;display:inline-flex;align-items:center;justify-content:space-around;text-transform:uppercase;border-radius:30px;padding:7px;margin:0;width:66px}.form-fieldset label:before{content:\"\";background:#fff;border-radius:50%;height:15px;width:15px}.form-fieldset label:nth-child(2){margin-right:20px}table{width:100%;max-width:200px}.view,.view label{cursor:inherit!important}.disabled{background-color:#8fdfe8!important}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { view: [{
                 type: Input
             }], titulo: [{
@@ -1463,13 +1550,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 }]
         }] });
+const CUSTOM_INPUT_VALIDATORS = {
+    provide: NG_VALIDATORS,
+    useExisting: forwardRef(() => TCloudUiMultiInputComponent),
+    multi: true
+};
+const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => TCloudUiMultiInputComponent),
+    multi: true
+};
+const noop = () => {
+};
 class TCloudUiMultiInputComponent {
     constructor() {
         this.placeholder = '';
         this.disabled = false;
         this.loading = false;
         this.count_actives = 0;
+        this.use_validation_required = false;
         this.tcChange = new EventEmitter();
+        this.onChange = new EventEmitter();
+        //Placeholders for the callbacks which are later providesd
+        //by the Control Value Accessor
+        this.onTouchedCallback = noop;
+        this.onChangeCallback = noop;
     }
     ngOnInit() {
         setTimeout(() => {
@@ -1511,15 +1616,69 @@ class TCloudUiMultiInputComponent {
                 (itens).push(row);
             }
         }
+        this.item_value = null;
         this.count_actives = count_actives;
         this.tcChange.emit(itens);
+        this.onChangeCallback(this.tcList);
+    }
+    check_is_valid() {
+        if (this.tcList) {
+            return ((this.tcList).length > 0) ? true : false;
+        }
+        return false;
+    }
+    onChangeTouched() {
+        this.onTouchedCallback();
+    }
+    //get accessor
+    get value() {
+        return this.innerValue;
+    }
+    ;
+    //set accessor including call the onchange callback
+    set value(v) {
+        if (v !== this.innerValue) {
+            this.innerValue = v;
+            this.onChangeCallback(v);
+        }
+    }
+    //Set touched on blur
+    onBlur() {
+        this.onTouchedCallback();
+    }
+    //From ControlValueAccessor interface
+    writeValue(value) {
+        if (value !== this.innerValue) {
+            this.innerValue = value;
+            this.toSetDefault(value);
+        }
+    }
+    //From ControlValueAccessor interface
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    //From ControlValueAccessor interface
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+    toSetDefault(value) {
+        this.tcList = value;
+    }
+    validate(c) {
+        if (c && (typeof this.required !== 'undefined')) {
+            this.use_validation_required = true;
+            return (this.check_is_valid()) ? null : 'required';
+        }
+        return null;
+    }
+    ngOnDestroy() {
     }
 }
 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"] }] });
+TCloudUiMultiInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiMultiInputComponent, selector: "tcloud-ui-multi-input", inputs: { tcList: "tcList", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required" }, outputs: { tcChange: "tcChange", onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, CUSTOM_INPUT_VALIDATORS], ngImport: i0, template: "<div>\n\n    <table>\n      <tr>\n        <td>\n          <input (blur)=\"onChangeTouched()\" [(ngModel)]=\"item_value\" [class.tc-parent-validation]=\"use_validation_required\" type=\"text\" [(ngModel)]=\"input_value\" [disabled]=\"disabled || loading\" name=\"input_value\">\n        </td>\n        <td>\n          <button\n            [disabled]=\"!item_value || disabled || loading\"\n            title=\"Adicionar\"\n            class=\"btn-plus-select\"\n            (click)=\"addItem(input_value);onChangeTouched()\"\n            type=\"button\">\n            <i class=\"fas fa-plus\"></i>\n          </button>\n        </td>\n      </tr>\n    </table>\n  \n    <div class=\"box-itens-selected\" *ngIf=\"(tcList && tcList.length > 0)\">\n      <ng-container *ngFor=\"let item of tcList; let i = index\">\n        \n        <div class=\"box-label\">\n          <div class=\"box-value\" [title]=\"item.value\">\n            {{ item.value }}          \n          </div>\n          <div class=\"box-action\">\n            <button\n              [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\n              title=\"Remover\"\n              type=\"button\"\n              (click)=\"removeItem(item.value, i);onChangeTouched()\">\n              <i class=\"fas fa-times\"></i>\n            </button>\n          </div>\n        </div>\n\n      </ng-container>\n    </div>\n \n</div>\n  ", styles: ["table{width:100%;border-collapse:collapse;border:none}table td: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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 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"] }]
+            args: [{ selector: 'tcloud-ui-multi-input', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, CUSTOM_INPUT_VALIDATORS], template: "<div>\n\n    <table>\n      <tr>\n        <td>\n          <input (blur)=\"onChangeTouched()\" [(ngModel)]=\"item_value\" [class.tc-parent-validation]=\"use_validation_required\" type=\"text\" [(ngModel)]=\"input_value\" [disabled]=\"disabled || loading\" name=\"input_value\">\n        </td>\n        <td>\n          <button\n            [disabled]=\"!item_value || disabled || loading\"\n            title=\"Adicionar\"\n            class=\"btn-plus-select\"\n            (click)=\"addItem(input_value);onChangeTouched()\"\n            type=\"button\">\n            <i class=\"fas fa-plus\"></i>\n          </button>\n        </td>\n      </tr>\n    </table>\n  \n    <div class=\"box-itens-selected\" *ngIf=\"(tcList && tcList.length > 0)\">\n      <ng-container *ngFor=\"let item of tcList; let i = index\">\n        \n        <div class=\"box-label\">\n          <div class=\"box-value\" [title]=\"item.value\">\n            {{ item.value }}          \n          </div>\n          <div class=\"box-action\">\n            <button\n              [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\n              title=\"Remover\"\n              type=\"button\"\n              (click)=\"removeItem(item.value, i);onChangeTouched()\">\n              <i class=\"fas fa-times\"></i>\n            </button>\n          </div>\n        </div>\n\n      </ng-container>\n    </div>\n \n</div>\n  ", styles: ["table{width:100%;border-collapse:collapse;border:none}table td: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: [{
@@ -1528,8 +1687,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Input
             }], loading: [{
                 type: Input
+            }], required: [{
+                type: Input
             }], tcChange: [{
                 type: Output
+            }], onChange: [{
+                type: Output
             }] } });
 class TCloudUiMultiInputModule {
@@ -1999,6 +2162,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 }]
         }] });
+class TCloudUiTableComponent {
+    constructor() {
+        this.responsive = true;
+    }
+    ngOnInit() {
+    }
+}
+TCloudUiTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TCloudUiTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiTableComponent, selector: "tcloud-ui-table", inputs: { responsive: "responsive" }, ngImport: i0, template: "<table class=\"tc-table\" [class.tc-table-responsive]=\"responsive\" cellspacing=\"0\">\n    <ng-content select=\"[tc-thead]\"></ng-content>\n    <ng-content select=\"[tc-tbody]\"></ng-content>\n</table>\n", styles: [""] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tcloud-ui-table', template: "<table class=\"tc-table\" [class.tc-table-responsive]=\"responsive\" cellspacing=\"0\">\n    <ng-content select=\"[tc-thead]\"></ng-content>\n    <ng-content select=\"[tc-tbody]\"></ng-content>\n</table>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { responsive: [{
+                type: Input
+            }] } });
+class TCloudUiTableModule {
+}
+TCloudUiTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TCloudUiTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTableModule, declarations: [TCloudUiTableComponent], imports: [CommonModule], exports: [TCloudUiTableComponent] });
+TCloudUiTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTableModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        TCloudUiTableComponent,
+                    ],
+                    exports: [
+                        TCloudUiTableComponent,
+                    ],
+                    imports: [
+                        CommonModule
+                    ]
+                }]
+        }] });
+class TCloudUiAlignDirective {
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+        this._direction = 'start';
+    }
+    set TCalign(direction) {
+        if (direction) {
+            this._direction = direction;
+            this.setStyle(this.el.nativeElement);
+        }
+    }
+    ngOnInit() {
+    }
+    setStyle(el) {
+        if (this._direction === 'start') {
+            this.renderer.setStyle(el, 'text-align', 'left');
+        }
+        if (this._direction === 'center') {
+            this.renderer.setStyle(el, 'text-align', 'center');
+        }
+        if (this._direction === 'end') {
+            this.renderer.setStyle(el, 'text-align', 'right');
+        }
+    }
+}
+TCloudUiAlignDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiAlignDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+TCloudUiAlignDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiAlignDirective, selector: "[TCalign]", inputs: { TCalign: "TCalign" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiAlignDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[TCalign]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { TCalign: [{
+                type: Input
+            }] } });
 class TCloudUiTooltipDirective {
     constructor(el, renderer) {
         this.el = el;
@@ -2163,13 +2399,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
 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.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDirectiveModule, declarations: [TCloudUiTooltipDirective,
+        TCloudUiAlignDirective], exports: [TCloudUiTooltipDirective,
+        TCloudUiAlignDirective] });
 TCloudUiDirectiveModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDirectiveModule });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDirectiveModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [TCloudUiTooltipDirective],
-                    exports: [TCloudUiTooltipDirective],
+                    declarations: [
+                        TCloudUiTooltipDirective,
+                        TCloudUiAlignDirective
+                    ],
+                    exports: [
+                        TCloudUiTooltipDirective,
+                        TCloudUiAlignDirective
+                    ],
                 }]
         }] });
@@ -2282,6 +2526,7 @@ TCloudUiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         TCloudUiChoiceIssuesModule,
         TCloudUiInputSearchModule,
         TCloudUiNotFoundModule,
+        TCloudUiTableModule,
         // Directives
         TCloudUiDirectiveModule,
         // Pipes
@@ -2295,6 +2540,7 @@ TCloudUiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         TCloudUiChoiceIssuesModule,
         TCloudUiInputSearchModule,
         TCloudUiNotFoundModule,
+        TCloudUiTableModule,
         // Directives
         TCloudUiDirectiveModule,
         // Pipes
@@ -2312,6 +2558,7 @@ TCloudUiModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
         TCloudUiChoiceIssuesModule,
         TCloudUiInputSearchModule,
         TCloudUiNotFoundModule,
+        TCloudUiTableModule,
         // Directives
         TCloudUiDirectiveModule,
         // Pipes
@@ -2325,6 +2572,7 @@ TCloudUiModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
         TCloudUiChoiceIssuesModule,
         TCloudUiInputSearchModule,
         TCloudUiNotFoundModule,
+        TCloudUiTableModule,
         // Directives
         TCloudUiDirectiveModule,
         // Pipes
@@ -2343,6 +2591,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         TCloudUiChoiceIssuesModule,
                         TCloudUiInputSearchModule,
                         TCloudUiNotFoundModule,
+                        TCloudUiTableModule,
                         // Directives
                         TCloudUiDirectiveModule,
                         // Pipes
@@ -2359,6 +2608,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         TCloudUiChoiceIssuesModule,
                         TCloudUiInputSearchModule,
                         TCloudUiNotFoundModule,
+                        TCloudUiTableModule,
                         // Directives
                         TCloudUiDirectiveModule,
                         // Pipes
@@ -2379,5 +2629,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$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, TCloudUiNotFoundComponent, TCloudUiNotFoundModule, TCloudUiPipesModule, TCloudUiSearchInObjectService, TCloudUiTabContentComponent, TCloudUiTabHeadComponent, TCloudUiTabMenuComponent, TCloudUiTabMenuModule, TCloudUiTabSubtitleComponent, TCloudUiTabTitleComponent, TCloudUiTooltipDirective };
+export { CNPJPipe, CPFPipe, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2 as CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, MonthNamePipe, RespectivePipe, StatusInfoPipe, TCloudUiAlignDirective, TCloudUiChoiceIssuesComponent, TCloudUiChoiceIssuesModule, TCloudUiDataListComponent, TCloudUiDataListModule, TCloudUiDataListOptionComponent, TCloudUiDirectiveModule, TCloudUiInputSearchComponent, TCloudUiInputSearchModule, TCloudUiLineStepCircleComponent, TCloudUiLineStepCircleModule, TCloudUiLinhaLogoComponent, TCloudUiLinhaLogoModule, TCloudUiLoadingTransitionsService, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModalModule, TCloudUiModule, TCloudUiMultiInputComponent, TCloudUiMultiInputModule, TCloudUiMultiSelectComponent, TCloudUiMultiSelectModule, TCloudUiNotFoundComponent, TCloudUiNotFoundModule, TCloudUiPipesModule, TCloudUiSearchInObjectService, TCloudUiTabContentComponent, TCloudUiTabHeadComponent, TCloudUiTabMenuComponent, TCloudUiTabMenuModule, TCloudUiTabSubtitleComponent, TCloudUiTabTitleComponent, TCloudUiTableComponent, TCloudUiTableModule, TCloudUiTooltipDirective };
 //# sourceMappingURL=dev-tcloud-tcloud-ui.mjs.map