@dev-tcloud/tcloud-ui 2.2.0 → 2.2.2

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

@@ -2654,16 +2654,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 class TCloudUiScrollBoxComponent {
     constructor() {
         this.border = true;
-        this.maxHeight = 400;
+        this.maxHeight = '400';
+        this.unidade = 'px';
     }
     ngOnInit() {
+        let und = '';
+        if (`${this.maxHeight}`) {
+            und = this.retirarNumeros(`${this.maxHeight}`);
+        }
+        console.log("und", und);
+        if (((und) && (und).trim() === '') || !und) {
+            this.unidade = 'px';
+        }
+        else {
+            this.unidade = (und).toLowerCase();
+        }
+        this.maxHeight = (`${this.maxHeight}`).replace(this.unidade, '');
+        if (this.unidade === 'vh') {
+            this.style_height = { 'height': this.maxHeight + this.unidade };
+        }
+        else {
+            this.style_height = { 'max-height': this.maxHeight + this.unidade };
+        }
+    }
+    retirarNumeros(str) {
+        // Utiliza regex para substituir todos os dígitos por uma string vazia
+        const resultado = str.replace(/\d/g, '');
+        return resultado;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiScrollBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TCloudUiScrollBoxComponent, selector: "tcloud-ui-scroll-box", inputs: { border: "border", maxHeight: "maxHeight" }, ngImport: i0, template: "<div class=\"tcloud-ui-scroll-box tc-box-scroll\" [class.tc-box-scroll-border]=\"border\" >\r\n    <div class=\"box-content\" [style]=\"'max-height: '+maxHeight+'px'\" >\r\n        <ng-content></ng-content>\r\n    </div>    \r\n</div>\r\n", styles: [".tc-box-scroll ::-webkit-scrollbar{width:13px}.tc-box-scroll ::-webkit-scrollbar-track{background:#F1F1F1;border-radius:15px}.tc-box-scroll ::-webkit-scrollbar-thumb{background:var(--tc-primary);border-radius:10px}.tc-box-scroll ::-webkit-scrollbar-thumb:hover{background:#2B95A0}.tc-box-scroll .box-content{overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--tc-primary) #F1F1F1;scrollbar-gutter:stable}.tc-box-scroll-border{border:1px solid #eee;border-radius:10px;overflow:hidden}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TCloudUiScrollBoxComponent, selector: "tcloud-ui-scroll-box", inputs: { border: "border", maxHeight: "maxHeight" }, ngImport: i0, template: "<div class=\"tcloud-ui-scroll-box tc-box-scroll\" [class.tc-box-scroll-border]=\"border\" >\r\n    <div class=\"box-content\" [ngStyle]=\"style_height\" >\r\n        <ng-content></ng-content>\r\n    </div>    \r\n</div>", styles: [".tc-box-scroll ::-webkit-scrollbar{width:13px}.tc-box-scroll ::-webkit-scrollbar-track{background:#F1F1F1;border-radius:15px}.tc-box-scroll ::-webkit-scrollbar-thumb{background:var(--tc-primary);border-radius:10px}.tc-box-scroll ::-webkit-scrollbar-thumb:hover{background:#2B95A0}.tc-box-scroll .box-content{overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--tc-primary) #F1F1F1;scrollbar-gutter:stable}.tc-box-scroll-border{border:1px solid #eee;border-radius:10px;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiScrollBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-scroll-box', template: "<div class=\"tcloud-ui-scroll-box tc-box-scroll\" [class.tc-box-scroll-border]=\"border\" >\r\n    <div class=\"box-content\" [style]=\"'max-height: '+maxHeight+'px'\" >\r\n        <ng-content></ng-content>\r\n    </div>    \r\n</div>\r\n", styles: [".tc-box-scroll ::-webkit-scrollbar{width:13px}.tc-box-scroll ::-webkit-scrollbar-track{background:#F1F1F1;border-radius:15px}.tc-box-scroll ::-webkit-scrollbar-thumb{background:var(--tc-primary);border-radius:10px}.tc-box-scroll ::-webkit-scrollbar-thumb:hover{background:#2B95A0}.tc-box-scroll .box-content{overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--tc-primary) #F1F1F1;scrollbar-gutter:stable}.tc-box-scroll-border{border:1px solid #eee;border-radius:10px;overflow:hidden}\n"] }]
+            args: [{ selector: 'tcloud-ui-scroll-box', template: "<div class=\"tcloud-ui-scroll-box tc-box-scroll\" [class.tc-box-scroll-border]=\"border\" >\r\n    <div class=\"box-content\" [ngStyle]=\"style_height\" >\r\n        <ng-content></ng-content>\r\n    </div>    \r\n</div>", styles: [".tc-box-scroll ::-webkit-scrollbar{width:13px}.tc-box-scroll ::-webkit-scrollbar-track{background:#F1F1F1;border-radius:15px}.tc-box-scroll ::-webkit-scrollbar-thumb{background:var(--tc-primary);border-radius:10px}.tc-box-scroll ::-webkit-scrollbar-thumb:hover{background:#2B95A0}.tc-box-scroll .box-content{overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--tc-primary) #F1F1F1;scrollbar-gutter:stable}.tc-box-scroll-border{border:1px solid #eee;border-radius:10px;overflow:hidden}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { border: [{
                 type: Input
             }], maxHeight: [{
@@ -2735,12 +2759,16 @@ class TCloudUiDatepickerComponent {
     set ngModel(v) {
         if (v && v !== this.innerValue) {
             this.innerValue = v; //this.toSetMask(v); 
+            this.default_innerValue = v;
+            this.default_innerValue_convertida = this.convertDates(v);
+            if (this.multiple) {
+                this.default_qtd_innerValue = (v).length;
+            }
             this.onChange.emit(v);
         }
     }
-    constructor(_DateBRPipe, _changeDetectorRef) {
+    constructor(_DateBRPipe) {
         this._DateBRPipe = _DateBRPipe;
-        this._changeDetectorRef = _changeDetectorRef;
         // multiple permite selecionar multiplas datas
         this.multiple = false;
         // maxNumberOfDates - Maximum number of dates users can select. No limit is applied if 0 is set.
@@ -2758,9 +2786,14 @@ class TCloudUiDatepickerComponent {
         this.modeInput = false;
         this.useBorder = true;
         this.childInputDateTime = false;
+        this.startViewInMinDate = false;
+        this.startViewInMaxDate = false;
+        this.disabled = false;
         // onChange - Dispara a data selecionada
         this.onChange = new EventEmitter();
+        this.default_qtd_innerValue = 0;
         this.ngModelChange = new EventEmitter();
+        this.onCheckDate = new EventEmitter();
         this.code = 'tcloud-ui-datepicker';
         this.ID = '';
         //Placeholders for the callbacks which are later providesd
@@ -2779,18 +2812,31 @@ class TCloudUiDatepickerComponent {
     toSetMask(v) {
         return this._DateBRPipe.transform(v);
     }
+    parseDateLocal(dateString, _split) {
+        if (!_split) {
+            _split = '-';
+        }
+        const [day, month, year] = dateString.split(_split);
+        return new Date(year, month - 1, day); // Subtrai 1 porque os meses são indexados a partir de 0
+    }
+    formatDateLocal(date) {
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0'); // Adiciona 1 porque os meses são indexados a partir de 0
+        const day = String(date.getDate()).padStart(2, '0');
+        return `${day}/${month}/${year}`;
+    }
     get_options() {
         // Função para formatar uma data no fuso horário local
         const formatDateLocal = (date) => {
             const year = date.getFullYear();
-            const month = String(date.getMonth() + 1).padStart(2, '0'); // Adiciona 1 porque os meses são indexados a partir de 0
+            const month = String(date.getMonth() + 1).padStart(2, '0');
             const day = String(date.getDate()).padStart(2, '0');
             return `${year}-${month}-${day}`;
         };
         // Função para analisar uma data no fuso horário local
         const parseDateLocal = (dateString) => {
             const [year, month, day] = dateString.split('-');
-            return new Date(year, month - 1, day); // Subtrai 1 porque os meses são indexados a partir de 0
+            return new Date(year, month - 1, day);
         };
         let options = {
             nextArrow: `<i class="fas fa-caret-right"></i>`,
@@ -2803,7 +2849,7 @@ class TCloudUiDatepickerComponent {
             },
             parser: {
                 date: parseDateLocal,
-            },
+            }
         };
         if ((this.daysOfWeekDisabled).length > 0) {
             options['daysOfWeekDisabled'] = this.daysOfWeekDisabled;
@@ -2818,6 +2864,8 @@ class TCloudUiDatepickerComponent {
             options['maxDate'] = this.maxDate;
         }
         if (this.multiple) {
+            options['multiple'] = true;
+            options['autohide'] = false;
             options['maxNumberOfDates'] = this.maxNumberOfDates;
         }
         return options;
@@ -2868,7 +2916,44 @@ class TCloudUiDatepickerComponent {
                 });
                 input_datepicker.addEventListener('changeDate', (event) => {
                     if (event?.detail?.date) {
-                        this.toSelectedDate(event.detail);
+                        let qtd = (event.detail.date).length;
+                        if (this.disabled) {
+                            if (!this.multiple) {
+                                let dt = this.formatDateLocal(event.detail?.date);
+                                if (this.default_innerValue && this.default_innerValue[0] && (`${this.default_innerValue[0]}` !== `${dt}`)) {
+                                    qtd = 1;
+                                }
+                            }
+                            this.datepicker.setDate(this.default_innerValue_convertida, { clear: true, render: true });
+                            if (qtd > this.default_qtd_innerValue) {
+                                this.date_changed = event?.detail.viewDate;
+                                this.datepicker.setFocusedDate(this.date_changed, { resetView: false });
+                                this.onCheckDate.emit({
+                                    value: this.formatDateLocal(this.date_changed),
+                                    date: this.date_changed,
+                                    checked: true,
+                                    disabled: this.disabled
+                                });
+                            }
+                            else {
+                                if (this.multiple) {
+                                    const so = this.findDifferences(this.default_innerValue, this.formatArrayDates(event.detail.date));
+                                    if (so && (so).length > 0) {
+                                        this.date_changed = this.parseDateLocal(so[0], '/');
+                                        this.onCheckDate.emit({
+                                            value: so[0],
+                                            date: this.date_changed,
+                                            checked: false,
+                                            disabled: this.disabled
+                                        });
+                                    }
+                                }
+                                this.datepicker.setFocusedDate(this.date_changed, { resetView: false });
+                            }
+                        }
+                        else {
+                            this.toSelectedDate(event.detail);
+                        }
                     }
                     else {
                         this.innerValue = '';
@@ -2878,13 +2963,6 @@ class TCloudUiDatepickerComponent {
             }
         });
     }
-    toSetDate() {
-        // Ex de uso
-        const dates = ['18/11/2022'];
-        if (this.datepicker) {
-            this.datepicker.setDate(dates);
-        }
-    }
     toSetDefaultDate(date) {
         if (date === undefined || date === null || date === '') {
             this.clearDate();
@@ -2908,9 +2986,48 @@ class TCloudUiDatepickerComponent {
             dates = date;
         }
         if (this.datepicker) {
+            if (dates && dates.length > 0 && this.multiple) {
+                if (this.startViewInMinDate) {
+                    dates = this.sortDatesDescending(dates);
+                }
+                else if (this.startViewInMaxDate) {
+                    dates = this.sortDatesAscending(dates);
+                }
+            }
             this.datepicker.setDate(dates);
         }
     }
+    convertDates(arrayDeDatas) {
+        const formatDate = (dateString) => {
+            const [day, month, year] = dateString.split('/');
+            return new Date(year, month - 1, day);
+        };
+        if (arrayDeDatas && Array.isArray(arrayDeDatas)) {
+            const datasOrdenadas = arrayDeDatas.map((data) => ({ original: data, convertida: formatDate(data) }));
+            return datasOrdenadas.map(item => item.convertida);
+        }
+        else {
+            return [arrayDeDatas];
+        }
+    }
+    sortDatesDescending(arrayDeDatas) {
+        const formatDate = (dateString) => {
+            const [day, month, year] = dateString.split('/');
+            return new Date(year, month - 1, day);
+        };
+        const datasOrdenadas = arrayDeDatas.map((data) => ({ original: data, convertida: formatDate(data) })).sort((a, b) => b.convertida - a.convertida);
+        const datasOrdenadasFormatadas = datasOrdenadas.map(item => item.original);
+        return datasOrdenadasFormatadas;
+    }
+    sortDatesAscending(arrayDeDatas) {
+        const formatDate = (dateString) => {
+            const [day, month, year] = dateString.split('/');
+            return new Date(year, month - 1, day);
+        };
+        const datasOrdenadas = arrayDeDatas.map((data) => ({ original: data, convertida: formatDate(data) })).sort((a, b) => a.convertida - b.convertida);
+        const datasOrdenadasFormatadas = datasOrdenadas.map(item => item.original);
+        return datasOrdenadasFormatadas;
+    }
     toSelectedDate(detail) {
         if (detail.datepicker.dates && (detail.datepicker.dates).length > 0) {
             if (this.multiple) {
@@ -2953,6 +3070,26 @@ class TCloudUiDatepickerComponent {
             element?.datepicker?.show();
         });
     }
+    findDifferences(array1, array2) {
+        const conjuntoComum = new Set([...array1, ...array2]);
+        return Array.from(conjuntoComum).filter(item => !(array1.includes(item) && array2.includes(item)));
+    }
+    formatArrayDates(array_dates) {
+        let formateds = [];
+        if (array_dates && (array_dates).length > 0) {
+            const formatDateLocal = (date) => {
+                const year = date.getFullYear();
+                const month = String(date.getMonth() + 1).padStart(2, '0'); // Adiciona 1 porque os meses são indexados a partir de 0
+                const day = String(date.getDate()).padStart(2, '0');
+                return `${day}/${month}/${year}`;
+            };
+            for (let i = 0; i < (array_dates).length; i++) {
+                const dt = array_dates[i];
+                (formateds).push(formatDateLocal(dt));
+            }
+        }
+        return formateds;
+    }
     //get accessor
     get value() {
         return this.innerValue;
@@ -2987,13 +3124,13 @@ class TCloudUiDatepickerComponent {
     registerOnTouched(fn) {
         this.onTouchedCallback = fn;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiDatepickerComponent, deps: [{ token: DateBRPipe }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TCloudUiDatepickerComponent, selector: "tcloud-ui-datepicker", inputs: { multiple: "multiple", maxNumberOfDates: "maxNumberOfDates", daysOfWeekDisabled: "daysOfWeekDisabled", minDate: "minDate", maxDate: "maxDate", datesDisabled: "datesDisabled", modeInput: "modeInput", useBorder: "useBorder", childInputDateTime: "childInputDateTime", ngModel: "ngModel", code: "code" }, outputs: { onChange: "onChange", ngModelChange: "ngModelChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$4], viewQueries: [{ propertyName: "input_datepicker", first: true, predicate: ["input_datepicker"], descendants: true }], ngImport: i0, template: "<!-- Input mode -->\r\n<ng-container *ngIf=\"modeInput\">\r\n\r\n  <div class=\"tcloud-ui-datepicker input-tc-datepicker\" [class.no-border]=\"!useBorder\" [class.child-input-date-time]=\"childInputDateTime\" >\r\n    <table class=\"table-box-input\">\r\n      <tr>\r\n        <td class=\"td-icon\">\r\n          <div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fas fa-calendar-alt\"></i></div>\r\n        </td>\r\n        <td class=\"td-date\">\r\n          <input #input_datepicker type=\"text\" name=\"{{ID}}\" id=\"{{ID}}\" class=\"form-control\" [title]=\"innerValue\">\r\n        </td>\r\n      </tr>\r\n    </table>\r\n  </div>\r\n\r\n  \r\n  \r\n</ng-container>\r\n\r\n<!-- Inline mode -->\r\n<ng-container *ngIf=\"!modeInput\">  \r\n  <div class=\"tcloud-ui-datepicker tcloud-ui-datepicker-second\" #input_datepicker id=\"{{ID}}\" pattern=\"/^\\d{2}\\/\\d{2}\\/\\d{4}$/\" [title]=\"innerValue\"></div>\r\n</ng-container>\r\n\r\n\r\n<!-- EX de uso \r\n  <tc-datepicker \r\n    [multiple]=\"false\"\r\n    [daysOfWeekDisabled]=\"[0,6]\"\r\n    [minDate]=\"'18/11/2021'\"\r\n    [maxDate]=\"'18/12/2023'\"\r\n    [datesDisabled]=\"['12/10/2022','25/12/2022']\"\r\n    [modeInput]=\"false\"\r\n    [(ngModel)]=\"dateValue\" >\r\n  </tc-datepicker>\r\n  \r\n  // multiple = false\r\n  // dateValue - string - pode ser: 12/12/2022 \r\n\r\n  // multiple = true\r\n  // dateValue - string - pode ser: 11/12/2022,12/12/2022 ... \r\n\r\n  <pre>data: {{ dateValue }}</pre>\r\n-->\r\n", styles: [".input_datepicker{width:100%;max-width:290px}.input-tc-datepicker{background-color:#fff;border:1px solid var(--tc-gray-300);border-radius:3px;height:40px}.input-tc-datepicker.no-border{border:none!important}.input-tc-datepicker .table-box-input{width:100%}.input-tc-datepicker .table-box-input .td-icon{width:14px}.input-tc-datepicker .table-box-input .td-icon .delimiter-time-icon{text-align:center;cursor:pointer}.input-tc-datepicker .table-box-input .td-icon .delimiter-time-icon i{position:relative;left:1px;opacity:.5}.input-tc-datepicker .table-box-input .td-date{min-width:30px;width:101px input;width-width:100%}.input-tc-datepicker .table-box-input input{border:none;margin-top:2px;font-size:13px!important}.child-input-date-time{height:28px!important}\n", ".datepicker{display:none}.datepicker.active{display:block}.datepicker-dropdown{left:0;padding-top:4px;position:absolute;top:0;z-index:20}.datepicker-dropdown.datepicker-orient-top{padding-bottom:4px;padding-top:0}.datepicker-picker{background-color:#fff;border-radius:4px;display:inline-block}.datepicker-dropdown .datepicker-picker{box-shadow:0 2px 3px #0a0a0a1a,0 0 0 1px #0a0a0a1a}.datepicker-picker span{-webkit-touch-callout:none;border:0;border-radius:4px;cursor:default;display:block;flex:1;text-align:center;-webkit-user-select:none;user-select:none}.datepicker-main{padding:2px}.datepicker-footer{background-color:#f5f5f5;box-shadow:inset 0 1px 1px #0a0a0a1a}.datepicker-controls,.datepicker-grid,.datepicker-view,.datepicker-view .days-of-week{display:flex}.datepicker-grid{flex-wrap:wrap}.datepicker-view .days .datepicker-cell,.datepicker-view .dow{flex-basis:14.2857142857%}.datepicker-view.datepicker-grid .datepicker-cell{flex-basis:25%}.datepicker-cell,.datepicker-view .week{height:2.25rem;line-height:2.25rem}.datepicker-title{background-color:#f5f5f5;box-shadow:inset 0 -1px 1px #0a0a0a1a;font-weight:700;padding:.375rem .75rem;text-align:center}.datepicker-header .datepicker-controls{padding:2px 2px 0}.datepicker-controls .button{align-items:center;background-color:#fff;border:1px solid #dbdbdb;border-radius:4px;box-shadow:none;color:#363636;cursor:pointer;display:inline-flex;font-size:1rem;height:2.25em;justify-content:center;line-height:1.5;margin:0;padding:calc(.375em - 1px) .75em;position:relative;text-align:center;vertical-align:top;white-space:nowrap}.datepicker-controls .button:active,.datepicker-controls .button:focus{outline:none}.datepicker-controls .button:hover{border-color:#b5b5b5;color:#363636}.datepicker-controls .button:focus{border-color:#3273dc;color:#363636}.datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em #3273dc40}.datepicker-controls .button:active{border-color:#4a4a4a;color:#363636}.datepicker-controls .button[disabled]{cursor:not-allowed}.datepicker-header .datepicker-controls .button{border-color:transparent;font-weight:700}.datepicker-header .datepicker-controls .button:hover{background-color:#f9f9f9}.datepicker-header .datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em #ffffff40}.datepicker-header .datepicker-controls .button:active{background-color:#f2f2f2}.datepicker-header .datepicker-controls .button[disabled]{box-shadow:none}.datepicker-footer .datepicker-controls .button{border-radius:2px;font-size:.75rem;margin:calc(.375rem - 1px) .375rem;width:100%}.datepicker-controls .view-switch{flex:auto}.datepicker-controls .next-btn,.datepicker-controls .prev-btn{padding-left:.375rem;padding-right:.375rem;width:2.25rem}.datepicker-controls .next-btn.disabled,.datepicker-controls .prev-btn.disabled{visibility:hidden}.datepicker-view .dow{font-size:.875rem;font-weight:700;height:1.5rem;line-height:1.5rem}.datepicker-view .week{color:#b5b5b5;font-size:.75rem;width:2.25rem}@media (max-width:22.5rem){.datepicker-view .week{width:1.96875rem}}.datepicker-grid{width:15.75rem}@media (max-width:22.5rem){.calendar-weeks+.days .datepicker-grid{width:13.78125rem}}.datepicker-cell:not(.disabled):hover{background-color:#f9f9f9;cursor:pointer}.datepicker-cell.focused:not(.selected){background-color:#e8e8e8}.datepicker-cell.selected,.datepicker-cell.selected:hover{background-color:#3273dc;color:#fff;font-weight:600}.datepicker-cell.disabled{color:#dbdbdb}.datepicker-cell.next:not(.disabled),.datepicker-cell.prev:not(.disabled){color:#7a7a7a}.datepicker-cell.next.selected,.datepicker-cell.prev.selected{color:#e6e6e6}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today){background-color:#f5f5f5;border-radius:0}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover{background-color:#eee}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused{background-color:#e8e8e8}.datepicker-cell.today:not(.selected){background-color:#00d1b2}.datepicker-cell.today:not(.selected):not(.disabled){color:#fff}.datepicker-cell.today.focused:not(.selected){background-color:#00c4a7}.datepicker-cell.range-end:not(.selected),.datepicker-cell.range-start:not(.selected){background-color:#b5b5b5;color:#fff}.datepicker-cell.range-end.focused:not(.selected),.datepicker-cell.range-start.focused:not(.selected){background-color:#afafaf}.datepicker-cell.range-start{border-radius:4px 0 0 4px}.datepicker-cell.range-end{border-radius:0 4px 4px 0}.datepicker-cell.range{background-color:#dbdbdb;border-radius:0}.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover{background-color:#d5d5d5}.datepicker-cell.range.disabled{color:#c2c2c2}.datepicker-cell.range.focused{background-color:#cfcfcf}.datepicker-view.datepicker-grid .datepicker-cell{height:4.5rem;line-height:4.5rem}.datepicker-input.in-edit{border-color:#2366d1}.datepicker-input.in-edit:active,.datepicker-input.in-edit:focus{box-shadow:0 0 .25em .25em #2366d133}\n", ".datepicker-picker{border:1px solid #ccc;padding:10px 15px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiDatepickerComponent, deps: [{ token: DateBRPipe }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TCloudUiDatepickerComponent, selector: "tcloud-ui-datepicker", inputs: { multiple: "multiple", maxNumberOfDates: "maxNumberOfDates", daysOfWeekDisabled: "daysOfWeekDisabled", minDate: "minDate", maxDate: "maxDate", datesDisabled: "datesDisabled", modeInput: "modeInput", useBorder: "useBorder", childInputDateTime: "childInputDateTime", startViewInMinDate: "startViewInMinDate", startViewInMaxDate: "startViewInMaxDate", disabled: "disabled", ngModel: "ngModel", code: "code" }, outputs: { onChange: "onChange", ngModelChange: "ngModelChange", onCheckDate: "onCheckDate" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$4], viewQueries: [{ propertyName: "input_datepicker", first: true, predicate: ["input_datepicker"], descendants: true }], ngImport: i0, template: "<!-- Input mode -->\r\n<ng-container *ngIf=\"modeInput\">\r\n\r\n  <div class=\"tcloud-ui-datepicker input-tc-datepicker\" [class.no-border]=\"!useBorder\" [class.child-input-date-time]=\"childInputDateTime\" >\r\n    <table class=\"table-box-input\">\r\n      <tr>\r\n        <td class=\"td-icon\">\r\n          <div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fas fa-calendar-alt\"></i></div>\r\n        </td>\r\n        <td class=\"td-date\">\r\n          <input #input_datepicker type=\"text\" name=\"{{ID}}\" id=\"{{ID}}\" class=\"form-control\" [title]=\"innerValue\" >\r\n        </td>\r\n      </tr>\r\n    </table>\r\n  </div>\r\n</ng-container>\r\n\r\n<!-- Inline mode -->\r\n<ng-container *ngIf=\"!modeInput\">  \r\n  <div class=\"tcloud-ui-datepicker tcloud-ui-datepicker-second\" #input_datepicker id=\"{{ID}}\" pattern=\"/^\\d{2}\\/\\d{2}\\/\\d{4}$/\" [title]=\"innerValue\"></div>\r\n</ng-container>\r\n\r\n<!-- EX de uso \r\n  <tc-datepicker \r\n    [multiple]=\"false\"\r\n    [daysOfWeekDisabled]=\"[0,6]\"\r\n    [minDate]=\"'18/11/2021'\"\r\n    [maxDate]=\"'18/12/2023'\"\r\n    [datesDisabled]=\"['12/10/2022','25/12/2022']\"\r\n    [modeInput]=\"false\"\r\n    (onChange)=\"($event)\"\r\n    (onCheckDate)=\"onCheckDate($event)\"\r\n    [(ngModel)]=\"dateValue\" >\r\n  </tc-datepicker>\r\n  \r\n  // multiple = false\r\n  // dateValue - string - pode ser: 12/12/2022 \r\n\r\n  // multiple = true\r\n  // dateValue - string - pode ser: 11/12/2022,12/12/2022 ... \r\n\r\n  <pre>data: {{ dateValue }}</pre>\r\n-->\r\n", styles: [".input_datepicker{width:100%;max-width:290px}.input-tc-datepicker{background-color:#fff;border:1px solid var(--tc-gray-300);border-radius:3px;height:40px}.input-tc-datepicker.no-border{border:none!important}.input-tc-datepicker .table-box-input{width:100%}.input-tc-datepicker .table-box-input .td-icon{width:14px}.input-tc-datepicker .table-box-input .td-icon .delimiter-time-icon{text-align:center;cursor:pointer}.input-tc-datepicker .table-box-input .td-icon .delimiter-time-icon i{position:relative;left:1px;opacity:.5}.input-tc-datepicker .table-box-input .td-date{min-width:30px;width:101px input;width-width:100%}.input-tc-datepicker .table-box-input input{border:none;margin-top:2px;font-size:13px!important}.child-input-date-time{height:28px!important}\n", ".datepicker{display:none}.datepicker.active{display:block}.datepicker-dropdown{left:0;padding-top:4px;position:absolute;top:0;z-index:20}.datepicker-dropdown.datepicker-orient-top{padding-bottom:4px;padding-top:0}.datepicker-picker{background-color:#fff;border-radius:4px;display:inline-block}.datepicker-dropdown .datepicker-picker{box-shadow:0 2px 3px #0a0a0a1a,0 0 0 1px #0a0a0a1a}.datepicker-picker span{-webkit-touch-callout:none;border:0;border-radius:4px;cursor:default;display:block;flex:1;text-align:center;-webkit-user-select:none;user-select:none}.datepicker-main{padding:2px}.datepicker-footer{background-color:#f5f5f5;box-shadow:inset 0 1px 1px #0a0a0a1a}.datepicker-controls,.datepicker-grid,.datepicker-view,.datepicker-view .days-of-week{display:flex}.datepicker-grid{flex-wrap:wrap}.datepicker-view .days .datepicker-cell,.datepicker-view .dow{flex-basis:14.2857142857%}.datepicker-view.datepicker-grid .datepicker-cell{flex-basis:25%}.datepicker-cell,.datepicker-view .week{height:2.25rem;line-height:2.25rem}.datepicker-title{background-color:#f5f5f5;box-shadow:inset 0 -1px 1px #0a0a0a1a;font-weight:700;padding:.375rem .75rem;text-align:center}.datepicker-header .datepicker-controls{padding:2px 2px 0}.datepicker-controls .button{align-items:center;background-color:#fff;border:1px solid #dbdbdb;border-radius:4px;box-shadow:none;color:#363636;cursor:pointer;display:inline-flex;font-size:1rem;height:2.25em;justify-content:center;line-height:1.5;margin:0;padding:calc(.375em - 1px) .75em;position:relative;text-align:center;vertical-align:top;white-space:nowrap}.datepicker-controls .button:active,.datepicker-controls .button:focus{outline:none}.datepicker-controls .button:hover{border-color:#b5b5b5;color:#363636}.datepicker-controls .button:focus{border-color:#3273dc;color:#363636}.datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em #3273dc40}.datepicker-controls .button:active{border-color:#4a4a4a;color:#363636}.datepicker-controls .button[disabled]{cursor:not-allowed}.datepicker-header .datepicker-controls .button{border-color:transparent;font-weight:700}.datepicker-header .datepicker-controls .button:hover{background-color:#f9f9f9}.datepicker-header .datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em #ffffff40}.datepicker-header .datepicker-controls .button:active{background-color:#f2f2f2}.datepicker-header .datepicker-controls .button[disabled]{box-shadow:none}.datepicker-footer .datepicker-controls .button{border-radius:2px;font-size:.75rem;margin:calc(.375rem - 1px) .375rem;width:100%}.datepicker-controls .view-switch{flex:auto}.datepicker-controls .next-btn,.datepicker-controls .prev-btn{padding-left:.375rem;padding-right:.375rem;width:2.25rem}.datepicker-controls .next-btn.disabled,.datepicker-controls .prev-btn.disabled{visibility:hidden}.datepicker-view .dow{font-size:.875rem;font-weight:700;height:1.5rem;line-height:1.5rem}.datepicker-view .week{color:#b5b5b5;font-size:.75rem;width:2.25rem}@media (max-width:22.5rem){.datepicker-view .week{width:1.96875rem}}.datepicker-grid{width:15.75rem}@media (max-width:22.5rem){.calendar-weeks+.days .datepicker-grid{width:13.78125rem}}.datepicker-cell:not(.disabled):hover{background-color:#f9f9f9;cursor:pointer}.datepicker-cell.focused:not(.selected){background-color:#e8e8e8}.datepicker-cell.selected,.datepicker-cell.selected:hover{background-color:#3273dc;color:#fff;font-weight:600}.datepicker-cell.disabled{color:#dbdbdb}.datepicker-cell.next:not(.disabled),.datepicker-cell.prev:not(.disabled){color:#7a7a7a}.datepicker-cell.next.selected,.datepicker-cell.prev.selected{color:#e6e6e6}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today){background-color:#f5f5f5;border-radius:0}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover{background-color:#eee}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused{background-color:#e8e8e8}.datepicker-cell.today:not(.selected){background-color:#00d1b2}.datepicker-cell.today:not(.selected):not(.disabled){color:#fff}.datepicker-cell.today.focused:not(.selected){background-color:#00c4a7}.datepicker-cell.range-end:not(.selected),.datepicker-cell.range-start:not(.selected){background-color:#b5b5b5;color:#fff}.datepicker-cell.range-end.focused:not(.selected),.datepicker-cell.range-start.focused:not(.selected){background-color:#afafaf}.datepicker-cell.range-start{border-radius:4px 0 0 4px}.datepicker-cell.range-end{border-radius:0 4px 4px 0}.datepicker-cell.range{background-color:#dbdbdb;border-radius:0}.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover{background-color:#d5d5d5}.datepicker-cell.range.disabled{color:#c2c2c2}.datepicker-cell.range.focused{background-color:#cfcfcf}.datepicker-view.datepicker-grid .datepicker-cell{height:4.5rem;line-height:4.5rem}.datepicker-input.in-edit{border-color:#2366d1}.datepicker-input.in-edit:active,.datepicker-input.in-edit:focus{box-shadow:0 0 .25em .25em #2366d133}\n", ".tcloud-ui-datepicker .datepicker-cell.focused:not(.selected){background-color:inherit!important}.tcloud-ui-datepicker .datepicker-cell.highlighted:not(.selected){background-color:#f5f5f5!important}.datepicker-picker{border:1px solid #ccc;padding:10px 15px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiDatepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-datepicker', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$4], encapsulation: ViewEncapsulation.None, template: "<!-- Input mode -->\r\n<ng-container *ngIf=\"modeInput\">\r\n\r\n  <div class=\"tcloud-ui-datepicker input-tc-datepicker\" [class.no-border]=\"!useBorder\" [class.child-input-date-time]=\"childInputDateTime\" >\r\n    <table class=\"table-box-input\">\r\n      <tr>\r\n        <td class=\"td-icon\">\r\n          <div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fas fa-calendar-alt\"></i></div>\r\n        </td>\r\n        <td class=\"td-date\">\r\n          <input #input_datepicker type=\"text\" name=\"{{ID}}\" id=\"{{ID}}\" class=\"form-control\" [title]=\"innerValue\">\r\n        </td>\r\n      </tr>\r\n    </table>\r\n  </div>\r\n\r\n  \r\n  \r\n</ng-container>\r\n\r\n<!-- Inline mode -->\r\n<ng-container *ngIf=\"!modeInput\">  \r\n  <div class=\"tcloud-ui-datepicker tcloud-ui-datepicker-second\" #input_datepicker id=\"{{ID}}\" pattern=\"/^\\d{2}\\/\\d{2}\\/\\d{4}$/\" [title]=\"innerValue\"></div>\r\n</ng-container>\r\n\r\n\r\n<!-- EX de uso \r\n  <tc-datepicker \r\n    [multiple]=\"false\"\r\n    [daysOfWeekDisabled]=\"[0,6]\"\r\n    [minDate]=\"'18/11/2021'\"\r\n    [maxDate]=\"'18/12/2023'\"\r\n    [datesDisabled]=\"['12/10/2022','25/12/2022']\"\r\n    [modeInput]=\"false\"\r\n    [(ngModel)]=\"dateValue\" >\r\n  </tc-datepicker>\r\n  \r\n  // multiple = false\r\n  // dateValue - string - pode ser: 12/12/2022 \r\n\r\n  // multiple = true\r\n  // dateValue - string - pode ser: 11/12/2022,12/12/2022 ... \r\n\r\n  <pre>data: {{ dateValue }}</pre>\r\n-->\r\n", styles: [".input_datepicker{width:100%;max-width:290px}.input-tc-datepicker{background-color:#fff;border:1px solid var(--tc-gray-300);border-radius:3px;height:40px}.input-tc-datepicker.no-border{border:none!important}.input-tc-datepicker .table-box-input{width:100%}.input-tc-datepicker .table-box-input .td-icon{width:14px}.input-tc-datepicker .table-box-input .td-icon .delimiter-time-icon{text-align:center;cursor:pointer}.input-tc-datepicker .table-box-input .td-icon .delimiter-time-icon i{position:relative;left:1px;opacity:.5}.input-tc-datepicker .table-box-input .td-date{min-width:30px;width:101px input;width-width:100%}.input-tc-datepicker .table-box-input input{border:none;margin-top:2px;font-size:13px!important}.child-input-date-time{height:28px!important}\n", ".datepicker{display:none}.datepicker.active{display:block}.datepicker-dropdown{left:0;padding-top:4px;position:absolute;top:0;z-index:20}.datepicker-dropdown.datepicker-orient-top{padding-bottom:4px;padding-top:0}.datepicker-picker{background-color:#fff;border-radius:4px;display:inline-block}.datepicker-dropdown .datepicker-picker{box-shadow:0 2px 3px #0a0a0a1a,0 0 0 1px #0a0a0a1a}.datepicker-picker span{-webkit-touch-callout:none;border:0;border-radius:4px;cursor:default;display:block;flex:1;text-align:center;-webkit-user-select:none;user-select:none}.datepicker-main{padding:2px}.datepicker-footer{background-color:#f5f5f5;box-shadow:inset 0 1px 1px #0a0a0a1a}.datepicker-controls,.datepicker-grid,.datepicker-view,.datepicker-view .days-of-week{display:flex}.datepicker-grid{flex-wrap:wrap}.datepicker-view .days .datepicker-cell,.datepicker-view .dow{flex-basis:14.2857142857%}.datepicker-view.datepicker-grid .datepicker-cell{flex-basis:25%}.datepicker-cell,.datepicker-view .week{height:2.25rem;line-height:2.25rem}.datepicker-title{background-color:#f5f5f5;box-shadow:inset 0 -1px 1px #0a0a0a1a;font-weight:700;padding:.375rem .75rem;text-align:center}.datepicker-header .datepicker-controls{padding:2px 2px 0}.datepicker-controls .button{align-items:center;background-color:#fff;border:1px solid #dbdbdb;border-radius:4px;box-shadow:none;color:#363636;cursor:pointer;display:inline-flex;font-size:1rem;height:2.25em;justify-content:center;line-height:1.5;margin:0;padding:calc(.375em - 1px) .75em;position:relative;text-align:center;vertical-align:top;white-space:nowrap}.datepicker-controls .button:active,.datepicker-controls .button:focus{outline:none}.datepicker-controls .button:hover{border-color:#b5b5b5;color:#363636}.datepicker-controls .button:focus{border-color:#3273dc;color:#363636}.datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em #3273dc40}.datepicker-controls .button:active{border-color:#4a4a4a;color:#363636}.datepicker-controls .button[disabled]{cursor:not-allowed}.datepicker-header .datepicker-controls .button{border-color:transparent;font-weight:700}.datepicker-header .datepicker-controls .button:hover{background-color:#f9f9f9}.datepicker-header .datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em #ffffff40}.datepicker-header .datepicker-controls .button:active{background-color:#f2f2f2}.datepicker-header .datepicker-controls .button[disabled]{box-shadow:none}.datepicker-footer .datepicker-controls .button{border-radius:2px;font-size:.75rem;margin:calc(.375rem - 1px) .375rem;width:100%}.datepicker-controls .view-switch{flex:auto}.datepicker-controls .next-btn,.datepicker-controls .prev-btn{padding-left:.375rem;padding-right:.375rem;width:2.25rem}.datepicker-controls .next-btn.disabled,.datepicker-controls .prev-btn.disabled{visibility:hidden}.datepicker-view .dow{font-size:.875rem;font-weight:700;height:1.5rem;line-height:1.5rem}.datepicker-view .week{color:#b5b5b5;font-size:.75rem;width:2.25rem}@media (max-width:22.5rem){.datepicker-view .week{width:1.96875rem}}.datepicker-grid{width:15.75rem}@media (max-width:22.5rem){.calendar-weeks+.days .datepicker-grid{width:13.78125rem}}.datepicker-cell:not(.disabled):hover{background-color:#f9f9f9;cursor:pointer}.datepicker-cell.focused:not(.selected){background-color:#e8e8e8}.datepicker-cell.selected,.datepicker-cell.selected:hover{background-color:#3273dc;color:#fff;font-weight:600}.datepicker-cell.disabled{color:#dbdbdb}.datepicker-cell.next:not(.disabled),.datepicker-cell.prev:not(.disabled){color:#7a7a7a}.datepicker-cell.next.selected,.datepicker-cell.prev.selected{color:#e6e6e6}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today){background-color:#f5f5f5;border-radius:0}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover{background-color:#eee}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused{background-color:#e8e8e8}.datepicker-cell.today:not(.selected){background-color:#00d1b2}.datepicker-cell.today:not(.selected):not(.disabled){color:#fff}.datepicker-cell.today.focused:not(.selected){background-color:#00c4a7}.datepicker-cell.range-end:not(.selected),.datepicker-cell.range-start:not(.selected){background-color:#b5b5b5;color:#fff}.datepicker-cell.range-end.focused:not(.selected),.datepicker-cell.range-start.focused:not(.selected){background-color:#afafaf}.datepicker-cell.range-start{border-radius:4px 0 0 4px}.datepicker-cell.range-end{border-radius:0 4px 4px 0}.datepicker-cell.range{background-color:#dbdbdb;border-radius:0}.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover{background-color:#d5d5d5}.datepicker-cell.range.disabled{color:#c2c2c2}.datepicker-cell.range.focused{background-color:#cfcfcf}.datepicker-view.datepicker-grid .datepicker-cell{height:4.5rem;line-height:4.5rem}.datepicker-input.in-edit{border-color:#2366d1}.datepicker-input.in-edit:active,.datepicker-input.in-edit:focus{box-shadow:0 0 .25em .25em #2366d133}\n", ".datepicker-picker{border:1px solid #ccc;padding:10px 15px}\n"] }]
-        }], ctorParameters: function () { return [{ type: DateBRPipe }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { multiple: [{
+            args: [{ selector: 'tcloud-ui-datepicker', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$4], encapsulation: ViewEncapsulation.None, template: "<!-- Input mode -->\r\n<ng-container *ngIf=\"modeInput\">\r\n\r\n  <div class=\"tcloud-ui-datepicker input-tc-datepicker\" [class.no-border]=\"!useBorder\" [class.child-input-date-time]=\"childInputDateTime\" >\r\n    <table class=\"table-box-input\">\r\n      <tr>\r\n        <td class=\"td-icon\">\r\n          <div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fas fa-calendar-alt\"></i></div>\r\n        </td>\r\n        <td class=\"td-date\">\r\n          <input #input_datepicker type=\"text\" name=\"{{ID}}\" id=\"{{ID}}\" class=\"form-control\" [title]=\"innerValue\" >\r\n        </td>\r\n      </tr>\r\n    </table>\r\n  </div>\r\n</ng-container>\r\n\r\n<!-- Inline mode -->\r\n<ng-container *ngIf=\"!modeInput\">  \r\n  <div class=\"tcloud-ui-datepicker tcloud-ui-datepicker-second\" #input_datepicker id=\"{{ID}}\" pattern=\"/^\\d{2}\\/\\d{2}\\/\\d{4}$/\" [title]=\"innerValue\"></div>\r\n</ng-container>\r\n\r\n<!-- EX de uso \r\n  <tc-datepicker \r\n    [multiple]=\"false\"\r\n    [daysOfWeekDisabled]=\"[0,6]\"\r\n    [minDate]=\"'18/11/2021'\"\r\n    [maxDate]=\"'18/12/2023'\"\r\n    [datesDisabled]=\"['12/10/2022','25/12/2022']\"\r\n    [modeInput]=\"false\"\r\n    (onChange)=\"($event)\"\r\n    (onCheckDate)=\"onCheckDate($event)\"\r\n    [(ngModel)]=\"dateValue\" >\r\n  </tc-datepicker>\r\n  \r\n  // multiple = false\r\n  // dateValue - string - pode ser: 12/12/2022 \r\n\r\n  // multiple = true\r\n  // dateValue - string - pode ser: 11/12/2022,12/12/2022 ... \r\n\r\n  <pre>data: {{ dateValue }}</pre>\r\n-->\r\n", styles: [".input_datepicker{width:100%;max-width:290px}.input-tc-datepicker{background-color:#fff;border:1px solid var(--tc-gray-300);border-radius:3px;height:40px}.input-tc-datepicker.no-border{border:none!important}.input-tc-datepicker .table-box-input{width:100%}.input-tc-datepicker .table-box-input .td-icon{width:14px}.input-tc-datepicker .table-box-input .td-icon .delimiter-time-icon{text-align:center;cursor:pointer}.input-tc-datepicker .table-box-input .td-icon .delimiter-time-icon i{position:relative;left:1px;opacity:.5}.input-tc-datepicker .table-box-input .td-date{min-width:30px;width:101px input;width-width:100%}.input-tc-datepicker .table-box-input input{border:none;margin-top:2px;font-size:13px!important}.child-input-date-time{height:28px!important}\n", ".datepicker{display:none}.datepicker.active{display:block}.datepicker-dropdown{left:0;padding-top:4px;position:absolute;top:0;z-index:20}.datepicker-dropdown.datepicker-orient-top{padding-bottom:4px;padding-top:0}.datepicker-picker{background-color:#fff;border-radius:4px;display:inline-block}.datepicker-dropdown .datepicker-picker{box-shadow:0 2px 3px #0a0a0a1a,0 0 0 1px #0a0a0a1a}.datepicker-picker span{-webkit-touch-callout:none;border:0;border-radius:4px;cursor:default;display:block;flex:1;text-align:center;-webkit-user-select:none;user-select:none}.datepicker-main{padding:2px}.datepicker-footer{background-color:#f5f5f5;box-shadow:inset 0 1px 1px #0a0a0a1a}.datepicker-controls,.datepicker-grid,.datepicker-view,.datepicker-view .days-of-week{display:flex}.datepicker-grid{flex-wrap:wrap}.datepicker-view .days .datepicker-cell,.datepicker-view .dow{flex-basis:14.2857142857%}.datepicker-view.datepicker-grid .datepicker-cell{flex-basis:25%}.datepicker-cell,.datepicker-view .week{height:2.25rem;line-height:2.25rem}.datepicker-title{background-color:#f5f5f5;box-shadow:inset 0 -1px 1px #0a0a0a1a;font-weight:700;padding:.375rem .75rem;text-align:center}.datepicker-header .datepicker-controls{padding:2px 2px 0}.datepicker-controls .button{align-items:center;background-color:#fff;border:1px solid #dbdbdb;border-radius:4px;box-shadow:none;color:#363636;cursor:pointer;display:inline-flex;font-size:1rem;height:2.25em;justify-content:center;line-height:1.5;margin:0;padding:calc(.375em - 1px) .75em;position:relative;text-align:center;vertical-align:top;white-space:nowrap}.datepicker-controls .button:active,.datepicker-controls .button:focus{outline:none}.datepicker-controls .button:hover{border-color:#b5b5b5;color:#363636}.datepicker-controls .button:focus{border-color:#3273dc;color:#363636}.datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em #3273dc40}.datepicker-controls .button:active{border-color:#4a4a4a;color:#363636}.datepicker-controls .button[disabled]{cursor:not-allowed}.datepicker-header .datepicker-controls .button{border-color:transparent;font-weight:700}.datepicker-header .datepicker-controls .button:hover{background-color:#f9f9f9}.datepicker-header .datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em #ffffff40}.datepicker-header .datepicker-controls .button:active{background-color:#f2f2f2}.datepicker-header .datepicker-controls .button[disabled]{box-shadow:none}.datepicker-footer .datepicker-controls .button{border-radius:2px;font-size:.75rem;margin:calc(.375rem - 1px) .375rem;width:100%}.datepicker-controls .view-switch{flex:auto}.datepicker-controls .next-btn,.datepicker-controls .prev-btn{padding-left:.375rem;padding-right:.375rem;width:2.25rem}.datepicker-controls .next-btn.disabled,.datepicker-controls .prev-btn.disabled{visibility:hidden}.datepicker-view .dow{font-size:.875rem;font-weight:700;height:1.5rem;line-height:1.5rem}.datepicker-view .week{color:#b5b5b5;font-size:.75rem;width:2.25rem}@media (max-width:22.5rem){.datepicker-view .week{width:1.96875rem}}.datepicker-grid{width:15.75rem}@media (max-width:22.5rem){.calendar-weeks+.days .datepicker-grid{width:13.78125rem}}.datepicker-cell:not(.disabled):hover{background-color:#f9f9f9;cursor:pointer}.datepicker-cell.focused:not(.selected){background-color:#e8e8e8}.datepicker-cell.selected,.datepicker-cell.selected:hover{background-color:#3273dc;color:#fff;font-weight:600}.datepicker-cell.disabled{color:#dbdbdb}.datepicker-cell.next:not(.disabled),.datepicker-cell.prev:not(.disabled){color:#7a7a7a}.datepicker-cell.next.selected,.datepicker-cell.prev.selected{color:#e6e6e6}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today){background-color:#f5f5f5;border-radius:0}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover{background-color:#eee}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused{background-color:#e8e8e8}.datepicker-cell.today:not(.selected){background-color:#00d1b2}.datepicker-cell.today:not(.selected):not(.disabled){color:#fff}.datepicker-cell.today.focused:not(.selected){background-color:#00c4a7}.datepicker-cell.range-end:not(.selected),.datepicker-cell.range-start:not(.selected){background-color:#b5b5b5;color:#fff}.datepicker-cell.range-end.focused:not(.selected),.datepicker-cell.range-start.focused:not(.selected){background-color:#afafaf}.datepicker-cell.range-start{border-radius:4px 0 0 4px}.datepicker-cell.range-end{border-radius:0 4px 4px 0}.datepicker-cell.range{background-color:#dbdbdb;border-radius:0}.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover{background-color:#d5d5d5}.datepicker-cell.range.disabled{color:#c2c2c2}.datepicker-cell.range.focused{background-color:#cfcfcf}.datepicker-view.datepicker-grid .datepicker-cell{height:4.5rem;line-height:4.5rem}.datepicker-input.in-edit{border-color:#2366d1}.datepicker-input.in-edit:active,.datepicker-input.in-edit:focus{box-shadow:0 0 .25em .25em #2366d133}\n", ".tcloud-ui-datepicker .datepicker-cell.focused:not(.selected){background-color:inherit!important}.tcloud-ui-datepicker .datepicker-cell.highlighted:not(.selected){background-color:#f5f5f5!important}.datepicker-picker{border:1px solid #ccc;padding:10px 15px}\n"] }]
+        }], ctorParameters: function () { return [{ type: DateBRPipe }]; }, propDecorators: { multiple: [{
                 type: Input
             }], maxNumberOfDates: [{
                 type: Input
@@ -3011,12 +3148,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], childInputDateTime: [{
                 type: Input
+            }], startViewInMinDate: [{
+                type: Input
+            }], startViewInMaxDate: [{
+                type: Input
+            }], disabled: [{
+                type: Input
             }], onChange: [{
                 type: Output
             }], ngModel: [{
                 type: Input
             }], ngModelChange: [{
                 type: Output
+            }], onCheckDate: [{
+                type: Output
             }], input_datepicker: [{
                 type: ViewChild,
                 args: ['input_datepicker', { static: false }]
@@ -3309,7 +3454,7 @@ class TCloudUiDatepickerTimeComponent {
         this.onTouchedCallback = fn;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiDatepickerTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TCloudUiDatepickerTimeComponent, selector: "tcloud-ui-datepicker-time", inputs: { ngModel: "ngModel", useOptionsDateTime: "useOptionsDateTime" }, outputs: { ngModelChange: "ngModelChange", onChange: "onChange", eventChange: "eventChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$3], viewQueries: [{ propertyName: "datepickertime", first: true, predicate: ["_datepickertime"], descendants: true }], ngImport: i0, template: "<div class=\"tcloud-ui-datepicker-time\">\r\n  <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>\r\n</div>", 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:12px}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;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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TCloudUiDatepickerTimeComponent, selector: "tcloud-ui-datepicker-time", inputs: { ngModel: "ngModel", useOptionsDateTime: "useOptionsDateTime" }, outputs: { ngModelChange: "ngModelChange", onChange: "onChange", eventChange: "eventChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$3], viewQueries: [{ propertyName: "datepickertime", first: true, predicate: ["_datepickertime"], descendants: true }], ngImport: i0, template: "<div class=\"tcloud-ui-datepicker-time\">\r\n  <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>\r\n</div>", 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:12px}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;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", "startViewInMinDate", "startViewInMaxDate", "disabled", "ngModel", "code"], outputs: ["onChange", "ngModelChange", "onCheckDate"] }, { 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: "16.2.12", ngImport: i0, type: TCloudUiDatepickerTimeComponent, decorators: [{
             type: Component,
@@ -3979,7 +4124,7 @@ class TCloudUiFiltersComponent {
         this.result.emit(data);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiFiltersComponent, deps: [{ token: i1.DatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TCloudUiFiltersComponent, selector: "tcloud-ui-filters", inputs: { data: "data", filters: "filters", submitText: "submitText", btnSubmitClass: "btnSubmitClass", useOnChangeSubmit: "useOnChangeSubmit", useButtonSubmit: "useButtonSubmit", useNormalizeCaseSensitive: "useNormalizeCaseSensitive", useRangeDate: "useRangeDate", useFilterAccept: "useFilterAccept" }, outputs: { result: "result", onFilter: "onFilter", onChange: "onChange", onSubmit: "onSubmit" }, viewQueries: [{ propertyName: "_formulario", first: true, predicate: ["_formulario"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"show_filters\" class=\"tcloud-ui-filters area-filter\">\r\n    <ng-container *ngFor=\"let item of filters; let i = index\">\r\n\r\n        <ng-container *ngIf=\"!item.type || (item.type && item.type !== 'boolean')\">\r\n\r\n            <ng-container *ngIf=\"item.type === 'date-local'\">\r\n\r\n                <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\r\n                    <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\"><i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\r\n                    <div class=\"box-type-{{item.type}}\">\r\n                        <tcloud-ui-datepicker \r\n                            #_input\r\n                            name=\"input_{{i+1}}\"\r\n                            [modeInput]=\"true\"\r\n                            [(ngModel)]=\"item.value\"\r\n                            (ngModelChange)=\"searchIn(item, _input)\">\r\n                        </tcloud-ui-datepicker>\r\n                        <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(item.value !== undefined && item.value !== null && item.value !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; item.value = ''\">\r\n                            <i class=\"fas fa-times\"></i>\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n\r\n                \r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"item.type !== 'date-local'\">\r\n                <ng-container *ngIf=\"item.type === 'datetime-local'\">\r\n\r\n                    <ng-container *ngIf=\"(item.id === 'start' || item.id === 'stop') && useRangeDate\">\r\n                        <!-- PERIOD RANGE DATE -->\r\n                        <ng-container *ngIf=\"item.id === 'start'\">\r\n                            <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+start_stop_width+''+start_stop_und : ''\">\r\n                                <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\"><i [class.to-active]=\"(_range_date && _range_date.result && _range_date.result.start && _range_date.result.stop )\" class=\"fas fa-filter icon-filter\"></i>&nbsp;</div>\r\n                                <range-date  \r\n                                    #_range_date ngModel name=\"input_{{i+1}}\" \r\n                                    [defaultValuePeriodStartStop]=\"item.defaultValuePeriodStartStop\"\r\n                                    [descriptionStart]=\"descriptionStart\"\r\n                                    [descriptionStop]=\"descriptionStop\"\r\n                                    required \r\n                                    (onChange)=\"searchInRange(_range_date); searchIn(item, _range_date)\">\r\n                                </range-date>\r\n                            </div>\r\n                        </ng-container>   \r\n                        <input *ngIf=\"item.id === 'start'\" #_input name=\"input_{{i+1}}\" type=\"hidden\" [(ngModel)]=\"start_value\">  \r\n                        <input *ngIf=\"item.id === 'stop'\" #_input name=\"input_{{i+1}}\" type=\"hidden\" [(ngModel)]=\"stop_value\">               \r\n                    </ng-container>\r\n\r\n                    <ng-container *ngIf=\"!item.id || !useRangeDate\">\r\n\r\n                        <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\r\n                            <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\"><i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\r\n                            <div class=\"box-type-{{item.type}}\">\r\n                                <tcloud-ui-datepicker-time \r\n                                    #_input \r\n                                    [(ngModel)]=\"item.value\" \r\n                                    name=\"input_{{i+1}}\" \r\n                                    [useOptionsDateTime]=\"(item && item.useOptionsDateTime) ? true : false\"\r\n                                    (eventChange)=\"searchIn(item, _input)\" >\r\n                                </tcloud-ui-datepicker-time>\r\n                                <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(item.value !== undefined && item.value !== null && item.value !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; item.value = ''\">\r\n                                    <i class=\"fas fa-times\"></i>\r\n                                </button>\r\n                            </div>\r\n                        </div>\r\n\r\n                    </ng-container>\r\n\r\n                </ng-container>\r\n            </ng-container>\r\n                        \r\n            <ng-container *ngIf=\"item.type !== 'select' && item.type !== 'datetime-local' && item.type !== 'date-local'\">\r\n                <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\r\n\r\n                    <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\r\n                    <div class=\"box-type-{{item.type}}\">\r\n                        <input \r\n                            #_input\r\n                            [(ngModel)]=\"item.value\"\r\n                            placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\r\n                            name=\"input_{{i+1}}\" \r\n                            type=\"{{ (item.type === 'number') ? 'text' : item.type }}\" \r\n                            class=\"tc-form-control\"                     \r\n                            (keyup)=\"searchIn(item, $event)\">                    \r\n                        <button class=\"btn-clear-filter-text\" [class.to-hide]=\"_input.value === ''\" (click)=\"searchIn(item, null); _input.value = ''\">\r\n                            <i class=\"fas fa-times\"></i>\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"item.type === 'select' && item.data && (item.data).length > 0\" >\r\n                <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\r\n\r\n                    <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\r\n                    <div class=\"box-type-{{item.type}}\">\r\n                        <select \r\n                            #_input\r\n                            [(ngModel)]=\"item.value\"\r\n                            name=\"input_{{i+1}}\" \r\n                            class=\"tc-form-control\"                     \r\n                            (change)=\"searchIn(item, $event)\">\r\n                            <option [ngValue]=\"\"></option>\r\n                            <ng-container *ngFor=\"let v of item.data\">\r\n                                <option [value]=\"v.value\">{{ v.description }}</option>\r\n                            </ng-container>\r\n                        </select>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n\r\n        </ng-container>\r\n\r\n\r\n        <ng-container *ngIf=\"item.type && item.type === 'boolean'\">\r\n            \r\n            <div class=\"box-filter-input\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\r\n                <div class=\"m-description tc-title-ellipsis\" title=\"{{ item.description }}\" title=\"{{ item.description }}\"><i [class.to-active]=\"_input.checked === true\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\r\n                <div class=\"area-input-checkbox\">\r\n                    <div class=\"tc-form-control\">\r\n                        <label>\r\n                            {{ item.placeholder }}\r\n                            <input \r\n                                #_input\r\n                                placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\r\n                                name=\"input_{{i+1}}\" \r\n                                type=\"checkbox\"                   \r\n                                (change)=\"searchIn(item, _input.checked)\">   \r\n                        </label>\r\n                    </div>                 \r\n                </div>\r\n            </div>\r\n\r\n        </ng-container>\r\n\r\n\r\n    </ng-container>\r\n\r\n    <div class=\"text-right mb-1 mr-1\" *ngIf=\"useButtonSubmit\">\r\n        <button type=\"button\" class=\"tc-btn {{ btnSubmitClass }}\" (click)=\"toSubmit()\" >{{ submitText }}</button>\r\n    </div>\r\n\r\n</div>\r\n\r\n<!-- <pre>{{ inputs | json }}</pre> -->\r\n<!-- <pre> {{ data | json }} </pre> -->\r\n\r\n<!-- <p>FILTERS</p><pre> {{ filters | json }}</pre> -->\r\n\r\n<!--\r\n    <pre>start_stop: {{ start_stop }}</pre>\r\n    <pre>start_stop_width: {{ start_stop_width }}</pre>\r\n    <pre>start_stop_und: {{ start_stop_und }}</pre>\r\n-->", styles: [".box-filter-input{display:inline-grid;padding:10px 5px;position:relative}.area-filter{border:1px solid #eeeeee;border-radius:5px;margin-bottom:5px}.btn-clear-filter-text{position:absolute;right:8px;top:38px;background-color:#fff;border:none;cursor:pointer;color:#aaa}.to-hide{display:none}.icon-filter{color:#ccc}.to-active{color:var(--tc-primary)}.area-input-checkbox label{cursor:pointer;margin-bottom:0;color:#9f9f9f}.area-input-checkbox div.tc-form-control{height:40px}.m-description{margin-bottom:3px}input{color:#535353}input[type=text],input[type=number],select{height:40px!important}.type-hidden{display:none;width:0px!important}.box-type-global_vars{display:none!important;width:0px!important}.tc-title-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\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.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.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.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: "component", type: TCloudUiDatepickerTimeComponent, selector: "tcloud-ui-datepicker-time", inputs: ["ngModel", "useOptionsDateTime"], outputs: ["ngModelChange", "onChange", "eventChange"] }, { kind: "component", type: TCloudUiDatepickerComponent, selector: "tcloud-ui-datepicker", inputs: ["multiple", "maxNumberOfDates", "daysOfWeekDisabled", "minDate", "maxDate", "datesDisabled", "modeInput", "useBorder", "childInputDateTime", "ngModel", "code"], outputs: ["onChange", "ngModelChange"] }, { kind: "component", type: TCloudUiRangeDateComponent, selector: "range-date", inputs: ["defaultValuePeriodStartStop", "required", "descriptionStart", "descriptionStop"], outputs: ["onChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TCloudUiFiltersComponent, selector: "tcloud-ui-filters", inputs: { data: "data", filters: "filters", submitText: "submitText", btnSubmitClass: "btnSubmitClass", useOnChangeSubmit: "useOnChangeSubmit", useButtonSubmit: "useButtonSubmit", useNormalizeCaseSensitive: "useNormalizeCaseSensitive", useRangeDate: "useRangeDate", useFilterAccept: "useFilterAccept" }, outputs: { result: "result", onFilter: "onFilter", onChange: "onChange", onSubmit: "onSubmit" }, viewQueries: [{ propertyName: "_formulario", first: true, predicate: ["_formulario"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"show_filters\" class=\"tcloud-ui-filters area-filter\">\r\n    <ng-container *ngFor=\"let item of filters; let i = index\">\r\n\r\n        <ng-container *ngIf=\"!item.type || (item.type && item.type !== 'boolean')\">\r\n\r\n            <ng-container *ngIf=\"item.type === 'date-local'\">\r\n\r\n                <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\r\n                    <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\"><i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\r\n                    <div class=\"box-type-{{item.type}}\">\r\n                        <tcloud-ui-datepicker \r\n                            #_input\r\n                            name=\"input_{{i+1}}\"\r\n                            [modeInput]=\"true\"\r\n                            [(ngModel)]=\"item.value\"\r\n                            (ngModelChange)=\"searchIn(item, _input)\">\r\n                        </tcloud-ui-datepicker>\r\n                        <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(item.value !== undefined && item.value !== null && item.value !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; item.value = ''\">\r\n                            <i class=\"fas fa-times\"></i>\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n\r\n                \r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"item.type !== 'date-local'\">\r\n                <ng-container *ngIf=\"item.type === 'datetime-local'\">\r\n\r\n                    <ng-container *ngIf=\"(item.id === 'start' || item.id === 'stop') && useRangeDate\">\r\n                        <!-- PERIOD RANGE DATE -->\r\n                        <ng-container *ngIf=\"item.id === 'start'\">\r\n                            <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+start_stop_width+''+start_stop_und : ''\">\r\n                                <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\"><i [class.to-active]=\"(_range_date && _range_date.result && _range_date.result.start && _range_date.result.stop )\" class=\"fas fa-filter icon-filter\"></i>&nbsp;</div>\r\n                                <range-date  \r\n                                    #_range_date ngModel name=\"input_{{i+1}}\" \r\n                                    [defaultValuePeriodStartStop]=\"item.defaultValuePeriodStartStop\"\r\n                                    [descriptionStart]=\"descriptionStart\"\r\n                                    [descriptionStop]=\"descriptionStop\"\r\n                                    required \r\n                                    (onChange)=\"searchInRange(_range_date); searchIn(item, _range_date)\">\r\n                                </range-date>\r\n                            </div>\r\n                        </ng-container>   \r\n                        <input *ngIf=\"item.id === 'start'\" #_input name=\"input_{{i+1}}\" type=\"hidden\" [(ngModel)]=\"start_value\">  \r\n                        <input *ngIf=\"item.id === 'stop'\" #_input name=\"input_{{i+1}}\" type=\"hidden\" [(ngModel)]=\"stop_value\">               \r\n                    </ng-container>\r\n\r\n                    <ng-container *ngIf=\"!item.id || !useRangeDate\">\r\n\r\n                        <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\r\n                            <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\"><i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\r\n                            <div class=\"box-type-{{item.type}}\">\r\n                                <tcloud-ui-datepicker-time \r\n                                    #_input \r\n                                    [(ngModel)]=\"item.value\" \r\n                                    name=\"input_{{i+1}}\" \r\n                                    [useOptionsDateTime]=\"(item && item.useOptionsDateTime) ? true : false\"\r\n                                    (eventChange)=\"searchIn(item, _input)\" >\r\n                                </tcloud-ui-datepicker-time>\r\n                                <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(item.value !== undefined && item.value !== null && item.value !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; item.value = ''\">\r\n                                    <i class=\"fas fa-times\"></i>\r\n                                </button>\r\n                            </div>\r\n                        </div>\r\n\r\n                    </ng-container>\r\n\r\n                </ng-container>\r\n            </ng-container>\r\n                        \r\n            <ng-container *ngIf=\"item.type !== 'select' && item.type !== 'datetime-local' && item.type !== 'date-local'\">\r\n                <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\r\n\r\n                    <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\r\n                    <div class=\"box-type-{{item.type}}\">\r\n                        <input \r\n                            #_input\r\n                            [(ngModel)]=\"item.value\"\r\n                            placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\r\n                            name=\"input_{{i+1}}\" \r\n                            type=\"{{ (item.type === 'number') ? 'text' : item.type }}\" \r\n                            class=\"tc-form-control\"                     \r\n                            (keyup)=\"searchIn(item, $event)\">                    \r\n                        <button class=\"btn-clear-filter-text\" [class.to-hide]=\"_input.value === ''\" (click)=\"searchIn(item, null); _input.value = ''\">\r\n                            <i class=\"fas fa-times\"></i>\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"item.type === 'select' && item.data && (item.data).length > 0\" >\r\n                <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\r\n\r\n                    <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\r\n                    <div class=\"box-type-{{item.type}}\">\r\n                        <select \r\n                            #_input\r\n                            [(ngModel)]=\"item.value\"\r\n                            name=\"input_{{i+1}}\" \r\n                            class=\"tc-form-control\"                     \r\n                            (change)=\"searchIn(item, $event)\">\r\n                            <option [ngValue]=\"\"></option>\r\n                            <ng-container *ngFor=\"let v of item.data\">\r\n                                <option [value]=\"v.value\">{{ v.description }}</option>\r\n                            </ng-container>\r\n                        </select>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n\r\n        </ng-container>\r\n\r\n\r\n        <ng-container *ngIf=\"item.type && item.type === 'boolean'\">\r\n            \r\n            <div class=\"box-filter-input\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\r\n                <div class=\"m-description tc-title-ellipsis\" title=\"{{ item.description }}\" title=\"{{ item.description }}\"><i [class.to-active]=\"_input.checked === true\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\r\n                <div class=\"area-input-checkbox\">\r\n                    <div class=\"tc-form-control\">\r\n                        <label>\r\n                            {{ item.placeholder }}\r\n                            <input \r\n                                #_input\r\n                                placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\r\n                                name=\"input_{{i+1}}\" \r\n                                type=\"checkbox\"                   \r\n                                (change)=\"searchIn(item, _input.checked)\">   \r\n                        </label>\r\n                    </div>                 \r\n                </div>\r\n            </div>\r\n\r\n        </ng-container>\r\n\r\n\r\n    </ng-container>\r\n\r\n    <div class=\"text-right mb-1 mr-1\" *ngIf=\"useButtonSubmit\">\r\n        <button type=\"button\" class=\"tc-btn {{ btnSubmitClass }}\" (click)=\"toSubmit()\" >{{ submitText }}</button>\r\n    </div>\r\n\r\n</div>\r\n\r\n<!-- <pre>{{ inputs | json }}</pre> -->\r\n<!-- <pre> {{ data | json }} </pre> -->\r\n\r\n<!-- <p>FILTERS</p><pre> {{ filters | json }}</pre> -->\r\n\r\n<!--\r\n    <pre>start_stop: {{ start_stop }}</pre>\r\n    <pre>start_stop_width: {{ start_stop_width }}</pre>\r\n    <pre>start_stop_und: {{ start_stop_und }}</pre>\r\n-->", styles: [".box-filter-input{display:inline-grid;padding:10px 5px;position:relative}.area-filter{border:1px solid #eeeeee;border-radius:5px;margin-bottom:5px}.btn-clear-filter-text{position:absolute;right:8px;top:38px;background-color:#fff;border:none;cursor:pointer;color:#aaa}.to-hide{display:none}.icon-filter{color:#ccc}.to-active{color:var(--tc-primary)}.area-input-checkbox label{cursor:pointer;margin-bottom:0;color:#9f9f9f}.area-input-checkbox div.tc-form-control{height:40px}.m-description{margin-bottom:3px}input{color:#535353}input[type=text],input[type=number],select{height:40px!important}.type-hidden{display:none;width:0px!important}.box-type-global_vars{display:none!important;width:0px!important}.tc-title-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\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.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.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.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: "component", type: TCloudUiDatepickerTimeComponent, selector: "tcloud-ui-datepicker-time", inputs: ["ngModel", "useOptionsDateTime"], outputs: ["ngModelChange", "onChange", "eventChange"] }, { kind: "component", type: TCloudUiDatepickerComponent, selector: "tcloud-ui-datepicker", inputs: ["multiple", "maxNumberOfDates", "daysOfWeekDisabled", "minDate", "maxDate", "datesDisabled", "modeInput", "useBorder", "childInputDateTime", "startViewInMinDate", "startViewInMaxDate", "disabled", "ngModel", "code"], outputs: ["onChange", "ngModelChange", "onCheckDate"] }, { kind: "component", type: TCloudUiRangeDateComponent, selector: "range-date", inputs: ["defaultValuePeriodStartStop", "required", "descriptionStart", "descriptionStop"], outputs: ["onChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiFiltersComponent, decorators: [{
             type: Component,
@@ -5740,11 +5885,11 @@ class TCloudUiReorderItemsComponent {
         return items;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiReorderItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TCloudUiReorderItemsComponent, selector: "tcloud-ui-reorder-items", inputs: { items: "items" }, outputs: { itemsChange: "itemsChange" }, ngImport: i0, template: "<ng-container *ngIf=\"sort_items\">\n\n\n\n    <table class=\"table-sort-items\">\n\n    \n\n\n        <ng-container *ngFor=\"let item of sort_items; let i = index\">\n\n            <tr>\n\n                <td class=\"area-name-description-item\">\n                    {{ item }}\n                    <div *ngIf=\"get_description(item)\" class=\"item-description\">\n                        {{ get_description(item) }}\n                    </div>\n                </td>\n\n                <td class=\"area-action-item\">\n                \n                    <ng-container>\n                        <div class=\"order-control\">\n                            <button class=\"btn-item-action-arrow\" (click)=\"move(item, i, (i-1))\" title=\"Alterar para cima\" [disabled]=\"i===0\">\n                                <i class=\"fas fa-caret-up p-up\" ></i>\n                            </button>\n                        </div>\n                         \n                        <div class=\"order-control\">\n                            <button class=\"btn-item-action-arrow\" (click)=\"move(item, i, (i+1))\" title=\"Alterar para baixo\" [disabled]=\"(i+1) === (sort_items).length\">\n                                <i class=\"fas fa-caret-down p-down\"></i>\n                            </button>\n                        \n                        </div>\n                    </ng-container>\n                </td>\n\n            </tr>\n        </ng-container>  \n\n    </table>\n  \n  </ng-container>", styles: [".table-sort-items{width:100%;border-collapse:initial}.order-control{text-align:center}.btn-item-action-arrow{border:none;background:none;cursor:pointer;padding:0;color:var(--tc-primary);font-size:16px;line-height:0}.btn-item-action-arrow:disabled{opacity:.4;cursor:not-allowed!important}.item-description{color:#a2a2a2}.area-name-description-item{border-radius:15px 0 0 15px;border:1px solid #ccc;padding:10px}.area-action-item{background-color:var(--tc-gray-50);border-radius:0 15px 15px 0;border:1px solid #ccc;padding:10px;width:40px}\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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TCloudUiReorderItemsComponent, selector: "tcloud-ui-reorder-items", inputs: { items: "items" }, outputs: { itemsChange: "itemsChange" }, ngImport: i0, template: "<ng-container *ngIf=\"sort_items\">\n\n\n\n    <table class=\"table-sort-items\">\n\n    \n\n\n        <ng-container *ngFor=\"let item of sort_items; let i = index\">\n\n            <tr>\n\n                <td class=\"area-name-description-item\">\n                    {{ item }}\n                    <div *ngIf=\"get_description(item)\" class=\"item-description\">\n                        {{ get_description(item) }}\n                    </div>\n                </td>\n\n                <td class=\"area-action-item\">\n                \n                    <ng-container>\n                        <div class=\"order-control\">\n                            <button class=\"btn-item-action-arrow\" (click)=\"move(item, i, (i-1))\" title=\"Alterar para cima\" [disabled]=\"i===0\">\n                                <i class=\"fas fa-caret-up p-up\" ></i>\n                            </button>\n                        </div>\n                         \n                        <div class=\"order-control\">\n                            <button class=\"btn-item-action-arrow\" (click)=\"move(item, i, (i+1))\" title=\"Alterar para baixo\" [disabled]=\"(i+1) === (sort_items).length\">\n                                <i class=\"fas fa-caret-down p-down\"></i>\n                            </button>\n                        \n                        </div>\n                    </ng-container>\n                </td>\n\n            </tr>\n        </ng-container>  \n\n    </table>\n  \n  </ng-container>", styles: [".table-sort-items{width:100%;border-collapse:initial}.order-control{text-align:center}.btn-item-action-arrow{border:none;background:none;cursor:pointer;padding:0;color:var(--tc-primary);font-size:16px;line-height:0}.btn-item-action-arrow:disabled{opacity:.4;cursor:not-allowed!important}.item-description{color:#a2a2a2}.area-name-description-item{border-radius:13px 0 0 13px;border:1px solid #ccc;padding:3px 13px}.area-action-item{background-color:var(--tc-gray-50);border-radius:0 13px 13px 0;border:1px solid #ccc;padding:3px;width:40px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiReorderItemsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-reorder-items', template: "<ng-container *ngIf=\"sort_items\">\n\n\n\n    <table class=\"table-sort-items\">\n\n    \n\n\n        <ng-container *ngFor=\"let item of sort_items; let i = index\">\n\n            <tr>\n\n                <td class=\"area-name-description-item\">\n                    {{ item }}\n                    <div *ngIf=\"get_description(item)\" class=\"item-description\">\n                        {{ get_description(item) }}\n                    </div>\n                </td>\n\n                <td class=\"area-action-item\">\n                \n                    <ng-container>\n                        <div class=\"order-control\">\n                            <button class=\"btn-item-action-arrow\" (click)=\"move(item, i, (i-1))\" title=\"Alterar para cima\" [disabled]=\"i===0\">\n                                <i class=\"fas fa-caret-up p-up\" ></i>\n                            </button>\n                        </div>\n                         \n                        <div class=\"order-control\">\n                            <button class=\"btn-item-action-arrow\" (click)=\"move(item, i, (i+1))\" title=\"Alterar para baixo\" [disabled]=\"(i+1) === (sort_items).length\">\n                                <i class=\"fas fa-caret-down p-down\"></i>\n                            </button>\n                        \n                        </div>\n                    </ng-container>\n                </td>\n\n            </tr>\n        </ng-container>  \n\n    </table>\n  \n  </ng-container>", styles: [".table-sort-items{width:100%;border-collapse:initial}.order-control{text-align:center}.btn-item-action-arrow{border:none;background:none;cursor:pointer;padding:0;color:var(--tc-primary);font-size:16px;line-height:0}.btn-item-action-arrow:disabled{opacity:.4;cursor:not-allowed!important}.item-description{color:#a2a2a2}.area-name-description-item{border-radius:15px 0 0 15px;border:1px solid #ccc;padding:10px}.area-action-item{background-color:var(--tc-gray-50);border-radius:0 15px 15px 0;border:1px solid #ccc;padding:10px;width:40px}\n"] }]
+            args: [{ selector: 'tcloud-ui-reorder-items', template: "<ng-container *ngIf=\"sort_items\">\n\n\n\n    <table class=\"table-sort-items\">\n\n    \n\n\n        <ng-container *ngFor=\"let item of sort_items; let i = index\">\n\n            <tr>\n\n                <td class=\"area-name-description-item\">\n                    {{ item }}\n                    <div *ngIf=\"get_description(item)\" class=\"item-description\">\n                        {{ get_description(item) }}\n                    </div>\n                </td>\n\n                <td class=\"area-action-item\">\n                \n                    <ng-container>\n                        <div class=\"order-control\">\n                            <button class=\"btn-item-action-arrow\" (click)=\"move(item, i, (i-1))\" title=\"Alterar para cima\" [disabled]=\"i===0\">\n                                <i class=\"fas fa-caret-up p-up\" ></i>\n                            </button>\n                        </div>\n                         \n                        <div class=\"order-control\">\n                            <button class=\"btn-item-action-arrow\" (click)=\"move(item, i, (i+1))\" title=\"Alterar para baixo\" [disabled]=\"(i+1) === (sort_items).length\">\n                                <i class=\"fas fa-caret-down p-down\"></i>\n                            </button>\n                        \n                        </div>\n                    </ng-container>\n                </td>\n\n            </tr>\n        </ng-container>  \n\n    </table>\n  \n  </ng-container>", styles: [".table-sort-items{width:100%;border-collapse:initial}.order-control{text-align:center}.btn-item-action-arrow{border:none;background:none;cursor:pointer;padding:0;color:var(--tc-primary);font-size:16px;line-height:0}.btn-item-action-arrow:disabled{opacity:.4;cursor:not-allowed!important}.item-description{color:#a2a2a2}.area-name-description-item{border-radius:13px 0 0 13px;border:1px solid #ccc;padding:3px 13px}.area-action-item{background-color:var(--tc-gray-50);border-radius:0 13px 13px 0;border:1px solid #ccc;padding:3px;width:40px}\n"] }]
         }], propDecorators: { items: [{
                 type: Input
             }], itemsChange: [{