@dev-tcloud/tcloud-ui 6.0.5 → 6.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/dev-tcloud-tcloud-ui.mjs +145 -102
- package/fesm2022/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/lib/_modules/tcloud-ui-datepicker/tcloud-ui-datepicker.component.d.ts +4 -1
- package/lib/_modules/tcloud-ui-filters/tcloud-ui-filters.component.d.ts +5 -1
- package/lib/_modules/tcloud-ui-filters/tcloud-ui-filters.d.ts +4 -2
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, Component, EventEmitter, Input, Output, forwardRef, ViewChild, Pipe,
|
|
2
|
+
import { Injectable, Component, EventEmitter, Input, Output, forwardRef, ViewChild, Pipe, InjectionToken, Optional, Inject, ViewEncapsulation, input, effect, Directive, HostListener, NgModule, makeEnvironmentProviders, computed, output, signal, inject, ApplicationRef, model, viewChild, ChangeDetectionStrategy, ContentChildren } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule, DatePipe, DOCUMENT } from '@angular/common';
|
|
5
5
|
import { Subject, Subscription, debounceTime, distinctUntilChanged, map, BehaviorSubject } from 'rxjs';
|
|
@@ -1106,6 +1106,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
1106
1106
|
}]
|
|
1107
1107
|
}] });
|
|
1108
1108
|
|
|
1109
|
+
/**
|
|
1110
|
+
* Token de injeção para a configuração do TCloud UI
|
|
1111
|
+
*/
|
|
1112
|
+
const TCLOUD_UI_CONFIG = new InjectionToken('TCLOUD_UI_CONFIG');
|
|
1113
|
+
/**
|
|
1114
|
+
* Token de injeção para o serviço de usuário customizado
|
|
1115
|
+
*/
|
|
1116
|
+
const TCLOUD_UI_USER_SERVICE = new InjectionToken('TCLOUD_UI_USER_SERVICE');
|
|
1117
|
+
/**
|
|
1118
|
+
* Token de injeção para o serviço de tema customizado
|
|
1119
|
+
*/
|
|
1120
|
+
const TCLOUD_UI_LAYOUT_SERVICE = new InjectionToken('TCLOUD_UI_LAYOUT_SERVICE');
|
|
1121
|
+
/**
|
|
1122
|
+
* Token de injeção para o serviço de viewport customizado
|
|
1123
|
+
*/
|
|
1124
|
+
const TCLOUD_UI_VIEWPORT_SERVICE = new InjectionToken('TCLOUD_UI_VIEWPORT_SERVICE');
|
|
1125
|
+
|
|
1126
|
+
class TCloudUiLayoutService {
|
|
1127
|
+
constructor(_LayoutService) {
|
|
1128
|
+
this._LayoutService = _LayoutService;
|
|
1129
|
+
this.layoutService = {};
|
|
1130
|
+
this.layoutService = this._LayoutService;
|
|
1131
|
+
}
|
|
1132
|
+
getCurrentLayout() {
|
|
1133
|
+
//return 'modern';
|
|
1134
|
+
try {
|
|
1135
|
+
return this.layoutService?.getCurrentLayout();
|
|
1136
|
+
}
|
|
1137
|
+
catch (error) {
|
|
1138
|
+
// console.warn('getCurrentLayout', error);
|
|
1139
|
+
}
|
|
1140
|
+
return 'classic';
|
|
1141
|
+
}
|
|
1142
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiLayoutService, deps: [{ token: TCLOUD_UI_LAYOUT_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1143
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiLayoutService, providedIn: 'root' }); }
|
|
1144
|
+
}
|
|
1145
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiLayoutService, decorators: [{
|
|
1146
|
+
type: Injectable,
|
|
1147
|
+
args: [{
|
|
1148
|
+
providedIn: 'root',
|
|
1149
|
+
}]
|
|
1150
|
+
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
1151
|
+
type: Optional
|
|
1152
|
+
}, {
|
|
1153
|
+
type: Inject,
|
|
1154
|
+
args: [TCLOUD_UI_LAYOUT_SERVICE]
|
|
1155
|
+
}] }] });
|
|
1156
|
+
|
|
1109
1157
|
var translation = {
|
|
1110
1158
|
ptBR: {
|
|
1111
1159
|
days: ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado"],
|
|
@@ -1139,8 +1187,9 @@ class TCloudUiDatepickerComponent {
|
|
|
1139
1187
|
this.onChange.emit(v);
|
|
1140
1188
|
}
|
|
1141
1189
|
}
|
|
1142
|
-
constructor(_DateBRPipe) {
|
|
1190
|
+
constructor(_DateBRPipe, _tCloudUiLayoutService) {
|
|
1143
1191
|
this._DateBRPipe = _DateBRPipe;
|
|
1192
|
+
this._tCloudUiLayoutService = _tCloudUiLayoutService;
|
|
1144
1193
|
// multiple permite selecionar multiplas datas
|
|
1145
1194
|
this.multiple = false;
|
|
1146
1195
|
// maxNumberOfDates - Maximum number of dates users can select. No limit is applied if 0 is set.
|
|
@@ -1173,6 +1222,9 @@ class TCloudUiDatepickerComponent {
|
|
|
1173
1222
|
this.onTouchedCallback = noop$6;
|
|
1174
1223
|
this.onChangeCallback = noop$6;
|
|
1175
1224
|
}
|
|
1225
|
+
get layout() {
|
|
1226
|
+
return `${this._tCloudUiLayoutService?.getCurrentLayout()}`;
|
|
1227
|
+
}
|
|
1176
1228
|
ngOnInit() {
|
|
1177
1229
|
this.ID = this.generateID();
|
|
1178
1230
|
Datepicker.locales.ptBR = translation.ptBR;
|
|
@@ -1496,13 +1548,13 @@ class TCloudUiDatepickerComponent {
|
|
|
1496
1548
|
registerOnTouched(fn) {
|
|
1497
1549
|
this.onTouchedCallback = fn;
|
|
1498
1550
|
}
|
|
1499
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiDatepickerComponent, deps: [{ token: DateBRPipe }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1500
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1551
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiDatepickerComponent, deps: [{ token: DateBRPipe }, { token: TCloudUiLayoutService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1552
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TCloudUiDatepickerComponent, isStandalone: true, selector: "tcloud-ui-datepicker", inputs: { multiple: "multiple", maxNumberOfDates: "maxNumberOfDates", daysOfWeekDisabled: "daysOfWeekDisabled", minDate: "minDate", maxDate: "maxDate", datesDisabled: "datesDisabled", modeInput: "modeInput", useBorder: "useBorder", childInputDateTime: "childInputDateTime", startViewInMinDate: "startViewInMinDate", startViewInMaxDate: "startViewInMaxDate", disabled: "disabled", ngModel: "ngModel", code: "code" }, outputs: { onChange: "onChange", ngModelChange: "ngModelChange", onCheckDate: "onCheckDate" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$6, DateBRPipe], viewQueries: [{ propertyName: "input_datepicker", first: true, predicate: ["input_datepicker"], descendants: true }], ngImport: i0, template: "<!-- Input mode -->\n<ng-container *ngIf=\"modeInput\">\n\n <div class=\"tcloud-ui-datepicker input-tc-datepicker {{layout}}\" [class.no-border]=\"!useBorder\" [class.child-input-date-time]=\"childInputDateTime\" >\n <table class=\"table-box-input\">\n <tr>\n @if (layout === 'classic') {\n <td class=\"td-icon\">\n <div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fas fa-calendar-alt\"></i></div>\n </td>\n }\n <td class=\"td-date\">\n <input #input_datepicker type=\"text\" name=\"{{ID}}\" id=\"{{ID}}\" class=\"form-control\" [title]=\"innerValue\" >\n </td>\n @if (layout === 'modern') {\n <td class=\"td-icon\">\n <div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fa-light fa-calendar c-neutral-900\"></i></div>\n </td>\n }\n </tr>\n </table>\n </div>\n</ng-container>\n\n<!-- Inline mode -->\n<ng-container *ngIf=\"!modeInput\">\n <div class=\"tcloud-ui-datepicker tcloud-ui-datepicker-second\" #input_datepicker id=\"{{ID}}\" pattern=\"/^\\d{2}\\/\\d{2}\\/\\d{4}$/\" [title]=\"innerValue\"></div>\n</ng-container>\n\n<!-- EX de uso \n <tc-datepicker \n [multiple]=\"false\"\n [daysOfWeekDisabled]=\"[0,6]\"\n [minDate]=\"'18/11/2021'\"\n [maxDate]=\"'18/12/2023'\"\n [datesDisabled]=\"['12/10/2022','25/12/2022']\"\n [modeInput]=\"false\"\n (onChange)=\"($event)\"\n (onCheckDate)=\"onCheckDate($event)\"\n [(ngModel)]=\"dateValue\" >\n </tc-datepicker>\n \n // multiple = false\n // dateValue - string - pode ser: 12/12/2022 \n\n // multiple = true\n // dateValue - string - pode ser: 11/12/2022,12/12/2022 ... \n\n <pre>data: {{ dateValue }}</pre>\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;-moz-user-select:none;-ms-user-select:none;user-select:none}.datepicker-main{padding:2px}.datepicker-footer{background-color:#f5f5f5;box-shadow:inset 0 1px 1px #0a0a0a1a}.datepicker-controls,.datepicker-grid,.datepicker-view,.datepicker-view .days-of-week{display:flex}.datepicker-grid{flex-wrap:wrap}.datepicker-view .days .datepicker-cell,.datepicker-view .dow{flex-basis:14.2857142857%}.datepicker-view.datepicker-grid .datepicker-cell{flex-basis:25%}.datepicker-cell,.datepicker-view .week{height:2.25rem;line-height:2.25rem}.datepicker-title{background-color:#f5f5f5;box-shadow:inset 0 -1px 1px #0a0a0a1a;font-weight:700;padding:.375rem .75rem;text-align:center}.datepicker-header .datepicker-controls{padding:2px 2px 0}.datepicker-controls .button{align-items:center;background-color:#fff;border:1px solid #dbdbdb;border-radius:4px;box-shadow:none;color:#363636;cursor:pointer;display:inline-flex;font-size:1rem;height:2.25em;justify-content:center;line-height:1.5;margin:0;padding:calc(.375em - 1px) .75em;position:relative;text-align:center;vertical-align:top;white-space:nowrap}.datepicker-controls .button:active,.datepicker-controls .button:focus{outline:none}.datepicker-controls .button:hover{border-color:#b5b5b5;color:#363636}.datepicker-controls .button:focus{border-color:#3273dc;color:#363636}.datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em #3273dc40}.datepicker-controls .button:active{border-color:#4a4a4a;color:#363636}.datepicker-controls .button[disabled]{cursor:not-allowed}.datepicker-header .datepicker-controls .button{border-color:transparent;font-weight:700}.datepicker-header .datepicker-controls .button:hover{background-color:#f9f9f9}.datepicker-header .datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em #ffffff40}.datepicker-header .datepicker-controls .button:active{background-color:#f2f2f2}.datepicker-header .datepicker-controls .button[disabled]{box-shadow:none}.datepicker-footer .datepicker-controls .button{border-radius:2px;font-size:.75rem;margin:calc(.375rem - 1px) .375rem;width:100%}.datepicker-controls .view-switch{flex:auto}.datepicker-controls .next-btn,.datepicker-controls .prev-btn{padding-left:.375rem;padding-right:.375rem;width:2.25rem}.datepicker-controls .next-btn.disabled,.datepicker-controls .prev-btn.disabled{visibility:hidden}.datepicker-view .dow{font-size:.875rem;font-weight:700;height:1.5rem;line-height:1.5rem}.datepicker-view .week{color:#b5b5b5;font-size:.75rem;width:2.25rem}@media(max-width:22.5rem){.datepicker-view .week{width:1.96875rem}}.datepicker-grid{width:15.75rem}@media(max-width:22.5rem){.calendar-weeks+.days .datepicker-grid{width:13.78125rem}}.datepicker-cell:not(.disabled):hover{background-color:#f9f9f9;cursor:pointer}.datepicker-cell.focused:not(.selected){background-color:#e8e8e8}.datepicker-cell.selected,.datepicker-cell.selected:hover{background-color:#3273dc;color:#fff;font-weight:600}.datepicker-cell.disabled{color:#dbdbdb}.datepicker-cell.next:not(.disabled),.datepicker-cell.prev:not(.disabled){color:#7a7a7a}.datepicker-cell.next.selected,.datepicker-cell.prev.selected{color:#e6e6e6}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today){background-color:#f5f5f5;border-radius:0}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover{background-color:#eee}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused{background-color:#e8e8e8}.datepicker-cell.today:not(.selected){background-color:#00d1b2}.datepicker-cell.today:not(.selected):not(.disabled){color:#fff}.datepicker-cell.today.focused:not(.selected){background-color:#00c4a7}.datepicker-cell.range-end:not(.selected),.datepicker-cell.range-start:not(.selected){background-color:#b5b5b5;color:#fff}.datepicker-cell.range-end.focused:not(.selected),.datepicker-cell.range-start.focused:not(.selected){background-color:#afafaf}.datepicker-cell.range-start{border-radius:4px 0 0 4px}.datepicker-cell.range-end{border-radius:0 4px 4px 0}.datepicker-cell.range{background-color:#dbdbdb;border-radius:0}.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover{background-color:#d5d5d5}.datepicker-cell.range.disabled{color:#c2c2c2}.datepicker-cell.range.focused{background-color:#cfcfcf}.datepicker-view.datepicker-grid .datepicker-cell{height:4.5rem;line-height:4.5rem}.datepicker-input.in-edit{border-color:#2366d1}.datepicker-input.in-edit:active,.datepicker-input.in-edit:focus{box-shadow:0 0 .25em .25em #2366d133}\n", ".tcloud-ui-datepicker .datepicker-cell.focused:not(.selected){background-color:inherit!important}.tcloud-ui-datepicker .datepicker-cell.highlighted:not(.selected){background-color:#f5f5f5!important}.datepicker-picker{border:1px solid #ccc;padding:10px 15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1501
1553
|
}
|
|
1502
1554
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiDatepickerComponent, decorators: [{
|
|
1503
1555
|
type: Component,
|
|
1504
|
-
args: [{ selector: 'tcloud-ui-datepicker', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$6, DateBRPipe], encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, FormsModule, DateBRPipe], template: "<!-- Input mode -->\n<ng-container *ngIf=\"modeInput\">\n\n <div class=\"tcloud-ui-datepicker input-tc-datepicker\" [class.no-border]=\"!useBorder\" [class.child-input-date-time]=\"childInputDateTime\" >\n <table class=\"table-box-input\">\n <tr>\n <td class=\"td-icon\">\n
|
|
1505
|
-
}], ctorParameters: () => [{ type: DateBRPipe }], propDecorators: { multiple: [{
|
|
1556
|
+
args: [{ selector: 'tcloud-ui-datepicker', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$6, DateBRPipe], encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, FormsModule, DateBRPipe], template: "<!-- Input mode -->\n<ng-container *ngIf=\"modeInput\">\n\n <div class=\"tcloud-ui-datepicker input-tc-datepicker {{layout}}\" [class.no-border]=\"!useBorder\" [class.child-input-date-time]=\"childInputDateTime\" >\n <table class=\"table-box-input\">\n <tr>\n @if (layout === 'classic') {\n <td class=\"td-icon\">\n <div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fas fa-calendar-alt\"></i></div>\n </td>\n }\n <td class=\"td-date\">\n <input #input_datepicker type=\"text\" name=\"{{ID}}\" id=\"{{ID}}\" class=\"form-control\" [title]=\"innerValue\" >\n </td>\n @if (layout === 'modern') {\n <td class=\"td-icon\">\n <div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fa-light fa-calendar c-neutral-900\"></i></div>\n </td>\n }\n </tr>\n </table>\n </div>\n</ng-container>\n\n<!-- Inline mode -->\n<ng-container *ngIf=\"!modeInput\">\n <div class=\"tcloud-ui-datepicker tcloud-ui-datepicker-second\" #input_datepicker id=\"{{ID}}\" pattern=\"/^\\d{2}\\/\\d{2}\\/\\d{4}$/\" [title]=\"innerValue\"></div>\n</ng-container>\n\n<!-- EX de uso \n <tc-datepicker \n [multiple]=\"false\"\n [daysOfWeekDisabled]=\"[0,6]\"\n [minDate]=\"'18/11/2021'\"\n [maxDate]=\"'18/12/2023'\"\n [datesDisabled]=\"['12/10/2022','25/12/2022']\"\n [modeInput]=\"false\"\n (onChange)=\"($event)\"\n (onCheckDate)=\"onCheckDate($event)\"\n [(ngModel)]=\"dateValue\" >\n </tc-datepicker>\n \n // multiple = false\n // dateValue - string - pode ser: 12/12/2022 \n\n // multiple = true\n // dateValue - string - pode ser: 11/12/2022,12/12/2022 ... \n\n <pre>data: {{ dateValue }}</pre>\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;-moz-user-select:none;-ms-user-select:none;user-select:none}.datepicker-main{padding:2px}.datepicker-footer{background-color:#f5f5f5;box-shadow:inset 0 1px 1px #0a0a0a1a}.datepicker-controls,.datepicker-grid,.datepicker-view,.datepicker-view .days-of-week{display:flex}.datepicker-grid{flex-wrap:wrap}.datepicker-view .days .datepicker-cell,.datepicker-view .dow{flex-basis:14.2857142857%}.datepicker-view.datepicker-grid .datepicker-cell{flex-basis:25%}.datepicker-cell,.datepicker-view .week{height:2.25rem;line-height:2.25rem}.datepicker-title{background-color:#f5f5f5;box-shadow:inset 0 -1px 1px #0a0a0a1a;font-weight:700;padding:.375rem .75rem;text-align:center}.datepicker-header .datepicker-controls{padding:2px 2px 0}.datepicker-controls .button{align-items:center;background-color:#fff;border:1px solid #dbdbdb;border-radius:4px;box-shadow:none;color:#363636;cursor:pointer;display:inline-flex;font-size:1rem;height:2.25em;justify-content:center;line-height:1.5;margin:0;padding:calc(.375em - 1px) .75em;position:relative;text-align:center;vertical-align:top;white-space:nowrap}.datepicker-controls .button:active,.datepicker-controls .button:focus{outline:none}.datepicker-controls .button:hover{border-color:#b5b5b5;color:#363636}.datepicker-controls .button:focus{border-color:#3273dc;color:#363636}.datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em #3273dc40}.datepicker-controls .button:active{border-color:#4a4a4a;color:#363636}.datepicker-controls .button[disabled]{cursor:not-allowed}.datepicker-header .datepicker-controls .button{border-color:transparent;font-weight:700}.datepicker-header .datepicker-controls .button:hover{background-color:#f9f9f9}.datepicker-header .datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em #ffffff40}.datepicker-header .datepicker-controls .button:active{background-color:#f2f2f2}.datepicker-header .datepicker-controls .button[disabled]{box-shadow:none}.datepicker-footer .datepicker-controls .button{border-radius:2px;font-size:.75rem;margin:calc(.375rem - 1px) .375rem;width:100%}.datepicker-controls .view-switch{flex:auto}.datepicker-controls .next-btn,.datepicker-controls .prev-btn{padding-left:.375rem;padding-right:.375rem;width:2.25rem}.datepicker-controls .next-btn.disabled,.datepicker-controls .prev-btn.disabled{visibility:hidden}.datepicker-view .dow{font-size:.875rem;font-weight:700;height:1.5rem;line-height:1.5rem}.datepicker-view .week{color:#b5b5b5;font-size:.75rem;width:2.25rem}@media(max-width:22.5rem){.datepicker-view .week{width:1.96875rem}}.datepicker-grid{width:15.75rem}@media(max-width:22.5rem){.calendar-weeks+.days .datepicker-grid{width:13.78125rem}}.datepicker-cell:not(.disabled):hover{background-color:#f9f9f9;cursor:pointer}.datepicker-cell.focused:not(.selected){background-color:#e8e8e8}.datepicker-cell.selected,.datepicker-cell.selected:hover{background-color:#3273dc;color:#fff;font-weight:600}.datepicker-cell.disabled{color:#dbdbdb}.datepicker-cell.next:not(.disabled),.datepicker-cell.prev:not(.disabled){color:#7a7a7a}.datepicker-cell.next.selected,.datepicker-cell.prev.selected{color:#e6e6e6}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today){background-color:#f5f5f5;border-radius:0}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover{background-color:#eee}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused{background-color:#e8e8e8}.datepicker-cell.today:not(.selected){background-color:#00d1b2}.datepicker-cell.today:not(.selected):not(.disabled){color:#fff}.datepicker-cell.today.focused:not(.selected){background-color:#00c4a7}.datepicker-cell.range-end:not(.selected),.datepicker-cell.range-start:not(.selected){background-color:#b5b5b5;color:#fff}.datepicker-cell.range-end.focused:not(.selected),.datepicker-cell.range-start.focused:not(.selected){background-color:#afafaf}.datepicker-cell.range-start{border-radius:4px 0 0 4px}.datepicker-cell.range-end{border-radius:0 4px 4px 0}.datepicker-cell.range{background-color:#dbdbdb;border-radius:0}.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover{background-color:#d5d5d5}.datepicker-cell.range.disabled{color:#c2c2c2}.datepicker-cell.range.focused{background-color:#cfcfcf}.datepicker-view.datepicker-grid .datepicker-cell{height:4.5rem;line-height:4.5rem}.datepicker-input.in-edit{border-color:#2366d1}.datepicker-input.in-edit:active,.datepicker-input.in-edit:focus{box-shadow:0 0 .25em .25em #2366d133}\n", ".tcloud-ui-datepicker .datepicker-cell.focused:not(.selected){background-color:inherit!important}.tcloud-ui-datepicker .datepicker-cell.highlighted:not(.selected){background-color:#f5f5f5!important}.datepicker-picker{border:1px solid #ccc;padding:10px 15px}\n"] }]
|
|
1557
|
+
}], ctorParameters: () => [{ type: DateBRPipe }, { type: TCloudUiLayoutService }], propDecorators: { multiple: [{
|
|
1506
1558
|
type: Input
|
|
1507
1559
|
}], maxNumberOfDates: [{
|
|
1508
1560
|
type: Input
|
|
@@ -1860,9 +1912,11 @@ var TCFiltersType;
|
|
|
1860
1912
|
TCFiltersType["number"] = "number";
|
|
1861
1913
|
TCFiltersType["select"] = "select";
|
|
1862
1914
|
TCFiltersType["boolean"] = "boolean";
|
|
1863
|
-
TCFiltersType["datetime"] = "datetime-local";
|
|
1864
1915
|
TCFiltersType["hidden"] = "hidden";
|
|
1865
1916
|
TCFiltersType["date"] = "date-local";
|
|
1917
|
+
TCFiltersType["datetime"] = "datetime-local";
|
|
1918
|
+
TCFiltersType["browserdate"] = "date";
|
|
1919
|
+
TCFiltersType["browserdatetime"] = "datetime";
|
|
1866
1920
|
})(TCFiltersType || (TCFiltersType = {}));
|
|
1867
1921
|
var TCCondition;
|
|
1868
1922
|
(function (TCCondition) {
|
|
@@ -2081,6 +2135,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
2081
2135
|
type: Input
|
|
2082
2136
|
}] } });
|
|
2083
2137
|
|
|
2138
|
+
class TCloudUiFormDirective {
|
|
2139
|
+
constructor(_tCloudUiLayoutService, _el) {
|
|
2140
|
+
this._tCloudUiLayoutService = _tCloudUiLayoutService;
|
|
2141
|
+
this._el = _el;
|
|
2142
|
+
this.fullWidth = input(false);
|
|
2143
|
+
effect(() => {
|
|
2144
|
+
this.setClasses();
|
|
2145
|
+
});
|
|
2146
|
+
}
|
|
2147
|
+
layout() {
|
|
2148
|
+
return `${this._tCloudUiLayoutService?.getCurrentLayout()}`;
|
|
2149
|
+
}
|
|
2150
|
+
setClasses() {
|
|
2151
|
+
const layout = this.layout();
|
|
2152
|
+
if (layout === 'classic') {
|
|
2153
|
+
return;
|
|
2154
|
+
}
|
|
2155
|
+
const tokenList = this._el.nativeElement.classList;
|
|
2156
|
+
tokenList.remove(...Array.from(tokenList).filter((c) => c === 'form-control'));
|
|
2157
|
+
tokenList.remove(...Array.from(tokenList).filter((c) => c === 'tc-form-control'));
|
|
2158
|
+
if (layout === 'modern') {
|
|
2159
|
+
this._el.nativeElement.classList.add('tc-rev-input-control');
|
|
2160
|
+
this.fullWidth() ? this._el.nativeElement.classList.add('tc-rev-input-control--full-width') : null;
|
|
2161
|
+
}
|
|
2162
|
+
}
|
|
2163
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiFormDirective, deps: [{ token: TCloudUiLayoutService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2164
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TCloudUiFormDirective, isStandalone: true, selector: "[tcloudForm]", inputs: { fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
2165
|
+
}
|
|
2166
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiFormDirective, decorators: [{
|
|
2167
|
+
type: Directive,
|
|
2168
|
+
args: [{
|
|
2169
|
+
selector: '[tcloudForm]',
|
|
2170
|
+
standalone: true
|
|
2171
|
+
}]
|
|
2172
|
+
}], ctorParameters: () => [{ type: TCloudUiLayoutService }, { type: i0.ElementRef }] });
|
|
2173
|
+
|
|
2084
2174
|
class TCloudUiFiltersComponent {
|
|
2085
2175
|
set data(data) {
|
|
2086
2176
|
// this._data = JSON.parse(JSON.stringify(data));
|
|
@@ -2096,8 +2186,9 @@ class TCloudUiFiltersComponent {
|
|
|
2096
2186
|
}
|
|
2097
2187
|
}
|
|
2098
2188
|
get submitText() { return this._submitText; }
|
|
2099
|
-
constructor(datepipe) {
|
|
2189
|
+
constructor(datepipe, _tCloudUiLayoutService) {
|
|
2100
2190
|
this.datepipe = datepipe;
|
|
2191
|
+
this._tCloudUiLayoutService = _tCloudUiLayoutService;
|
|
2101
2192
|
this.datepickers = [];
|
|
2102
2193
|
this.inputs = [];
|
|
2103
2194
|
this.show_filters = false;
|
|
@@ -2122,6 +2213,9 @@ class TCloudUiFiltersComponent {
|
|
|
2122
2213
|
this.first = true;
|
|
2123
2214
|
this.start_filter_fc = undefined;
|
|
2124
2215
|
}
|
|
2216
|
+
get layout() {
|
|
2217
|
+
return `${this._tCloudUiLayoutService?.getCurrentLayout()}`;
|
|
2218
|
+
}
|
|
2125
2219
|
ngOnInit() {
|
|
2126
2220
|
setTimeout(() => {
|
|
2127
2221
|
if (this.filters && (this.filters).length > 0) {
|
|
@@ -2313,6 +2407,22 @@ class TCloudUiFiltersComponent {
|
|
|
2313
2407
|
}
|
|
2314
2408
|
this.first = false;
|
|
2315
2409
|
}
|
|
2410
|
+
convertDateNativeToNumber(dataString, withTime) {
|
|
2411
|
+
try {
|
|
2412
|
+
if (withTime) {
|
|
2413
|
+
const [date, time] = dataString.split('T');
|
|
2414
|
+
const [ano, mes, dia] = date.split('-');
|
|
2415
|
+
const [hora, minuto] = time.split(':');
|
|
2416
|
+
return +(`${ano}${mes}${dia}${hora}${minuto}`);
|
|
2417
|
+
}
|
|
2418
|
+
else {
|
|
2419
|
+
const [ano, mes, dia] = dataString.split('-');
|
|
2420
|
+
return +(`${ano}${mes}${dia}`);
|
|
2421
|
+
}
|
|
2422
|
+
}
|
|
2423
|
+
catch (error) { }
|
|
2424
|
+
return 0;
|
|
2425
|
+
}
|
|
2316
2426
|
convertDataToNumber(dataString) {
|
|
2317
2427
|
try {
|
|
2318
2428
|
const [dia, mes, ano] = dataString.split('/');
|
|
@@ -2322,6 +2432,8 @@ class TCloudUiFiltersComponent {
|
|
|
2322
2432
|
return 0;
|
|
2323
2433
|
}
|
|
2324
2434
|
searchIn(item, event) {
|
|
2435
|
+
console.log('event', event);
|
|
2436
|
+
// 2025-12-09
|
|
2325
2437
|
this.start_filter_fc = undefined;
|
|
2326
2438
|
let isValid = true;
|
|
2327
2439
|
if (event === 'sync' && isValid) {
|
|
@@ -2358,6 +2470,24 @@ class TCloudUiFiltersComponent {
|
|
|
2358
2470
|
item.searchText = `${this.convertDataToNumber(item.value)}`;
|
|
2359
2471
|
this.onChange.emit(true);
|
|
2360
2472
|
}
|
|
2473
|
+
if (item.type === TCFiltersType.browserdate && item.value) {
|
|
2474
|
+
isValid = false;
|
|
2475
|
+
console.log('item', item);
|
|
2476
|
+
const onlyNumbers = (item.value).replace(/\D/g, '');
|
|
2477
|
+
if ((onlyNumbers && (onlyNumbers).length === 8)) {
|
|
2478
|
+
item.searchText = `${this.convertDateNativeToNumber(item.value)}`;
|
|
2479
|
+
this.onChange.emit(true);
|
|
2480
|
+
}
|
|
2481
|
+
}
|
|
2482
|
+
if (item.type === TCFiltersType.browserdatetime && item.value) {
|
|
2483
|
+
isValid = false;
|
|
2484
|
+
console.log('item', item);
|
|
2485
|
+
const onlyNumbers = (item.value).replace(/\D/g, '');
|
|
2486
|
+
if ((onlyNumbers && (onlyNumbers).length === 12)) {
|
|
2487
|
+
item.searchText = `${this.convertDateNativeToNumber(item.value, true)}`;
|
|
2488
|
+
this.onChange.emit(true);
|
|
2489
|
+
}
|
|
2490
|
+
}
|
|
2361
2491
|
if (event && event.result && (event.result.start || event.result.stop)) {
|
|
2362
2492
|
isValid = false;
|
|
2363
2493
|
this.onChange.emit(true);
|
|
@@ -2571,13 +2701,13 @@ class TCloudUiFiltersComponent {
|
|
|
2571
2701
|
}
|
|
2572
2702
|
this.result.emit(data);
|
|
2573
2703
|
}
|
|
2574
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiFiltersComponent, deps: [{ token: i1.DatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2575
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TCloudUiFiltersComponent, isStandalone: true, selector: "tcloud-ui-filters", inputs: { border: "border", 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" }, providers: [DatePipe], viewQueries: [{ propertyName: "_formulario", first: true, predicate: ["_formulario"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"show_filters\" class=\"tcloud-ui-filters area-filter\" [class.no-border]=\"!border\">\n <ng-container *ngFor=\"let item of filters; let i = index\">\n\n <ng-container *ngIf=\"!item.type || (item.type && item.type !== 'boolean')\">\n\n <ng-container *ngIf=\"item.type === 'date-local'\">\n\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\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>\n <div class=\"box-type-{{item.type}}\">\n <tcloud-ui-datepicker \n #_input\n name=\"input_{{i+1}}\"\n [modeInput]=\"true\"\n [(ngModel)]=\"item.value\"\n (ngModelChange)=\"searchIn(item, _input)\">\n </tcloud-ui-datepicker>\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 = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n\n \n </ng-container>\n\n <ng-container *ngIf=\"item.type !== 'date-local'\">\n <ng-container *ngIf=\"item.type === 'datetime-local'\">\n\n <ng-container *ngIf=\"(item.id === 'start' || item.id === 'stop') && useRangeDate\">\n <!-- PERIOD RANGE DATE -->\n <ng-container *ngIf=\"item.id === 'start'\">\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+start_stop_width+''+start_stop_und : ''\">\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>\n <tcloud-ui-range-date \n #_range_date ngModel name=\"input_{{i+1}}\" \n [defaultValuePeriodStartStop]=\"item.defaultValuePeriodStartStop\"\n [descriptionStart]=\"descriptionStart\"\n [descriptionStop]=\"descriptionStop\"\n required \n (onChange)=\"searchInRange(_range_date); searchIn(item, _range_date)\">\n </tcloud-ui-range-date>\n </div>\n </ng-container> \n <input *ngIf=\"item.id === 'start'\" #_input name=\"input_{{i+1}}\" type=\"hidden\" [(ngModel)]=\"start_value\"> \n <input *ngIf=\"item.id === 'stop'\" #_input name=\"input_{{i+1}}\" type=\"hidden\" [(ngModel)]=\"stop_value\"> \n </ng-container>\n\n <ng-container *ngIf=\"!item.id || !useRangeDate\">\n\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\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>\n <div class=\"box-type-{{item.type}}\">\n <tcloud-ui-datepicker-time \n #_input \n [(ngModel)]=\"item.value\" \n name=\"input_{{i+1}}\" \n [useOptionsDateTime]=\"(item && item.useOptionsDateTime) ? true : false\"\n (eventChange)=\"searchIn(item, _input)\" >\n </tcloud-ui-datepicker-time>\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 = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n\n </ng-container>\n\n </ng-container>\n </ng-container>\n \n <ng-container *ngIf=\"item.type !== 'select' && item.type !== 'datetime-local' && item.type !== 'date-local'\">\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n\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>\n <div class=\"box-type-{{item.type}}\">\n <input \n #_input\n [(ngModel)]=\"item.value\"\n placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n name=\"input_{{i+1}}\" \n type=\"{{ (item.type === 'number') ? 'text' : item.type }}\" \n class=\"tc-form-control\" \n (keyup)=\"searchIn(item, $event)\"> \n <button class=\"btn-clear-filter-text\" [class.to-hide]=\"_input.value === ''\" (click)=\"searchIn(item, null); _input.value = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.type === 'select' && item.data && (item.data).length > 0\" >\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n\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>\n <div class=\"box-type-{{item.type}}\">\n <select \n #_input\n [(ngModel)]=\"item.value\"\n name=\"input_{{i+1}}\" \n class=\"tc-form-control\" \n (change)=\"searchIn(item, $event)\">\n <option [ngValue]=\"\"></option>\n <ng-container *ngFor=\"let v of item.data\">\n <option [value]=\"v.value\">{{ v.description }}</option>\n </ng-container>\n </select>\n </div>\n </div>\n </ng-container>\n\n </ng-container>\n\n\n <ng-container *ngIf=\"item.type && item.type === 'boolean'\">\n \n <div class=\"box-filter-input\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\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>\n <div class=\"area-input-checkbox\">\n <div class=\"tc-form-control\">\n <label>\n {{ item.placeholder }}\n <input \n #_input\n placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n name=\"input_{{i+1}}\" \n type=\"checkbox\" \n (change)=\"searchIn(item, _input.checked)\"> \n </label>\n </div> \n </div>\n </div>\n\n </ng-container>\n\n\n </ng-container>\n\n <div class=\"text-right mb-1 mr-1\" *ngIf=\"useButtonSubmit\">\n <button type=\"button\" class=\"tc-btn {{ btnSubmitClass }}\" (click)=\"toSubmit()\" >{{ submitText }}</button>\n </div>\n\n</div>\n\n<!-- <pre>{{ inputs | json }}</pre> -->\n<!-- <pre> {{ data | json }} </pre> -->\n\n<!-- <p>FILTERS</p><pre> {{ filters | json }}</pre> -->\n\n<!--\n <pre>start_stop: {{ start_stop }}</pre>\n <pre>start_stop_width: {{ start_stop_width }}</pre>\n <pre>start_stop_und: {{ start_stop_und }}</pre>\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}.no-border{border:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { 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: TCloudUiRangeDateComponent, selector: "tcloud-ui-range-date", inputs: ["defaultValuePeriodStartStop", "required", "descriptionStart", "descriptionStop"], outputs: ["onChange"] }, { kind: "component", type: TCloudUiDatepickerComponent, selector: "tcloud-ui-datepicker", inputs: ["multiple", "maxNumberOfDates", "daysOfWeekDisabled", "minDate", "maxDate", "datesDisabled", "modeInput", "useBorder", "childInputDateTime", "startViewInMinDate", "startViewInMaxDate", "disabled", "ngModel", "code"], outputs: ["onChange", "ngModelChange", "onCheckDate"] }, { kind: "component", type: TCloudUiDatepickerTimeComponent, selector: "tcloud-ui-datepicker-time", inputs: ["ngModel", "minDate", "maxDate", "useOptionsDateTime"], outputs: ["ngModelChange", "onChange", "eventChange"] }] }); }
|
|
2704
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiFiltersComponent, deps: [{ token: i1.DatePipe }, { token: TCloudUiLayoutService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2705
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TCloudUiFiltersComponent, isStandalone: true, selector: "tcloud-ui-filters", inputs: { border: "border", 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" }, providers: [DatePipe], viewQueries: [{ propertyName: "_formulario", first: true, predicate: ["_formulario"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"show_filters\" class=\"area-filter {{layout}}\" [class.tc-rev-filters]=\"layout === 'modern'\" [class.tcloud-ui-filters]=\"layout === 'classic'\" [class.no-border]=\"!border\">\n <ng-container *ngFor=\"let item of filters; let i = index\">\n\n <ng-container *ngIf=\"!item.type || (item.type && item.type !== 'boolean')\">\n\n <ng-container *ngIf=\"item.type === 'date'\">\n\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n @if (layout === 'classic') {\n <i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i> \n {{ item.description }}\n } @else {\n {{ item.description }}:\n }\n </div>\n <div class=\"box-type-{{item.type}}\">\n <input\n tcloudForm\n #_input\n type=\"date\"\n name=\"input_{{i+1}}\"\n class=\"tc-form-control\"\n [(ngModel)]=\"item.value\"\n (ngModelChange)=\"searchIn(item, _input)\">\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 = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n\n </ng-container>\n\n <ng-container *ngIf=\"item.type === 'datetime'\">\n\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n @if (layout === 'classic') {\n <i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i> \n {{ item.description }}\n } @else {\n {{ item.description }}:\n }\n </div>\n <div class=\"box-type-{{item.type}}\">\n <input\n tcloudForm\n #_input\n type=\"datetime-local\"\n name=\"input_{{i+1}}\"\n class=\"tc-form-control\"\n [(ngModel)]=\"item.value\"\n (ngModelChange)=\"searchIn(item, _input)\">\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 = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n\n </ng-container>\n\n <ng-container *ngIf=\"item.type === 'date-local'\">\n\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n @if (layout === 'classic') {\n <i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i> \n {{ item.description }}\n } @else {\n {{ item.description }}:\n }\n </div>\n <div class=\"box-type-{{item.type}}\">\n <tcloud-ui-datepicker\n #_input\n name=\"input_{{i+1}}\"\n [modeInput]=\"true\"\n [(ngModel)]=\"item.value\"\n (ngModelChange)=\"searchIn(item, _input)\">\n </tcloud-ui-datepicker>\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 = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n\n\n </ng-container>\n\n <ng-container *ngIf=\"item.type === 'datetime-local'\">\n\n <ng-container *ngIf=\"(item.id === 'start' || item.id === 'stop') && useRangeDate\">\n <!-- PERIOD RANGE DATE -->\n <ng-container *ngIf=\"item.id === 'start'\">\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+start_stop_width+''+start_stop_und : ''\">\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>\n <tcloud-ui-range-date\n #_range_date ngModel name=\"input_{{i+1}}\"\n [defaultValuePeriodStartStop]=\"item.defaultValuePeriodStartStop\"\n [descriptionStart]=\"descriptionStart\"\n [descriptionStop]=\"descriptionStop\"\n required\n (onChange)=\"searchInRange(_range_date); searchIn(item, _range_date)\">\n </tcloud-ui-range-date>\n </div>\n </ng-container>\n <input *ngIf=\"item.id === 'start'\" #_input name=\"input_{{i+1}}\" type=\"hidden\" [(ngModel)]=\"start_value\">\n <input *ngIf=\"item.id === 'stop'\" #_input name=\"input_{{i+1}}\" type=\"hidden\" [(ngModel)]=\"stop_value\">\n </ng-container>\n\n <ng-container *ngIf=\"!item.id || !useRangeDate\">\n\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\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>\n <div class=\"box-type-{{item.type}}\">\n <tcloud-ui-datepicker-time\n #_input\n [(ngModel)]=\"item.value\"\n name=\"input_{{i+1}}\"\n [useOptionsDateTime]=\"(item && item.useOptionsDateTime) ? true : false\"\n (eventChange)=\"searchIn(item, _input)\" >\n </tcloud-ui-datepicker-time>\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 = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n\n </ng-container>\n\n </ng-container>\n\n <ng-container *ngIf=\"item.type !== 'select' && item.type !== 'datetime-local' && item.type !== 'date-local' && item.type !== 'datetime' && item.type !== 'date'\">\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n\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>\n <div class=\"box-type-{{item.type}}\">\n <input\n tcloudForm\n #_input\n [(ngModel)]=\"item.value\"\n placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n name=\"input_{{i+1}}\"\n type=\"{{ (item.type === 'number') ? 'number' : (item.type) ? item.type : 'text' }}\"\n class=\"tc-form-control\"\n (keyup)=\"searchIn(item, $event)\">\n <button class=\"btn-clear-filter-text\" [class.to-hide]=\"_input.value === ''\" (click)=\"searchIn(item, null); _input.value = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.type === 'select' && item.data && (item.data).length > 0\" >\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n\n <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n @if (layout === 'classic') {\n <i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i> \n {{ item.description }}\n } @else {\n {{ item.description }}:\n }\n </div>\n <div class=\"box-type-{{item.type}}\">\n <select\n tcloudForm\n #_input\n [(ngModel)]=\"item.value\"\n name=\"input_{{i+1}}\"\n class=\"tc-form-control\"\n (change)=\"searchIn(item, $event)\">\n <option [ngValue]=\"\"></option>\n <ng-container *ngFor=\"let v of item.data\">\n <option [value]=\"v.value\">{{ v.description }}</option>\n </ng-container>\n </select>\n </div>\n </div>\n </ng-container>\n\n </ng-container>\n\n\n <ng-container *ngIf=\"item.type && item.type === 'boolean'\">\n\n <div class=\"box-filter-input\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\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>\n <div class=\"area-input-checkbox\">\n <div class=\"tc-form-control\" tcloudForm>\n <label>\n <span>{{ item.placeholder }}</span>\n <input\n tcloudForm\n #_input\n placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n name=\"input_{{i+1}}\"\n type=\"checkbox\"\n (change)=\"searchIn(item, _input.checked)\">\n </label>\n </div>\n </div>\n </div>\n\n </ng-container>\n\n\n </ng-container>\n\n <div class=\"text-right mb-1 mr-1\" *ngIf=\"useButtonSubmit\">\n <button type=\"button\" class=\"tc-btn {{ btnSubmitClass }}\" (click)=\"toSubmit()\" >{{ submitText }}</button>\n </div>\n\n</div>\n\n<!-- <pre>{{ inputs | json }}</pre> -->\n<!-- <pre> {{ data | json }} </pre> -->\n\n<!-- <p>FILTERS</p><pre> {{ filters | json }}</pre> -->\n\n<!--\n <pre>start_stop: {{ start_stop }}</pre>\n <pre>start_stop_width: {{ start_stop_width }}</pre>\n <pre>start_stop_und: {{ start_stop_und }}</pre>\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}.no-border{border:none!important}.tc-rev-filters select,.tc-rev-filters input[type=text],.tc-rev-filters input[type=number],.tc-rev-filters input[type=email] input[type=password],.tc-rev-filters input[type=date]{background-color:#fff;width:100%!important}.tc-rev-filters input[type=checkbox]{position:inherit;cursor:pointer;margin:0!important}.tc-rev-filters .area-input-checkbox label span{position:relative;bottom:14px;left:-5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { 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: TCloudUiRangeDateComponent, selector: "tcloud-ui-range-date", inputs: ["defaultValuePeriodStartStop", "required", "descriptionStart", "descriptionStop"], outputs: ["onChange"] }, { kind: "component", type: TCloudUiDatepickerComponent, selector: "tcloud-ui-datepicker", inputs: ["multiple", "maxNumberOfDates", "daysOfWeekDisabled", "minDate", "maxDate", "datesDisabled", "modeInput", "useBorder", "childInputDateTime", "startViewInMinDate", "startViewInMaxDate", "disabled", "ngModel", "code"], outputs: ["onChange", "ngModelChange", "onCheckDate"] }, { kind: "component", type: TCloudUiDatepickerTimeComponent, selector: "tcloud-ui-datepicker-time", inputs: ["ngModel", "minDate", "maxDate", "useOptionsDateTime"], outputs: ["ngModelChange", "onChange", "eventChange"] }, { kind: "directive", type: TCloudUiFormDirective, selector: "[tcloudForm]", inputs: ["fullWidth"] }] }); }
|
|
2576
2706
|
}
|
|
2577
2707
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiFiltersComponent, decorators: [{
|
|
2578
2708
|
type: Component,
|
|
2579
|
-
args: [{ selector: 'tcloud-ui-filters', standalone: true, imports: [CommonModule, FormsModule, TCloudUiRangeDateComponent, TCloudUiDatepickerComponent, TCloudUiDatepickerTimeComponent], providers: [DatePipe], template: "<div *ngIf=\"show_filters\" class=\"tcloud-ui-filters area-filter\" [class.no-border]=\"!border\">\n <ng-container *ngFor=\"let item of filters; let i = index\">\n\n <ng-container *ngIf=\"!item.type || (item.type && item.type !== 'boolean')\">\n\n <ng-container *ngIf=\"item.type === 'date-local'\">\n\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\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>\n <div class=\"box-type-{{item.type}}\">\n <tcloud-ui-datepicker \n #_input\n name=\"input_{{i+1}}\"\n [modeInput]=\"true\"\n [(ngModel)]=\"item.value\"\n (ngModelChange)=\"searchIn(item, _input)\">\n </tcloud-ui-datepicker>\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 = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n\n \n </ng-container>\n\n <ng-container *ngIf=\"item.type !== 'date-local'\">\n <ng-container *ngIf=\"item.type === 'datetime-local'\">\n\n <ng-container *ngIf=\"(item.id === 'start' || item.id === 'stop') && useRangeDate\">\n <!-- PERIOD RANGE DATE -->\n <ng-container *ngIf=\"item.id === 'start'\">\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+start_stop_width+''+start_stop_und : ''\">\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>\n <tcloud-ui-range-date \n #_range_date ngModel name=\"input_{{i+1}}\" \n [defaultValuePeriodStartStop]=\"item.defaultValuePeriodStartStop\"\n [descriptionStart]=\"descriptionStart\"\n [descriptionStop]=\"descriptionStop\"\n required \n (onChange)=\"searchInRange(_range_date); searchIn(item, _range_date)\">\n </tcloud-ui-range-date>\n </div>\n </ng-container> \n <input *ngIf=\"item.id === 'start'\" #_input name=\"input_{{i+1}}\" type=\"hidden\" [(ngModel)]=\"start_value\"> \n <input *ngIf=\"item.id === 'stop'\" #_input name=\"input_{{i+1}}\" type=\"hidden\" [(ngModel)]=\"stop_value\"> \n </ng-container>\n\n <ng-container *ngIf=\"!item.id || !useRangeDate\">\n\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\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>\n <div class=\"box-type-{{item.type}}\">\n <tcloud-ui-datepicker-time \n #_input \n [(ngModel)]=\"item.value\" \n name=\"input_{{i+1}}\" \n [useOptionsDateTime]=\"(item && item.useOptionsDateTime) ? true : false\"\n (eventChange)=\"searchIn(item, _input)\" >\n </tcloud-ui-datepicker-time>\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 = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n\n </ng-container>\n\n </ng-container>\n </ng-container>\n \n <ng-container *ngIf=\"item.type !== 'select' && item.type !== 'datetime-local' && item.type !== 'date-local'\">\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n\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>\n <div class=\"box-type-{{item.type}}\">\n <input \n #_input\n [(ngModel)]=\"item.value\"\n placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n name=\"input_{{i+1}}\" \n type=\"{{ (item.type === 'number') ? 'text' : item.type }}\" \n class=\"tc-form-control\" \n (keyup)=\"searchIn(item, $event)\"> \n <button class=\"btn-clear-filter-text\" [class.to-hide]=\"_input.value === ''\" (click)=\"searchIn(item, null); _input.value = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.type === 'select' && item.data && (item.data).length > 0\" >\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n\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>\n <div class=\"box-type-{{item.type}}\">\n <select \n #_input\n [(ngModel)]=\"item.value\"\n name=\"input_{{i+1}}\" \n class=\"tc-form-control\" \n (change)=\"searchIn(item, $event)\">\n <option [ngValue]=\"\"></option>\n <ng-container *ngFor=\"let v of item.data\">\n <option [value]=\"v.value\">{{ v.description }}</option>\n </ng-container>\n </select>\n </div>\n </div>\n </ng-container>\n\n </ng-container>\n\n\n <ng-container *ngIf=\"item.type && item.type === 'boolean'\">\n \n <div class=\"box-filter-input\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\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>\n <div class=\"area-input-checkbox\">\n <div class=\"tc-form-control\">\n <label>\n {{ item.placeholder }}\n <input \n #_input\n placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n name=\"input_{{i+1}}\" \n type=\"checkbox\" \n (change)=\"searchIn(item, _input.checked)\"> \n </label>\n </div> \n </div>\n </div>\n\n </ng-container>\n\n\n </ng-container>\n\n <div class=\"text-right mb-1 mr-1\" *ngIf=\"useButtonSubmit\">\n <button type=\"button\" class=\"tc-btn {{ btnSubmitClass }}\" (click)=\"toSubmit()\" >{{ submitText }}</button>\n </div>\n\n</div>\n\n<!-- <pre>{{ inputs | json }}</pre> -->\n<!-- <pre> {{ data | json }} </pre> -->\n\n<!-- <p>FILTERS</p><pre> {{ filters | json }}</pre> -->\n\n<!--\n <pre>start_stop: {{ start_stop }}</pre>\n <pre>start_stop_width: {{ start_stop_width }}</pre>\n <pre>start_stop_und: {{ start_stop_und }}</pre>\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}.no-border{border:none!important}\n"] }]
|
|
2580
|
-
}], ctorParameters: () => [{ type: i1.DatePipe }], propDecorators: { _formulario: [{
|
|
2709
|
+
args: [{ selector: 'tcloud-ui-filters', standalone: true, imports: [CommonModule, FormsModule, TCloudUiRangeDateComponent, TCloudUiDatepickerComponent, TCloudUiDatepickerTimeComponent, TCloudUiFormDirective], providers: [DatePipe], template: "<div *ngIf=\"show_filters\" class=\"area-filter {{layout}}\" [class.tc-rev-filters]=\"layout === 'modern'\" [class.tcloud-ui-filters]=\"layout === 'classic'\" [class.no-border]=\"!border\">\n <ng-container *ngFor=\"let item of filters; let i = index\">\n\n <ng-container *ngIf=\"!item.type || (item.type && item.type !== 'boolean')\">\n\n <ng-container *ngIf=\"item.type === 'date'\">\n\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n @if (layout === 'classic') {\n <i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i> \n {{ item.description }}\n } @else {\n {{ item.description }}:\n }\n </div>\n <div class=\"box-type-{{item.type}}\">\n <input\n tcloudForm\n #_input\n type=\"date\"\n name=\"input_{{i+1}}\"\n class=\"tc-form-control\"\n [(ngModel)]=\"item.value\"\n (ngModelChange)=\"searchIn(item, _input)\">\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 = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n\n </ng-container>\n\n <ng-container *ngIf=\"item.type === 'datetime'\">\n\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n @if (layout === 'classic') {\n <i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i> \n {{ item.description }}\n } @else {\n {{ item.description }}:\n }\n </div>\n <div class=\"box-type-{{item.type}}\">\n <input\n tcloudForm\n #_input\n type=\"datetime-local\"\n name=\"input_{{i+1}}\"\n class=\"tc-form-control\"\n [(ngModel)]=\"item.value\"\n (ngModelChange)=\"searchIn(item, _input)\">\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 = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n\n </ng-container>\n\n <ng-container *ngIf=\"item.type === 'date-local'\">\n\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n @if (layout === 'classic') {\n <i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i> \n {{ item.description }}\n } @else {\n {{ item.description }}:\n }\n </div>\n <div class=\"box-type-{{item.type}}\">\n <tcloud-ui-datepicker\n #_input\n name=\"input_{{i+1}}\"\n [modeInput]=\"true\"\n [(ngModel)]=\"item.value\"\n (ngModelChange)=\"searchIn(item, _input)\">\n </tcloud-ui-datepicker>\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 = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n\n\n </ng-container>\n\n <ng-container *ngIf=\"item.type === 'datetime-local'\">\n\n <ng-container *ngIf=\"(item.id === 'start' || item.id === 'stop') && useRangeDate\">\n <!-- PERIOD RANGE DATE -->\n <ng-container *ngIf=\"item.id === 'start'\">\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+start_stop_width+''+start_stop_und : ''\">\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>\n <tcloud-ui-range-date\n #_range_date ngModel name=\"input_{{i+1}}\"\n [defaultValuePeriodStartStop]=\"item.defaultValuePeriodStartStop\"\n [descriptionStart]=\"descriptionStart\"\n [descriptionStop]=\"descriptionStop\"\n required\n (onChange)=\"searchInRange(_range_date); searchIn(item, _range_date)\">\n </tcloud-ui-range-date>\n </div>\n </ng-container>\n <input *ngIf=\"item.id === 'start'\" #_input name=\"input_{{i+1}}\" type=\"hidden\" [(ngModel)]=\"start_value\">\n <input *ngIf=\"item.id === 'stop'\" #_input name=\"input_{{i+1}}\" type=\"hidden\" [(ngModel)]=\"stop_value\">\n </ng-container>\n\n <ng-container *ngIf=\"!item.id || !useRangeDate\">\n\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\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>\n <div class=\"box-type-{{item.type}}\">\n <tcloud-ui-datepicker-time\n #_input\n [(ngModel)]=\"item.value\"\n name=\"input_{{i+1}}\"\n [useOptionsDateTime]=\"(item && item.useOptionsDateTime) ? true : false\"\n (eventChange)=\"searchIn(item, _input)\" >\n </tcloud-ui-datepicker-time>\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 = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n\n </ng-container>\n\n </ng-container>\n\n <ng-container *ngIf=\"item.type !== 'select' && item.type !== 'datetime-local' && item.type !== 'date-local' && item.type !== 'datetime' && item.type !== 'date'\">\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n\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>\n <div class=\"box-type-{{item.type}}\">\n <input\n tcloudForm\n #_input\n [(ngModel)]=\"item.value\"\n placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n name=\"input_{{i+1}}\"\n type=\"{{ (item.type === 'number') ? 'number' : (item.type) ? item.type : 'text' }}\"\n class=\"tc-form-control\"\n (keyup)=\"searchIn(item, $event)\">\n <button class=\"btn-clear-filter-text\" [class.to-hide]=\"_input.value === ''\" (click)=\"searchIn(item, null); _input.value = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.type === 'select' && item.data && (item.data).length > 0\" >\n <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n\n <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n @if (layout === 'classic') {\n <i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i> \n {{ item.description }}\n } @else {\n {{ item.description }}:\n }\n </div>\n <div class=\"box-type-{{item.type}}\">\n <select\n tcloudForm\n #_input\n [(ngModel)]=\"item.value\"\n name=\"input_{{i+1}}\"\n class=\"tc-form-control\"\n (change)=\"searchIn(item, $event)\">\n <option [ngValue]=\"\"></option>\n <ng-container *ngFor=\"let v of item.data\">\n <option [value]=\"v.value\">{{ v.description }}</option>\n </ng-container>\n </select>\n </div>\n </div>\n </ng-container>\n\n </ng-container>\n\n\n <ng-container *ngIf=\"item.type && item.type === 'boolean'\">\n\n <div class=\"box-filter-input\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\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>\n <div class=\"area-input-checkbox\">\n <div class=\"tc-form-control\" tcloudForm>\n <label>\n <span>{{ item.placeholder }}</span>\n <input\n tcloudForm\n #_input\n placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n name=\"input_{{i+1}}\"\n type=\"checkbox\"\n (change)=\"searchIn(item, _input.checked)\">\n </label>\n </div>\n </div>\n </div>\n\n </ng-container>\n\n\n </ng-container>\n\n <div class=\"text-right mb-1 mr-1\" *ngIf=\"useButtonSubmit\">\n <button type=\"button\" class=\"tc-btn {{ btnSubmitClass }}\" (click)=\"toSubmit()\" >{{ submitText }}</button>\n </div>\n\n</div>\n\n<!-- <pre>{{ inputs | json }}</pre> -->\n<!-- <pre> {{ data | json }} </pre> -->\n\n<!-- <p>FILTERS</p><pre> {{ filters | json }}</pre> -->\n\n<!--\n <pre>start_stop: {{ start_stop }}</pre>\n <pre>start_stop_width: {{ start_stop_width }}</pre>\n <pre>start_stop_und: {{ start_stop_und }}</pre>\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}.no-border{border:none!important}.tc-rev-filters select,.tc-rev-filters input[type=text],.tc-rev-filters input[type=number],.tc-rev-filters input[type=email] input[type=password],.tc-rev-filters input[type=date]{background-color:#fff;width:100%!important}.tc-rev-filters input[type=checkbox]{position:inherit;cursor:pointer;margin:0!important}.tc-rev-filters .area-input-checkbox label span{position:relative;bottom:14px;left:-5px}\n"] }]
|
|
2710
|
+
}], ctorParameters: () => [{ type: i1.DatePipe }, { type: TCloudUiLayoutService }], propDecorators: { _formulario: [{
|
|
2581
2711
|
type: ViewChild,
|
|
2582
2712
|
args: ['_formulario']
|
|
2583
2713
|
}], border: [{
|
|
@@ -2976,53 +3106,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
2976
3106
|
type: Injectable
|
|
2977
3107
|
}] });
|
|
2978
3108
|
|
|
2979
|
-
/**
|
|
2980
|
-
* Token de injeção para a configuração do TCloud UI
|
|
2981
|
-
*/
|
|
2982
|
-
const TCLOUD_UI_CONFIG = new InjectionToken('TCLOUD_UI_CONFIG');
|
|
2983
|
-
/**
|
|
2984
|
-
* Token de injeção para o serviço de usuário customizado
|
|
2985
|
-
*/
|
|
2986
|
-
const TCLOUD_UI_USER_SERVICE = new InjectionToken('TCLOUD_UI_USER_SERVICE');
|
|
2987
|
-
/**
|
|
2988
|
-
* Token de injeção para o serviço de tema customizado
|
|
2989
|
-
*/
|
|
2990
|
-
const TCLOUD_UI_LAYOUT_SERVICE = new InjectionToken('TCLOUD_UI_LAYOUT_SERVICE');
|
|
2991
|
-
/**
|
|
2992
|
-
* Token de injeção para o serviço de viewport customizado
|
|
2993
|
-
*/
|
|
2994
|
-
const TCLOUD_UI_VIEWPORT_SERVICE = new InjectionToken('TCLOUD_UI_VIEWPORT_SERVICE');
|
|
2995
|
-
|
|
2996
|
-
class TCloudUiLayoutService {
|
|
2997
|
-
constructor(_LayoutService) {
|
|
2998
|
-
this._LayoutService = _LayoutService;
|
|
2999
|
-
this.layoutService = {};
|
|
3000
|
-
this.layoutService = this._LayoutService;
|
|
3001
|
-
}
|
|
3002
|
-
getCurrentLayout() {
|
|
3003
|
-
try {
|
|
3004
|
-
return this.layoutService?.getCurrentLayout();
|
|
3005
|
-
}
|
|
3006
|
-
catch (error) {
|
|
3007
|
-
// console.warn('getCurrentLayout', error);
|
|
3008
|
-
}
|
|
3009
|
-
return '';
|
|
3010
|
-
}
|
|
3011
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiLayoutService, deps: [{ token: TCLOUD_UI_LAYOUT_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3012
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiLayoutService, providedIn: 'root' }); }
|
|
3013
|
-
}
|
|
3014
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiLayoutService, decorators: [{
|
|
3015
|
-
type: Injectable,
|
|
3016
|
-
args: [{
|
|
3017
|
-
providedIn: 'root',
|
|
3018
|
-
}]
|
|
3019
|
-
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
3020
|
-
type: Optional
|
|
3021
|
-
}, {
|
|
3022
|
-
type: Inject,
|
|
3023
|
-
args: [TCLOUD_UI_LAYOUT_SERVICE]
|
|
3024
|
-
}] }] });
|
|
3025
|
-
|
|
3026
3109
|
class TCloudUiModalComponent {
|
|
3027
3110
|
/**
|
|
3028
3111
|
* confirm boolean - Indica se será um modal do tipo confirmação - default false
|
|
@@ -3274,7 +3357,7 @@ class TCloudUiButtonDirective {
|
|
|
3274
3357
|
}
|
|
3275
3358
|
setClasses() {
|
|
3276
3359
|
const layout = this.layout();
|
|
3277
|
-
if (layout === '') {
|
|
3360
|
+
if (layout === 'classic') {
|
|
3278
3361
|
return;
|
|
3279
3362
|
}
|
|
3280
3363
|
const tokenList = this._el.nativeElement.classList;
|
|
@@ -3285,59 +3368,19 @@ class TCloudUiButtonDirective {
|
|
|
3285
3368
|
tcloudButton = 'filled';
|
|
3286
3369
|
}
|
|
3287
3370
|
if (layout === 'modern') {
|
|
3371
|
+
this._el.nativeElement.classList.add('tc-rev-btn');
|
|
3288
3372
|
this.fullWidth() ? this._el.nativeElement.classList.add('tc-rev-btn--full-width') : null;
|
|
3289
3373
|
this._el.nativeElement.classList.add(`tc-rev-btn--${this.size()}`);
|
|
3290
3374
|
this._el.nativeElement.classList.add(`tc-rev-btn--${this.color()}-${tcloudButton}`);
|
|
3291
3375
|
}
|
|
3292
3376
|
}
|
|
3293
3377
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiButtonDirective, deps: [{ token: TCloudUiLayoutService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3294
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TCloudUiButtonDirective, isStandalone: true, selector: "[tcloudButton]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, tcloudButton: { classPropertyName: "tcloudButton", publicName: "tcloudButton", isSignal: true, isRequired: false, transformFunction: null } },
|
|
3378
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TCloudUiButtonDirective, isStandalone: true, selector: "[tcloudButton]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, tcloudButton: { classPropertyName: "tcloudButton", publicName: "tcloudButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
3295
3379
|
}
|
|
3296
3380
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiButtonDirective, decorators: [{
|
|
3297
3381
|
type: Directive,
|
|
3298
3382
|
args: [{
|
|
3299
3383
|
selector: '[tcloudButton]',
|
|
3300
|
-
host: {
|
|
3301
|
-
class: 'tc-rev-btn'
|
|
3302
|
-
},
|
|
3303
|
-
standalone: true
|
|
3304
|
-
}]
|
|
3305
|
-
}], ctorParameters: () => [{ type: TCloudUiLayoutService }, { type: i0.ElementRef }] });
|
|
3306
|
-
|
|
3307
|
-
class TCloudUiFormDirective {
|
|
3308
|
-
constructor(_tCloudUiLayoutService, _el) {
|
|
3309
|
-
this._tCloudUiLayoutService = _tCloudUiLayoutService;
|
|
3310
|
-
this._el = _el;
|
|
3311
|
-
this.fullWidth = input(false);
|
|
3312
|
-
effect(() => {
|
|
3313
|
-
this.setClasses();
|
|
3314
|
-
});
|
|
3315
|
-
}
|
|
3316
|
-
layout() {
|
|
3317
|
-
return `${this._tCloudUiLayoutService?.getCurrentLayout()}`;
|
|
3318
|
-
}
|
|
3319
|
-
setClasses() {
|
|
3320
|
-
const layout = this.layout();
|
|
3321
|
-
if (layout === '') {
|
|
3322
|
-
return;
|
|
3323
|
-
}
|
|
3324
|
-
const tokenList = this._el.nativeElement.classList;
|
|
3325
|
-
tokenList.remove(...Array.from(tokenList).filter((c) => c === 'form-control'));
|
|
3326
|
-
tokenList.remove(...Array.from(tokenList).filter((c) => c === 'tc-form-control'));
|
|
3327
|
-
if (layout === 'modern') {
|
|
3328
|
-
this.fullWidth() ? this._el.nativeElement.classList.add('tc-rev-input-control--full-width') : null;
|
|
3329
|
-
}
|
|
3330
|
-
}
|
|
3331
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiFormDirective, deps: [{ token: TCloudUiLayoutService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3332
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TCloudUiFormDirective, isStandalone: true, selector: "[tcloudForm]", inputs: { fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tc-rev-input-control" }, ngImport: i0 }); }
|
|
3333
|
-
}
|
|
3334
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiFormDirective, decorators: [{
|
|
3335
|
-
type: Directive,
|
|
3336
|
-
args: [{
|
|
3337
|
-
selector: '[tcloudForm]',
|
|
3338
|
-
host: {
|
|
3339
|
-
class: 'tc-rev-input-control'
|
|
3340
|
-
},
|
|
3341
3384
|
standalone: true
|
|
3342
3385
|
}]
|
|
3343
3386
|
}], ctorParameters: () => [{ type: TCloudUiLayoutService }, { type: i0.ElementRef }] });
|