@dev-tcloud/tcloud-ui 0.0.94 → 0.0.95

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

@@ -1214,7 +1214,6 @@ class TCloudUiDataListOptionComponent {
         return `data-list-option-${Math.floor(Math.random() * Math.floor(Math.random() * Date.now()))}`;
     }
     setSelectedItem(value) {
-        console.log('setSelectedItem', value);
         if (value === '') {
             this.value = '';
         }
@@ -1642,7 +1641,6 @@ class TCloudUiChoiceIssuesComponent {
         this.onTouchedCallback = fn;
     }
     setV(v) {
-        console.log('setV', v);
         this.value = v;
         this.onChange.emit(v);
     }
@@ -2730,7 +2728,6 @@ class TCloudUiDatepickerComponent {
         this.onChangeCallback = noop$3;
     }
     set ngModel(v) {
-        //console.log('ngModel', v);
         if (v && v !== this.innerValue) {
             this.innerValue = v; //this.toSetMask(v); 
             this.onChange.emit(v);
@@ -2815,15 +2812,12 @@ class TCloudUiDatepickerComponent {
                         this.onChange.emit(this.innerValue);
                         this.ngModelChange.emit(this.innerValue);
                     }
-                    //console.log('input_datepicker', input_datepicker['value'] );
                 });
                 input_datepicker.addEventListener('changeDate', (event) => {
-                    //console.log(event);
                     if (event?.detail?.date) {
                         this.toSelectedDate(event.detail);
                     }
                     else {
-                        //console.log('event null');
                         this.innerValue = '';
                         this.ngModelChange.emit(this.innerValue);
                     }
@@ -2913,7 +2907,6 @@ class TCloudUiDatepickerComponent {
     ;
     //set accessor including call the onchange callback
     set value(v) {
-        //console.log('value', v);
         if (v !== this.innerValue) {
             this.innerValue = v; // this.toSetMask(v);      
             this.onChangeCallback(v);
@@ -3058,7 +3051,6 @@ class TCloudUiDatepickerTimeComponent {
         }
     }
     set_date_by_datepicker(date) {
-        console.log('set_date_by_datepicker date', date);
         if (date) {
             date = (date).replace(/-/g, '/');
             let date_part = (date).split('/');
@@ -3261,10 +3253,10 @@ class TCloudUiDatepickerTimeComponent {
     }
 }
 TCloudUiDatepickerTimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDatepickerTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TCloudUiDatepickerTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiDatepickerTimeComponent, selector: "tcloud-ui-datepicker-time", inputs: { UTC: "UTC", ngModel: "ngModel", useOptionsDateTime: "useOptionsDateTime" }, outputs: { ngModelChange: "ngModelChange", onChange: "onChange", eventChange: "eventChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2], viewQueries: [{ propertyName: "datepickertime", first: true, predicate: ["_datepickertime"], descendants: true }], ngImport: i0, template: "<input type=\"hidden\" value=\"{{ innerValue }}\" #_datepickertime >\r\n<form #_formulario=\"ngForm\">\r\n  <div class=\"input-control-time\">\r\n    <div class=\"form-control-time\">\r\n\r\n      <table style=\"width: 100%;\">\r\n        <tr>\r\n          <td>\r\n\r\n            <div class=\"input-options-date\">\r\n            <table class=\"form-time\">\r\n              <tr>\r\n                <!-- <td class=\"area-icon\"><div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fas fa-calendar-alt\"></i></div></td> -->\r\n                <td class=\"area-input-date\">\r\n                  <ng-container *ngIf=\"show_date_picker\">\r\n                    <tcloud-ui-datepicker #_tclouddatepickertime [childInputDateTime]=\"true\" [modeInput]=\"true\" name=\"date\" [useBorder]=\"false\" [(ngModel)]=\"DD_MM_YYYY\" (onChange)=\"toSetDate($event)\" ></tcloud-ui-datepicker>\r\n                  </ng-container>\r\n                </td>\r\n                \r\n                <td class=\"area-delimiter\"><div class=\"delimiter-time\"></div></td>\r\n                <td class=\"area-input-hour\">\r\n                  <!--<input type=\"text\" placeholder=\"HH\" (keyup)=\"toSetTime()\" [(ngModel)]=\"HH\" maxlength=\"2\" name=\"hh\" pattern=\"[0][0-9]|[1][0-9]|2[0-3]\">-->\r\n                  <select class=\"select-time-date\" (change)=\"toSetTime()\" [(ngModel)]=\"HH\" name=\"hh\">\r\n                    <ng-container *ngFor=\"let hh of option_HH\">\r\n                      <option [ngValue]=\"hh\">{{ hh }}</option>\r\n                    </ng-container>\r\n                  </select>\r\n                </td>\r\n                <td class=\"area-delimiter\"><div class=\"delimiter-time\">:</div></td>\r\n                <td class=\"area-input-minute\">\r\n                  <!--<input type=\"text\" placeholder=\"MM\" (keyup)=\"toSetTime()\" [(ngModel)]=\"MM\" maxlength=\"2\" name=\"mm\" pattern=\"[012345][0-9]\">-->\r\n                  <select class=\"select-time-date\" (change)=\"toSetTime()\" [(ngModel)]=\"MM\" name=\"mm\">\r\n                    <ng-container *ngFor=\"let mm of option_MM\">\r\n                      <option [value]=\"mm\">{{ mm }}</option>\r\n                    </ng-container>\r\n                  </select>\r\n                </td>\r\n                <td class=\"area-clean\"></td>\r\n              </tr>\r\n            </table>\r\n\r\n            <div class=\"description-options-date\" *ngIf=\"value_options_date_time !== ''\">\r\n              <strong>{{ description_options_date_time }}</strong>\r\n\r\n                <!-- <div class=\"area-action-date-time-selected\">\r\n                  <button class=\"btn-icon\" type=\"button\" (click)=\"closedTimeDescription()\" >\r\n                    <i class=\"fas fa-times\"></i>\r\n                  </button>                  \r\n                </div> -->\r\n            </div>\r\n\r\n\r\n          </div>\r\n\r\n          </td>\r\n          <td *ngIf=\"useOptionsDateTime && options_date_time && (options_date_time).length > 0\" style=\"width: 20px\">\r\n            <button type=\"button\" class=\"icon-short-time\" (click)=\"open_options_date_time = !open_options_date_time\" [title]=\"description_options_date_time\" >\r\n              <i *ngIf=\"!open_options_date_time\" class=\"fas fa-caret-down\"></i>\r\n              <i *ngIf=\"open_options_date_time\" class=\"fas fa-caret-up\"></i>\r\n            </button>\r\n\r\n            <ng-container *ngIf=\"value_options_date_time !== ''\">\r\n              <button class=\"btn-icon-close\" type=\"button\" (click)=\"closedTimeDescription()\" >\r\n                <i class=\"fas fa-times\"></i>\r\n              </button> \r\n            </ng-container>\r\n\r\n          </td>\r\n        </tr>\r\n        <tr *ngIf=\"useOptionsDateTime && options_date_time && (options_date_time).length > 0 && open_options_date_time\">\r\n          <td colspan=\"2\">\r\n              <tcloud-ui-data-list \r\n                name=\"value_options_date_time\"\r\n                [showInput]=\"false\" \r\n                [search]=\"false\" \r\n                [open]=\"true\" \r\n                [listItems]=\"options_date_time\" \r\n                (onClosed)=\"onClosedOptionsDateTime()\"\r\n                [ngModel]=\"value_options_date_time\"\r\n                (ngModelChange)=\"onChangeOptionsDateTime($event)\"\r\n                >\r\n              </tcloud-ui-data-list>\r\n\r\n              \r\n\r\n\r\n            \r\n          </td>\r\n        </tr>\r\n      </table>\r\n\r\n      \r\n    </div>\r\n  </div>\r\n</form>", styles: ["@charset \"UTF-8\";.input-control-time{background-color:#fff;border:1px solid #ccc;border-radius:3px;width:100%;height:40px}.form-control-time{max-width:220px;border:none}.form-control-time input{text-align:center}.form-time{width:100%}.delimiter-time{width:100%;text-align:center}.delimiter-time-icon{border:none;height:35px;width:10px;padding:4px;font-size:17px;text-align:center;opacity:.6}.area-icon{width:25px}.area-input-date{width:100px}.area-delimiter{width:2px;text-align:center}.area-input-hour,.area-input-minute{text-align:center;width:28px}.area-input-hour input,.area-input-minute input{height:35px;width:28px;text-align:center;color:#999;font-weight:600;font-style:italic}.area-input-hour input:focus,.area-input-minute input:focus{outline:none}.area-clean{width:15px}input,.datepicker-input{border:none!important}.select-time-date{border:none;background-color:transparent;width:40px;height:35px;padding:0;text-align:center;font-size:13px;color:#777;position:relative;top:-2px;-webkit-appearance:none;appearance:none}.select-time-date:focus{box-shadow:0 0;border:0 none;outline:0}.btn-icon-close{border:none;background-color:#fff;cursor:pointer;padding:0;color:#aaa;width:17px;position:relative;top:-20px;z-index:1}.btn-icon-close:hover{color:#c43a3a!important}.icon-short-time{border:none;background:none;cursor:pointer;font-size:15px;color:#8a8a8a}.input-options-date{position:relative}.input-options-date .description-options-date{position:absolute;left:0;top:0;padding:5px 10px;background-color:#fff;width:100%;height:34px;overflow:hidden}.input-options-date .description-options-date strong{font-size:14px;font-weight:400;padding-left:5px}.input-options-date .area-action-date-time-selected{width:20px;display:block;float:right;text-align:right;position:relative;top:-2px;left:30px;z-index:1}\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: "component", type: TCloudUiDatepickerComponent, selector: "tcloud-ui-datepicker", inputs: ["multiple", "maxNumberOfDates", "daysOfWeekDisabled", "minDate", "maxDate", "datesDisabled", "modeInput", "useBorder", "childInputDateTime", "ngModel", "code"], outputs: ["onChange", "ngModelChange"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.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.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"] }] });
+TCloudUiDatepickerTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiDatepickerTimeComponent, selector: "tcloud-ui-datepicker-time", inputs: { UTC: "UTC", ngModel: "ngModel", useOptionsDateTime: "useOptionsDateTime" }, outputs: { ngModelChange: "ngModelChange", onChange: "onChange", eventChange: "eventChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2], viewQueries: [{ propertyName: "datepickertime", first: true, predicate: ["_datepickertime"], descendants: true }], ngImport: i0, template: "<input type=\"hidden\" value=\"{{ innerValue }}\" #_datepickertime >\r\n<form #_formulario=\"ngForm\">\r\n  <div class=\"input-control-time\">\r\n    <div class=\"form-control-time\">\r\n\r\n      <table style=\"width: 100%;\">\r\n        <tr>\r\n          <td>\r\n\r\n            <div class=\"input-options-date\">\r\n            <table class=\"form-time\">\r\n              <tr>\r\n                <!-- <td class=\"area-icon\"><div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fas fa-calendar-alt\"></i></div></td> -->\r\n                <td class=\"area-input-date\">\r\n                  <ng-container *ngIf=\"show_date_picker\">\r\n                    <tcloud-ui-datepicker #_tclouddatepickertime [childInputDateTime]=\"true\" [modeInput]=\"true\" name=\"date\" [useBorder]=\"false\" [(ngModel)]=\"DD_MM_YYYY\" (onChange)=\"toSetDate($event)\" ></tcloud-ui-datepicker>\r\n                  </ng-container>\r\n                </td>\r\n                \r\n                <td class=\"area-delimiter\"><div class=\"delimiter-time\"></div></td>\r\n                <td class=\"area-input-hour\">\r\n                  <!--<input type=\"text\" placeholder=\"HH\" (keyup)=\"toSetTime()\" [(ngModel)]=\"HH\" maxlength=\"2\" name=\"hh\" pattern=\"[0][0-9]|[1][0-9]|2[0-3]\">-->\r\n                  <select class=\"select-time-date\" (change)=\"toSetTime()\" [(ngModel)]=\"HH\" name=\"hh\">\r\n                    <ng-container *ngFor=\"let hh of option_HH\">\r\n                      <option [ngValue]=\"hh\">{{ hh }}</option>\r\n                    </ng-container>\r\n                  </select>\r\n                </td>\r\n                <td class=\"area-delimiter\"><div class=\"delimiter-time\">:</div></td>\r\n                <td class=\"area-input-minute\">\r\n                  <!--<input type=\"text\" placeholder=\"MM\" (keyup)=\"toSetTime()\" [(ngModel)]=\"MM\" maxlength=\"2\" name=\"mm\" pattern=\"[012345][0-9]\">-->\r\n                  <select class=\"select-time-date\" (change)=\"toSetTime()\" [(ngModel)]=\"MM\" name=\"mm\">\r\n                    <ng-container *ngFor=\"let mm of option_MM\">\r\n                      <option [value]=\"mm\">{{ mm }}</option>\r\n                    </ng-container>\r\n                  </select>\r\n                </td>\r\n                <td class=\"area-clean\"></td>\r\n              </tr>\r\n            </table>\r\n\r\n            <div class=\"description-options-date\" *ngIf=\"value_options_date_time !== ''\">\r\n              <strong>{{ description_options_date_time }}</strong>\r\n\r\n                <!-- <div class=\"area-action-date-time-selected\">\r\n                  <button class=\"btn-icon\" type=\"button\" (click)=\"closedTimeDescription()\" >\r\n                    <i class=\"fas fa-times\"></i>\r\n                  </button>                  \r\n                </div> -->\r\n            </div>\r\n\r\n\r\n          </div>\r\n\r\n          </td>\r\n          <td *ngIf=\"useOptionsDateTime && options_date_time && (options_date_time).length > 0\" style=\"width: 20px\">\r\n            <button type=\"button\" class=\"icon-short-time\" (click)=\"open_options_date_time = !open_options_date_time\" [title]=\"description_options_date_time\" >\r\n              <i *ngIf=\"!open_options_date_time\" class=\"fas fa-caret-down\"></i>\r\n              <i *ngIf=\"open_options_date_time\" class=\"fas fa-caret-up\"></i>\r\n            </button>\r\n\r\n            <ng-container *ngIf=\"value_options_date_time !== ''\">\r\n              <button class=\"btn-icon-close\" type=\"button\" (click)=\"closedTimeDescription()\" >\r\n                <i class=\"fas fa-times\"></i>\r\n              </button> \r\n            </ng-container>\r\n\r\n          </td>\r\n        </tr>\r\n        <tr *ngIf=\"useOptionsDateTime && options_date_time && (options_date_time).length > 0 && open_options_date_time\">\r\n          <td colspan=\"2\">\r\n              <tcloud-ui-data-list \r\n                name=\"value_options_date_time\"\r\n                [showInput]=\"false\" \r\n                [search]=\"false\" \r\n                [open]=\"true\" \r\n                [listItems]=\"options_date_time\" \r\n                (onClosed)=\"onClosedOptionsDateTime()\"\r\n                [ngModel]=\"value_options_date_time\"\r\n                (ngModelChange)=\"onChangeOptionsDateTime($event)\"\r\n                >\r\n              </tcloud-ui-data-list>\r\n\r\n              \r\n\r\n\r\n            \r\n          </td>\r\n        </tr>\r\n      </table>\r\n\r\n      \r\n    </div>\r\n  </div>\r\n</form>", styles: ["@charset \"UTF-8\";.input-control-time{background-color:#fff;border:1px solid #ccc;border-radius:3px;width:100%;height:40px}.form-control-time{max-width:220px;border:none}.form-control-time input{text-align:center}.form-time{width:100%}.form-time td:first-child{overflow:hidden}.delimiter-time{width:100%;text-align:center}.delimiter-time-icon{border:none;height:35px;width:10px;padding:4px;font-size:17px;text-align:center;opacity:.6}.area-icon{width:25px}.area-input-date{width:100px}.area-delimiter{width:2px;text-align:center}.area-input-hour,.area-input-minute{text-align:center;width:28px}.area-input-hour input,.area-input-minute input{height:35px;width:28px;text-align:center;color:#999;font-weight:600;font-style:italic}.area-input-hour input:focus,.area-input-minute input:focus{outline:none}.area-clean{width:15px}input,.datepicker-input{border:none!important}.select-time-date{border:none;background-color:transparent;width:40px;height:35px;padding:0;text-align:center;font-size:13px;color:#777;position:relative;top:-2px;-webkit-appearance:none;appearance:none}.select-time-date:focus{box-shadow:0 0;border:0 none;outline:0}.btn-icon-close{border:none;background-color:#fff;cursor:pointer;padding:0;color:#aaa;width:17px;position:relative;top:-20px;z-index:1}.btn-icon-close:hover{color:#c43a3a!important}.icon-short-time{border:none;background:none;cursor:pointer;font-size:15px;color:#8a8a8a}.input-options-date{position:relative}.input-options-date .description-options-date{position:absolute;left:0;top:0;padding:5px 10px;background-color:#fff;width:100%;height:34px;overflow:hidden}.input-options-date .description-options-date strong{font-size:14px;font-weight:400;padding-left:5px}.input-options-date .area-action-date-time-selected{width:20px;display:block;float:right;text-align:right;position:relative;top:-2px;left:30px;z-index:1}\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: "component", type: TCloudUiDatepickerComponent, selector: "tcloud-ui-datepicker", inputs: ["multiple", "maxNumberOfDates", "daysOfWeekDisabled", "minDate", "maxDate", "datesDisabled", "modeInput", "useBorder", "childInputDateTime", "ngModel", "code"], outputs: ["onChange", "ngModelChange"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.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.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: "14.2.12", ngImport: i0, type: TCloudUiDatepickerTimeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-datepicker-time', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2], template: "<input type=\"hidden\" value=\"{{ innerValue }}\" #_datepickertime >\r\n<form #_formulario=\"ngForm\">\r\n  <div class=\"input-control-time\">\r\n    <div class=\"form-control-time\">\r\n\r\n      <table style=\"width: 100%;\">\r\n        <tr>\r\n          <td>\r\n\r\n            <div class=\"input-options-date\">\r\n            <table class=\"form-time\">\r\n              <tr>\r\n                <!-- <td class=\"area-icon\"><div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fas fa-calendar-alt\"></i></div></td> -->\r\n                <td class=\"area-input-date\">\r\n                  <ng-container *ngIf=\"show_date_picker\">\r\n                    <tcloud-ui-datepicker #_tclouddatepickertime [childInputDateTime]=\"true\" [modeInput]=\"true\" name=\"date\" [useBorder]=\"false\" [(ngModel)]=\"DD_MM_YYYY\" (onChange)=\"toSetDate($event)\" ></tcloud-ui-datepicker>\r\n                  </ng-container>\r\n                </td>\r\n                \r\n                <td class=\"area-delimiter\"><div class=\"delimiter-time\"></div></td>\r\n                <td class=\"area-input-hour\">\r\n                  <!--<input type=\"text\" placeholder=\"HH\" (keyup)=\"toSetTime()\" [(ngModel)]=\"HH\" maxlength=\"2\" name=\"hh\" pattern=\"[0][0-9]|[1][0-9]|2[0-3]\">-->\r\n                  <select class=\"select-time-date\" (change)=\"toSetTime()\" [(ngModel)]=\"HH\" name=\"hh\">\r\n                    <ng-container *ngFor=\"let hh of option_HH\">\r\n                      <option [ngValue]=\"hh\">{{ hh }}</option>\r\n                    </ng-container>\r\n                  </select>\r\n                </td>\r\n                <td class=\"area-delimiter\"><div class=\"delimiter-time\">:</div></td>\r\n                <td class=\"area-input-minute\">\r\n                  <!--<input type=\"text\" placeholder=\"MM\" (keyup)=\"toSetTime()\" [(ngModel)]=\"MM\" maxlength=\"2\" name=\"mm\" pattern=\"[012345][0-9]\">-->\r\n                  <select class=\"select-time-date\" (change)=\"toSetTime()\" [(ngModel)]=\"MM\" name=\"mm\">\r\n                    <ng-container *ngFor=\"let mm of option_MM\">\r\n                      <option [value]=\"mm\">{{ mm }}</option>\r\n                    </ng-container>\r\n                  </select>\r\n                </td>\r\n                <td class=\"area-clean\"></td>\r\n              </tr>\r\n            </table>\r\n\r\n            <div class=\"description-options-date\" *ngIf=\"value_options_date_time !== ''\">\r\n              <strong>{{ description_options_date_time }}</strong>\r\n\r\n                <!-- <div class=\"area-action-date-time-selected\">\r\n                  <button class=\"btn-icon\" type=\"button\" (click)=\"closedTimeDescription()\" >\r\n                    <i class=\"fas fa-times\"></i>\r\n                  </button>                  \r\n                </div> -->\r\n            </div>\r\n\r\n\r\n          </div>\r\n\r\n          </td>\r\n          <td *ngIf=\"useOptionsDateTime && options_date_time && (options_date_time).length > 0\" style=\"width: 20px\">\r\n            <button type=\"button\" class=\"icon-short-time\" (click)=\"open_options_date_time = !open_options_date_time\" [title]=\"description_options_date_time\" >\r\n              <i *ngIf=\"!open_options_date_time\" class=\"fas fa-caret-down\"></i>\r\n              <i *ngIf=\"open_options_date_time\" class=\"fas fa-caret-up\"></i>\r\n            </button>\r\n\r\n            <ng-container *ngIf=\"value_options_date_time !== ''\">\r\n              <button class=\"btn-icon-close\" type=\"button\" (click)=\"closedTimeDescription()\" >\r\n                <i class=\"fas fa-times\"></i>\r\n              </button> \r\n            </ng-container>\r\n\r\n          </td>\r\n        </tr>\r\n        <tr *ngIf=\"useOptionsDateTime && options_date_time && (options_date_time).length > 0 && open_options_date_time\">\r\n          <td colspan=\"2\">\r\n              <tcloud-ui-data-list \r\n                name=\"value_options_date_time\"\r\n                [showInput]=\"false\" \r\n                [search]=\"false\" \r\n                [open]=\"true\" \r\n                [listItems]=\"options_date_time\" \r\n                (onClosed)=\"onClosedOptionsDateTime()\"\r\n                [ngModel]=\"value_options_date_time\"\r\n                (ngModelChange)=\"onChangeOptionsDateTime($event)\"\r\n                >\r\n              </tcloud-ui-data-list>\r\n\r\n              \r\n\r\n\r\n            \r\n          </td>\r\n        </tr>\r\n      </table>\r\n\r\n      \r\n    </div>\r\n  </div>\r\n</form>", styles: ["@charset \"UTF-8\";.input-control-time{background-color:#fff;border:1px solid #ccc;border-radius:3px;width:100%;height:40px}.form-control-time{max-width:220px;border:none}.form-control-time input{text-align:center}.form-time{width:100%}.delimiter-time{width:100%;text-align:center}.delimiter-time-icon{border:none;height:35px;width:10px;padding:4px;font-size:17px;text-align:center;opacity:.6}.area-icon{width:25px}.area-input-date{width:100px}.area-delimiter{width:2px;text-align:center}.area-input-hour,.area-input-minute{text-align:center;width:28px}.area-input-hour input,.area-input-minute input{height:35px;width:28px;text-align:center;color:#999;font-weight:600;font-style:italic}.area-input-hour input:focus,.area-input-minute input:focus{outline:none}.area-clean{width:15px}input,.datepicker-input{border:none!important}.select-time-date{border:none;background-color:transparent;width:40px;height:35px;padding:0;text-align:center;font-size:13px;color:#777;position:relative;top:-2px;-webkit-appearance:none;appearance:none}.select-time-date:focus{box-shadow:0 0;border:0 none;outline:0}.btn-icon-close{border:none;background-color:#fff;cursor:pointer;padding:0;color:#aaa;width:17px;position:relative;top:-20px;z-index:1}.btn-icon-close:hover{color:#c43a3a!important}.icon-short-time{border:none;background:none;cursor:pointer;font-size:15px;color:#8a8a8a}.input-options-date{position:relative}.input-options-date .description-options-date{position:absolute;left:0;top:0;padding:5px 10px;background-color:#fff;width:100%;height:34px;overflow:hidden}.input-options-date .description-options-date strong{font-size:14px;font-weight:400;padding-left:5px}.input-options-date .area-action-date-time-selected{width:20px;display:block;float:right;text-align:right;position:relative;top:-2px;left:30px;z-index:1}\n"] }]
+            args: [{ selector: 'tcloud-ui-datepicker-time', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2], template: "<input type=\"hidden\" value=\"{{ innerValue }}\" #_datepickertime >\r\n<form #_formulario=\"ngForm\">\r\n  <div class=\"input-control-time\">\r\n    <div class=\"form-control-time\">\r\n\r\n      <table style=\"width: 100%;\">\r\n        <tr>\r\n          <td>\r\n\r\n            <div class=\"input-options-date\">\r\n            <table class=\"form-time\">\r\n              <tr>\r\n                <!-- <td class=\"area-icon\"><div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fas fa-calendar-alt\"></i></div></td> -->\r\n                <td class=\"area-input-date\">\r\n                  <ng-container *ngIf=\"show_date_picker\">\r\n                    <tcloud-ui-datepicker #_tclouddatepickertime [childInputDateTime]=\"true\" [modeInput]=\"true\" name=\"date\" [useBorder]=\"false\" [(ngModel)]=\"DD_MM_YYYY\" (onChange)=\"toSetDate($event)\" ></tcloud-ui-datepicker>\r\n                  </ng-container>\r\n                </td>\r\n                \r\n                <td class=\"area-delimiter\"><div class=\"delimiter-time\"></div></td>\r\n                <td class=\"area-input-hour\">\r\n                  <!--<input type=\"text\" placeholder=\"HH\" (keyup)=\"toSetTime()\" [(ngModel)]=\"HH\" maxlength=\"2\" name=\"hh\" pattern=\"[0][0-9]|[1][0-9]|2[0-3]\">-->\r\n                  <select class=\"select-time-date\" (change)=\"toSetTime()\" [(ngModel)]=\"HH\" name=\"hh\">\r\n                    <ng-container *ngFor=\"let hh of option_HH\">\r\n                      <option [ngValue]=\"hh\">{{ hh }}</option>\r\n                    </ng-container>\r\n                  </select>\r\n                </td>\r\n                <td class=\"area-delimiter\"><div class=\"delimiter-time\">:</div></td>\r\n                <td class=\"area-input-minute\">\r\n                  <!--<input type=\"text\" placeholder=\"MM\" (keyup)=\"toSetTime()\" [(ngModel)]=\"MM\" maxlength=\"2\" name=\"mm\" pattern=\"[012345][0-9]\">-->\r\n                  <select class=\"select-time-date\" (change)=\"toSetTime()\" [(ngModel)]=\"MM\" name=\"mm\">\r\n                    <ng-container *ngFor=\"let mm of option_MM\">\r\n                      <option [value]=\"mm\">{{ mm }}</option>\r\n                    </ng-container>\r\n                  </select>\r\n                </td>\r\n                <td class=\"area-clean\"></td>\r\n              </tr>\r\n            </table>\r\n\r\n            <div class=\"description-options-date\" *ngIf=\"value_options_date_time !== ''\">\r\n              <strong>{{ description_options_date_time }}</strong>\r\n\r\n                <!-- <div class=\"area-action-date-time-selected\">\r\n                  <button class=\"btn-icon\" type=\"button\" (click)=\"closedTimeDescription()\" >\r\n                    <i class=\"fas fa-times\"></i>\r\n                  </button>                  \r\n                </div> -->\r\n            </div>\r\n\r\n\r\n          </div>\r\n\r\n          </td>\r\n          <td *ngIf=\"useOptionsDateTime && options_date_time && (options_date_time).length > 0\" style=\"width: 20px\">\r\n            <button type=\"button\" class=\"icon-short-time\" (click)=\"open_options_date_time = !open_options_date_time\" [title]=\"description_options_date_time\" >\r\n              <i *ngIf=\"!open_options_date_time\" class=\"fas fa-caret-down\"></i>\r\n              <i *ngIf=\"open_options_date_time\" class=\"fas fa-caret-up\"></i>\r\n            </button>\r\n\r\n            <ng-container *ngIf=\"value_options_date_time !== ''\">\r\n              <button class=\"btn-icon-close\" type=\"button\" (click)=\"closedTimeDescription()\" >\r\n                <i class=\"fas fa-times\"></i>\r\n              </button> \r\n            </ng-container>\r\n\r\n          </td>\r\n        </tr>\r\n        <tr *ngIf=\"useOptionsDateTime && options_date_time && (options_date_time).length > 0 && open_options_date_time\">\r\n          <td colspan=\"2\">\r\n              <tcloud-ui-data-list \r\n                name=\"value_options_date_time\"\r\n                [showInput]=\"false\" \r\n                [search]=\"false\" \r\n                [open]=\"true\" \r\n                [listItems]=\"options_date_time\" \r\n                (onClosed)=\"onClosedOptionsDateTime()\"\r\n                [ngModel]=\"value_options_date_time\"\r\n                (ngModelChange)=\"onChangeOptionsDateTime($event)\"\r\n                >\r\n              </tcloud-ui-data-list>\r\n\r\n              \r\n\r\n\r\n            \r\n          </td>\r\n        </tr>\r\n      </table>\r\n\r\n      \r\n    </div>\r\n  </div>\r\n</form>", styles: ["@charset \"UTF-8\";.input-control-time{background-color:#fff;border:1px solid #ccc;border-radius:3px;width:100%;height:40px}.form-control-time{max-width:220px;border:none}.form-control-time input{text-align:center}.form-time{width:100%}.form-time td:first-child{overflow:hidden}.delimiter-time{width:100%;text-align:center}.delimiter-time-icon{border:none;height:35px;width:10px;padding:4px;font-size:17px;text-align:center;opacity:.6}.area-icon{width:25px}.area-input-date{width:100px}.area-delimiter{width:2px;text-align:center}.area-input-hour,.area-input-minute{text-align:center;width:28px}.area-input-hour input,.area-input-minute input{height:35px;width:28px;text-align:center;color:#999;font-weight:600;font-style:italic}.area-input-hour input:focus,.area-input-minute input:focus{outline:none}.area-clean{width:15px}input,.datepicker-input{border:none!important}.select-time-date{border:none;background-color:transparent;width:40px;height:35px;padding:0;text-align:center;font-size:13px;color:#777;position:relative;top:-2px;-webkit-appearance:none;appearance:none}.select-time-date:focus{box-shadow:0 0;border:0 none;outline:0}.btn-icon-close{border:none;background-color:#fff;cursor:pointer;padding:0;color:#aaa;width:17px;position:relative;top:-20px;z-index:1}.btn-icon-close:hover{color:#c43a3a!important}.icon-short-time{border:none;background:none;cursor:pointer;font-size:15px;color:#8a8a8a}.input-options-date{position:relative}.input-options-date .description-options-date{position:absolute;left:0;top:0;padding:5px 10px;background-color:#fff;width:100%;height:34px;overflow:hidden}.input-options-date .description-options-date strong{font-size:14px;font-weight:400;padding-left:5px}.input-options-date .area-action-date-time-selected{width:20px;display:block;float:right;text-align:right;position:relative;top:-2px;left:30px;z-index:1}\n"] }]
         }], propDecorators: { UTC: [{
                 type: Input
             }], ngModel: [{
@@ -3456,10 +3448,10 @@ class TCloudUiRangeDateComponent {
     }
 }
 TCloudUiRangeDateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiRangeDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TCloudUiRangeDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiRangeDateComponent, selector: "range-date", inputs: { defaultValuePeriodStartStop: "defaultValuePeriodStartStop", required: "required", descriptionStart: "descriptionStart", descriptionStop: "descriptionStop", UTC: "UTC" }, outputs: { onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1, CUSTOM_INPUT_VALIDATORS$1], ngImport: i0, template: "<table class=\"area-range-date\">\n    <tr>\n\n        <td>\n            <div *ngIf=\"mode === 'select'\">\n                <div class=\"description-period\">Per\u00EDodo</div>\n                <select name=\"periodo\" class=\"form-control tc-form-control\" (change)=\"onChangeOptionsDateTime($event.target)\" [(ngModel)]=\"defaultValuePeriodStartStop\"  >\n                    <option value=\"\"></option> \n                    <ng-container *ngFor=\"let item of options_date_time\">\n                        <option [value]=\"item.value\">{{ item.description }}</option>\n                    </ng-container>\n                </select>\n            </div>\n            <div *ngIf=\"mode === 'datepickers'\">\n\n                <table class=\"area-range-datepickers\">\n                    <tr>\n                        <td>\n                            <div class=\"description-start\">{{ descriptionStart }}</div>\n                            <tcloud-ui-datepicker-time \n                                #_input_start \n                                [UTC]=\"UTC\"\n                                [(ngModel)]=\"result.start\" \n                                name=\"input_start\" \n                                (eventChange)=\"onChangeStartDateTime(_input_start)\">\n                            </tcloud-ui-datepicker-time>\n                        </td>\n                        <td>\n                            <div class=\"description-stop\">{{ descriptionStop }}</div>\n                            <tcloud-ui-datepicker-time \n                                #_input_stop\n                                [UTC]=\"UTC\"\n                                [(ngModel)]=\"result.stop\" \n                                name=\"input_stop\" \n                                (eventChange)=\"onChangeStopDateTime(_input_stop)\">\n                            </tcloud-ui-datepicker-time>\n                        </td>\n                    </tr>\n                </table>\n\n            </div>\n        </td>\n\n        <td>\n            <button class=\"btn-mode-range-date\" [class.active]=\"mode === 'select'\" (click)=\"toggle()\" type=\"button\">\n\n                <i *ngIf=\"mode === 'select'\" class=\"far fa-calendar-alt\" title=\"Alterar para calend\u00E1rio\"></i>\n                <i *ngIf=\"mode !== 'select'\" class=\"fas fa-calendar-week\" title=\"Selecionar per\u00EDodo\"></i>\n\n                <!-- <div *ngIf=\"mode === 'select'\">Exibir<br>Calend\u00E1rio</div> -->\n                <!-- <div *ngIf=\"mode !== 'select'\">Exibir<br>Per\u00EDodo</div> -->\n            </button>\n        </td>\n\n    </tr>\n</table>", styles: [".area-range-date{width:100%}.area-range-date tr td:first-child{width:calc(100% - 35px)}.area-range-date tr td:first-child select{color:#535353;border-radius:3px 0 0 3px!important}.area-range-date tr td:first-child .area-range-datepickers{width:100%}.area-range-date tr td:first-child .area-range-datepickers td{width:50%!important}.area-range-date tr td:last-child{width:35px}.area-range-date tr td:last-child .btn-mode-range-date{width:100%;text-align:center;border:1px solid #ccc;background-color:#fff;font-size:17px;line-height:1;cursor:pointer;color:#6c6c6c;height:40px;border-radius:0 3px 3px 0}.area-range-date tr td:last-child .btn-mode-range-date:focus{color:#403d3d}.active{background-color:#eee!important}.description-period,.description-start{position:relative;left:17px;top:-15px;line-height:0}.description-stop{position:relative;top:-15px;line-height:0}\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"] }, { kind: "component", type: TCloudUiDatepickerTimeComponent, selector: "tcloud-ui-datepicker-time", inputs: ["UTC", "ngModel", "useOptionsDateTime"], outputs: ["ngModelChange", "onChange", "eventChange"] }] });
+TCloudUiRangeDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiRangeDateComponent, selector: "range-date", inputs: { defaultValuePeriodStartStop: "defaultValuePeriodStartStop", required: "required", descriptionStart: "descriptionStart", descriptionStop: "descriptionStop", UTC: "UTC" }, outputs: { onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1, CUSTOM_INPUT_VALIDATORS$1], ngImport: i0, template: "<table class=\"area-range-date\">\n    <tr>\n\n        <td>\n            <div *ngIf=\"mode === 'select'\">\n                <div class=\"description-period\">Per\u00EDodo</div>\n                <select name=\"periodo\" class=\"form-control tc-form-control\" (change)=\"onChangeOptionsDateTime($event.target)\" [(ngModel)]=\"defaultValuePeriodStartStop\"  >\n                    <option value=\"\"></option> \n                    <ng-container *ngFor=\"let item of options_date_time\">\n                        <option [value]=\"item.value\">{{ item.description }}</option>\n                    </ng-container>\n                </select>\n            </div>\n            <div *ngIf=\"mode === 'datepickers'\">\n\n                <table class=\"area-range-datepickers\">\n                    <tr>\n                        <td>\n                            <div class=\"description-start\">{{ descriptionStart }}</div>\n                            <tcloud-ui-datepicker-time \n                                #_input_start \n                                [UTC]=\"UTC\"\n                                [(ngModel)]=\"result.start\" \n                                name=\"input_start\" \n                                (eventChange)=\"onChangeStartDateTime(_input_start)\">\n                            </tcloud-ui-datepicker-time>\n                        </td>\n                        <td>\n                            <div class=\"description-stop\">{{ descriptionStop }}</div>\n                            <tcloud-ui-datepicker-time \n                                #_input_stop\n                                [UTC]=\"UTC\"\n                                [(ngModel)]=\"result.stop\" \n                                name=\"input_stop\" \n                                (eventChange)=\"onChangeStopDateTime(_input_stop)\">\n                            </tcloud-ui-datepicker-time>\n                        </td>\n                    </tr>\n                </table>\n\n            </div>\n        </td>\n\n        <td>\n            <button class=\"btn-mode-range-date\" [class.active]=\"mode === 'select'\" (click)=\"toggle()\" type=\"button\">\n\n                <i *ngIf=\"mode === 'select'\" class=\"far fa-calendar-alt\" title=\"Alterar para calend\u00E1rio\"></i>\n                <i *ngIf=\"mode !== 'select'\" class=\"fas fa-calendar-week\" title=\"Selecionar per\u00EDodo\"></i>\n\n                <!-- <div *ngIf=\"mode === 'select'\">Exibir<br>Calend\u00E1rio</div> -->\n                <!-- <div *ngIf=\"mode !== 'select'\">Exibir<br>Per\u00EDodo</div> -->\n            </button>\n        </td>\n\n    </tr>\n</table>", styles: [".area-range-date{height:40px;width:100%}.area-range-date tr td:first-child{width:calc(100% - 35px)}.area-range-date tr td:first-child select{color:#535353;border-radius:3px 0 0 3px!important}.area-range-date tr td:first-child .area-range-datepickers{width:100%}.area-range-date tr td:first-child .area-range-datepickers td{width:50%!important}.area-range-date tr td:last-child{width:35px}.area-range-date tr td:last-child .btn-mode-range-date{width:100%;text-align:center;border:1px solid #ccc;background-color:#fff;font-size:17px;line-height:1;cursor:pointer;color:#6c6c6c;height:40px;border-radius:0 3px 3px 0}.area-range-date tr td:last-child .btn-mode-range-date:focus{color:#403d3d}.active{background-color:#eee!important}.description-period,.description-start{position:relative;left:17px;top:-15px;line-height:0}.description-stop{position:relative;top:-15px;line-height:0}\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"] }, { kind: "component", type: TCloudUiDatepickerTimeComponent, selector: "tcloud-ui-datepicker-time", inputs: ["UTC", "ngModel", "useOptionsDateTime"], outputs: ["ngModelChange", "onChange", "eventChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiRangeDateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'range-date', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1, CUSTOM_INPUT_VALIDATORS$1], template: "<table class=\"area-range-date\">\n    <tr>\n\n        <td>\n            <div *ngIf=\"mode === 'select'\">\n                <div class=\"description-period\">Per\u00EDodo</div>\n                <select name=\"periodo\" class=\"form-control tc-form-control\" (change)=\"onChangeOptionsDateTime($event.target)\" [(ngModel)]=\"defaultValuePeriodStartStop\"  >\n                    <option value=\"\"></option> \n                    <ng-container *ngFor=\"let item of options_date_time\">\n                        <option [value]=\"item.value\">{{ item.description }}</option>\n                    </ng-container>\n                </select>\n            </div>\n            <div *ngIf=\"mode === 'datepickers'\">\n\n                <table class=\"area-range-datepickers\">\n                    <tr>\n                        <td>\n                            <div class=\"description-start\">{{ descriptionStart }}</div>\n                            <tcloud-ui-datepicker-time \n                                #_input_start \n                                [UTC]=\"UTC\"\n                                [(ngModel)]=\"result.start\" \n                                name=\"input_start\" \n                                (eventChange)=\"onChangeStartDateTime(_input_start)\">\n                            </tcloud-ui-datepicker-time>\n                        </td>\n                        <td>\n                            <div class=\"description-stop\">{{ descriptionStop }}</div>\n                            <tcloud-ui-datepicker-time \n                                #_input_stop\n                                [UTC]=\"UTC\"\n                                [(ngModel)]=\"result.stop\" \n                                name=\"input_stop\" \n                                (eventChange)=\"onChangeStopDateTime(_input_stop)\">\n                            </tcloud-ui-datepicker-time>\n                        </td>\n                    </tr>\n                </table>\n\n            </div>\n        </td>\n\n        <td>\n            <button class=\"btn-mode-range-date\" [class.active]=\"mode === 'select'\" (click)=\"toggle()\" type=\"button\">\n\n                <i *ngIf=\"mode === 'select'\" class=\"far fa-calendar-alt\" title=\"Alterar para calend\u00E1rio\"></i>\n                <i *ngIf=\"mode !== 'select'\" class=\"fas fa-calendar-week\" title=\"Selecionar per\u00EDodo\"></i>\n\n                <!-- <div *ngIf=\"mode === 'select'\">Exibir<br>Calend\u00E1rio</div> -->\n                <!-- <div *ngIf=\"mode !== 'select'\">Exibir<br>Per\u00EDodo</div> -->\n            </button>\n        </td>\n\n    </tr>\n</table>", styles: [".area-range-date{width:100%}.area-range-date tr td:first-child{width:calc(100% - 35px)}.area-range-date tr td:first-child select{color:#535353;border-radius:3px 0 0 3px!important}.area-range-date tr td:first-child .area-range-datepickers{width:100%}.area-range-date tr td:first-child .area-range-datepickers td{width:50%!important}.area-range-date tr td:last-child{width:35px}.area-range-date tr td:last-child .btn-mode-range-date{width:100%;text-align:center;border:1px solid #ccc;background-color:#fff;font-size:17px;line-height:1;cursor:pointer;color:#6c6c6c;height:40px;border-radius:0 3px 3px 0}.area-range-date tr td:last-child .btn-mode-range-date:focus{color:#403d3d}.active{background-color:#eee!important}.description-period,.description-start{position:relative;left:17px;top:-15px;line-height:0}.description-stop{position:relative;top:-15px;line-height:0}\n"] }]
+            args: [{ selector: 'range-date', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1, CUSTOM_INPUT_VALIDATORS$1], template: "<table class=\"area-range-date\">\n    <tr>\n\n        <td>\n            <div *ngIf=\"mode === 'select'\">\n                <div class=\"description-period\">Per\u00EDodo</div>\n                <select name=\"periodo\" class=\"form-control tc-form-control\" (change)=\"onChangeOptionsDateTime($event.target)\" [(ngModel)]=\"defaultValuePeriodStartStop\"  >\n                    <option value=\"\"></option> \n                    <ng-container *ngFor=\"let item of options_date_time\">\n                        <option [value]=\"item.value\">{{ item.description }}</option>\n                    </ng-container>\n                </select>\n            </div>\n            <div *ngIf=\"mode === 'datepickers'\">\n\n                <table class=\"area-range-datepickers\">\n                    <tr>\n                        <td>\n                            <div class=\"description-start\">{{ descriptionStart }}</div>\n                            <tcloud-ui-datepicker-time \n                                #_input_start \n                                [UTC]=\"UTC\"\n                                [(ngModel)]=\"result.start\" \n                                name=\"input_start\" \n                                (eventChange)=\"onChangeStartDateTime(_input_start)\">\n                            </tcloud-ui-datepicker-time>\n                        </td>\n                        <td>\n                            <div class=\"description-stop\">{{ descriptionStop }}</div>\n                            <tcloud-ui-datepicker-time \n                                #_input_stop\n                                [UTC]=\"UTC\"\n                                [(ngModel)]=\"result.stop\" \n                                name=\"input_stop\" \n                                (eventChange)=\"onChangeStopDateTime(_input_stop)\">\n                            </tcloud-ui-datepicker-time>\n                        </td>\n                    </tr>\n                </table>\n\n            </div>\n        </td>\n\n        <td>\n            <button class=\"btn-mode-range-date\" [class.active]=\"mode === 'select'\" (click)=\"toggle()\" type=\"button\">\n\n                <i *ngIf=\"mode === 'select'\" class=\"far fa-calendar-alt\" title=\"Alterar para calend\u00E1rio\"></i>\n                <i *ngIf=\"mode !== 'select'\" class=\"fas fa-calendar-week\" title=\"Selecionar per\u00EDodo\"></i>\n\n                <!-- <div *ngIf=\"mode === 'select'\">Exibir<br>Calend\u00E1rio</div> -->\n                <!-- <div *ngIf=\"mode !== 'select'\">Exibir<br>Per\u00EDodo</div> -->\n            </button>\n        </td>\n\n    </tr>\n</table>", styles: [".area-range-date{height:40px;width:100%}.area-range-date tr td:first-child{width:calc(100% - 35px)}.area-range-date tr td:first-child select{color:#535353;border-radius:3px 0 0 3px!important}.area-range-date tr td:first-child .area-range-datepickers{width:100%}.area-range-date tr td:first-child .area-range-datepickers td{width:50%!important}.area-range-date tr td:last-child{width:35px}.area-range-date tr td:last-child .btn-mode-range-date{width:100%;text-align:center;border:1px solid #ccc;background-color:#fff;font-size:17px;line-height:1;cursor:pointer;color:#6c6c6c;height:40px;border-radius:0 3px 3px 0}.area-range-date tr td:last-child .btn-mode-range-date:focus{color:#403d3d}.active{background-color:#eee!important}.description-period,.description-start{position:relative;left:17px;top:-15px;line-height:0}.description-stop{position:relative;top:-15px;line-height:0}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { onChange: [{
                 type: Output
             }], defaultValuePeriodStartStop: [{
@@ -4358,21 +4350,6 @@ class TCloudUiTooltipDirective {
             const el = this.getElement();
             el.style.display = 'inline';
             setTimeout(() => {
-                this.el_height = this.el.nativeElement.offsetHeight;
-                this.el_width = this.el.nativeElement.offsetWidth;
-                this.el_center = this.el_width / 2;
-                const rect = this.el.nativeElement?.getBoundingClientRect();
-                this.el_position = rect?.left || 0;
-                // console.log('this.el_width', this.el_width);
-                // console.log('this.el_center', this.el_center);
-                // console.log('this.el_position', this.el_position);
-                this.target_height = el.offsetHeight;
-                this.target_width = el.offsetWidth;
-                this.target_center = this.target_width / 2;
-                // console.log('target_heigth', this.target_height);
-                // console.log('target_width', this.target_width);
-                // console.log('target_center', this.target_center);
-                // this.renderer.setStyle(el, 'bottom', `${this.el_position}px`);
                 switch (this._direction) {
                     case 'top':
                         this.to_top(el);
@@ -4427,53 +4404,26 @@ class TCloudUiTooltipDirective {
             console.log("TCL: tooltip -> el", this.el.nativeElement);
         }
     }
-    setStyle(el) {
-        // this.renderer.setStyle(el, 'position', 'relative');
-        // this.renderer.setStyle(el, 'display', 'inline');
-    }
     create_tooltip(tip, el) {
-        this.setStyle(el);
         const tooltip = document.createElement("div");
         tooltip.setAttribute('id', this.ID);
-        tooltip.setAttribute('style', `
-      position: absolute;  
-      display: none;
-      padding: 10px;
-      border-radius: 10px;
-      text-align: center;
-      width: max-content;
-      max-width: 250px;
-      background-color: transparent;
-      color: transparent;
-      z-index: 1090;
-      bottom: ${this.el_position}px;
-      left: ${this.target_center}px;
-    `);
         tooltip.innerHTML = tip;
         el.insertBefore(tooltip, null);
     }
     to_top(el) {
         const pos = this.el_center - (this.target_center);
-        this.renderer.setStyle(el, 'left', `${(pos)}px`);
-        this.renderer.setStyle(el, 'bottom', `${(this.el_height + 7)}px`);
         el.setAttribute('class', 'tc-directive-tooltip tc-directive-tooltip-top');
     }
     to_bottom(el) {
         const pos = this.el_center - (this.target_center);
-        this.renderer.setStyle(el, 'left', `${(pos)}px`);
-        this.renderer.setStyle(el, 'bottom', `-${(this.target_height + 7)}px`);
         el.setAttribute('class', 'tc-directive-tooltip tc-directive-tooltip-bottom');
     }
     to_right(el) {
         const pos = this.el_width;
-        this.renderer.setStyle(el, 'left', `${(pos + 11)}px`);
-        this.renderer.setStyle(el, 'bottom', `-${(((this.target_height) / 2) - (this.el_height / 2))}px`);
         el.setAttribute('class', 'tc-directive-tooltip tc-directive-tooltip-right');
     }
     to_left(el) {
         const pos = -((this.target_width));
-        this.renderer.setStyle(el, 'left', `${(pos - 11)}px`);
-        this.renderer.setStyle(el, 'bottom', `-${(((this.target_height) / 2) - (this.el_height / 2))}px`);
         el.setAttribute('class', 'tc-directive-tooltip tc-directive-tooltip-left');
     }
 }
@@ -4717,7 +4667,6 @@ class TCloudUiMultiplesValuesComponent {
         return { 'max-width': max_width + 'px' };
     }
     add_items_by_data_list(e) {
-        console.log('add_items_by_data_list', e);
         this.input_items = e;
         this.add_items();
     }
@@ -4802,7 +4751,6 @@ class TCloudUiMultiplesValuesComponent {
                         if ('box-action' !== e.target.parentElement.className) {
                             this.show_itens = false;
                         }
-                        //console.log('toClick', e.target.parentElement.className);    
                     }
                 }
                 catch (error) {
@@ -4915,10 +4863,10 @@ class TCloudUiMultiplesValuesComponent {
     }
 }
 TCloudUiMultiplesValuesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiplesValuesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TCloudUiMultiplesValuesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiMultiplesValuesComponent, selector: "tcloud-ui-multiples-values", inputs: { listItems: "listItems", delimiter: "delimiter", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required", search: "search", uppercase: "uppercase", lowercase: "lowercase" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, CUSTOM_INPUT_VALIDATORS], ngImport: i0, template: "<div class=\"tc-dropdown\" id=\"area-{{ id }}\" [class.tc-parent-validation]=\"use_validation_required\">\n\n\n    <form #_formulario=\"ngForm\">\n\n        <!-- {{ input_items }} -->\n\n        <div class=\"dropdown-toggle\" id=\"{{id}}\" [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"'false'\">\n\n            <table style=\"width: 100%;\">\n                <tr>\n                    <td>\n                        <table class=\"group-input-action\">\n                            <tr>\n                                <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\n                                    <ng-container *ngIf=\"listItems && (listItems).length > 0\">\n                                        <div class=\"input\" (click)=\"show_itens = false\">\n                                            <tcloud-ui-data-list [placeholder]=\"placeholder_list\" [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [listItems]=\"listItems\" [(ngModel)]=\"input_items\"></tcloud-ui-data-list>\n                                        </div>\n                                    </ng-container>\n            \n                                    <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\n                                        <div class=\"input\">\n                                            <input \n                                                (keydown.enter)=\"add_items();toOpen()\"\n                                                [disabled]=\"disabled\"\n                                                [class.text-lowercase]=\"lowercase\"\n                                                [class.text-uppercase]=\"uppercase\"\n                                                type=\"text\" name=\"items\" class=\"form-control tc-form-control\" [(ngModel)]=\"input_items\" [placeholder]=\"placeholder_list\" required [title]=\"placeholder_list\">\n                                        \n                                        </div>\n                                    </ng-container>\n                                </td>\n                                <td class=\"count-list\" *ngIf=\"(items && items.length > 0)\">\n                                    <div class=\"input\">\n                                        <input type=\"text\" value=\"{{ items.length }} {{ (items.length > 1) ? 'registros' : 'registro' }}\" disabled readonly>                            \n                                    </div>\n                                </td>\n                                <td class=\"count-list\" *ngIf=\"!items || (items && items.length === 0)\">\n                                    <div class=\"input\"><input type=\"text\" value=\"Vazio\" disabled readonly></div>                       \n                                </td>\n                                <td class=\"action-input-arrow  bc-r\">\n                                    <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\n                                        <i class=\"fas fa-angle-up\" *ngIf=\"show_itens\"></i>\n                                        <i class=\"fas fa-angle-down\" *ngIf=\"!show_itens\"></i>\n                                    </button>\n                                </td>\n                                \n                            </tr>\n                        </table> \n                    </td>\n                    <td style=\"width: 50px;\">\n                        <table>\n                            <tr>\n                                <td class=\"action-input\" *ngIf=\"!disabled\">\n                                    <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\n                                        <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-primary btn-new-green\" (click)=\"add_items()\" title=\"Adicionar item\">\n                                            <i class=\"fas fa-plus\"></i>\n                                        </button>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"listItems && (listItems).length > 0\">\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\">\n                                            <i class=\"fas fa-plus\"></i>\n                                        </button>\n                                    </ng-container>\n                                </td>\n                            </tr>\n                        </table>\n                    </td>\n                </tr>\n            </table>\n\n            <!-- <table class=\"group-input-action\">\n                <tr>\n                    <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\n                        <ng-container *ngIf=\"listItems && (listItems).length > 0\">\n                            <div class=\"input\" (click)=\"show_itens = false\">\n                                <tcloud-ui-data-list [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [listItems]=\"listItems\" [(ngModel)]=\"input_items\"></tcloud-ui-data-list>\n                            </div>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\n                            <div class=\"input\">\n                                <input \n                                    (keydown.enter)=\"add_items();toOpen()\"\n                                    [disabled]=\"disabled\"\n                                    [class.text-lowercase]=\"lowercase\"\n                                    [class.text-uppercase]=\"uppercase\"\n                                    type=\"text\" name=\"items\" class=\"form-control tc-form-control\" [(ngModel)]=\"input_items\" [placeholder]=\"placeholder_list\" required [title]=\"placeholder_list\">\n                            \n                            </div>\n                        </ng-container>\n                    </td>\n                    <td class=\"count-list\" *ngIf=\"(items && items.length > 0)\">\n                        <div class=\"input\">\n                            <input type=\"text\" value=\"{{ items.length }} {{ (items.length > 1) ? 'registros' : 'registro' }}\" disabled readonly>                            \n                        </div>\n                    </td>\n                    <td class=\"count-list\" *ngIf=\"!items || (items && items.length === 0)\">\n                        <div class=\"input\"><input type=\"text\" value=\"Vazio\" disabled readonly></div>                       \n                    </td>\n                    <td class=\"action-input-arrow  bc-r\">\n                        <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\n                            <i class=\"fas fa-angle-up\" *ngIf=\"show_itens\"></i>\n                            <i class=\"fas fa-angle-down\" *ngIf=\"!show_itens\"></i>\n                        </button>\n                    </td>\n                    <td class=\"action-input\" *ngIf=\"!disabled\">\n                        <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\n                            <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-primary btn-new-green\" (click)=\"add_items()\" title=\"Adicionar item\">\n                                <i class=\"fas fa-plus\"></i>\n                            </button>\n                        </ng-container>\n                        <ng-container *ngIf=\"listItems && (listItems).length > 0\">\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\">\n                                <i class=\"fas fa-plus\"></i>\n                            </button>\n                        </ng-container>\n                    </td>\n                </tr>\n            </table> -->\n        </div>\n        \n        <!-- <pre>\n            {{ items | json }}\n        </pre> -->\n\n    </form> \n\n    <!-- box-itens-selected  -->\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\">\n        \n\n        <div class=\"line-search\" *ngIf=\"search\">\n            <table class=\"box-search\">\n              <tr>\n      \n                <td class=\"area-input\">\n                  <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" >            \n                </td>\n      \n                <td class=\"area-icon\">\n                  <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\n                  <button class=\"box-action\" type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\n                </td>\n                \n              </tr>\n            </table>\n        </div>\n\n        <div class=\"area-options\" id=\"{{ id }}-options\">\n            <ng-container *ngFor=\"let item of items; let i = index\">\n            \n                <label class=\"box-label\" [ngStyle]=\"item_width(item)\">\n                    <div class=\"box-value\" [title]=\"item\"  >\n                    {{ item }}          \n                    </div>\n                    <div class=\"box-action\">\n                        <button\n                            class=\"box-action\"\n                            [disabled]=\"items === undefined || (items && items.length === 0) || disabled || loading\"\n                            title=\"Remover\"\n                            type=\"button\"\n                            (click)=\"removeItem(item, i)\">\n                            <i class=\"fas fa-times\"></i>\n                        </button>\n                    </div>\n                </label>\n\n            </ng-container>\n        </div>\n\n        <div class=\"mt-5\" *ngIf=\"items && (items).length > 5\">\n            <div class=\"btn-remove-all\">\n                <button class=\"box-action\" type=\"button\" (click)=\"remove_all()\">\n                    Limpar toda a lista\n                </button>\n            </div>\n        </div>\n\n    </div>\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 #ccc}.bc-r{background-color:#fff;border-right:1px solid #ccc}.box-input-data-list{background-color:#fff;border-left:1px solid #ccc;border-top:1px solid #ccc;border-bottom:1px solid #ccc;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 #ccc;border-bottom:1px solid #ccc;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:-10px}.action-input-arrow button i{position:relative;z-index:-1}.action-input{width:50px;padding-left:10px}.action-input .tc-btn{width:100%!important;padding:0;text-align:center;border-radius:3px;display:block;margin:0;height:40px}.action-input .tc-btn i{width:100%;text-align:center;padding:0!important;margin:0!important}.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(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px;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:#d72020;background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-itens-selected .box-label div.box-action button i{font-size:12px}.to-hide{display:none}.dropdown-toggle:after{display:none!important}.tc-dropdown{position:relative}.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}.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}\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.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"] }] });
+TCloudUiMultiplesValuesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiMultiplesValuesComponent, selector: "tcloud-ui-multiples-values", inputs: { listItems: "listItems", delimiter: "delimiter", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required", search: "search", uppercase: "uppercase", lowercase: "lowercase" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, CUSTOM_INPUT_VALIDATORS], ngImport: i0, template: "<div class=\"tc-dropdown\" id=\"area-{{ id }}\" [class.tc-parent-validation]=\"use_validation_required\">\n\n\n    <form #_formulario=\"ngForm\">\n\n        <!-- {{ input_items }} -->\n\n        <div class=\"dropdown-toggle\" id=\"{{id}}\" [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"'false'\">\n\n            <table style=\"width: 100%;\">\n                <tr>\n                    <td>\n                        <table class=\"group-input-action\">\n                            <tr>\n                                <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\n                                    <ng-container *ngIf=\"listItems && (listItems).length > 0\">\n                                        <div class=\"input\" (click)=\"show_itens = false\">\n                                            <tcloud-ui-data-list [placeholder]=\"placeholder_list\" [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [listItems]=\"listItems\" [(ngModel)]=\"input_items\"></tcloud-ui-data-list>\n                                        </div>\n                                    </ng-container>\n            \n                                    <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\n                                        <div class=\"input\">\n                                            <input \n                                                (keydown.enter)=\"add_items();toOpen()\"\n                                                [disabled]=\"disabled\"\n                                                [class.text-lowercase]=\"lowercase\"\n                                                [class.text-uppercase]=\"uppercase\"\n                                                type=\"text\" name=\"items\" class=\"form-control tc-form-control\" [(ngModel)]=\"input_items\" [placeholder]=\"placeholder_list\" required [title]=\"placeholder_list\">\n                                        \n                                        </div>\n                                    </ng-container>\n                                </td>\n                                <td class=\"count-list\" *ngIf=\"(items && items.length > 0)\">\n                                    <div class=\"input\">\n                                        <input type=\"text\" value=\"{{ items.length }} {{ (items.length > 1) ? 'registros' : 'registro' }}\" disabled readonly>                            \n                                    </div>\n                                </td>\n                                <td class=\"count-list\" *ngIf=\"!items || (items && items.length === 0)\">\n                                    <div class=\"input\"><input type=\"text\" value=\"Vazio\" disabled readonly></div>                       \n                                </td>\n                                <td class=\"action-input-arrow  bc-r\">\n                                    <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\n                                        <i class=\"fas fa-angle-up\" *ngIf=\"show_itens\"></i>\n                                        <i class=\"fas fa-angle-down\" *ngIf=\"!show_itens\"></i>\n                                    </button>\n                                </td>\n                                \n                            </tr>\n                        </table> \n                    </td>\n                    <td style=\"width: 50px;\">\n                        <table>\n                            <tr>\n                                <td class=\"action-input\" *ngIf=\"!disabled\">\n                                    <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\n                                        <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-primary btn-new-green\" (click)=\"add_items()\" title=\"Adicionar item\">\n                                            <i class=\"fas fa-plus\"></i>\n                                        </button>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"listItems && (listItems).length > 0\">\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\">\n                                            <i class=\"fas fa-plus\"></i>\n                                        </button>\n                                    </ng-container>\n                                </td>\n                            </tr>\n                        </table>\n                    </td>\n                </tr>\n            </table>\n\n            <!-- <table class=\"group-input-action\">\n                <tr>\n                    <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\n                        <ng-container *ngIf=\"listItems && (listItems).length > 0\">\n                            <div class=\"input\" (click)=\"show_itens = false\">\n                                <tcloud-ui-data-list [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [listItems]=\"listItems\" [(ngModel)]=\"input_items\"></tcloud-ui-data-list>\n                            </div>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\n                            <div class=\"input\">\n                                <input \n                                    (keydown.enter)=\"add_items();toOpen()\"\n                                    [disabled]=\"disabled\"\n                                    [class.text-lowercase]=\"lowercase\"\n                                    [class.text-uppercase]=\"uppercase\"\n                                    type=\"text\" name=\"items\" class=\"form-control tc-form-control\" [(ngModel)]=\"input_items\" [placeholder]=\"placeholder_list\" required [title]=\"placeholder_list\">\n                            \n                            </div>\n                        </ng-container>\n                    </td>\n                    <td class=\"count-list\" *ngIf=\"(items && items.length > 0)\">\n                        <div class=\"input\">\n                            <input type=\"text\" value=\"{{ items.length }} {{ (items.length > 1) ? 'registros' : 'registro' }}\" disabled readonly>                            \n                        </div>\n                    </td>\n                    <td class=\"count-list\" *ngIf=\"!items || (items && items.length === 0)\">\n                        <div class=\"input\"><input type=\"text\" value=\"Vazio\" disabled readonly></div>                       \n                    </td>\n                    <td class=\"action-input-arrow  bc-r\">\n                        <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\n                            <i class=\"fas fa-angle-up\" *ngIf=\"show_itens\"></i>\n                            <i class=\"fas fa-angle-down\" *ngIf=\"!show_itens\"></i>\n                        </button>\n                    </td>\n                    <td class=\"action-input\" *ngIf=\"!disabled\">\n                        <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\n                            <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-primary btn-new-green\" (click)=\"add_items()\" title=\"Adicionar item\">\n                                <i class=\"fas fa-plus\"></i>\n                            </button>\n                        </ng-container>\n                        <ng-container *ngIf=\"listItems && (listItems).length > 0\">\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\">\n                                <i class=\"fas fa-plus\"></i>\n                            </button>\n                        </ng-container>\n                    </td>\n                </tr>\n            </table> -->\n        </div>\n        \n        <!-- <pre>\n            {{ items | json }}\n        </pre> -->\n\n    </form> \n\n    <!-- box-itens-selected  -->\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\">\n        \n\n        <div class=\"line-search\" *ngIf=\"search\">\n            <table class=\"box-search\">\n              <tr>\n      \n                <td class=\"area-input\">\n                  <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" >            \n                </td>\n      \n                <td class=\"area-icon\">\n                  <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\n                  <button class=\"box-action\" type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\n                </td>\n                \n              </tr>\n            </table>\n        </div>\n\n        <div class=\"area-options\" id=\"{{ id }}-options\">\n            <ng-container *ngFor=\"let item of items; let i = index\">\n            \n                <label class=\"box-label\" [ngStyle]=\"item_width(item)\">\n                    <div class=\"box-value\" [title]=\"item\"  >\n                    {{ item }}          \n                    </div>\n                    <div class=\"box-action\">\n                        <button\n                            class=\"box-action\"\n                            [disabled]=\"items === undefined || (items && items.length === 0) || disabled || loading\"\n                            title=\"Remover\"\n                            type=\"button\"\n                            (click)=\"removeItem(item, i)\">\n                            <i class=\"fas fa-times\"></i>\n                        </button>\n                    </div>\n                </label>\n\n            </ng-container>\n        </div>\n\n        <div class=\"mt-5\" *ngIf=\"items && (items).length > 5\">\n            <div class=\"btn-remove-all\">\n                <button class=\"box-action\" type=\"button\" (click)=\"remove_all()\">\n                    Limpar toda a lista\n                </button>\n            </div>\n        </div>\n\n    </div>\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 #ccc}.bc-r{background-color:#fff;border-right:1px solid #ccc}.box-input-data-list{background-color:#fff;border-left:1px solid #ccc;border-top:1px solid #ccc;border-bottom:1px solid #ccc;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 #ccc;border-bottom:1px solid #ccc;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:10px}.action-input .tc-btn{width:100%!important;padding:0;text-align:center;border-radius:3px;display:block;margin:0;height:40px}.action-input .tc-btn i{width:100%;text-align:center;padding:0!important;margin:0!important}.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(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px;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:#d72020;background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-itens-selected .box-label div.box-action button i{font-size:12px}.to-hide{display:none}.dropdown-toggle:after{display:none!important}.tc-dropdown{position:relative}.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}.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}\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.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: "14.2.12", ngImport: i0, type: TCloudUiMultiplesValuesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-multiples-values', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, CUSTOM_INPUT_VALIDATORS], template: "<div class=\"tc-dropdown\" id=\"area-{{ id }}\" [class.tc-parent-validation]=\"use_validation_required\">\n\n\n    <form #_formulario=\"ngForm\">\n\n        <!-- {{ input_items }} -->\n\n        <div class=\"dropdown-toggle\" id=\"{{id}}\" [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"'false'\">\n\n            <table style=\"width: 100%;\">\n                <tr>\n                    <td>\n                        <table class=\"group-input-action\">\n                            <tr>\n                                <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\n                                    <ng-container *ngIf=\"listItems && (listItems).length > 0\">\n                                        <div class=\"input\" (click)=\"show_itens = false\">\n                                            <tcloud-ui-data-list [placeholder]=\"placeholder_list\" [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [listItems]=\"listItems\" [(ngModel)]=\"input_items\"></tcloud-ui-data-list>\n                                        </div>\n                                    </ng-container>\n            \n                                    <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\n                                        <div class=\"input\">\n                                            <input \n                                                (keydown.enter)=\"add_items();toOpen()\"\n                                                [disabled]=\"disabled\"\n                                                [class.text-lowercase]=\"lowercase\"\n                                                [class.text-uppercase]=\"uppercase\"\n                                                type=\"text\" name=\"items\" class=\"form-control tc-form-control\" [(ngModel)]=\"input_items\" [placeholder]=\"placeholder_list\" required [title]=\"placeholder_list\">\n                                        \n                                        </div>\n                                    </ng-container>\n                                </td>\n                                <td class=\"count-list\" *ngIf=\"(items && items.length > 0)\">\n                                    <div class=\"input\">\n                                        <input type=\"text\" value=\"{{ items.length }} {{ (items.length > 1) ? 'registros' : 'registro' }}\" disabled readonly>                            \n                                    </div>\n                                </td>\n                                <td class=\"count-list\" *ngIf=\"!items || (items && items.length === 0)\">\n                                    <div class=\"input\"><input type=\"text\" value=\"Vazio\" disabled readonly></div>                       \n                                </td>\n                                <td class=\"action-input-arrow  bc-r\">\n                                    <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\n                                        <i class=\"fas fa-angle-up\" *ngIf=\"show_itens\"></i>\n                                        <i class=\"fas fa-angle-down\" *ngIf=\"!show_itens\"></i>\n                                    </button>\n                                </td>\n                                \n                            </tr>\n                        </table> \n                    </td>\n                    <td style=\"width: 50px;\">\n                        <table>\n                            <tr>\n                                <td class=\"action-input\" *ngIf=\"!disabled\">\n                                    <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\n                                        <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-primary btn-new-green\" (click)=\"add_items()\" title=\"Adicionar item\">\n                                            <i class=\"fas fa-plus\"></i>\n                                        </button>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"listItems && (listItems).length > 0\">\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\">\n                                            <i class=\"fas fa-plus\"></i>\n                                        </button>\n                                    </ng-container>\n                                </td>\n                            </tr>\n                        </table>\n                    </td>\n                </tr>\n            </table>\n\n            <!-- <table class=\"group-input-action\">\n                <tr>\n                    <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\n                        <ng-container *ngIf=\"listItems && (listItems).length > 0\">\n                            <div class=\"input\" (click)=\"show_itens = false\">\n                                <tcloud-ui-data-list [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [listItems]=\"listItems\" [(ngModel)]=\"input_items\"></tcloud-ui-data-list>\n                            </div>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\n                            <div class=\"input\">\n                                <input \n                                    (keydown.enter)=\"add_items();toOpen()\"\n                                    [disabled]=\"disabled\"\n                                    [class.text-lowercase]=\"lowercase\"\n                                    [class.text-uppercase]=\"uppercase\"\n                                    type=\"text\" name=\"items\" class=\"form-control tc-form-control\" [(ngModel)]=\"input_items\" [placeholder]=\"placeholder_list\" required [title]=\"placeholder_list\">\n                            \n                            </div>\n                        </ng-container>\n                    </td>\n                    <td class=\"count-list\" *ngIf=\"(items && items.length > 0)\">\n                        <div class=\"input\">\n                            <input type=\"text\" value=\"{{ items.length }} {{ (items.length > 1) ? 'registros' : 'registro' }}\" disabled readonly>                            \n                        </div>\n                    </td>\n                    <td class=\"count-list\" *ngIf=\"!items || (items && items.length === 0)\">\n                        <div class=\"input\"><input type=\"text\" value=\"Vazio\" disabled readonly></div>                       \n                    </td>\n                    <td class=\"action-input-arrow  bc-r\">\n                        <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\n                            <i class=\"fas fa-angle-up\" *ngIf=\"show_itens\"></i>\n                            <i class=\"fas fa-angle-down\" *ngIf=\"!show_itens\"></i>\n                        </button>\n                    </td>\n                    <td class=\"action-input\" *ngIf=\"!disabled\">\n                        <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\n                            <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-primary btn-new-green\" (click)=\"add_items()\" title=\"Adicionar item\">\n                                <i class=\"fas fa-plus\"></i>\n                            </button>\n                        </ng-container>\n                        <ng-container *ngIf=\"listItems && (listItems).length > 0\">\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\">\n                                <i class=\"fas fa-plus\"></i>\n                            </button>\n                        </ng-container>\n                    </td>\n                </tr>\n            </table> -->\n        </div>\n        \n        <!-- <pre>\n            {{ items | json }}\n        </pre> -->\n\n    </form> \n\n    <!-- box-itens-selected  -->\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\">\n        \n\n        <div class=\"line-search\" *ngIf=\"search\">\n            <table class=\"box-search\">\n              <tr>\n      \n                <td class=\"area-input\">\n                  <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" >            \n                </td>\n      \n                <td class=\"area-icon\">\n                  <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\n                  <button class=\"box-action\" type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\n                </td>\n                \n              </tr>\n            </table>\n        </div>\n\n        <div class=\"area-options\" id=\"{{ id }}-options\">\n            <ng-container *ngFor=\"let item of items; let i = index\">\n            \n                <label class=\"box-label\" [ngStyle]=\"item_width(item)\">\n                    <div class=\"box-value\" [title]=\"item\"  >\n                    {{ item }}          \n                    </div>\n                    <div class=\"box-action\">\n                        <button\n                            class=\"box-action\"\n                            [disabled]=\"items === undefined || (items && items.length === 0) || disabled || loading\"\n                            title=\"Remover\"\n                            type=\"button\"\n                            (click)=\"removeItem(item, i)\">\n                            <i class=\"fas fa-times\"></i>\n                        </button>\n                    </div>\n                </label>\n\n            </ng-container>\n        </div>\n\n        <div class=\"mt-5\" *ngIf=\"items && (items).length > 5\">\n            <div class=\"btn-remove-all\">\n                <button class=\"box-action\" type=\"button\" (click)=\"remove_all()\">\n                    Limpar toda a lista\n                </button>\n            </div>\n        </div>\n\n    </div>\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 #ccc}.bc-r{background-color:#fff;border-right:1px solid #ccc}.box-input-data-list{background-color:#fff;border-left:1px solid #ccc;border-top:1px solid #ccc;border-bottom:1px solid #ccc;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 #ccc;border-bottom:1px solid #ccc;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:-10px}.action-input-arrow button i{position:relative;z-index:-1}.action-input{width:50px;padding-left:10px}.action-input .tc-btn{width:100%!important;padding:0;text-align:center;border-radius:3px;display:block;margin:0;height:40px}.action-input .tc-btn i{width:100%;text-align:center;padding:0!important;margin:0!important}.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(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px;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:#d72020;background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-itens-selected .box-label div.box-action button i{font-size:12px}.to-hide{display:none}.dropdown-toggle:after{display:none!important}.tc-dropdown{position:relative}.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}.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}\n"] }]
+            args: [{ selector: 'tcloud-ui-multiples-values', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, CUSTOM_INPUT_VALIDATORS], template: "<div class=\"tc-dropdown\" id=\"area-{{ id }}\" [class.tc-parent-validation]=\"use_validation_required\">\n\n\n    <form #_formulario=\"ngForm\">\n\n        <!-- {{ input_items }} -->\n\n        <div class=\"dropdown-toggle\" id=\"{{id}}\" [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"'false'\">\n\n            <table style=\"width: 100%;\">\n                <tr>\n                    <td>\n                        <table class=\"group-input-action\">\n                            <tr>\n                                <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\n                                    <ng-container *ngIf=\"listItems && (listItems).length > 0\">\n                                        <div class=\"input\" (click)=\"show_itens = false\">\n                                            <tcloud-ui-data-list [placeholder]=\"placeholder_list\" [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [listItems]=\"listItems\" [(ngModel)]=\"input_items\"></tcloud-ui-data-list>\n                                        </div>\n                                    </ng-container>\n            \n                                    <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\n                                        <div class=\"input\">\n                                            <input \n                                                (keydown.enter)=\"add_items();toOpen()\"\n                                                [disabled]=\"disabled\"\n                                                [class.text-lowercase]=\"lowercase\"\n                                                [class.text-uppercase]=\"uppercase\"\n                                                type=\"text\" name=\"items\" class=\"form-control tc-form-control\" [(ngModel)]=\"input_items\" [placeholder]=\"placeholder_list\" required [title]=\"placeholder_list\">\n                                        \n                                        </div>\n                                    </ng-container>\n                                </td>\n                                <td class=\"count-list\" *ngIf=\"(items && items.length > 0)\">\n                                    <div class=\"input\">\n                                        <input type=\"text\" value=\"{{ items.length }} {{ (items.length > 1) ? 'registros' : 'registro' }}\" disabled readonly>                            \n                                    </div>\n                                </td>\n                                <td class=\"count-list\" *ngIf=\"!items || (items && items.length === 0)\">\n                                    <div class=\"input\"><input type=\"text\" value=\"Vazio\" disabled readonly></div>                       \n                                </td>\n                                <td class=\"action-input-arrow  bc-r\">\n                                    <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\n                                        <i class=\"fas fa-angle-up\" *ngIf=\"show_itens\"></i>\n                                        <i class=\"fas fa-angle-down\" *ngIf=\"!show_itens\"></i>\n                                    </button>\n                                </td>\n                                \n                            </tr>\n                        </table> \n                    </td>\n                    <td style=\"width: 50px;\">\n                        <table>\n                            <tr>\n                                <td class=\"action-input\" *ngIf=\"!disabled\">\n                                    <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\n                                        <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-primary btn-new-green\" (click)=\"add_items()\" title=\"Adicionar item\">\n                                            <i class=\"fas fa-plus\"></i>\n                                        </button>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"listItems && (listItems).length > 0\">\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\">\n                                            <i class=\"fas fa-plus\"></i>\n                                        </button>\n                                    </ng-container>\n                                </td>\n                            </tr>\n                        </table>\n                    </td>\n                </tr>\n            </table>\n\n            <!-- <table class=\"group-input-action\">\n                <tr>\n                    <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\n                        <ng-container *ngIf=\"listItems && (listItems).length > 0\">\n                            <div class=\"input\" (click)=\"show_itens = false\">\n                                <tcloud-ui-data-list [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [listItems]=\"listItems\" [(ngModel)]=\"input_items\"></tcloud-ui-data-list>\n                            </div>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\n                            <div class=\"input\">\n                                <input \n                                    (keydown.enter)=\"add_items();toOpen()\"\n                                    [disabled]=\"disabled\"\n                                    [class.text-lowercase]=\"lowercase\"\n                                    [class.text-uppercase]=\"uppercase\"\n                                    type=\"text\" name=\"items\" class=\"form-control tc-form-control\" [(ngModel)]=\"input_items\" [placeholder]=\"placeholder_list\" required [title]=\"placeholder_list\">\n                            \n                            </div>\n                        </ng-container>\n                    </td>\n                    <td class=\"count-list\" *ngIf=\"(items && items.length > 0)\">\n                        <div class=\"input\">\n                            <input type=\"text\" value=\"{{ items.length }} {{ (items.length > 1) ? 'registros' : 'registro' }}\" disabled readonly>                            \n                        </div>\n                    </td>\n                    <td class=\"count-list\" *ngIf=\"!items || (items && items.length === 0)\">\n                        <div class=\"input\"><input type=\"text\" value=\"Vazio\" disabled readonly></div>                       \n                    </td>\n                    <td class=\"action-input-arrow  bc-r\">\n                        <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\n                            <i class=\"fas fa-angle-up\" *ngIf=\"show_itens\"></i>\n                            <i class=\"fas fa-angle-down\" *ngIf=\"!show_itens\"></i>\n                        </button>\n                    </td>\n                    <td class=\"action-input\" *ngIf=\"!disabled\">\n                        <ng-container *ngIf=\"!listItems || !(listItems && (listItems).length > 0)\">\n                            <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-primary btn-new-green\" (click)=\"add_items()\" title=\"Adicionar item\">\n                                <i class=\"fas fa-plus\"></i>\n                            </button>\n                        </ng-container>\n                        <ng-container *ngIf=\"listItems && (listItems).length > 0\">\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\">\n                                <i class=\"fas fa-plus\"></i>\n                            </button>\n                        </ng-container>\n                    </td>\n                </tr>\n            </table> -->\n        </div>\n        \n        <!-- <pre>\n            {{ items | json }}\n        </pre> -->\n\n    </form> \n\n    <!-- box-itens-selected  -->\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\">\n        \n\n        <div class=\"line-search\" *ngIf=\"search\">\n            <table class=\"box-search\">\n              <tr>\n      \n                <td class=\"area-input\">\n                  <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" >            \n                </td>\n      \n                <td class=\"area-icon\">\n                  <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\n                  <button class=\"box-action\" type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\n                </td>\n                \n              </tr>\n            </table>\n        </div>\n\n        <div class=\"area-options\" id=\"{{ id }}-options\">\n            <ng-container *ngFor=\"let item of items; let i = index\">\n            \n                <label class=\"box-label\" [ngStyle]=\"item_width(item)\">\n                    <div class=\"box-value\" [title]=\"item\"  >\n                    {{ item }}          \n                    </div>\n                    <div class=\"box-action\">\n                        <button\n                            class=\"box-action\"\n                            [disabled]=\"items === undefined || (items && items.length === 0) || disabled || loading\"\n                            title=\"Remover\"\n                            type=\"button\"\n                            (click)=\"removeItem(item, i)\">\n                            <i class=\"fas fa-times\"></i>\n                        </button>\n                    </div>\n                </label>\n\n            </ng-container>\n        </div>\n\n        <div class=\"mt-5\" *ngIf=\"items && (items).length > 5\">\n            <div class=\"btn-remove-all\">\n                <button class=\"box-action\" type=\"button\" (click)=\"remove_all()\">\n                    Limpar toda a lista\n                </button>\n            </div>\n        </div>\n\n    </div>\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 #ccc}.bc-r{background-color:#fff;border-right:1px solid #ccc}.box-input-data-list{background-color:#fff;border-left:1px solid #ccc;border-top:1px solid #ccc;border-bottom:1px solid #ccc;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 #ccc;border-bottom:1px solid #ccc;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:10px}.action-input .tc-btn{width:100%!important;padding:0;text-align:center;border-radius:3px;display:block;margin:0;height:40px}.action-input .tc-btn i{width:100%;text-align:center;padding:0!important;margin:0!important}.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(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px;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:#d72020;background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-itens-selected .box-label div.box-action button i{font-size:12px}.to-hide{display:none}.dropdown-toggle:after{display:none!important}.tc-dropdown{position:relative}.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}.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}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { listItems: [{
                 type: Input
             }], delimiter: [{