npm - @dev-tcloud/tcloud-ui - Versions diffs - 2.2.4 → 2.2.6 - Mend

@dev-tcloud/tcloud-ui 2.2.4 → 2.2.6

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 (12) hide show

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

@@ -998,6 +998,7 @@ class TCloudUiMultiSelectComponent {
         this.placeholder = 'Selecione um item';
         this.disabled = false;
         this.loading = false;
+        this.showDescriptionInValue = false;
         this.tcChange = new EventEmitter();
         this.use_validation_required = false;
         this.count_actives = 0;
@@ -1117,11 +1118,11 @@ class TCloudUiMultiSelectComponent {
     ngOnDestroy() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.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$8, CUSTOM_INPUT_VALIDATORS$3], ngImport: i0, template: "\r\n  <div class=\"tcloud-ui-multi-select\">\r\n    <table>\r\n      <tr *ngIf=\"tcList\">\r\n        <td>\r\n          <select  \r\n            class=\"tc-form-control\"\r\n            [(ngModel)]=\"item_value\"\r\n            [class.tc-parent-validation]=\"use_validation_required\"     \r\n            #_select\r\n            [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n            [title]=\"tcList.length === 0 ? 'Nenhum item dispon\u00EDvel' : placeholder\">\r\n            <option></option>\r\n            <ng-container *ngFor=\"let item of tcList; let i = index\">\r\n              <option [title]=\"item.description\" *ngIf=\"!item.active\" [value]=\"item.value\">{{ item.description }}</option>\r\n            </ng-container>\r\n          </select>\r\n        </td>\r\n        <td>\r\n          <button\r\n            [disabled]=\"!item_value || tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n            title=\"Adicionar\"\r\n            class=\"btn-plus-select\"\r\n            (click)=\"addItem(_select.value);onChangeTouched()\"\r\n            type=\"button\">\r\n            <i class=\"fas fa-plus\"></i>\r\n          </button>\r\n        </td>\r\n      </tr>\r\n    </table>\r\n\r\n    <div class=\"box-itens-selected\" *ngIf=\"count_actives > 0 && (tcList && tcList.length > 0)\">\r\n      <ng-container *ngFor=\"let item of tcList\">\r\n\r\n        <ng-container *ngIf=\"item.active\">\r\n          <div class=\"box-label\">\r\n            <div class=\"box-value\" [title]=\"item.value\">\r\n              {{ item.value }}          \r\n            </div>\r\n            <div class=\"box-action\">\r\n              <button\r\n                [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n                title=\"Remover\"\r\n                type=\"button\"\r\n                (click)=\"removeItem(item.value);onChangeTouched()\">\r\n                <i class=\"fas fa-times\"></i>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n", styles: ["table{width:100%;border-collapse:collapse;border:none}table td{vertical-align:top}table td:first-child{width:100%}select{font-size:.8rem;height:40px;border:1px solid #999;border-radius:4px 0 0 4px;padding:6px 10px;white-space:nowrap;text-overflow:ellipsis;width:100%;background-color:#fff;color:#888}.btn-plus-select{width:30px;height:40px;border:none;color:#fff;background-color:var(--tc-primary);border-radius:0 4px 4px 0}.box-itens-selected{display:flex;padding:9px;background-color:#ededed;border-radius:4px}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{position:relative;display:inline-block;height:35px;min-width:60px;color:var(--tc-primary);padding:8px 24px 10px 15px;border:1px solid var(--tc-primary);border-radius:5px;margin:2px;background-color:var(--white);width:auto;max-width:100%}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{position:absolute;right:4px;top:7px}.box-label .box-action button{color:var(--tc-primary);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}.box-label .box-action button:hover{color:var(--red)}\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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TCloudUiMultiSelectComponent, selector: "tcloud-ui-multi-select", inputs: { tcList: "tcList", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required", maxWidthLabel: "maxWidthLabel", showDescriptionInValue: "showDescriptionInValue" }, outputs: { tcChange: "tcChange", onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$8, CUSTOM_INPUT_VALIDATORS$3], ngImport: i0, template: "\r\n  <div class=\"tcloud-ui-multi-select\">\r\n    <table>\r\n      <tr *ngIf=\"tcList\">\r\n        <td>\r\n          <select  \r\n            class=\"tc-form-control\"\r\n            [(ngModel)]=\"item_value\"\r\n            [class.tc-parent-validation]=\"use_validation_required\"     \r\n            #_select\r\n            [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n            [title]=\"tcList.length === 0 ? 'Nenhum item dispon\u00EDvel' : placeholder\">\r\n            <option></option>\r\n            <ng-container *ngFor=\"let item of tcList; let i = index\">\r\n              <option [title]=\"item.description\" *ngIf=\"!item.active\" [value]=\"item.value\">{{ item.description }}</option>\r\n            </ng-container>\r\n          </select>\r\n        </td>\r\n        <td>\r\n          <button\r\n            [disabled]=\"!item_value || tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n            title=\"Adicionar\"\r\n            class=\"btn-plus-select\"\r\n            (click)=\"addItem(_select.value);onChangeTouched()\"\r\n            type=\"button\">\r\n            <i class=\"fas fa-plus\"></i>\r\n          </button>\r\n        </td>\r\n      </tr>\r\n    </table>\r\n\r\n    <div class=\"box-itens-selected\" *ngIf=\"count_actives > 0 && (tcList && tcList.length > 0)\">\r\n      <ng-container *ngFor=\"let item of tcList\">\r\n\r\n        <ng-container *ngIf=\"item.active\">\r\n          <div class=\"box-label\" [ngStyle]=\"(maxWidthLabel) ? {'max-width': maxWidthLabel} : null\" >\r\n            <div class=\"box-value\" [title]=\"item.value\" *ngIf=\"!showDescriptionInValue\">\r\n              {{ item.value }}          \r\n            </div>\r\n            <div class=\"box-value\" [title]=\"item.description\" *ngIf=\"showDescriptionInValue\">\r\n              {{ item.description }}          \r\n            </div>\r\n            <div class=\"box-action\">\r\n              <button\r\n                [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n                title=\"Remover\"\r\n                type=\"button\"\r\n                (click)=\"removeItem(item.value);onChangeTouched()\">\r\n                <i class=\"fas fa-times\"></i>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n", styles: ["table{width:100%;border-collapse:collapse;border:none}table td{vertical-align:top}table td:first-child{width:100%}select{font-size:.8rem;height:40px;border:1px solid #999;border-radius:4px 0 0 4px;padding:6px 30px 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(--tc-primary);border-radius:0 4px 4px 0}.box-itens-selected{display:block;padding:9px;background-color:#ededed;border-radius:4px;width:100%}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{position:relative;display:inline-block;height:35px;min-width:60px;color:var(--tc-primary);padding:8px 24px 10px 15px;border:1px solid var(--tc-primary);border-radius:5px;margin:2px;background-color:var(--white);width:auto;max-width:100%}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{position:absolute;right:4px;top:7px}.box-label .box-action button{color:var(--tc-primary);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}.box-label .box-action button:hover{color:var(--red)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiMultiSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-multi-select', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$8, CUSTOM_INPUT_VALIDATORS$3], template: "\r\n  <div class=\"tcloud-ui-multi-select\">\r\n    <table>\r\n      <tr *ngIf=\"tcList\">\r\n        <td>\r\n          <select  \r\n            class=\"tc-form-control\"\r\n            [(ngModel)]=\"item_value\"\r\n            [class.tc-parent-validation]=\"use_validation_required\"     \r\n            #_select\r\n            [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n            [title]=\"tcList.length === 0 ? 'Nenhum item dispon\u00EDvel' : placeholder\">\r\n            <option></option>\r\n            <ng-container *ngFor=\"let item of tcList; let i = index\">\r\n              <option [title]=\"item.description\" *ngIf=\"!item.active\" [value]=\"item.value\">{{ item.description }}</option>\r\n            </ng-container>\r\n          </select>\r\n        </td>\r\n        <td>\r\n          <button\r\n            [disabled]=\"!item_value || tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n            title=\"Adicionar\"\r\n            class=\"btn-plus-select\"\r\n            (click)=\"addItem(_select.value);onChangeTouched()\"\r\n            type=\"button\">\r\n            <i class=\"fas fa-plus\"></i>\r\n          </button>\r\n        </td>\r\n      </tr>\r\n    </table>\r\n\r\n    <div class=\"box-itens-selected\" *ngIf=\"count_actives > 0 && (tcList && tcList.length > 0)\">\r\n      <ng-container *ngFor=\"let item of tcList\">\r\n\r\n        <ng-container *ngIf=\"item.active\">\r\n          <div class=\"box-label\">\r\n            <div class=\"box-value\" [title]=\"item.value\">\r\n              {{ item.value }}          \r\n            </div>\r\n            <div class=\"box-action\">\r\n              <button\r\n                [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n                title=\"Remover\"\r\n                type=\"button\"\r\n                (click)=\"removeItem(item.value);onChangeTouched()\">\r\n                <i class=\"fas fa-times\"></i>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n", styles: ["table{width:100%;border-collapse:collapse;border:none}table td{vertical-align:top}table td:first-child{width:100%}select{font-size:.8rem;height:40px;border:1px solid #999;border-radius:4px 0 0 4px;padding:6px 10px;white-space:nowrap;text-overflow:ellipsis;width:100%;background-color:#fff;color:#888}.btn-plus-select{width:30px;height:40px;border:none;color:#fff;background-color:var(--tc-primary);border-radius:0 4px 4px 0}.box-itens-selected{display:flex;padding:9px;background-color:#ededed;border-radius:4px}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{position:relative;display:inline-block;height:35px;min-width:60px;color:var(--tc-primary);padding:8px 24px 10px 15px;border:1px solid var(--tc-primary);border-radius:5px;margin:2px;background-color:var(--white);width:auto;max-width:100%}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{position:absolute;right:4px;top:7px}.box-label .box-action button{color:var(--tc-primary);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}.box-label .box-action button:hover{color:var(--red)}\n"] }]
+            args: [{ selector: 'tcloud-ui-multi-select', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$8, CUSTOM_INPUT_VALIDATORS$3], template: "\r\n  <div class=\"tcloud-ui-multi-select\">\r\n    <table>\r\n      <tr *ngIf=\"tcList\">\r\n        <td>\r\n          <select  \r\n            class=\"tc-form-control\"\r\n            [(ngModel)]=\"item_value\"\r\n            [class.tc-parent-validation]=\"use_validation_required\"     \r\n            #_select\r\n            [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n            [title]=\"tcList.length === 0 ? 'Nenhum item dispon\u00EDvel' : placeholder\">\r\n            <option></option>\r\n            <ng-container *ngFor=\"let item of tcList; let i = index\">\r\n              <option [title]=\"item.description\" *ngIf=\"!item.active\" [value]=\"item.value\">{{ item.description }}</option>\r\n            </ng-container>\r\n          </select>\r\n        </td>\r\n        <td>\r\n          <button\r\n            [disabled]=\"!item_value || tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n            title=\"Adicionar\"\r\n            class=\"btn-plus-select\"\r\n            (click)=\"addItem(_select.value);onChangeTouched()\"\r\n            type=\"button\">\r\n            <i class=\"fas fa-plus\"></i>\r\n          </button>\r\n        </td>\r\n      </tr>\r\n    </table>\r\n\r\n    <div class=\"box-itens-selected\" *ngIf=\"count_actives > 0 && (tcList && tcList.length > 0)\">\r\n      <ng-container *ngFor=\"let item of tcList\">\r\n\r\n        <ng-container *ngIf=\"item.active\">\r\n          <div class=\"box-label\" [ngStyle]=\"(maxWidthLabel) ? {'max-width': maxWidthLabel} : null\" >\r\n            <div class=\"box-value\" [title]=\"item.value\" *ngIf=\"!showDescriptionInValue\">\r\n              {{ item.value }}          \r\n            </div>\r\n            <div class=\"box-value\" [title]=\"item.description\" *ngIf=\"showDescriptionInValue\">\r\n              {{ item.description }}          \r\n            </div>\r\n            <div class=\"box-action\">\r\n              <button\r\n                [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n                title=\"Remover\"\r\n                type=\"button\"\r\n                (click)=\"removeItem(item.value);onChangeTouched()\">\r\n                <i class=\"fas fa-times\"></i>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n", styles: ["table{width:100%;border-collapse:collapse;border:none}table td{vertical-align:top}table td:first-child{width:100%}select{font-size:.8rem;height:40px;border:1px solid #999;border-radius:4px 0 0 4px;padding:6px 30px 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(--tc-primary);border-radius:0 4px 4px 0}.box-itens-selected{display:block;padding:9px;background-color:#ededed;border-radius:4px;width:100%}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{position:relative;display:inline-block;height:35px;min-width:60px;color:var(--tc-primary);padding:8px 24px 10px 15px;border:1px solid var(--tc-primary);border-radius:5px;margin:2px;background-color:var(--white);width:auto;max-width:100%}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{position:absolute;right:4px;top:7px}.box-label .box-action button{color:var(--tc-primary);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}.box-label .box-action button:hover{color:var(--red)}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { tcList: [{
                 type: Input
             }], placeholder: [{
@@ -1132,6 +1133,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], required: [{
                 type: Input
+            }], maxWidthLabel: [{
+                type: Input
+            }], showDescriptionInValue: [{
+                type: Input
             }], tcChange: [{
                 type: Output
             }], onChange: [{
@@ -1531,14 +1536,14 @@ class TCloudUiDataListComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TCloudUiDataListComponent, selector: "tcloud-ui-data-list", inputs: { placeholder: "placeholder", disabled: "disabled", loading: "loading", showInput: "showInput", search: "search", listItems: "listItems", open: "open", border: "border", ngModel: "ngModel" }, outputs: { onInputChange: "onInputChange", onChange: "onChange", onOpened: "onOpened", onClosed: "onClosed", ngModelChange: "ngModelChange" }, providers: [
             DataListService,
             CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$7
-        ], ngImport: i0, template: "<div *ngIf=\"formulario\" id=\"area-{{ id }}\" class=\"tcloud-ui-data-list 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    #_option\r\n    [class.input-hidden]=\"!showInput\"\r\n    [class.in-border]=\"border\"\r\n    [class.loading-box]=\"loading\"\r\n    [disabled]=\"disabled || loading\"\r\n    class=\"dropdown-toggle button-select no-margin-bottom\" \r\n    type=\"button\" \r\n    id=\"{{ id }}\" \r\n    \r\n    [attr.aria-haspopup]=\"'true'\" \r\n    [attr.aria-expanded]=\"'false'\" \r\n    (click)=\"toOpen();toInput(_option)\" >\r\n\r\n    <i class=\"tc-placeholder\" *ngIf=\"(selected_description === undefined || selected_description === null || selected_description === '' ) && !loading \">{{ placeholder }}</i>\r\n    {{ selected_description }}\r\n    <span><i class=\"fas fa-angle-down\"></i></span>\r\n  </button>\r\n  <div class=\"tc-dropdown-menu {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!menu_show\" [style]=\"box_style\">\r\n\r\n    <div class=\"line-search\" *ngIf=\"search\">\r\n      <table class=\"box-search\">\r\n        <tr>\r\n\r\n          <td class=\"area-input\">\r\n            <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" >            \r\n          </td>\r\n\r\n          <td class=\"area-icon\">\r\n            <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\r\n            <button type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\r\n          </td>\r\n          \r\n        </tr>\r\n      </table>\r\n    </div>\r\n    \r\n    <div class=\"area-options\" id=\"{{ id }}-options\" (click)=\"toClose()\">\r\n      <ng-content></ng-content>  \r\n      <ng-container *ngIf=\"listItems && (listItems).length > 0\">\r\n        <ng-container *ngFor=\"let item of listItems\">\r\n          <tcloud-ui-data-list-option [value]=\"item.value\" [disabled]=\"item?.disabled\" >{{ item?.description }}</tcloud-ui-data-list-option>\r\n          </ng-container>\r\n      </ng-container>    \r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"formulario\">\r\n  <form [formGroup]=\"formulario\" style=\"display: none;\" >\r\n    <input id=\"{{ id }}-hidden\" formControlName=\"selected_item\" type=\"hidden\">\r\n  </form>\r\n</div>\r\n", styles: [".dropdown-toggle:after{display:none!important}i.tc-placeholder{font-style:italic;color:#999;text-transform:none!important}.in-border{border:1px solid #ccc!important}.tc-dropdown{position:relative}.tc-dropdown .button-select{width:100%;background-color:#fff;border:none;height:35px;text-align:left;padding-left:15px;font-size:14px;color:#666}.tc-dropdown .button-select span{position:absolute;right:6px;top:7px}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid #ccc;background-color:#fff;position:absolute;z-index:1}.tc-dropdown .area-options{max-height:200px;overflow-y:scroll;overflow-x:hidden}.tc-dropdown .menu-on-top{position:absolute}.line-search{padding:3px}.line-search .box-search{width:100%;border-collapse:collapse}.line-search .box-search td.area-icon{padding:4px 0 2px 8px;width:35px}.line-search .box-search td.area-icon .icon-search{color:#666}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:#999;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.line-search .box-search td.area-input{border:none}.line-search .box-search td.area-input input{width:100%}.line-search .box-search input{width:100%;font-size:13px;height:33px;border:1px solid #ccc;padding:10px}.loading-area{line-height:0;position:relative;height:0;bottom:-10px;left:10px}button:disabled{background-color:#eee!important;border:1px solid #ececec!important;cursor:not-allowed}.loading-box{cursor:progress!important}.disabled i{color:#999!important}.to-hide{display:none}.no-margin-bottom{margin-bottom:0!important}.input-hidden{display:none!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"] }, { 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"] }, { kind: "component", type: TCloudUiDataListOptionComponent, selector: "tcloud-ui-data-list-option", inputs: ["disabled", "value"], outputs: ["selected"] }] }); }
+        ], ngImport: i0, template: "<div *ngIf=\"formulario\" id=\"area-{{ id }}\" class=\"tcloud-ui-data-list 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    #_option\r\n    [class.input-hidden]=\"!showInput\"\r\n    [class.in-border]=\"border\"\r\n    [class.loading-box]=\"loading\"\r\n    [disabled]=\"disabled || loading\"\r\n    class=\"dropdown-toggle button-select no-margin-bottom area-text\" \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();toInput(_option)\" >\r\n\r\n    <i class=\"tc-placeholder area-text\" *ngIf=\"(selected_description === undefined || selected_description === null || selected_description === '' ) && !loading \">{{ placeholder }}</i>\r\n    {{ selected_description }}\r\n    <span><i class=\"fas fa-angle-down\"></i></span>\r\n  </button>\r\n  <div class=\"tc-dropdown-menu {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!menu_show\" [style]=\"box_style\">\r\n\r\n    <div class=\"line-search\" *ngIf=\"search\">\r\n      <table class=\"box-search\">\r\n        <tr>\r\n\r\n          <td class=\"area-input\">\r\n            <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" >            \r\n          </td>\r\n\r\n          <td class=\"area-icon\">\r\n            <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\r\n            <button type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\r\n          </td>\r\n          \r\n        </tr>\r\n      </table>\r\n    </div>\r\n    \r\n    <div class=\"area-options\" id=\"{{ id }}-options\" (click)=\"toClose()\">\r\n      <ng-content></ng-content>  \r\n      <ng-container *ngIf=\"listItems && (listItems).length > 0\">\r\n        <ng-container *ngFor=\"let item of listItems\">\r\n          <tcloud-ui-data-list-option [value]=\"item.value\" [disabled]=\"item?.disabled\" >{{ item?.description }}</tcloud-ui-data-list-option>\r\n          </ng-container>\r\n      </ng-container>    \r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"formulario\">\r\n  <form [formGroup]=\"formulario\" style=\"display: none;\" >\r\n    <input id=\"{{ id }}-hidden\" formControlName=\"selected_item\" type=\"hidden\">\r\n  </form>\r\n</div>\r\n", styles: [".dropdown-toggle:after{display:none!important}i.tc-placeholder{font-style:italic;color:#999;text-transform:none!important}.in-border{border:1px solid #ccc!important}.tc-dropdown{position:relative}.tc-dropdown .button-select{width:100%;background-color:#fff;border:none;height:35px;text-align:left;padding-left:15px;font-size:14px;color:#666;padding-right:30px}.tc-dropdown .button-select span{position:absolute;right:6px;top:7px}.tc-dropdown .area-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid #ccc;background-color:#fff;position:absolute;z-index:1}.tc-dropdown .area-options{max-height:200px;overflow-y:scroll;overflow-x:hidden}.tc-dropdown .menu-on-top{position:absolute}.line-search{padding:3px}.line-search .box-search{width:100%;border-collapse:collapse}.line-search .box-search td.area-icon{padding:4px 0 2px 8px;width:35px}.line-search .box-search td.area-icon .icon-search{color:#666}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:#999;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.line-search .box-search td.area-input{border:none}.line-search .box-search td.area-input input{width:100%}.line-search .box-search input{width:100%;font-size:13px;height:33px;border:1px solid #ccc;padding:10px}.loading-area{line-height:0;position:relative;height:0;bottom:-10px;left:10px}button:disabled{background-color:#eee!important;border:1px solid #ececec!important;cursor:not-allowed}.loading-box{cursor:progress!important}.disabled i{color:#999!important}.to-hide{display:none}.no-margin-bottom{margin-bottom:0!important}.input-hidden{display:none!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"] }, { 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"] }, { kind: "component", type: TCloudUiDataListOptionComponent, selector: "tcloud-ui-data-list-option", inputs: ["disabled", "value"], outputs: ["selected"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiDataListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tcloud-ui-data-list', providers: [
                         DataListService,
                         CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$7
-                    ], template: "<div *ngIf=\"formulario\" id=\"area-{{ id }}\" class=\"tcloud-ui-data-list 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    #_option\r\n    [class.input-hidden]=\"!showInput\"\r\n    [class.in-border]=\"border\"\r\n    [class.loading-box]=\"loading\"\r\n    [disabled]=\"disabled || loading\"\r\n    class=\"dropdown-toggle button-select no-margin-bottom\" \r\n    type=\"button\" \r\n    id=\"{{ id }}\" \r\n    \r\n    [attr.aria-haspopup]=\"'true'\" \r\n    [attr.aria-expanded]=\"'false'\" \r\n    (click)=\"toOpen();toInput(_option)\" >\r\n\r\n    <i class=\"tc-placeholder\" *ngIf=\"(selected_description === undefined || selected_description === null || selected_description === '' ) && !loading \">{{ placeholder }}</i>\r\n    {{ selected_description }}\r\n    <span><i class=\"fas fa-angle-down\"></i></span>\r\n  </button>\r\n  <div class=\"tc-dropdown-menu {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!menu_show\" [style]=\"box_style\">\r\n\r\n    <div class=\"line-search\" *ngIf=\"search\">\r\n      <table class=\"box-search\">\r\n        <tr>\r\n\r\n          <td class=\"area-input\">\r\n            <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" >            \r\n          </td>\r\n\r\n          <td class=\"area-icon\">\r\n            <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\r\n            <button type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\r\n          </td>\r\n          \r\n        </tr>\r\n      </table>\r\n    </div>\r\n    \r\n    <div class=\"area-options\" id=\"{{ id }}-options\" (click)=\"toClose()\">\r\n      <ng-content></ng-content>  \r\n      <ng-container *ngIf=\"listItems && (listItems).length > 0\">\r\n        <ng-container *ngFor=\"let item of listItems\">\r\n          <tcloud-ui-data-list-option [value]=\"item.value\" [disabled]=\"item?.disabled\" >{{ item?.description }}</tcloud-ui-data-list-option>\r\n          </ng-container>\r\n      </ng-container>    \r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"formulario\">\r\n  <form [formGroup]=\"formulario\" style=\"display: none;\" >\r\n    <input id=\"{{ id }}-hidden\" formControlName=\"selected_item\" type=\"hidden\">\r\n  </form>\r\n</div>\r\n", styles: [".dropdown-toggle:after{display:none!important}i.tc-placeholder{font-style:italic;color:#999;text-transform:none!important}.in-border{border:1px solid #ccc!important}.tc-dropdown{position:relative}.tc-dropdown .button-select{width:100%;background-color:#fff;border:none;height:35px;text-align:left;padding-left:15px;font-size:14px;color:#666}.tc-dropdown .button-select span{position:absolute;right:6px;top:7px}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid #ccc;background-color:#fff;position:absolute;z-index:1}.tc-dropdown .area-options{max-height:200px;overflow-y:scroll;overflow-x:hidden}.tc-dropdown .menu-on-top{position:absolute}.line-search{padding:3px}.line-search .box-search{width:100%;border-collapse:collapse}.line-search .box-search td.area-icon{padding:4px 0 2px 8px;width:35px}.line-search .box-search td.area-icon .icon-search{color:#666}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:#999;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.line-search .box-search td.area-input{border:none}.line-search .box-search td.area-input input{width:100%}.line-search .box-search input{width:100%;font-size:13px;height:33px;border:1px solid #ccc;padding:10px}.loading-area{line-height:0;position:relative;height:0;bottom:-10px;left:10px}button:disabled{background-color:#eee!important;border:1px solid #ececec!important;cursor:not-allowed}.loading-box{cursor:progress!important}.disabled i{color:#999!important}.to-hide{display:none}.no-margin-bottom{margin-bottom:0!important}.input-hidden{display:none!important}\n"] }]
+                    ], template: "<div *ngIf=\"formulario\" id=\"area-{{ id }}\" class=\"tcloud-ui-data-list 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    #_option\r\n    [class.input-hidden]=\"!showInput\"\r\n    [class.in-border]=\"border\"\r\n    [class.loading-box]=\"loading\"\r\n    [disabled]=\"disabled || loading\"\r\n    class=\"dropdown-toggle button-select no-margin-bottom area-text\" \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();toInput(_option)\" >\r\n\r\n    <i class=\"tc-placeholder area-text\" *ngIf=\"(selected_description === undefined || selected_description === null || selected_description === '' ) && !loading \">{{ placeholder }}</i>\r\n    {{ selected_description }}\r\n    <span><i class=\"fas fa-angle-down\"></i></span>\r\n  </button>\r\n  <div class=\"tc-dropdown-menu {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!menu_show\" [style]=\"box_style\">\r\n\r\n    <div class=\"line-search\" *ngIf=\"search\">\r\n      <table class=\"box-search\">\r\n        <tr>\r\n\r\n          <td class=\"area-input\">\r\n            <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" >            \r\n          </td>\r\n\r\n          <td class=\"area-icon\">\r\n            <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\r\n            <button type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\r\n          </td>\r\n          \r\n        </tr>\r\n      </table>\r\n    </div>\r\n    \r\n    <div class=\"area-options\" id=\"{{ id }}-options\" (click)=\"toClose()\">\r\n      <ng-content></ng-content>  \r\n      <ng-container *ngIf=\"listItems && (listItems).length > 0\">\r\n        <ng-container *ngFor=\"let item of listItems\">\r\n          <tcloud-ui-data-list-option [value]=\"item.value\" [disabled]=\"item?.disabled\" >{{ item?.description }}</tcloud-ui-data-list-option>\r\n          </ng-container>\r\n      </ng-container>    \r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"formulario\">\r\n  <form [formGroup]=\"formulario\" style=\"display: none;\" >\r\n    <input id=\"{{ id }}-hidden\" formControlName=\"selected_item\" type=\"hidden\">\r\n  </form>\r\n</div>\r\n", styles: [".dropdown-toggle:after{display:none!important}i.tc-placeholder{font-style:italic;color:#999;text-transform:none!important}.in-border{border:1px solid #ccc!important}.tc-dropdown{position:relative}.tc-dropdown .button-select{width:100%;background-color:#fff;border:none;height:35px;text-align:left;padding-left:15px;font-size:14px;color:#666;padding-right:30px}.tc-dropdown .button-select span{position:absolute;right:6px;top:7px}.tc-dropdown .area-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid #ccc;background-color:#fff;position:absolute;z-index:1}.tc-dropdown .area-options{max-height:200px;overflow-y:scroll;overflow-x:hidden}.tc-dropdown .menu-on-top{position:absolute}.line-search{padding:3px}.line-search .box-search{width:100%;border-collapse:collapse}.line-search .box-search td.area-icon{padding:4px 0 2px 8px;width:35px}.line-search .box-search td.area-icon .icon-search{color:#666}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:#999;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.line-search .box-search td.area-input{border:none}.line-search .box-search td.area-input input{width:100%}.line-search .box-search input{width:100%;font-size:13px;height:33px;border:1px solid #ccc;padding:10px}.loading-area{line-height:0;position:relative;height:0;bottom:-10px;left:10px}button:disabled{background-color:#eee!important;border:1px solid #ececec!important;cursor:not-allowed}.loading-box{cursor:progress!important}.disabled i{color:#999!important}.to-hide{display:none}.no-margin-bottom{margin-bottom:0!important}.input-hidden{display:none!important}\n"] }]
         }], ctorParameters: function () { return [{ type: DataListService }, { type: i2.FormBuilder }]; }, propDecorators: { placeholder: [{
                 type: Input
             }], disabled: [{
@@ -1833,11 +1838,11 @@ class TCloudUiMultiInputComponent {
     ngOnDestroy() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiMultiInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.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$5, CUSTOM_INPUT_VALIDATORS$2], ngImport: i0, template: "<div class=\"tcloud-ui-multi-input\">\r\n\r\n    <table>\r\n      <tr>\r\n        <td>\r\n          <input class=\"tc-form-control\" (blur)=\"onChangeTouched()\" [(ngModel)]=\"item_value\" [class.tc-parent-validation]=\"use_validation_required\" type=\"text\" [(ngModel)]=\"input_value\" [disabled]=\"disabled || loading\" name=\"input_value\">\r\n        </td>\r\n        <td>\r\n          <button\r\n            [disabled]=\"!item_value || disabled || loading\"\r\n            title=\"Adicionar\"\r\n            class=\"btn-plus-select\"\r\n            (click)=\"addItem(input_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=\"(tcList && tcList.length > 0)\">\r\n      <ng-container *ngFor=\"let item of tcList; let i = index\">\r\n        \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, i);onChangeTouched()\">\r\n              <i class=\"fas fa-times\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n      </ng-container>\r\n    </div>\r\n \r\n</div>\r\n  ", styles: ["table{width:100%;border-collapse:collapse;border:none}table td{vertical-align:top}table td:first-child{width:100%}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(--tc-primary);border-radius:0 4px 4px 0}.box-itens-selected{display:block;padding:9px;background-color:#ededed;border-radius:4px;width:100%}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{position:relative;display:inline-block;height:35px;min-width:60px;background-color:var(--white);color:var(--tc-primary);padding:8px 24px 10px 15px;border:1px solid var(--tc-primary);border-radius:5px;margin:2px;width:auto;max-width:100%}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{position:absolute;right:4px;top:7px}.box-label .box-action button{color:var(--tc-primary);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}.box-label .box-action button:hover{color:var(--red)}\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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TCloudUiMultiInputComponent, selector: "tcloud-ui-multi-input", inputs: { tcList: "tcList", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required", maxWidthLabel: "maxWidthLabel" }, outputs: { tcChange: "tcChange", onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$5, CUSTOM_INPUT_VALIDATORS$2], ngImport: i0, template: "<div class=\"tcloud-ui-multi-input\">\r\n\r\n    <table>\r\n      <tr>\r\n        <td>\r\n          <input class=\"tc-form-control\" (blur)=\"onChangeTouched()\" [(ngModel)]=\"item_value\" [class.tc-parent-validation]=\"use_validation_required\" type=\"text\" [(ngModel)]=\"input_value\" [disabled]=\"disabled || loading\" name=\"input_value\">\r\n        </td>\r\n        <td>\r\n          <button\r\n            [disabled]=\"!item_value || disabled || loading\"\r\n            title=\"Adicionar\"\r\n            class=\"btn-plus-select\"\r\n            (click)=\"addItem(input_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=\"(tcList && tcList.length > 0)\">\r\n      <ng-container *ngFor=\"let item of tcList; let i = index\">\r\n        \r\n        <div class=\"box-label\" [ngStyle]=\"(maxWidthLabel) ? {'max-width': maxWidthLabel} : null\">\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, i);onChangeTouched()\">\r\n              <i class=\"fas fa-times\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n      </ng-container>\r\n    </div>\r\n \r\n</div>\r\n  ", styles: ["table{width:100%;border-collapse:collapse;border:none}table td{vertical-align:top}table td:first-child{width:100%}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(--tc-primary);border-radius:0 4px 4px 0}.box-itens-selected{display:block;padding:9px;background-color:#ededed;border-radius:4px;width:100%}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{position:relative;display:inline-block;height:35px;min-width:60px;background-color:var(--white);color:var(--tc-primary);padding:8px 24px 10px 15px;border:1px solid var(--tc-primary);border-radius:5px;margin:2px;width:auto;max-width:100%}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{position:absolute;right:4px;top:7px}.box-label .box-action button{color:var(--tc-primary);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}.box-label .box-action button:hover{color:var(--red)}\n"], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiMultiInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-multi-input', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$5, CUSTOM_INPUT_VALIDATORS$2], template: "<div class=\"tcloud-ui-multi-input\">\r\n\r\n    <table>\r\n      <tr>\r\n        <td>\r\n          <input class=\"tc-form-control\" (blur)=\"onChangeTouched()\" [(ngModel)]=\"item_value\" [class.tc-parent-validation]=\"use_validation_required\" type=\"text\" [(ngModel)]=\"input_value\" [disabled]=\"disabled || loading\" name=\"input_value\">\r\n        </td>\r\n        <td>\r\n          <button\r\n            [disabled]=\"!item_value || disabled || loading\"\r\n            title=\"Adicionar\"\r\n            class=\"btn-plus-select\"\r\n            (click)=\"addItem(input_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=\"(tcList && tcList.length > 0)\">\r\n      <ng-container *ngFor=\"let item of tcList; let i = index\">\r\n        \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, i);onChangeTouched()\">\r\n              <i class=\"fas fa-times\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n      </ng-container>\r\n    </div>\r\n \r\n</div>\r\n  ", styles: ["table{width:100%;border-collapse:collapse;border:none}table td{vertical-align:top}table td:first-child{width:100%}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(--tc-primary);border-radius:0 4px 4px 0}.box-itens-selected{display:block;padding:9px;background-color:#ededed;border-radius:4px;width:100%}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{position:relative;display:inline-block;height:35px;min-width:60px;background-color:var(--white);color:var(--tc-primary);padding:8px 24px 10px 15px;border:1px solid var(--tc-primary);border-radius:5px;margin:2px;width:auto;max-width:100%}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{position:absolute;right:4px;top:7px}.box-label .box-action button{color:var(--tc-primary);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}.box-label .box-action button:hover{color:var(--red)}\n"] }]
+            args: [{ selector: 'tcloud-ui-multi-input', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$5, CUSTOM_INPUT_VALIDATORS$2], template: "<div class=\"tcloud-ui-multi-input\">\r\n\r\n    <table>\r\n      <tr>\r\n        <td>\r\n          <input class=\"tc-form-control\" (blur)=\"onChangeTouched()\" [(ngModel)]=\"item_value\" [class.tc-parent-validation]=\"use_validation_required\" type=\"text\" [(ngModel)]=\"input_value\" [disabled]=\"disabled || loading\" name=\"input_value\">\r\n        </td>\r\n        <td>\r\n          <button\r\n            [disabled]=\"!item_value || disabled || loading\"\r\n            title=\"Adicionar\"\r\n            class=\"btn-plus-select\"\r\n            (click)=\"addItem(input_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=\"(tcList && tcList.length > 0)\">\r\n      <ng-container *ngFor=\"let item of tcList; let i = index\">\r\n        \r\n        <div class=\"box-label\" [ngStyle]=\"(maxWidthLabel) ? {'max-width': maxWidthLabel} : null\">\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, i);onChangeTouched()\">\r\n              <i class=\"fas fa-times\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n      </ng-container>\r\n    </div>\r\n \r\n</div>\r\n  ", styles: ["table{width:100%;border-collapse:collapse;border:none}table td{vertical-align:top}table td:first-child{width:100%}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(--tc-primary);border-radius:0 4px 4px 0}.box-itens-selected{display:block;padding:9px;background-color:#ededed;border-radius:4px;width:100%}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{position:relative;display:inline-block;height:35px;min-width:60px;background-color:var(--white);color:var(--tc-primary);padding:8px 24px 10px 15px;border:1px solid var(--tc-primary);border-radius:5px;margin:2px;width:auto;max-width:100%}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{position:absolute;right:4px;top:7px}.box-label .box-action button{color:var(--tc-primary);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}.box-label .box-action button:hover{color:var(--red)}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { tcList: [{
                 type: Input
             }], placeholder: [{
@@ -1848,6 +1853,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], required: [{
                 type: Input
+            }], maxWidthLabel: [{
+                type: Input
             }], tcChange: [{
                 type: Output
             }], onChange: [{
@@ -5124,6 +5131,7 @@ class TCloudUiMultiplesValuesComponent {
         this.search = true;
         this.uppercase = false;
         this.lowercase = false;
+        this.tcChange = new EventEmitter();
         this.use_validation_required = false;
         this.placeholder_list = '';
         //Placeholders for the callbacks which are later providesd
@@ -5202,6 +5210,7 @@ class TCloudUiMultiplesValuesComponent {
         this.placeholder_list = (placeholder_list !== '') ? placeholder_list : this.placeholder;
         this.onChangeTouched();
         this.onChangeCallback(this.items);
+        this.onChange();
     }
     removeItem(item, index) {
         if (this.disabled) {
@@ -5309,6 +5318,9 @@ class TCloudUiMultiplesValuesComponent {
             this.toOpen();
         }
     }
+    onChange() {
+        this.tcChange.emit(this.items);
+    }
     onChangeTouched() {
         this.onTouchedCallback();
     }
@@ -5358,11 +5370,11 @@ class TCloudUiMultiplesValuesComponent {
     ngOnDestroy() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiMultiplesValuesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TCloudUiMultiplesValuesComponent, selector: "tcloud-ui-multiples-values", inputs: { listItems: "listItems", pattern: "pattern", delimiter: "delimiter", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required", search: "search", uppercase: "uppercase", lowercase: "lowercase" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1, CUSTOM_INPUT_VALIDATORS], ngImport: i0, template: "<div class=\"tcloud-ui-multiples-values tc-dropdown\" id=\"area-{{ id }}\" [class.tc-parent-validation]=\"use_validation_required\">\r\n\r\n\r\n    <form #_formulario=\"ngForm\">\r\n\r\n        <!-- {{ input_items }} -->\r\n\r\n        <div class=\"dropdown-toggle\" id=\"{{id}}\" [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"'false'\">\r\n\r\n            <table style=\"width: 100%;\">\r\n                <tr>\r\n                    <td>\r\n                        <table class=\"group-input-action\">\r\n                            <tr>\r\n                                <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\r\n                                    <ng-container *ngIf=\"listItems && (listItems).length > 0\">\r\n                                        <div class=\"input\" (click)=\"show_itens = false\">\r\n                                            <tcloud-ui-data-list [placeholder]=\"placeholder_list\" [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [listItems]=\"listItems\" [(ngModel)]=\"input_items\" (onChange)=\"toEnterKey(input_items)\"></tcloud-ui-data-list>\r\n                                        </div>\r\n                                    </ng-container>\r\n            \r\n                                    <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\r\n                                        <div class=\"input\">\r\n                                            <input \r\n                                                required\r\n                                                [pattern]=\"pattern\"\r\n                                                (keydown.enter)=\"toEnterKey(input_items)\"\r\n                                                [disabled]=\"disabled\"\r\n                                                [class.text-lowercase]=\"lowercase\"\r\n                                                [class.text-uppercase]=\"uppercase\"\r\n                                                type=\"text\" name=\"items\" class=\"tc-form-control\" [(ngModel)]=\"input_items\" [placeholder]=\"placeholder_list\" required [title]=\"placeholder_list\">\r\n                                        \r\n                                        </div>\r\n                                    </ng-container>\r\n                                </td>\r\n                                <td class=\"count-list\" *ngIf=\"(items && items.length > 0)\">\r\n                                    <div class=\"input\">\r\n                                        <input type=\"text\" value=\"{{ items.length }} {{ (items.length > 1) ? 'registros' : 'registro' }}\" disabled readonly>                            \r\n                                    </div>\r\n                                </td>\r\n                                <td class=\"count-list\" *ngIf=\"!items || (items && items.length === 0)\">\r\n                                    <div class=\"input\"><input type=\"text\" class=\"info-no-value\" value=\"Vazio\" disabled readonly></div>                       \r\n                                </td>\r\n                                <td class=\"action-input-arrow  bc-r\">\r\n                                    <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\r\n                                        <i class=\"fas fa-angle-up\" *ngIf=\"show_itens\"></i>\r\n                                        <i class=\"fas fa-angle-down\" *ngIf=\"!show_itens\"></i>\r\n                                    </button>\r\n                                </td>\r\n                                \r\n                            </tr>\r\n                        </table> \r\n                    </td>\r\n                    <td style=\"width: 45px;\">\r\n                        <table>\r\n                            <tr>\r\n                                <td class=\"action-input\" *ngIf=\"!disabled\">\r\n                                    <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\r\n                                        <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-primary\" (click)=\"add_items()\" title=\"Adicionar item\">\r\n                                            <i class=\"fas fa-plus\"></i>\r\n                                        </button>\r\n                                    </ng-container>\r\n                                    <ng-container *ngIf=\"listItems && (listItems).length > 0\">\r\n                                        <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-primary\" (click)=\"add_items_by_data_list(input_items)\" title=\"Adicionar item\">\r\n                                            <i class=\"fas fa-plus\"></i>\r\n                                        </button>\r\n                                    </ng-container>\r\n                                </td>\r\n                            </tr>\r\n                        </table>\r\n                    </td>\r\n                </tr>\r\n            </table>\r\n\r\n            <!-- <table class=\"group-input-action\">\r\n                <tr>\r\n                    <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\r\n                        <ng-container *ngIf=\"listItems && (listItems).length > 0\">\r\n                            <div class=\"input\" (click)=\"show_itens = false\">\r\n                                <tcloud-ui-data-list [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [listItems]=\"listItems\" [(ngModel)]=\"input_items\"></tcloud-ui-data-list>\r\n                            </div>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\r\n                            <div class=\"input\">\r\n                                <input \r\n                                    (keydown.enter)=\"add_items();toOpen()\"\r\n                                    [disabled]=\"disabled\"\r\n                                    [class.text-lowercase]=\"lowercase\"\r\n                                    [class.text-uppercase]=\"uppercase\"\r\n                                    type=\"text\" name=\"items\" class=\"tc-form-control\" [(ngModel)]=\"input_items\" [placeholder]=\"placeholder_list\" required [title]=\"placeholder_list\">\r\n                            \r\n                            </div>\r\n                        </ng-container>\r\n                    </td>\r\n                    <td class=\"count-list\" *ngIf=\"(items && items.length > 0)\">\r\n                        <div class=\"input\">\r\n                            <input type=\"text\" value=\"{{ items.length }} {{ (items.length > 1) ? 'registros' : 'registro' }}\" disabled readonly>                            \r\n                        </div>\r\n                    </td>\r\n                    <td class=\"count-list\" *ngIf=\"!items || (items && items.length === 0)\">\r\n                        <div class=\"input\"><input type=\"text\" value=\"Vazio\" disabled readonly></div>                       \r\n                    </td>\r\n                    <td class=\"action-input-arrow  bc-r\">\r\n                        <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\r\n                            <i class=\"fas fa-angle-up\" *ngIf=\"show_itens\"></i>\r\n                            <i class=\"fas fa-angle-down\" *ngIf=\"!show_itens\"></i>\r\n                        </button>\r\n                    </td>\r\n                    <td class=\"action-input\" *ngIf=\"!disabled\">\r\n                        <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\r\n                            <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-primary btn-new-green\" (click)=\"add_items()\" title=\"Adicionar item\">\r\n                                <i class=\"fas fa-plus\"></i>\r\n                            </button>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"listItems && (listItems).length > 0\">\r\n                            <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-primary btn-new-green\" (click)=\"add_items_by_data_list(input_items)\" title=\"Adicionar item\">\r\n                                <i class=\"fas fa-plus\"></i>\r\n                            </button>\r\n                        </ng-container>\r\n                    </td>\r\n                </tr>\r\n            </table> -->\r\n        </div>\r\n        \r\n        <!-- <pre>\r\n            {{ items | json }}\r\n        </pre> -->\r\n\r\n    </form> \r\n\r\n    <!-- box-itens-selected  -->\r\n    <div class=\"tc-dropdown-menu box-itens-selected  {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!show_itens\" [style]=\"box_style\">\r\n        \r\n\r\n        <div class=\"line-search\" *ngIf=\"search\">\r\n            <table class=\"box-search\" *ngIf=\"items && (items).length > 5\">\r\n              <tr>\r\n      \r\n                <td class=\"area-input\">\r\n                  <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" >            \r\n                </td>\r\n      \r\n                <td class=\"area-icon\">\r\n                  <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\r\n                  <button class=\"box-action\" 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\">\r\n            <ng-container *ngFor=\"let item of items; let i = index\">\r\n            \r\n                <label class=\"box-label\">\r\n                    <div class=\"box-value\" [title]=\"item\"  >\r\n                    {{ item }}          \r\n                    </div>\r\n                    <div class=\"box-action\">\r\n                        <button\r\n                            class=\"box-action\"\r\n                            [disabled]=\"items === undefined || (items && items.length === 0) || disabled || loading\"\r\n                            title=\"Remover\"\r\n                            type=\"button\"\r\n                            (click)=\"removeItem(item, i)\">\r\n                            <i class=\"fas fa-times\"></i>\r\n                        </button>\r\n                    </div>\r\n                </label>\r\n\r\n            </ng-container>\r\n        </div>\r\n\r\n        <div class=\"mt-5\" *ngIf=\"items && (items).length > 5\">\r\n            <div class=\"btn-remove-all\">\r\n                <button class=\"box-action\" type=\"button\" (click)=\"remove_all()\">\r\n                    Limpar toda a lista\r\n                </button>\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n</div>", styles: ["table{border-collapse:collapse}td,th{padding:0;margin:0}::placeholder{font-style:italic;color:#999;text-transform:none!important}.box-input{border-radius:5px 0 0 5px}.box-input .input{background-color:#fff;border-radius:5px 0 0 5px}.box-input .ng-invalid{border-color:transparent!important}.bc-l{background-color:#fff;border-left:1px solid var(--tc-gray-300)}.bc-r{background-color:#fff;border-right:1px solid var(--tc-gray-300)}.box-input-data-list{background-color:#fff;border-left:1px solid var(--tc-gray-300);border-top:1px solid var(--tc-gray-300);border-bottom:1px solid var(--tc-gray-300);border-radius:5px 0 0 5px;height:42px;padding-left:5px}.group-input-action{width:100%;background-color:#fff}.group-input-action input{height:40px;border:none}.group-input-action td{height:40px;border-top:1px solid var(--tc-gray-300);border-bottom:1px solid var(--tc-gray-300);background-color:transparent!important}.count-list{width:90px;text-align:center;background:#fff}.count-list .input{background-color:transparent}.count-list .input input{height:40px;border:none;text-align:center;width:100px;background-color:transparent}.action-input-arrow{width:30px;background:transparent;position:relative;z-index:0}.action-input-arrow button{cursor:pointer;background-color:transparent;text-align:center;font-size:15px;border-top:none;border-right:none;border-bottom:none;border-left:none;width:30px;border-radius:0 3px 3px 0;position:relative;bottom:1px;color:#666}.action-input-arrow button i{position:relative;z-index:-1}.action-input{width:50px;padding-left:3px}.action-input .tc-btn{width:100%!important;padding:0;text-align:center;border-radius:4px 16px 16px 3px;display:block;margin:0;height:40px;border:1px solid var(--tc-primary)!important}.action-input .tc-btn i{width:100%;text-align:center;padding:0!important;margin:0!important;font-size:18px;position:relative;top:1px}.box-itens-selected{display:block;padding:9px;background-color:#ededed;border-radius:4px;width:100%}.box-itens-selected .box-label{position:relative;display:inline-block;height:35px;min-width:60px;background-color:var(--white);color:var(--tc-gray-500);padding:8px 24px 10px 15px;border:1px solid var(--tc-primary);border-radius:5px;margin:2px;width:auto;max-width:100%}.box-itens-selected .box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-itens-selected .box-label div.box-action{position:absolute;right:4px;top:7px}.box-itens-selected .box-label div.box-action button{color:var(--tc-primary);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-itens-selected .box-label div.box-action button i{font-size:12px}.box-itens-selected .box-label div.box-action button:hover{color:var(--red)}.to-hide{display:none}.dropdown-toggle:after{display:none!important}.tc-dropdown{position:relative}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid var(--tc-gray-300);position:absolute;z-index:1;background-color:#f9f9f9}.tc-dropdown .area-options{padding-right:8px;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 var(--tc-gray-300);padding:10px}.btn-remove-all{text-align:right}.btn-remove-all button{background-color:transparent;border:none;color:#dd5353;cursor:pointer}.btn-remove-all button:hover{color:red!important}.info-no-value{color:#dd5353}\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.ɵ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.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: TCloudUiDataListComponent, selector: "tcloud-ui-data-list", inputs: ["placeholder", "disabled", "loading", "showInput", "search", "listItems", "open", "border", "ngModel"], outputs: ["onInputChange", "onChange", "onOpened", "onClosed", "ngModelChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TCloudUiMultiplesValuesComponent, selector: "tcloud-ui-multiples-values", inputs: { listItems: "listItems", pattern: "pattern", delimiter: "delimiter", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required", search: "search", uppercase: "uppercase", lowercase: "lowercase", maxWidthLabel: "maxWidthLabel" }, outputs: { tcChange: "tcChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1, CUSTOM_INPUT_VALIDATORS], ngImport: i0, template: "<div class=\"tcloud-ui-multiples-values tc-dropdown\" id=\"area-{{ id }}\" [class.tc-parent-validation]=\"use_validation_required\">\r\n\r\n\r\n    <form #_formulario=\"ngForm\">\r\n\r\n        <!-- {{ input_items }} -->\r\n\r\n        <div class=\"dropdown-toggle\" id=\"{{id}}\" [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"'false'\">\r\n\r\n            <table style=\"width: 100%;\">\r\n                <tr>\r\n                    <td>\r\n                        <table class=\"group-input-action\">\r\n                            <tr>\r\n                                <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\r\n                                    <ng-container *ngIf=\"listItems && (listItems).length > 0\">\r\n                                        <div class=\"input\" (click)=\"show_itens = false\">\r\n                                            <tcloud-ui-data-list [placeholder]=\"placeholder_list\" [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [listItems]=\"listItems\" [(ngModel)]=\"input_items\" (onChange)=\"toEnterKey(input_items)\"></tcloud-ui-data-list>\r\n                                        </div>\r\n                                    </ng-container>\r\n            \r\n                                    <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\r\n                                        <div class=\"input\">\r\n                                            <input \r\n                                                required\r\n                                                [pattern]=\"pattern\"\r\n                                                (keydown.enter)=\"toEnterKey(input_items)\"\r\n                                                [disabled]=\"disabled\"\r\n                                                [class.text-lowercase]=\"lowercase\"\r\n                                                [class.text-uppercase]=\"uppercase\"                                                \r\n                                                type=\"text\" name=\"items\" class=\"tc-form-control area-text\" [(ngModel)]=\"input_items\" [placeholder]=\"placeholder_list\" required [title]=\"placeholder_list\">\r\n                                        \r\n                                        </div>\r\n                                    </ng-container>\r\n                                </td>\r\n                                <td class=\"count-list\" *ngIf=\"(items && items.length > 0)\">\r\n                                    <div class=\"input\">\r\n                                        <input type=\"text\" value=\"{{ items.length }} {{ (items.length > 1) ? 'registros' : 'registro' }}\" disabled readonly>                            \r\n                                    </div>\r\n                                </td>\r\n                                <td class=\"count-list\" *ngIf=\"!items || (items && items.length === 0)\">\r\n                                    <div class=\"input\"><input type=\"text\" class=\"info-no-value\" value=\"Vazio\" disabled readonly></div>                       \r\n                                </td>\r\n                                <td class=\"action-input-arrow  bc-r\">\r\n                                    <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\r\n                                        <i class=\"fas fa-angle-up\" *ngIf=\"show_itens\"></i>\r\n                                        <i class=\"fas fa-angle-down\" *ngIf=\"!show_itens\"></i>\r\n                                    </button>\r\n                                </td>\r\n                                \r\n                            </tr>\r\n                        </table> \r\n                    </td>\r\n                    <td style=\"width: 45px;\">\r\n                        <table>\r\n                            <tr>\r\n                                <td class=\"action-input\" *ngIf=\"!disabled\">\r\n                                    <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\r\n                                        <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-primary\" (click)=\"add_items()\" title=\"Adicionar item\">\r\n                                            <i class=\"fas fa-plus\"></i>\r\n                                        </button>\r\n                                    </ng-container>\r\n                                    <ng-container *ngIf=\"listItems && (listItems).length > 0\">\r\n                                        <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-primary\" (click)=\"add_items_by_data_list(input_items)\" title=\"Adicionar item\">\r\n                                            <i class=\"fas fa-plus\"></i>\r\n                                        </button>\r\n                                    </ng-container>\r\n                                </td>\r\n                            </tr>\r\n                        </table>\r\n                    </td>\r\n                </tr>\r\n            </table>\r\n\r\n            <!-- <table class=\"group-input-action\">\r\n                <tr>\r\n                    <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\r\n                        <ng-container *ngIf=\"listItems && (listItems).length > 0\">\r\n                            <div class=\"input\" (click)=\"show_itens = false\">\r\n                                <tcloud-ui-data-list [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [listItems]=\"listItems\" [(ngModel)]=\"input_items\"></tcloud-ui-data-list>\r\n                            </div>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\r\n                            <div class=\"input\">\r\n                                <input \r\n                                    (keydown.enter)=\"add_items();toOpen()\"\r\n                                    [disabled]=\"disabled\"\r\n                                    [class.text-lowercase]=\"lowercase\"\r\n                                    [class.text-uppercase]=\"uppercase\"\r\n                                    type=\"text\" name=\"items\" class=\"tc-form-control\" [(ngModel)]=\"input_items\" [placeholder]=\"placeholder_list\" required [title]=\"placeholder_list\">\r\n                            \r\n                            </div>\r\n                        </ng-container>\r\n                    </td>\r\n                    <td class=\"count-list\" *ngIf=\"(items && items.length > 0)\">\r\n                        <div class=\"input\">\r\n                            <input type=\"text\" value=\"{{ items.length }} {{ (items.length > 1) ? 'registros' : 'registro' }}\" disabled readonly>                            \r\n                        </div>\r\n                    </td>\r\n                    <td class=\"count-list\" *ngIf=\"!items || (items && items.length === 0)\">\r\n                        <div class=\"input\"><input type=\"text\" value=\"Vazio\" disabled readonly></div>                       \r\n                    </td>\r\n                    <td class=\"action-input-arrow  bc-r\">\r\n                        <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\r\n                            <i class=\"fas fa-angle-up\" *ngIf=\"show_itens\"></i>\r\n                            <i class=\"fas fa-angle-down\" *ngIf=\"!show_itens\"></i>\r\n                        </button>\r\n                    </td>\r\n                    <td class=\"action-input\" *ngIf=\"!disabled\">\r\n                        <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\r\n                            <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-primary btn-new-green\" (click)=\"add_items()\" title=\"Adicionar item\">\r\n                                <i class=\"fas fa-plus\"></i>\r\n                            </button>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"listItems && (listItems).length > 0\">\r\n                            <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-primary btn-new-green\" (click)=\"add_items_by_data_list(input_items)\" title=\"Adicionar item\">\r\n                                <i class=\"fas fa-plus\"></i>\r\n                            </button>\r\n                        </ng-container>\r\n                    </td>\r\n                </tr>\r\n            </table> -->\r\n        </div>\r\n        \r\n        <!-- <pre>\r\n            {{ items | json }}\r\n        </pre> -->\r\n\r\n    </form> \r\n\r\n    <!-- box-itens-selected  -->\r\n    <div class=\"tc-dropdown-menu box-itens-selected  {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!show_itens\" [style]=\"box_style\">\r\n        \r\n\r\n        <div class=\"line-search\" *ngIf=\"search\">\r\n            <table class=\"box-search\" *ngIf=\"items && (items).length > 5\">\r\n              <tr>\r\n      \r\n                <td class=\"area-input\">\r\n                  <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" >            \r\n                </td>\r\n      \r\n                <td class=\"area-icon\">\r\n                  <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\r\n                  <button class=\"box-action\" 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\">\r\n            <ng-container *ngFor=\"let item of items; let i = index\">\r\n            \r\n                <label class=\"box-label\" [ngStyle]=\"(maxWidthLabel) ? {'max-width': maxWidthLabel} : null\">\r\n                    <div class=\"box-value\" [title]=\"item\"  >\r\n                    {{ item }}          \r\n                    </div>\r\n                    <div class=\"box-action\">\r\n                        <button\r\n                            class=\"box-action\"\r\n                            [disabled]=\"items === undefined || (items && items.length === 0) || disabled || loading\"\r\n                            title=\"Remover\"\r\n                            type=\"button\"\r\n                            (click)=\"removeItem(item, i)\">\r\n                            <i class=\"fas fa-times\"></i>\r\n                        </button>\r\n                    </div>\r\n                </label>\r\n\r\n            </ng-container>\r\n        </div>\r\n\r\n        <div class=\"mt-5\" *ngIf=\"items && (items).length > 5\">\r\n            <div class=\"btn-remove-all\">\r\n                <button class=\"box-action\" type=\"button\" (click)=\"remove_all()\">\r\n                    Limpar toda a lista\r\n                </button>\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n</div>", styles: ["table{border-collapse:collapse}td,th{padding:0;margin:0}::placeholder{font-style:italic;color:#999;text-transform:none!important}.box-input{border-radius:5px 0 0 5px}.box-input .input{background-color:#fff;border-radius:5px 0 0 5px}.box-input .ng-invalid{border-color:transparent!important}.bc-l{background-color:#fff;border-left:1px solid var(--tc-gray-300)}.bc-r{background-color:#fff;border-right:1px solid var(--tc-gray-300)}.box-input-data-list{background-color:#fff;border-left:1px solid var(--tc-gray-300);border-top:1px solid var(--tc-gray-300);border-bottom:1px solid var(--tc-gray-300);border-radius:5px 0 0 5px;height:42px;padding-left:5px}@media (max-width: 900px){.box-input-data-list{max-width:200px}}.group-input-action{width:100%;background-color:#fff}.group-input-action input{height:40px;border:none}.group-input-action td{height:40px;border-top:1px solid var(--tc-gray-300);border-bottom:1px solid var(--tc-gray-300);background-color:transparent!important}.count-list{width:90px;text-align:center;background:#fff}.count-list .input{background-color:transparent}.count-list .input input{height:40px;border:none;text-align:center;width:100px;background-color:transparent}.action-input-arrow{width:30px;background:transparent;position:relative;z-index:0}.action-input-arrow button{cursor:pointer;background-color:transparent;text-align:center;font-size:15px;border-top:none;border-right:none;border-bottom:none;border-left:none;width:30px;border-radius:0 3px 3px 0;position:relative;bottom:1px;color:#666}.action-input-arrow button i{position:relative;z-index:-1}.action-input{width:50px;padding-left:3px}.action-input .tc-btn{width:100%!important;padding:0;text-align:center;border-radius:4px 16px 16px 3px;display:block;margin:0;height:40px;border:1px solid var(--tc-primary)!important}.action-input .tc-btn i{width:100%;text-align:center;padding:0!important;margin:0!important;font-size:18px;position:relative;top:1px}.box-itens-selected{display:block;padding:9px;background-color:#ededed;border-radius:4px;width:100%}.box-itens-selected .box-label{position:relative;display:inline-block;height:35px;min-width:60px;color:var(--tc-primary);padding:8px 24px 10px 15px;border:1px solid var(--tc-primary);border-radius:5px;margin:2px;background-color:var(--white);width:auto;max-width:100%}.box-itens-selected .box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-itens-selected .box-label div.box-action{position:absolute;right:4px;top:7px}.box-itens-selected .box-label div.box-action button{color:var(--tc-primary);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-itens-selected .box-label div.box-action button i{font-size:12px}.box-itens-selected .box-label div.box-action button:hover{color:var(--red)}.to-hide{display:none}.dropdown-toggle:after{display:none!important}.tc-dropdown{position:relative}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid var(--tc-gray-300);position:absolute;z-index:1;background-color:#f9f9f9}.tc-dropdown .area-options{padding-right:8px;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 var(--tc-gray-300);padding:10px}.btn-remove-all{text-align:right}.btn-remove-all button{background-color:transparent;border:none;color:#dd5353;cursor:pointer}.btn-remove-all button:hover{color:red!important}.info-no-value{color:#dd5353}.area-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.ɵ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.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: TCloudUiDataListComponent, selector: "tcloud-ui-data-list", inputs: ["placeholder", "disabled", "loading", "showInput", "search", "listItems", "open", "border", "ngModel"], outputs: ["onInputChange", "onChange", "onOpened", "onClosed", "ngModelChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiMultiplesValuesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-multiples-values', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1, CUSTOM_INPUT_VALIDATORS], template: "<div class=\"tcloud-ui-multiples-values tc-dropdown\" id=\"area-{{ id }}\" [class.tc-parent-validation]=\"use_validation_required\">\r\n\r\n\r\n    <form #_formulario=\"ngForm\">\r\n\r\n        <!-- {{ input_items }} -->\r\n\r\n        <div class=\"dropdown-toggle\" id=\"{{id}}\" [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"'false'\">\r\n\r\n            <table style=\"width: 100%;\">\r\n                <tr>\r\n                    <td>\r\n                        <table class=\"group-input-action\">\r\n                            <tr>\r\n                                <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\r\n                                    <ng-container *ngIf=\"listItems && (listItems).length > 0\">\r\n                                        <div class=\"input\" (click)=\"show_itens = false\">\r\n                                            <tcloud-ui-data-list [placeholder]=\"placeholder_list\" [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [listItems]=\"listItems\" [(ngModel)]=\"input_items\" (onChange)=\"toEnterKey(input_items)\"></tcloud-ui-data-list>\r\n                                        </div>\r\n                                    </ng-container>\r\n            \r\n                                    <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\r\n                                        <div class=\"input\">\r\n                                            <input \r\n                                                required\r\n                                                [pattern]=\"pattern\"\r\n                                                (keydown.enter)=\"toEnterKey(input_items)\"\r\n                                                [disabled]=\"disabled\"\r\n                                                [class.text-lowercase]=\"lowercase\"\r\n                                                [class.text-uppercase]=\"uppercase\"\r\n                                                type=\"text\" name=\"items\" class=\"tc-form-control\" [(ngModel)]=\"input_items\" [placeholder]=\"placeholder_list\" required [title]=\"placeholder_list\">\r\n                                        \r\n                                        </div>\r\n                                    </ng-container>\r\n                                </td>\r\n                                <td class=\"count-list\" *ngIf=\"(items && items.length > 0)\">\r\n                                    <div class=\"input\">\r\n                                        <input type=\"text\" value=\"{{ items.length }} {{ (items.length > 1) ? 'registros' : 'registro' }}\" disabled readonly>                            \r\n                                    </div>\r\n                                </td>\r\n                                <td class=\"count-list\" *ngIf=\"!items || (items && items.length === 0)\">\r\n                                    <div class=\"input\"><input type=\"text\" class=\"info-no-value\" value=\"Vazio\" disabled readonly></div>                       \r\n                                </td>\r\n                                <td class=\"action-input-arrow  bc-r\">\r\n                                    <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\r\n                                        <i class=\"fas fa-angle-up\" *ngIf=\"show_itens\"></i>\r\n                                        <i class=\"fas fa-angle-down\" *ngIf=\"!show_itens\"></i>\r\n                                    </button>\r\n                                </td>\r\n                                \r\n                            </tr>\r\n                        </table> \r\n                    </td>\r\n                    <td style=\"width: 45px;\">\r\n                        <table>\r\n                            <tr>\r\n                                <td class=\"action-input\" *ngIf=\"!disabled\">\r\n                                    <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\r\n                                        <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-primary\" (click)=\"add_items()\" title=\"Adicionar item\">\r\n                                            <i class=\"fas fa-plus\"></i>\r\n                                        </button>\r\n                                    </ng-container>\r\n                                    <ng-container *ngIf=\"listItems && (listItems).length > 0\">\r\n                                        <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-primary\" (click)=\"add_items_by_data_list(input_items)\" title=\"Adicionar item\">\r\n                                            <i class=\"fas fa-plus\"></i>\r\n                                        </button>\r\n                                    </ng-container>\r\n                                </td>\r\n                            </tr>\r\n                        </table>\r\n                    </td>\r\n                </tr>\r\n            </table>\r\n\r\n            <!-- <table class=\"group-input-action\">\r\n                <tr>\r\n                    <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\r\n                        <ng-container *ngIf=\"listItems && (listItems).length > 0\">\r\n                            <div class=\"input\" (click)=\"show_itens = false\">\r\n                                <tcloud-ui-data-list [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [listItems]=\"listItems\" [(ngModel)]=\"input_items\"></tcloud-ui-data-list>\r\n                            </div>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\r\n                            <div class=\"input\">\r\n                                <input \r\n                                    (keydown.enter)=\"add_items();toOpen()\"\r\n                                    [disabled]=\"disabled\"\r\n                                    [class.text-lowercase]=\"lowercase\"\r\n                                    [class.text-uppercase]=\"uppercase\"\r\n                                    type=\"text\" name=\"items\" class=\"tc-form-control\" [(ngModel)]=\"input_items\" [placeholder]=\"placeholder_list\" required [title]=\"placeholder_list\">\r\n                            \r\n                            </div>\r\n                        </ng-container>\r\n                    </td>\r\n                    <td class=\"count-list\" *ngIf=\"(items && items.length > 0)\">\r\n                        <div class=\"input\">\r\n                            <input type=\"text\" value=\"{{ items.length }} {{ (items.length > 1) ? 'registros' : 'registro' }}\" disabled readonly>                            \r\n                        </div>\r\n                    </td>\r\n                    <td class=\"count-list\" *ngIf=\"!items || (items && items.length === 0)\">\r\n                        <div class=\"input\"><input type=\"text\" value=\"Vazio\" disabled readonly></div>                       \r\n                    </td>\r\n                    <td class=\"action-input-arrow  bc-r\">\r\n                        <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\r\n                            <i class=\"fas fa-angle-up\" *ngIf=\"show_itens\"></i>\r\n                            <i class=\"fas fa-angle-down\" *ngIf=\"!show_itens\"></i>\r\n                        </button>\r\n                    </td>\r\n                    <td class=\"action-input\" *ngIf=\"!disabled\">\r\n                        <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\r\n                            <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-primary btn-new-green\" (click)=\"add_items()\" title=\"Adicionar item\">\r\n                                <i class=\"fas fa-plus\"></i>\r\n                            </button>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"listItems && (listItems).length > 0\">\r\n                            <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-primary btn-new-green\" (click)=\"add_items_by_data_list(input_items)\" title=\"Adicionar item\">\r\n                                <i class=\"fas fa-plus\"></i>\r\n                            </button>\r\n                        </ng-container>\r\n                    </td>\r\n                </tr>\r\n            </table> -->\r\n        </div>\r\n        \r\n        <!-- <pre>\r\n            {{ items | json }}\r\n        </pre> -->\r\n\r\n    </form> \r\n\r\n    <!-- box-itens-selected  -->\r\n    <div class=\"tc-dropdown-menu box-itens-selected  {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!show_itens\" [style]=\"box_style\">\r\n        \r\n\r\n        <div class=\"line-search\" *ngIf=\"search\">\r\n            <table class=\"box-search\" *ngIf=\"items && (items).length > 5\">\r\n              <tr>\r\n      \r\n                <td class=\"area-input\">\r\n                  <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" >            \r\n                </td>\r\n      \r\n                <td class=\"area-icon\">\r\n                  <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\r\n                  <button class=\"box-action\" 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\">\r\n            <ng-container *ngFor=\"let item of items; let i = index\">\r\n            \r\n                <label class=\"box-label\">\r\n                    <div class=\"box-value\" [title]=\"item\"  >\r\n                    {{ item }}          \r\n                    </div>\r\n                    <div class=\"box-action\">\r\n                        <button\r\n                            class=\"box-action\"\r\n                            [disabled]=\"items === undefined || (items && items.length === 0) || disabled || loading\"\r\n                            title=\"Remover\"\r\n                            type=\"button\"\r\n                            (click)=\"removeItem(item, i)\">\r\n                            <i class=\"fas fa-times\"></i>\r\n                        </button>\r\n                    </div>\r\n                </label>\r\n\r\n            </ng-container>\r\n        </div>\r\n\r\n        <div class=\"mt-5\" *ngIf=\"items && (items).length > 5\">\r\n            <div class=\"btn-remove-all\">\r\n                <button class=\"box-action\" type=\"button\" (click)=\"remove_all()\">\r\n                    Limpar toda a lista\r\n                </button>\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n</div>", styles: ["table{border-collapse:collapse}td,th{padding:0;margin:0}::placeholder{font-style:italic;color:#999;text-transform:none!important}.box-input{border-radius:5px 0 0 5px}.box-input .input{background-color:#fff;border-radius:5px 0 0 5px}.box-input .ng-invalid{border-color:transparent!important}.bc-l{background-color:#fff;border-left:1px solid var(--tc-gray-300)}.bc-r{background-color:#fff;border-right:1px solid var(--tc-gray-300)}.box-input-data-list{background-color:#fff;border-left:1px solid var(--tc-gray-300);border-top:1px solid var(--tc-gray-300);border-bottom:1px solid var(--tc-gray-300);border-radius:5px 0 0 5px;height:42px;padding-left:5px}.group-input-action{width:100%;background-color:#fff}.group-input-action input{height:40px;border:none}.group-input-action td{height:40px;border-top:1px solid var(--tc-gray-300);border-bottom:1px solid var(--tc-gray-300);background-color:transparent!important}.count-list{width:90px;text-align:center;background:#fff}.count-list .input{background-color:transparent}.count-list .input input{height:40px;border:none;text-align:center;width:100px;background-color:transparent}.action-input-arrow{width:30px;background:transparent;position:relative;z-index:0}.action-input-arrow button{cursor:pointer;background-color:transparent;text-align:center;font-size:15px;border-top:none;border-right:none;border-bottom:none;border-left:none;width:30px;border-radius:0 3px 3px 0;position:relative;bottom:1px;color:#666}.action-input-arrow button i{position:relative;z-index:-1}.action-input{width:50px;padding-left:3px}.action-input .tc-btn{width:100%!important;padding:0;text-align:center;border-radius:4px 16px 16px 3px;display:block;margin:0;height:40px;border:1px solid var(--tc-primary)!important}.action-input .tc-btn i{width:100%;text-align:center;padding:0!important;margin:0!important;font-size:18px;position:relative;top:1px}.box-itens-selected{display:block;padding:9px;background-color:#ededed;border-radius:4px;width:100%}.box-itens-selected .box-label{position:relative;display:inline-block;height:35px;min-width:60px;background-color:var(--white);color:var(--tc-gray-500);padding:8px 24px 10px 15px;border:1px solid var(--tc-primary);border-radius:5px;margin:2px;width:auto;max-width:100%}.box-itens-selected .box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-itens-selected .box-label div.box-action{position:absolute;right:4px;top:7px}.box-itens-selected .box-label div.box-action button{color:var(--tc-primary);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-itens-selected .box-label div.box-action button i{font-size:12px}.box-itens-selected .box-label div.box-action button:hover{color:var(--red)}.to-hide{display:none}.dropdown-toggle:after{display:none!important}.tc-dropdown{position:relative}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid var(--tc-gray-300);position:absolute;z-index:1;background-color:#f9f9f9}.tc-dropdown .area-options{padding-right:8px;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 var(--tc-gray-300);padding:10px}.btn-remove-all{text-align:right}.btn-remove-all button{background-color:transparent;border:none;color:#dd5353;cursor:pointer}.btn-remove-all button:hover{color:red!important}.info-no-value{color:#dd5353}\n"] }]
+            args: [{ selector: 'tcloud-ui-multiples-values', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1, CUSTOM_INPUT_VALIDATORS], template: "<div class=\"tcloud-ui-multiples-values tc-dropdown\" id=\"area-{{ id }}\" [class.tc-parent-validation]=\"use_validation_required\">\r\n\r\n\r\n    <form #_formulario=\"ngForm\">\r\n\r\n        <!-- {{ input_items }} -->\r\n\r\n        <div class=\"dropdown-toggle\" id=\"{{id}}\" [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"'false'\">\r\n\r\n            <table style=\"width: 100%;\">\r\n                <tr>\r\n                    <td>\r\n                        <table class=\"group-input-action\">\r\n                            <tr>\r\n                                <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\r\n                                    <ng-container *ngIf=\"listItems && (listItems).length > 0\">\r\n                                        <div class=\"input\" (click)=\"show_itens = false\">\r\n                                            <tcloud-ui-data-list [placeholder]=\"placeholder_list\" [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [listItems]=\"listItems\" [(ngModel)]=\"input_items\" (onChange)=\"toEnterKey(input_items)\"></tcloud-ui-data-list>\r\n                                        </div>\r\n                                    </ng-container>\r\n            \r\n                                    <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\r\n                                        <div class=\"input\">\r\n                                            <input \r\n                                                required\r\n                                                [pattern]=\"pattern\"\r\n                                                (keydown.enter)=\"toEnterKey(input_items)\"\r\n                                                [disabled]=\"disabled\"\r\n                                                [class.text-lowercase]=\"lowercase\"\r\n                                                [class.text-uppercase]=\"uppercase\"                                                \r\n                                                type=\"text\" name=\"items\" class=\"tc-form-control area-text\" [(ngModel)]=\"input_items\" [placeholder]=\"placeholder_list\" required [title]=\"placeholder_list\">\r\n                                        \r\n                                        </div>\r\n                                    </ng-container>\r\n                                </td>\r\n                                <td class=\"count-list\" *ngIf=\"(items && items.length > 0)\">\r\n                                    <div class=\"input\">\r\n                                        <input type=\"text\" value=\"{{ items.length }} {{ (items.length > 1) ? 'registros' : 'registro' }}\" disabled readonly>                            \r\n                                    </div>\r\n                                </td>\r\n                                <td class=\"count-list\" *ngIf=\"!items || (items && items.length === 0)\">\r\n                                    <div class=\"input\"><input type=\"text\" class=\"info-no-value\" value=\"Vazio\" disabled readonly></div>                       \r\n                                </td>\r\n                                <td class=\"action-input-arrow  bc-r\">\r\n                                    <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\r\n                                        <i class=\"fas fa-angle-up\" *ngIf=\"show_itens\"></i>\r\n                                        <i class=\"fas fa-angle-down\" *ngIf=\"!show_itens\"></i>\r\n                                    </button>\r\n                                </td>\r\n                                \r\n                            </tr>\r\n                        </table> \r\n                    </td>\r\n                    <td style=\"width: 45px;\">\r\n                        <table>\r\n                            <tr>\r\n                                <td class=\"action-input\" *ngIf=\"!disabled\">\r\n                                    <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\r\n                                        <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-primary\" (click)=\"add_items()\" title=\"Adicionar item\">\r\n                                            <i class=\"fas fa-plus\"></i>\r\n                                        </button>\r\n                                    </ng-container>\r\n                                    <ng-container *ngIf=\"listItems && (listItems).length > 0\">\r\n                                        <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-primary\" (click)=\"add_items_by_data_list(input_items)\" title=\"Adicionar item\">\r\n                                            <i class=\"fas fa-plus\"></i>\r\n                                        </button>\r\n                                    </ng-container>\r\n                                </td>\r\n                            </tr>\r\n                        </table>\r\n                    </td>\r\n                </tr>\r\n            </table>\r\n\r\n            <!-- <table class=\"group-input-action\">\r\n                <tr>\r\n                    <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\r\n                        <ng-container *ngIf=\"listItems && (listItems).length > 0\">\r\n                            <div class=\"input\" (click)=\"show_itens = false\">\r\n                                <tcloud-ui-data-list [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [listItems]=\"listItems\" [(ngModel)]=\"input_items\"></tcloud-ui-data-list>\r\n                            </div>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\r\n                            <div class=\"input\">\r\n                                <input \r\n                                    (keydown.enter)=\"add_items();toOpen()\"\r\n                                    [disabled]=\"disabled\"\r\n                                    [class.text-lowercase]=\"lowercase\"\r\n                                    [class.text-uppercase]=\"uppercase\"\r\n                                    type=\"text\" name=\"items\" class=\"tc-form-control\" [(ngModel)]=\"input_items\" [placeholder]=\"placeholder_list\" required [title]=\"placeholder_list\">\r\n                            \r\n                            </div>\r\n                        </ng-container>\r\n                    </td>\r\n                    <td class=\"count-list\" *ngIf=\"(items && items.length > 0)\">\r\n                        <div class=\"input\">\r\n                            <input type=\"text\" value=\"{{ items.length }} {{ (items.length > 1) ? 'registros' : 'registro' }}\" disabled readonly>                            \r\n                        </div>\r\n                    </td>\r\n                    <td class=\"count-list\" *ngIf=\"!items || (items && items.length === 0)\">\r\n                        <div class=\"input\"><input type=\"text\" value=\"Vazio\" disabled readonly></div>                       \r\n                    </td>\r\n                    <td class=\"action-input-arrow  bc-r\">\r\n                        <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\r\n                            <i class=\"fas fa-angle-up\" *ngIf=\"show_itens\"></i>\r\n                            <i class=\"fas fa-angle-down\" *ngIf=\"!show_itens\"></i>\r\n                        </button>\r\n                    </td>\r\n                    <td class=\"action-input\" *ngIf=\"!disabled\">\r\n                        <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\r\n                            <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-primary btn-new-green\" (click)=\"add_items()\" title=\"Adicionar item\">\r\n                                <i class=\"fas fa-plus\"></i>\r\n                            </button>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"listItems && (listItems).length > 0\">\r\n                            <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-primary btn-new-green\" (click)=\"add_items_by_data_list(input_items)\" title=\"Adicionar item\">\r\n                                <i class=\"fas fa-plus\"></i>\r\n                            </button>\r\n                        </ng-container>\r\n                    </td>\r\n                </tr>\r\n            </table> -->\r\n        </div>\r\n        \r\n        <!-- <pre>\r\n            {{ items | json }}\r\n        </pre> -->\r\n\r\n    </form> \r\n\r\n    <!-- box-itens-selected  -->\r\n    <div class=\"tc-dropdown-menu box-itens-selected  {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!show_itens\" [style]=\"box_style\">\r\n        \r\n\r\n        <div class=\"line-search\" *ngIf=\"search\">\r\n            <table class=\"box-search\" *ngIf=\"items && (items).length > 5\">\r\n              <tr>\r\n      \r\n                <td class=\"area-input\">\r\n                  <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" >            \r\n                </td>\r\n      \r\n                <td class=\"area-icon\">\r\n                  <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\r\n                  <button class=\"box-action\" 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\">\r\n            <ng-container *ngFor=\"let item of items; let i = index\">\r\n            \r\n                <label class=\"box-label\" [ngStyle]=\"(maxWidthLabel) ? {'max-width': maxWidthLabel} : null\">\r\n                    <div class=\"box-value\" [title]=\"item\"  >\r\n                    {{ item }}          \r\n                    </div>\r\n                    <div class=\"box-action\">\r\n                        <button\r\n                            class=\"box-action\"\r\n                            [disabled]=\"items === undefined || (items && items.length === 0) || disabled || loading\"\r\n                            title=\"Remover\"\r\n                            type=\"button\"\r\n                            (click)=\"removeItem(item, i)\">\r\n                            <i class=\"fas fa-times\"></i>\r\n                        </button>\r\n                    </div>\r\n                </label>\r\n\r\n            </ng-container>\r\n        </div>\r\n\r\n        <div class=\"mt-5\" *ngIf=\"items && (items).length > 5\">\r\n            <div class=\"btn-remove-all\">\r\n                <button class=\"box-action\" type=\"button\" (click)=\"remove_all()\">\r\n                    Limpar toda a lista\r\n                </button>\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n</div>", styles: ["table{border-collapse:collapse}td,th{padding:0;margin:0}::placeholder{font-style:italic;color:#999;text-transform:none!important}.box-input{border-radius:5px 0 0 5px}.box-input .input{background-color:#fff;border-radius:5px 0 0 5px}.box-input .ng-invalid{border-color:transparent!important}.bc-l{background-color:#fff;border-left:1px solid var(--tc-gray-300)}.bc-r{background-color:#fff;border-right:1px solid var(--tc-gray-300)}.box-input-data-list{background-color:#fff;border-left:1px solid var(--tc-gray-300);border-top:1px solid var(--tc-gray-300);border-bottom:1px solid var(--tc-gray-300);border-radius:5px 0 0 5px;height:42px;padding-left:5px}@media (max-width: 900px){.box-input-data-list{max-width:200px}}.group-input-action{width:100%;background-color:#fff}.group-input-action input{height:40px;border:none}.group-input-action td{height:40px;border-top:1px solid var(--tc-gray-300);border-bottom:1px solid var(--tc-gray-300);background-color:transparent!important}.count-list{width:90px;text-align:center;background:#fff}.count-list .input{background-color:transparent}.count-list .input input{height:40px;border:none;text-align:center;width:100px;background-color:transparent}.action-input-arrow{width:30px;background:transparent;position:relative;z-index:0}.action-input-arrow button{cursor:pointer;background-color:transparent;text-align:center;font-size:15px;border-top:none;border-right:none;border-bottom:none;border-left:none;width:30px;border-radius:0 3px 3px 0;position:relative;bottom:1px;color:#666}.action-input-arrow button i{position:relative;z-index:-1}.action-input{width:50px;padding-left:3px}.action-input .tc-btn{width:100%!important;padding:0;text-align:center;border-radius:4px 16px 16px 3px;display:block;margin:0;height:40px;border:1px solid var(--tc-primary)!important}.action-input .tc-btn i{width:100%;text-align:center;padding:0!important;margin:0!important;font-size:18px;position:relative;top:1px}.box-itens-selected{display:block;padding:9px;background-color:#ededed;border-radius:4px;width:100%}.box-itens-selected .box-label{position:relative;display:inline-block;height:35px;min-width:60px;color:var(--tc-primary);padding:8px 24px 10px 15px;border:1px solid var(--tc-primary);border-radius:5px;margin:2px;background-color:var(--white);width:auto;max-width:100%}.box-itens-selected .box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-itens-selected .box-label div.box-action{position:absolute;right:4px;top:7px}.box-itens-selected .box-label div.box-action button{color:var(--tc-primary);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-itens-selected .box-label div.box-action button i{font-size:12px}.box-itens-selected .box-label div.box-action button:hover{color:var(--red)}.to-hide{display:none}.dropdown-toggle:after{display:none!important}.tc-dropdown{position:relative}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid var(--tc-gray-300);position:absolute;z-index:1;background-color:#f9f9f9}.tc-dropdown .area-options{padding-right:8px;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 var(--tc-gray-300);padding:10px}.btn-remove-all{text-align:right}.btn-remove-all button{background-color:transparent;border:none;color:#dd5353;cursor:pointer}.btn-remove-all button:hover{color:red!important}.info-no-value{color:#dd5353}.area-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { listItems: [{
                 type: Input
             }], pattern: [{
@@ -5383,6 +5395,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], lowercase: [{
                 type: Input
+            }], maxWidthLabel: [{
+                type: Input
+            }], tcChange: [{
+                type: Output
             }] } });
 class TCloudUiMultiplesValuesModule {