@dev-tcloud/tcloud-ui 0.1.8 → 0.1.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/_modules/tcloud-ui-datepicker/tcloud-ui-datepicker.component.mjs +22 -4
- package/esm2020/lib/_modules/tcloud-ui-datepicker-time/tcloud-ui-datepicker-time.component.mjs +10 -8
- package/esm2020/lib/_modules/tcloud-ui-filters/components/range-date/range-date.component.mjs +30 -22
- package/esm2020/lib/_modules/tcloud-ui-filters/tcloud-ui-filters.component.mjs +8 -4
- package/fesm2015/dev-tcloud-tcloud-ui.mjs +66 -34
- package/fesm2015/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/fesm2020/dev-tcloud-tcloud-ui.mjs +66 -34
- package/fesm2020/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/lib/_modules/tcloud-ui-datepicker-time/tcloud-ui-datepicker-time.component.d.ts +1 -2
- package/lib/_modules/tcloud-ui-filters/components/range-date/range-date.component.d.ts +2 -2
- package/package.json +1 -1
- package/scss/components/custom/ui-datepicker.scss +10 -0
- package/scss/components/styles.scss +2 -0
|
@@ -2778,12 +2778,30 @@ class TCloudUiDatepickerComponent {
|
|
|
2778
2778
|
return this._DateBRPipe.transform(v);
|
|
2779
2779
|
}
|
|
2780
2780
|
get_options() {
|
|
2781
|
+
// Função para formatar uma data no fuso horário local
|
|
2782
|
+
const formatDateLocal = (date) => {
|
|
2783
|
+
const year = date.getFullYear();
|
|
2784
|
+
const month = String(date.getMonth() + 1).padStart(2, '0'); // Adiciona 1 porque os meses são indexados a partir de 0
|
|
2785
|
+
const day = String(date.getDate()).padStart(2, '0');
|
|
2786
|
+
return `${year}-${month}-${day}`;
|
|
2787
|
+
};
|
|
2788
|
+
// Função para analisar uma data no fuso horário local
|
|
2789
|
+
const parseDateLocal = (dateString) => {
|
|
2790
|
+
const [year, month, day] = dateString.split('-');
|
|
2791
|
+
return new Date(year, month - 1, day); // Subtrai 1 porque os meses são indexados a partir de 0
|
|
2792
|
+
};
|
|
2781
2793
|
let options = {
|
|
2782
2794
|
nextArrow: `<i class="fas fa-caret-right"></i>`,
|
|
2783
2795
|
prevArrow: `<i class="fas fa-caret-left"></i>`,
|
|
2784
2796
|
format: 'dd/mm/yyyy',
|
|
2785
2797
|
daysOfWeekHighlighted: [0, 6],
|
|
2786
|
-
language: 'ptBR'
|
|
2798
|
+
language: 'ptBR',
|
|
2799
|
+
formatter: {
|
|
2800
|
+
date: formatDateLocal,
|
|
2801
|
+
},
|
|
2802
|
+
parser: {
|
|
2803
|
+
date: parseDateLocal,
|
|
2804
|
+
},
|
|
2787
2805
|
};
|
|
2788
2806
|
if ((this.daysOfWeekDisabled).length > 0) {
|
|
2789
2807
|
options['daysOfWeekDisabled'] = this.daysOfWeekDisabled;
|
|
@@ -2973,10 +2991,10 @@ class TCloudUiDatepickerComponent {
|
|
|
2973
2991
|
}
|
|
2974
2992
|
}
|
|
2975
2993
|
TCloudUiDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDatepickerComponent, deps: [{ token: DateBRPipe }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2976
|
-
TCloudUiDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.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\" >\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}$/\"></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{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 });
|
|
2994
|
+
TCloudUiDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.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 });
|
|
2977
2995
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDatepickerComponent, decorators: [{
|
|
2978
2996
|
type: Component,
|
|
2979
|
-
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\" >\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}$/\"></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{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"] }]
|
|
2997
|
+
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"] }]
|
|
2980
2998
|
}], ctorParameters: function () { return [{ type: DateBRPipe }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { multiple: [{
|
|
2981
2999
|
type: Input
|
|
2982
3000
|
}], maxNumberOfDates: [{
|
|
@@ -3017,7 +3035,6 @@ const noop$3 = () => {
|
|
|
3017
3035
|
};
|
|
3018
3036
|
class TCloudUiDatepickerTimeComponent {
|
|
3019
3037
|
constructor() {
|
|
3020
|
-
this.UTC = false;
|
|
3021
3038
|
this.show_date_picker = true;
|
|
3022
3039
|
this.ngModelChange = new EventEmitter();
|
|
3023
3040
|
this.onChange = new EventEmitter();
|
|
@@ -3125,7 +3142,7 @@ class TCloudUiDatepickerTimeComponent {
|
|
|
3125
3142
|
if (mm === '00') {
|
|
3126
3143
|
this.MM = mm;
|
|
3127
3144
|
}
|
|
3128
|
-
const notation =
|
|
3145
|
+
const notation = '00Z';
|
|
3129
3146
|
const str_date = `${ano}-${mes}-${dia}T${hh}:${mm}:${notation}`;
|
|
3130
3147
|
const datetime = new Date(str_date);
|
|
3131
3148
|
if (this.checkIsDate(datetime)) {
|
|
@@ -3134,6 +3151,11 @@ class TCloudUiDatepickerTimeComponent {
|
|
|
3134
3151
|
else {
|
|
3135
3152
|
this.innerValue = undefined;
|
|
3136
3153
|
}
|
|
3154
|
+
// console.log('this.datepickertime?.nativeElement', this.datepickertime?.nativeElement);
|
|
3155
|
+
// if(this.datepickertime && this.datepickertime.nativeElement){
|
|
3156
|
+
// const elem = <any> this.datepickertime.nativeElement;
|
|
3157
|
+
// elem.value = this.innerValue;
|
|
3158
|
+
// }
|
|
3137
3159
|
this.ngModelChange.emit(this.innerValue);
|
|
3138
3160
|
this.onChange.emit(this.innerValue);
|
|
3139
3161
|
this.eventChange.emit((_a = this.datepickertime) === null || _a === void 0 ? void 0 : _a.nativeElement);
|
|
@@ -3292,13 +3314,11 @@ class TCloudUiDatepickerTimeComponent {
|
|
|
3292
3314
|
}
|
|
3293
3315
|
}
|
|
3294
3316
|
TCloudUiDatepickerTimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDatepickerTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3295
|
-
TCloudUiDatepickerTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiDatepickerTimeComponent, selector: "tcloud-ui-datepicker-time", inputs: {
|
|
3317
|
+
TCloudUiDatepickerTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.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;-webkit-appearance:none;appearance:none}.select-time-date:focus{box-shadow:0 0;border:0 none;outline:0}.btn-icon-close{border:none;background-color:#fff;cursor:pointer;padding:0;color:#aaa;width:17px;position:relative;top:-20px;z-index:1}.btn-icon-close:hover{color:#c43a3a!important}.icon-short-time{border:none;background:none;cursor:pointer;font-size:15px;color:#8a8a8a}.input-options-date{position:relative}.input-options-date .description-options-date{position:absolute;left:0;top:0;padding:5px 10px;background-color:#fff;width:100%;height:34px;overflow:hidden}.input-options-date .description-options-date strong{font-size:14px;font-weight:400;padding-left:5px}.input-options-date .area-action-date-time-selected{width:20px;display:block;float:right;text-align:right;position:relative;top:-2px;left:30px;z-index:1}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TCloudUiDatepickerComponent, selector: "tcloud-ui-datepicker", inputs: ["multiple", "maxNumberOfDates", "daysOfWeekDisabled", "minDate", "maxDate", "datesDisabled", "modeInput", "useBorder", "childInputDateTime", "ngModel", "code"], outputs: ["onChange", "ngModelChange"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: TCloudUiDataListComponent, selector: "tcloud-ui-data-list", inputs: ["placeholder", "disabled", "loading", "showInput", "search", "listItems", "open", "border", "ngModel"], outputs: ["onInputChange", "onChange", "onOpened", "onClosed", "ngModelChange"] }] });
|
|
3296
3318
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDatepickerTimeComponent, decorators: [{
|
|
3297
3319
|
type: Component,
|
|
3298
|
-
args: [{ selector: 'tcloud-ui-datepicker-time', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$3], 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:
|
|
3299
|
-
}], propDecorators: {
|
|
3300
|
-
type: Input
|
|
3301
|
-
}], ngModel: [{
|
|
3320
|
+
args: [{ selector: 'tcloud-ui-datepicker-time', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$3], 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;-webkit-appearance:none;appearance:none}.select-time-date:focus{box-shadow:0 0;border:0 none;outline:0}.btn-icon-close{border:none;background-color:#fff;cursor:pointer;padding:0;color:#aaa;width:17px;position:relative;top:-20px;z-index:1}.btn-icon-close:hover{color:#c43a3a!important}.icon-short-time{border:none;background:none;cursor:pointer;font-size:15px;color:#8a8a8a}.input-options-date{position:relative}.input-options-date .description-options-date{position:absolute;left:0;top:0;padding:5px 10px;background-color:#fff;width:100%;height:34px;overflow:hidden}.input-options-date .description-options-date strong{font-size:14px;font-weight:400;padding-left:5px}.input-options-date .area-action-date-time-selected{width:20px;display:block;float:right;text-align:right;position:relative;top:-2px;left:30px;z-index:1}\n"] }]
|
|
3321
|
+
}], propDecorators: { ngModel: [{
|
|
3302
3322
|
type: Input
|
|
3303
3323
|
}], ngModelChange: [{
|
|
3304
3324
|
type: Output
|
|
@@ -3334,7 +3354,6 @@ class TCloudUiRangeDateComponent {
|
|
|
3334
3354
|
this.defaultValuePeriodStartStop = '';
|
|
3335
3355
|
this.descriptionStart = '';
|
|
3336
3356
|
this.descriptionStop = '';
|
|
3337
|
-
this.UTC = false;
|
|
3338
3357
|
this.mode = 'select';
|
|
3339
3358
|
this.isValid = false;
|
|
3340
3359
|
//Placeholders for the callbacks which are later providesd
|
|
@@ -3368,26 +3387,27 @@ class TCloudUiRangeDateComponent {
|
|
|
3368
3387
|
// this.value_options_date_time = '';
|
|
3369
3388
|
event = (event.value) ? event.value : event;
|
|
3370
3389
|
let now = new Date();
|
|
3390
|
+
let current_date = new Date();
|
|
3371
3391
|
let filter_date = undefined;
|
|
3372
3392
|
if (event === '1-last-time') {
|
|
3373
|
-
filter_date = new Date(
|
|
3393
|
+
filter_date = new Date(current_date.getTime() - 1 * 60 * 60 * 1000);
|
|
3374
3394
|
}
|
|
3375
3395
|
if (event === '3-last-time') {
|
|
3376
|
-
filter_date = new Date(
|
|
3396
|
+
filter_date = new Date(current_date.getTime() - 3 * 60 * 60 * 1000);
|
|
3377
3397
|
}
|
|
3378
3398
|
if (event === '24-last-time') {
|
|
3379
|
-
filter_date = new Date(
|
|
3399
|
+
filter_date = new Date(current_date.getTime() - 24 * 60 * 60 * 1000);
|
|
3380
3400
|
}
|
|
3381
3401
|
if (event === '7-days') {
|
|
3382
|
-
filter_date = new Date((new Date(
|
|
3402
|
+
filter_date = new Date((new Date(current_date)).setDate(now.getDate() - 7));
|
|
3383
3403
|
filter_date = new Date((filter_date).setSeconds(0));
|
|
3384
3404
|
}
|
|
3385
3405
|
if (event === '15-days') {
|
|
3386
|
-
filter_date = new Date((new Date(
|
|
3406
|
+
filter_date = new Date((new Date(current_date)).setDate(now.getDate() - 15));
|
|
3387
3407
|
filter_date = new Date((filter_date).setSeconds(0));
|
|
3388
3408
|
}
|
|
3389
3409
|
if (event === '30-days') {
|
|
3390
|
-
filter_date = new Date((new Date(
|
|
3410
|
+
filter_date = new Date((new Date(current_date)).setDate(now.getDate() - 30));
|
|
3391
3411
|
filter_date = new Date((filter_date).setSeconds(0));
|
|
3392
3412
|
}
|
|
3393
3413
|
if (event === 'current-month') {
|
|
@@ -3398,8 +3418,8 @@ class TCloudUiRangeDateComponent {
|
|
|
3398
3418
|
}
|
|
3399
3419
|
if (filter_date) {
|
|
3400
3420
|
this.result = {
|
|
3401
|
-
start: filter_date,
|
|
3402
|
-
stop: now
|
|
3421
|
+
start: this.getDateUTC(filter_date),
|
|
3422
|
+
stop: this.getDateUTC(now)
|
|
3403
3423
|
};
|
|
3404
3424
|
this.onChange.emit(this.result);
|
|
3405
3425
|
this.isValid = true;
|
|
@@ -3410,9 +3430,19 @@ class TCloudUiRangeDateComponent {
|
|
|
3410
3430
|
this.isValid = false;
|
|
3411
3431
|
}
|
|
3412
3432
|
}
|
|
3433
|
+
getDateUTC(dt) {
|
|
3434
|
+
const ano = dt.getFullYear();
|
|
3435
|
+
const mes = dt.getMonth();
|
|
3436
|
+
const dia = dt.getDate();
|
|
3437
|
+
const horas = dt.getHours();
|
|
3438
|
+
const minutos = dt.getMinutes();
|
|
3439
|
+
const segundos = dt.getSeconds();
|
|
3440
|
+
return new Date(Date.UTC(ano, mes, dia, horas, minutos, segundos));
|
|
3441
|
+
}
|
|
3413
3442
|
onChangeStartDateTime(event) {
|
|
3414
3443
|
this.isValid = false;
|
|
3415
|
-
if (this.result && this.result.start
|
|
3444
|
+
if (this.result && this.result.start) {
|
|
3445
|
+
this.result.start = event.value;
|
|
3416
3446
|
this.onChange.emit(this.result);
|
|
3417
3447
|
this.isValid = true;
|
|
3418
3448
|
}
|
|
@@ -3423,7 +3453,8 @@ class TCloudUiRangeDateComponent {
|
|
|
3423
3453
|
}
|
|
3424
3454
|
onChangeStopDateTime(event) {
|
|
3425
3455
|
this.isValid = false;
|
|
3426
|
-
if (this.result && this.result.
|
|
3456
|
+
if (this.result && this.result.stop) {
|
|
3457
|
+
this.result.start = event.value;
|
|
3427
3458
|
this.onChange.emit(this.result);
|
|
3428
3459
|
this.isValid = true;
|
|
3429
3460
|
}
|
|
@@ -3433,13 +3464,12 @@ class TCloudUiRangeDateComponent {
|
|
|
3433
3464
|
}
|
|
3434
3465
|
}
|
|
3435
3466
|
toggle() {
|
|
3436
|
-
const mode = (this.mode === 'select') ? 'datepickers' : 'select';
|
|
3437
|
-
|
|
3438
|
-
|
|
3439
|
-
|
|
3440
|
-
this.onChange.emit(this.result);
|
|
3441
|
-
}
|
|
3467
|
+
const mode = (`${this.mode}` === 'select') ? 'datepickers' : 'select';
|
|
3468
|
+
this.defaultValuePeriodStartStop = '';
|
|
3469
|
+
this.isValid = false;
|
|
3470
|
+
this.result = {};
|
|
3442
3471
|
this.mode = mode;
|
|
3472
|
+
this.onChange.emit(this.result);
|
|
3443
3473
|
}
|
|
3444
3474
|
//get accessor
|
|
3445
3475
|
get value() {
|
|
@@ -3487,10 +3517,10 @@ class TCloudUiRangeDateComponent {
|
|
|
3487
3517
|
}
|
|
3488
3518
|
}
|
|
3489
3519
|
TCloudUiRangeDateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiRangeDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3490
|
-
TCloudUiRangeDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiRangeDateComponent, selector: "range-date", inputs: { defaultValuePeriodStartStop: "defaultValuePeriodStartStop", required: "required", descriptionStart: "descriptionStart", descriptionStop: "descriptionStop"
|
|
3520
|
+
TCloudUiRangeDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiRangeDateComponent, selector: "range-date", inputs: { defaultValuePeriodStartStop: "defaultValuePeriodStartStop", required: "required", descriptionStart: "descriptionStart", descriptionStop: "descriptionStop" }, outputs: { onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2, CUSTOM_INPUT_VALIDATORS$1], ngImport: i0, template: "<table class=\"tcloud-ui-filters-range-date area-range-date\">\r\n <tr>\r\n\r\n <td>\r\n <div *ngIf=\"mode === 'select'\">\r\n <div class=\"description-period\">Per\u00EDodo</div>\r\n <select name=\"periodo\" class=\"form-control tc-form-control\" (change)=\"onChangeOptionsDateTime($event.target)\" [(ngModel)]=\"defaultValuePeriodStartStop\" >\r\n <option value=\"\"></option> \r\n <ng-container *ngFor=\"let item of options_date_time\">\r\n <option [value]=\"item.value\">{{ item.description }}</option>\r\n </ng-container>\r\n </select>\r\n </div>\r\n <div *ngIf=\"mode === 'datepickers'\">\r\n\r\n <table class=\"area-range-datepickers\">\r\n <tr>\r\n <td>\r\n <div class=\"description-start\">{{ descriptionStart }}</div>\r\n <tcloud-ui-datepicker-time \r\n #_input_start \r\n [(ngModel)]=\"result.start\" \r\n name=\"input_start\" \r\n (eventChange)=\"onChangeStartDateTime(_input_start)\">\r\n </tcloud-ui-datepicker-time>\r\n </td>\r\n <td>\r\n <div class=\"description-stop\">{{ descriptionStop }}</div>\r\n <tcloud-ui-datepicker-time \r\n #_input_stop\r\n [(ngModel)]=\"result.stop\" \r\n name=\"input_stop\" \r\n (eventChange)=\"onChangeStopDateTime(_input_stop)\">\r\n </tcloud-ui-datepicker-time>\r\n </td>\r\n </tr>\r\n </table>\r\n\r\n </div>\r\n </td>\r\n\r\n <td>\r\n <button class=\"btn-mode-range-date\" [class.active]=\"mode === 'select'\" (click)=\"toggle()\" type=\"button\">\r\n\r\n <i *ngIf=\"mode === 'select'\" class=\"far fa-calendar-alt\" title=\"Alterar para calend\u00E1rio\"></i>\r\n <i *ngIf=\"mode !== 'select'\" class=\"fas fa-calendar-week\" title=\"Selecionar per\u00EDodo\"></i>\r\n\r\n <!-- <div *ngIf=\"mode === 'select'\">Exibir<br>Calend\u00E1rio</div> -->\r\n <!-- <div *ngIf=\"mode !== 'select'\">Exibir<br>Per\u00EDodo</div> -->\r\n </button>\r\n </td>\r\n\r\n </tr>\r\n</table>", styles: [".area-range-date{height:40px;width:100%}.area-range-date tr td:first-child{width:calc(100% - 35px)}.area-range-date tr td:first-child select{color:#535353;border-radius:3px 0 0 3px!important}.area-range-date tr td:first-child .area-range-datepickers{width:100%}.area-range-date tr td:first-child .area-range-datepickers td{width:50%!important}.area-range-date tr td:last-child{width:35px}.area-range-date tr td:last-child .btn-mode-range-date{width:100%;text-align:center;border:1px solid #ccc;background-color:#fff;font-size:17px;line-height:1;cursor:pointer;color:#6c6c6c;height:40px;border-radius:0 3px 3px 0}.area-range-date tr td:last-child .btn-mode-range-date:focus{color:#403d3d}.active{background-color:#eee!important}.description-period,.description-start{position:relative;left:17px;top:-15px;line-height:0}.description-stop{position:relative;top:-15px;line-height:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TCloudUiDatepickerTimeComponent, selector: "tcloud-ui-datepicker-time", inputs: ["ngModel", "useOptionsDateTime"], outputs: ["ngModelChange", "onChange", "eventChange"] }] });
|
|
3491
3521
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiRangeDateComponent, decorators: [{
|
|
3492
3522
|
type: Component,
|
|
3493
|
-
args: [{ selector: 'range-date', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2, CUSTOM_INPUT_VALIDATORS$1], template: "<table class=\"tcloud-ui-filters-range-date area-range-date\">\r\n <tr>\r\n\r\n <td>\r\n <div *ngIf=\"mode === 'select'\">\r\n <div class=\"description-period\">Per\u00EDodo</div>\r\n <select name=\"periodo\" class=\"form-control tc-form-control\" (change)=\"onChangeOptionsDateTime($event.target)\" [(ngModel)]=\"defaultValuePeriodStartStop\" >\r\n <option value=\"\"></option> \r\n <ng-container *ngFor=\"let item of options_date_time\">\r\n <option [value]=\"item.value\">{{ item.description }}</option>\r\n </ng-container>\r\n </select>\r\n </div>\r\n <div *ngIf=\"mode === 'datepickers'\">\r\n\r\n <table class=\"area-range-datepickers\">\r\n <tr>\r\n <td>\r\n <div class=\"description-start\">{{ descriptionStart }}</div>\r\n <tcloud-ui-datepicker-time \r\n #_input_start \r\n [
|
|
3523
|
+
args: [{ selector: 'range-date', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2, CUSTOM_INPUT_VALIDATORS$1], template: "<table class=\"tcloud-ui-filters-range-date area-range-date\">\r\n <tr>\r\n\r\n <td>\r\n <div *ngIf=\"mode === 'select'\">\r\n <div class=\"description-period\">Per\u00EDodo</div>\r\n <select name=\"periodo\" class=\"form-control tc-form-control\" (change)=\"onChangeOptionsDateTime($event.target)\" [(ngModel)]=\"defaultValuePeriodStartStop\" >\r\n <option value=\"\"></option> \r\n <ng-container *ngFor=\"let item of options_date_time\">\r\n <option [value]=\"item.value\">{{ item.description }}</option>\r\n </ng-container>\r\n </select>\r\n </div>\r\n <div *ngIf=\"mode === 'datepickers'\">\r\n\r\n <table class=\"area-range-datepickers\">\r\n <tr>\r\n <td>\r\n <div class=\"description-start\">{{ descriptionStart }}</div>\r\n <tcloud-ui-datepicker-time \r\n #_input_start \r\n [(ngModel)]=\"result.start\" \r\n name=\"input_start\" \r\n (eventChange)=\"onChangeStartDateTime(_input_start)\">\r\n </tcloud-ui-datepicker-time>\r\n </td>\r\n <td>\r\n <div class=\"description-stop\">{{ descriptionStop }}</div>\r\n <tcloud-ui-datepicker-time \r\n #_input_stop\r\n [(ngModel)]=\"result.stop\" \r\n name=\"input_stop\" \r\n (eventChange)=\"onChangeStopDateTime(_input_stop)\">\r\n </tcloud-ui-datepicker-time>\r\n </td>\r\n </tr>\r\n </table>\r\n\r\n </div>\r\n </td>\r\n\r\n <td>\r\n <button class=\"btn-mode-range-date\" [class.active]=\"mode === 'select'\" (click)=\"toggle()\" type=\"button\">\r\n\r\n <i *ngIf=\"mode === 'select'\" class=\"far fa-calendar-alt\" title=\"Alterar para calend\u00E1rio\"></i>\r\n <i *ngIf=\"mode !== 'select'\" class=\"fas fa-calendar-week\" title=\"Selecionar per\u00EDodo\"></i>\r\n\r\n <!-- <div *ngIf=\"mode === 'select'\">Exibir<br>Calend\u00E1rio</div> -->\r\n <!-- <div *ngIf=\"mode !== 'select'\">Exibir<br>Per\u00EDodo</div> -->\r\n </button>\r\n </td>\r\n\r\n </tr>\r\n</table>", styles: [".area-range-date{height:40px;width:100%}.area-range-date tr td:first-child{width:calc(100% - 35px)}.area-range-date tr td:first-child select{color:#535353;border-radius:3px 0 0 3px!important}.area-range-date tr td:first-child .area-range-datepickers{width:100%}.area-range-date tr td:first-child .area-range-datepickers td{width:50%!important}.area-range-date tr td:last-child{width:35px}.area-range-date tr td:last-child .btn-mode-range-date{width:100%;text-align:center;border:1px solid #ccc;background-color:#fff;font-size:17px;line-height:1;cursor:pointer;color:#6c6c6c;height:40px;border-radius:0 3px 3px 0}.area-range-date tr td:last-child .btn-mode-range-date:focus{color:#403d3d}.active{background-color:#eee!important}.description-period,.description-start{position:relative;left:17px;top:-15px;line-height:0}.description-stop{position:relative;top:-15px;line-height:0}\n"] }]
|
|
3494
3524
|
}], ctorParameters: function () { return []; }, propDecorators: { onChange: [{
|
|
3495
3525
|
type: Output
|
|
3496
3526
|
}], defaultValuePeriodStartStop: [{
|
|
@@ -3501,8 +3531,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
3501
3531
|
type: Input
|
|
3502
3532
|
}], descriptionStop: [{
|
|
3503
3533
|
type: Input
|
|
3504
|
-
}], UTC: [{
|
|
3505
|
-
type: Input
|
|
3506
3534
|
}] } });
|
|
3507
3535
|
|
|
3508
3536
|
class TCloudUiFiltersComponent {
|
|
@@ -3759,7 +3787,7 @@ class TCloudUiFiltersComponent {
|
|
|
3759
3787
|
item.searchText = event;
|
|
3760
3788
|
this.onChange.emit(true);
|
|
3761
3789
|
}
|
|
3762
|
-
if (event === undefined || event === null || event === '' && isValid) {
|
|
3790
|
+
if ((event === undefined || event === null || event === '') && isValid) {
|
|
3763
3791
|
isValid = false;
|
|
3764
3792
|
item.searchText = '';
|
|
3765
3793
|
this.onChange.emit(true);
|
|
@@ -3784,6 +3812,10 @@ class TCloudUiFiltersComponent {
|
|
|
3784
3812
|
item.searchText = `${this.convertDataToNumber(item.value)}`;
|
|
3785
3813
|
this.onChange.emit(true);
|
|
3786
3814
|
}
|
|
3815
|
+
if (event && event.result && (event.result.start || event.result.stop)) {
|
|
3816
|
+
isValid = false;
|
|
3817
|
+
this.onChange.emit(true);
|
|
3818
|
+
}
|
|
3787
3819
|
if (this.useOnChangeSubmit || this.first_active_filter) {
|
|
3788
3820
|
this.start_filter_fc = this.start_filter();
|
|
3789
3821
|
this.first_active_filter = false;
|
|
@@ -3943,10 +3975,10 @@ class TCloudUiFiltersComponent {
|
|
|
3943
3975
|
}
|
|
3944
3976
|
}
|
|
3945
3977
|
TCloudUiFiltersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiFiltersComponent, deps: [{ token: i1.DatePipe }], target: i0.ɵɵFactoryTarget.Component });
|
|
3946
|
-
TCloudUiFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.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.component 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> {{ 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=\"start_stop\">\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> </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 [UTC]=\"(item && item.UTC) ? true : false\"\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=\"!start_stop\">\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> {{ 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 [UTC]=\"(item && item.UTC) ? 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> {{ 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=\"form-control 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> {{ 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=\"form-control 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> {{ item.description }}</div>\r\n <div class=\"area-input-checkbox\">\r\n <div class=\"form-control 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>\r\n<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: ["UTC", "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", "UTC"], outputs: ["onChange"] }] });
|
|
3978
|
+
TCloudUiFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.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> {{ 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=\"start_stop\">\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> </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=\"!start_stop\">\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> {{ 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> {{ 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=\"form-control 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> {{ 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=\"form-control 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> {{ item.description }}</div>\r\n <div class=\"area-input-checkbox\">\r\n <div class=\"form-control 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"] }] });
|
|
3947
3979
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiFiltersComponent, decorators: [{
|
|
3948
3980
|
type: Component,
|
|
3949
|
-
args: [{ selector: 'tcloud-ui-filters', template: "<div *ngIf=\"show_filters\" class=\"tcloud-ui-filters.component 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> {{ 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=\"start_stop\">\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> </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 [UTC]=\"(item && item.UTC) ? true : false\"\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=\"!start_stop\">\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> {{ 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 [UTC]=\"(item && item.UTC) ? 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> {{ 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=\"form-control 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> {{ 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=\"form-control 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> {{ item.description }}</div>\r\n <div class=\"area-input-checkbox\">\r\n <div class=\"form-control 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>\r\n<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"] }]
|
|
3981
|
+
args: [{ selector: 'tcloud-ui-filters', 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> {{ 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=\"start_stop\">\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> </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=\"!start_stop\">\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> {{ 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> {{ 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=\"form-control 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> {{ 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=\"form-control 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> {{ item.description }}</div>\r\n <div class=\"area-input-checkbox\">\r\n <div class=\"form-control 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"] }]
|
|
3950
3982
|
}], ctorParameters: function () { return [{ type: i1.DatePipe }]; }, propDecorators: { _formulario: [{
|
|
3951
3983
|
type: ViewChild,
|
|
3952
3984
|
args: ['_formulario']
|