@dev-tcloud/tcloud-ui 0.0.53 → 0.0.55
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 +2 -2
- package/esm2020/lib/_modules/tcloud-ui-datepicker-time/tcloud-ui-datepicker-time.component.mjs +2 -2
- package/esm2020/lib/_modules/tcloud-ui-filters/tcloud-ui-filters.component.mjs +3 -3
- package/esm2020/lib/_modules/tcloud-ui-linha-logo/tcloud-ui-linha-logo.component.mjs +7 -5
- package/esm2020/lib/_modules/tcloud-ui-number-step/tcloud-ui-number-step.component.mjs +3 -3
- package/esm2020/lib/_modules/tcloud-ui-table/tcloud-ui-table.component.mjs +6 -3
- package/fesm2015/dev-tcloud-tcloud-ui.mjs +19 -14
- package/fesm2015/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/fesm2020/dev-tcloud-tcloud-ui.mjs +19 -14
- package/fesm2020/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/lib/_modules/tcloud-ui-linha-logo/tcloud-ui-linha-logo.component.d.ts +2 -2
- package/lib/_modules/tcloud-ui-table/tcloud-ui-table.component.d.ts +2 -1
- package/package.json +1 -1
- package/scss/components/custom/loading-transitions.scss +1 -1
- package/scss/components/custom/table.scss +5 -0
- package/scss/tcloud/custom/buttons.scss +5 -1
- package/scss/tcloud/custom/forms.scss +1 -0
|
@@ -3,16 +3,19 @@ import * as i0 from "@angular/core";
|
|
|
3
3
|
export class TCloudUiTableComponent {
|
|
4
4
|
constructor() {
|
|
5
5
|
this.responsive = true;
|
|
6
|
+
this.striped = false;
|
|
6
7
|
}
|
|
7
8
|
ngOnInit() {
|
|
8
9
|
}
|
|
9
10
|
}
|
|
10
11
|
TCloudUiTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11
|
-
TCloudUiTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiTableComponent, selector: "tcloud-ui-table", inputs: { responsive: "responsive" }, ngImport: i0, template: "<table class=\"tc-table\" [class.tc-table-responsive]=\"responsive\" cellspacing=\"0\">\n <ng-content select=\"[tc-thead]\"></ng-content>\n <ng-content select=\"[tc-tbody]\"></ng-content>\n</table>\n", styles: [""] });
|
|
12
|
+
TCloudUiTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiTableComponent, selector: "tcloud-ui-table", inputs: { responsive: "responsive", striped: "striped" }, ngImport: i0, template: "<table class=\"tc-table\" [class.tc-table-striped]=\"striped\" [class.tc-table-responsive]=\"responsive\" cellspacing=\"0\">\n <ng-content select=\"[tc-thead]\"></ng-content>\n <ng-content select=\"[tc-tbody]\"></ng-content>\n</table>\n", styles: [""] });
|
|
12
13
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTableComponent, decorators: [{
|
|
13
14
|
type: Component,
|
|
14
|
-
args: [{ selector: 'tcloud-ui-table', template: "<table class=\"tc-table\" [class.tc-table-responsive]=\"responsive\" cellspacing=\"0\">\n <ng-content select=\"[tc-thead]\"></ng-content>\n <ng-content select=\"[tc-tbody]\"></ng-content>\n</table>\n" }]
|
|
15
|
+
args: [{ selector: 'tcloud-ui-table', template: "<table class=\"tc-table\" [class.tc-table-striped]=\"striped\" [class.tc-table-responsive]=\"responsive\" cellspacing=\"0\">\n <ng-content select=\"[tc-thead]\"></ng-content>\n <ng-content select=\"[tc-tbody]\"></ng-content>\n</table>\n" }]
|
|
15
16
|
}], ctorParameters: function () { return []; }, propDecorators: { responsive: [{
|
|
16
17
|
type: Input
|
|
18
|
+
}], striped: [{
|
|
19
|
+
type: Input
|
|
17
20
|
}] } });
|
|
18
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
21
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGNsb3VkLXVpLXRhYmxlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3RjbG91ZC11aS9zcmMvbGliL19tb2R1bGVzL3RjbG91ZC11aS10YWJsZS90Y2xvdWQtdWktdGFibGUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdGNsb3VkLXVpL3NyYy9saWIvX21vZHVsZXMvdGNsb3VkLXVpLXRhYmxlL3RjbG91ZC11aS10YWJsZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBVSxNQUFNLGVBQWUsQ0FBQzs7QUFPekQsTUFBTSxPQUFPLHNCQUFzQjtJQUtqQztRQUhTLGVBQVUsR0FBWSxJQUFJLENBQUM7UUFDM0IsWUFBTyxHQUFZLEtBQUssQ0FBQztJQUVsQixDQUFDO0lBRWpCLFFBQVE7SUFDUixDQUFDOztvSEFSVSxzQkFBc0I7d0dBQXRCLHNCQUFzQixpSENQbkMsb1BBSUE7NEZER2Esc0JBQXNCO2tCQUxsQyxTQUFTOytCQUNFLGlCQUFpQjswRUFNbEIsVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAndGNsb3VkLXVpLXRhYmxlJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3RjbG91ZC11aS10YWJsZS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3RjbG91ZC11aS10YWJsZS5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIFRDbG91ZFVpVGFibGVDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuXG4gIEBJbnB1dCgpIHJlc3BvbnNpdmU6IGJvb2xlYW4gPSB0cnVlO1xuICBASW5wdXQoKSBzdHJpcGVkOiBib29sZWFuID0gZmFsc2U7XG5cbiAgY29uc3RydWN0b3IoKSB7IH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgfVxuXG59XG4iLCI8dGFibGUgY2xhc3M9XCJ0Yy10YWJsZVwiIFtjbGFzcy50Yy10YWJsZS1zdHJpcGVkXT1cInN0cmlwZWRcIiBbY2xhc3MudGMtdGFibGUtcmVzcG9uc2l2ZV09XCJyZXNwb25zaXZlXCIgY2VsbHNwYWNpbmc9XCIwXCI+XG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW3RjLXRoZWFkXVwiPjwvbmctY29udGVudD5cbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbdGMtdGJvZHldXCI+PC9uZy1jb250ZW50PlxuPC90YWJsZT5cbiJdfQ==
|
|
@@ -10,7 +10,7 @@ import { trigger, state, style, transition, animate } from '@angular/animations'
|
|
|
10
10
|
|
|
11
11
|
class TCloudUiLinhaLogoComponent {
|
|
12
12
|
constructor() {
|
|
13
|
-
this.
|
|
13
|
+
this.url = `h` + `t` + `t` + `p` + `s` + `:` + `/` + `/` + `ateleia` + `-` + `email` + `.s3` + `-` + `sa` + `-` + `east` + `-` + `1` + `.` + `amazonaws` + `.` + `com` + `/`;
|
|
14
14
|
this.product = '';
|
|
15
15
|
this.logo_name = '';
|
|
16
16
|
this.product_name = '';
|
|
@@ -60,11 +60,13 @@ class TCloudUiLinhaLogoComponent {
|
|
|
60
60
|
}
|
|
61
61
|
}
|
|
62
62
|
TCloudUiLinhaLogoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiLinhaLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
63
|
-
TCloudUiLinhaLogoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiLinhaLogoComponent, selector: "tcloud-ui-linha-logo", inputs: { product: "product" }, ngImport: i0, template: "<!-- <div class=\"logo-product\" *ngIf=\"product !== ''\">\r\n <img class=\"img-logo\" src=\"/assets/img/logo-totvs.svg\" alt=\"{{ alt_product_name }}\">\r\n <p class=\"text-small\">Linha</p>\r\n <p class=\"text-product\" [style]=\"'font-size:'+font_size+';'\" >{{ product_name }}</p>\r\n</div> -->\r\n\r\n<div class=\"logo-product\" *ngIf=\"product !== ''\">\r\n <img class=\"img-logo\" [attr.data-name-image]=\"logo_name\" [attr.src]=\"
|
|
63
|
+
TCloudUiLinhaLogoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiLinhaLogoComponent, selector: "tcloud-ui-linha-logo", inputs: { url: "url", product: "product" }, ngImport: i0, template: "<!-- <div class=\"logo-product\" *ngIf=\"product !== ''\">\r\n <img class=\"img-logo\" src=\"/assets/img/logo-totvs.svg\" alt=\"{{ alt_product_name }}\">\r\n <p class=\"text-small\">Linha</p>\r\n <p class=\"text-product\" [style]=\"'font-size:'+font_size+';'\" >{{ product_name }}</p>\r\n</div> -->\r\n\r\n<div class=\"logo-product\" *ngIf=\"product !== ''\">\r\n <img class=\"img-logo\" [attr.data-name-image]=\"logo_name\" [attr.src]=\"url+logo_name+'.svg'\" alt=\"{{ alt_product_name }}\">\r\n</div>", styles: [".logo-product{display:flex;color:var(--cinza);flex-flow:column;width:150px}.logo-product .img-logo{width:100%;margin-bottom:13px}.logo-product .text-small{font-size:13px;margin:0;padding:0;text-align:left}.logo-product .text-product{text-align:left;font-size:22px;font-weight:700;line-height:1;margin:0;padding:0;text-transform:uppercase;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
64
64
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiLinhaLogoComponent, decorators: [{
|
|
65
65
|
type: Component,
|
|
66
|
-
args: [{ selector: 'tcloud-ui-linha-logo', template: "<!-- <div class=\"logo-product\" *ngIf=\"product !== ''\">\r\n <img class=\"img-logo\" src=\"/assets/img/logo-totvs.svg\" alt=\"{{ alt_product_name }}\">\r\n <p class=\"text-small\">Linha</p>\r\n <p class=\"text-product\" [style]=\"'font-size:'+font_size+';'\" >{{ product_name }}</p>\r\n</div> -->\r\n\r\n<div class=\"logo-product\" *ngIf=\"product !== ''\">\r\n <img class=\"img-logo\" [attr.data-name-image]=\"logo_name\" [attr.src]=\"
|
|
67
|
-
}], ctorParameters: function () { return []; }, propDecorators: {
|
|
66
|
+
args: [{ selector: 'tcloud-ui-linha-logo', template: "<!-- <div class=\"logo-product\" *ngIf=\"product !== ''\">\r\n <img class=\"img-logo\" src=\"/assets/img/logo-totvs.svg\" alt=\"{{ alt_product_name }}\">\r\n <p class=\"text-small\">Linha</p>\r\n <p class=\"text-product\" [style]=\"'font-size:'+font_size+';'\" >{{ product_name }}</p>\r\n</div> -->\r\n\r\n<div class=\"logo-product\" *ngIf=\"product !== ''\">\r\n <img class=\"img-logo\" [attr.data-name-image]=\"logo_name\" [attr.src]=\"url+logo_name+'.svg'\" alt=\"{{ alt_product_name }}\">\r\n</div>", styles: [".logo-product{display:flex;color:var(--cinza);flex-flow:column;width:150px}.logo-product .img-logo{width:100%;margin-bottom:13px}.logo-product .text-small{font-size:13px;margin:0;padding:0;text-align:left}.logo-product .text-product{text-align:left;font-size:22px;font-weight:700;line-height:1;margin:0;padding:0;text-transform:uppercase;white-space:nowrap}\n"] }]
|
|
67
|
+
}], ctorParameters: function () { return []; }, propDecorators: { url: [{
|
|
68
|
+
type: Input
|
|
69
|
+
}], product: [{
|
|
68
70
|
type: Input
|
|
69
71
|
}] } });
|
|
70
72
|
|
|
@@ -2407,17 +2409,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
2407
2409
|
class TCloudUiTableComponent {
|
|
2408
2410
|
constructor() {
|
|
2409
2411
|
this.responsive = true;
|
|
2412
|
+
this.striped = false;
|
|
2410
2413
|
}
|
|
2411
2414
|
ngOnInit() {
|
|
2412
2415
|
}
|
|
2413
2416
|
}
|
|
2414
2417
|
TCloudUiTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2415
|
-
TCloudUiTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiTableComponent, selector: "tcloud-ui-table", inputs: { responsive: "responsive" }, ngImport: i0, template: "<table class=\"tc-table\" [class.tc-table-responsive]=\"responsive\" cellspacing=\"0\">\n <ng-content select=\"[tc-thead]\"></ng-content>\n <ng-content select=\"[tc-tbody]\"></ng-content>\n</table>\n", styles: [""] });
|
|
2418
|
+
TCloudUiTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiTableComponent, selector: "tcloud-ui-table", inputs: { responsive: "responsive", striped: "striped" }, ngImport: i0, template: "<table class=\"tc-table\" [class.tc-table-striped]=\"striped\" [class.tc-table-responsive]=\"responsive\" cellspacing=\"0\">\n <ng-content select=\"[tc-thead]\"></ng-content>\n <ng-content select=\"[tc-tbody]\"></ng-content>\n</table>\n", styles: [""] });
|
|
2416
2419
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTableComponent, decorators: [{
|
|
2417
2420
|
type: Component,
|
|
2418
|
-
args: [{ selector: 'tcloud-ui-table', template: "<table class=\"tc-table\" [class.tc-table-responsive]=\"responsive\" cellspacing=\"0\">\n <ng-content select=\"[tc-thead]\"></ng-content>\n <ng-content select=\"[tc-tbody]\"></ng-content>\n</table>\n" }]
|
|
2421
|
+
args: [{ selector: 'tcloud-ui-table', template: "<table class=\"tc-table\" [class.tc-table-striped]=\"striped\" [class.tc-table-responsive]=\"responsive\" cellspacing=\"0\">\n <ng-content select=\"[tc-thead]\"></ng-content>\n <ng-content select=\"[tc-tbody]\"></ng-content>\n</table>\n" }]
|
|
2419
2422
|
}], ctorParameters: function () { return []; }, propDecorators: { responsive: [{
|
|
2420
2423
|
type: Input
|
|
2424
|
+
}], striped: [{
|
|
2425
|
+
type: Input
|
|
2421
2426
|
}] } });
|
|
2422
2427
|
|
|
2423
2428
|
class TCloudUiTableModule {
|
|
@@ -2520,10 +2525,10 @@ class TCloudUiNumberStepComponent {
|
|
|
2520
2525
|
}
|
|
2521
2526
|
}
|
|
2522
2527
|
TCloudUiNumberStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiNumberStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2523
|
-
TCloudUiNumberStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiNumberStepComponent, selector: "tcloud-ui-number-step", inputs: { step: "step", useIconCheck: "useIconCheck", active: "active", inactives: "inactives", complete: "complete" }, ngImport: i0, template: "<table class=\"table-trilha\" cellspacing=\"0\" cellpadding=\"0\">\n <tr>\n <ng-container *ngFor=\"let fase of trilha; let i = index\" >\n <td class=\"area-circle\">\n <div class=\"circle icon-{{ fase.class }} {{ fase.second_class }} \">\n\n <ng-container *ngIf=\"useIconCheck\">\n <ng-container *ngIf=\"i < active && fase.second_class !== 'step-inactive'\">\n <div class=\"area-index\"><i class=\"fas fa-check\"></i></div>\n </ng-container>\n\n <ng-container *ngIf=\"i < active && fase.second_class === 'step-inactive'\">\n <div class=\"area-index\"><i class=\"far fa-circle\"></i></div>\n </ng-container>\n\n <ng-container *ngIf=\"i >= active\">\n <div class=\"area-index\">{{ i + 1 }}</div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"!useIconCheck\">\n <div class=\"area-index\">{{ i + 1 }}</div>\n </ng-container>\n \n </div>\n </td>\n <td class=\"area-line\" *ngIf=\"(i+1) < (trilha).length\">\n <div class=\"step-line {{ fase.class }}\"></div> \n </td>\n </ng-container>\n </tr>\n</table>", styles: [".table-trilha{width:100%;border-collapse:collapse;margin-top:3px;margin-bottom:2px}.table-trilha td{border:none}.table-trilha .area-circle{width:0px}.table-trilha .area-circle i{font-size:18px}.table-trilha .area-index{font-size:16px;position:relative;top:50%;transform:translateY(-50%)}.table-trilha .step-line{width:100%;height:2px;background-color:#ccc;padding:0;margin-left:-1px;width:calc(100% + 2px)}table tr{background-color:transparent!important}table th,table td{vertical-align:middle}.circle{display:block;border:1px solid #ccc;height:48px;width:48px;border-radius:50%;text-align:center;font-size:14px}.step-progress{background-color:var(--verde)!important}.icon-step-progress{border-color:var(--verde);background-color:var(--verde)!important}.icon-step-progress .area-index{color:#fff}.icon-step-active{border-color:var(--verde);background-color:var(--verde)!important;color:#fff!important}.step-inactive{background-color:#fbfbfb!important}.step-inactive .area-index{color:#ccc!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
2528
|
+
TCloudUiNumberStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiNumberStepComponent, selector: "tcloud-ui-number-step", inputs: { step: "step", useIconCheck: "useIconCheck", active: "active", inactives: "inactives", complete: "complete" }, ngImport: i0, template: "<table class=\"table-trilha\" cellspacing=\"0\" cellpadding=\"0\">\n <tr>\n <ng-container *ngFor=\"let fase of trilha; let i = index\" >\n <td class=\"area-circle\">\n <div class=\"circle icon-{{ fase.class }} {{ fase.second_class }} \">\n\n <ng-container *ngIf=\"useIconCheck\">\n <ng-container *ngIf=\"i < active && fase.second_class !== 'step-inactive'\">\n <div class=\"area-index\" *ngIf=\"(active-1) === i\">{{ active }}</div>\n <div class=\"area-index\" *ngIf=\"(active-1) > i\"><i class=\"fas fa-check\"></i></div>\n </ng-container>\n\n <ng-container *ngIf=\"i < active && fase.second_class === 'step-inactive'\">\n <div class=\"area-index\"><i class=\"far fa-circle\"></i></div>\n </ng-container>\n\n <ng-container *ngIf=\"i >= active\">\n <div class=\"area-index\">{{ i + 1 }}</div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"!useIconCheck\">\n <div class=\"area-index\">{{ i + 1 }}</div>\n </ng-container>\n \n </div>\n </td>\n <td class=\"area-line\" *ngIf=\"(i+1) < (trilha).length\">\n <div class=\"step-line {{ fase.class }}\"></div> \n </td>\n </ng-container>\n </tr>\n</table>", styles: [".table-trilha{width:100%;border-collapse:collapse;margin-top:3px;margin-bottom:2px}.table-trilha td{border:none}.table-trilha .area-circle{width:0px}.table-trilha .area-circle i{font-size:18px}.table-trilha .area-index{font-size:16px;position:relative;top:50%;transform:translateY(-50%)}.table-trilha .step-line{width:100%;height:2px;background-color:#ccc;padding:0;margin-left:-1px;width:calc(100% + 2px)}table tr{background-color:transparent!important}table th,table td{vertical-align:middle}.circle{display:block;border:1px solid #ccc;height:48px;width:48px;border-radius:50%;text-align:center;font-size:14px}.step-progress{background-color:var(--verde)!important}.icon-step-progress{border-color:var(--verde);background-color:var(--verde)!important}.icon-step-progress .area-index{color:#fff}.icon-step-active{border-color:var(--verde);background-color:var(--verde)!important;color:#fff!important}.step-inactive{background-color:#fbfbfb!important}.step-inactive .area-index{color:#ccc!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
2524
2529
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiNumberStepComponent, decorators: [{
|
|
2525
2530
|
type: Component,
|
|
2526
|
-
args: [{ selector: 'tcloud-ui-number-step', template: "<table class=\"table-trilha\" cellspacing=\"0\" cellpadding=\"0\">\n <tr>\n <ng-container *ngFor=\"let fase of trilha; let i = index\" >\n <td class=\"area-circle\">\n <div class=\"circle icon-{{ fase.class }} {{ fase.second_class }} \">\n\n <ng-container *ngIf=\"useIconCheck\">\n <ng-container *ngIf=\"i < active && fase.second_class !== 'step-inactive'\">\n <div class=\"area-index\"><i class=\"fas fa-check\"></i></div>\n </ng-container>\n\n <ng-container *ngIf=\"i < active && fase.second_class === 'step-inactive'\">\n <div class=\"area-index\"><i class=\"far fa-circle\"></i></div>\n </ng-container>\n\n <ng-container *ngIf=\"i >= active\">\n <div class=\"area-index\">{{ i + 1 }}</div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"!useIconCheck\">\n <div class=\"area-index\">{{ i + 1 }}</div>\n </ng-container>\n \n </div>\n </td>\n <td class=\"area-line\" *ngIf=\"(i+1) < (trilha).length\">\n <div class=\"step-line {{ fase.class }}\"></div> \n </td>\n </ng-container>\n </tr>\n</table>", styles: [".table-trilha{width:100%;border-collapse:collapse;margin-top:3px;margin-bottom:2px}.table-trilha td{border:none}.table-trilha .area-circle{width:0px}.table-trilha .area-circle i{font-size:18px}.table-trilha .area-index{font-size:16px;position:relative;top:50%;transform:translateY(-50%)}.table-trilha .step-line{width:100%;height:2px;background-color:#ccc;padding:0;margin-left:-1px;width:calc(100% + 2px)}table tr{background-color:transparent!important}table th,table td{vertical-align:middle}.circle{display:block;border:1px solid #ccc;height:48px;width:48px;border-radius:50%;text-align:center;font-size:14px}.step-progress{background-color:var(--verde)!important}.icon-step-progress{border-color:var(--verde);background-color:var(--verde)!important}.icon-step-progress .area-index{color:#fff}.icon-step-active{border-color:var(--verde);background-color:var(--verde)!important;color:#fff!important}.step-inactive{background-color:#fbfbfb!important}.step-inactive .area-index{color:#ccc!important}\n"] }]
|
|
2531
|
+
args: [{ selector: 'tcloud-ui-number-step', template: "<table class=\"table-trilha\" cellspacing=\"0\" cellpadding=\"0\">\n <tr>\n <ng-container *ngFor=\"let fase of trilha; let i = index\" >\n <td class=\"area-circle\">\n <div class=\"circle icon-{{ fase.class }} {{ fase.second_class }} \">\n\n <ng-container *ngIf=\"useIconCheck\">\n <ng-container *ngIf=\"i < active && fase.second_class !== 'step-inactive'\">\n <div class=\"area-index\" *ngIf=\"(active-1) === i\">{{ active }}</div>\n <div class=\"area-index\" *ngIf=\"(active-1) > i\"><i class=\"fas fa-check\"></i></div>\n </ng-container>\n\n <ng-container *ngIf=\"i < active && fase.second_class === 'step-inactive'\">\n <div class=\"area-index\"><i class=\"far fa-circle\"></i></div>\n </ng-container>\n\n <ng-container *ngIf=\"i >= active\">\n <div class=\"area-index\">{{ i + 1 }}</div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"!useIconCheck\">\n <div class=\"area-index\">{{ i + 1 }}</div>\n </ng-container>\n \n </div>\n </td>\n <td class=\"area-line\" *ngIf=\"(i+1) < (trilha).length\">\n <div class=\"step-line {{ fase.class }}\"></div> \n </td>\n </ng-container>\n </tr>\n</table>", styles: [".table-trilha{width:100%;border-collapse:collapse;margin-top:3px;margin-bottom:2px}.table-trilha td{border:none}.table-trilha .area-circle{width:0px}.table-trilha .area-circle i{font-size:18px}.table-trilha .area-index{font-size:16px;position:relative;top:50%;transform:translateY(-50%)}.table-trilha .step-line{width:100%;height:2px;background-color:#ccc;padding:0;margin-left:-1px;width:calc(100% + 2px)}table tr{background-color:transparent!important}table th,table td{vertical-align:middle}.circle{display:block;border:1px solid #ccc;height:48px;width:48px;border-radius:50%;text-align:center;font-size:14px}.step-progress{background-color:var(--verde)!important}.icon-step-progress{border-color:var(--verde);background-color:var(--verde)!important}.icon-step-progress .area-index{color:#fff}.icon-step-active{border-color:var(--verde);background-color:var(--verde)!important;color:#fff!important}.step-inactive{background-color:#fbfbfb!important}.step-inactive .area-index{color:#ccc!important}\n"] }]
|
|
2527
2532
|
}], ctorParameters: function () { return []; }, propDecorators: { step: [{
|
|
2528
2533
|
type: Input
|
|
2529
2534
|
}], useIconCheck: [{
|
|
@@ -2880,10 +2885,10 @@ class TCloudUiDatepickerComponent {
|
|
|
2880
2885
|
}
|
|
2881
2886
|
}
|
|
2882
2887
|
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 });
|
|
2883
|
-
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", ngModel: "ngModel", code: "code" }, outputs: { onChange: "onChange", ngModelChange: "ngModelChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1], 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=\"input-tc-datepicker\" [class.no-border]=\"!useBorder\">\r\n <table class=\"table-box-input\">\r\n <tr>\r\n <td>\r\n <div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fas fa-calendar-alt\"></i></div>\r\n </td>\r\n <td>\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 #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{border:1px solid #ccc;border-radius:3px}.input-tc-datepicker.no-border{border:none!important}.input-tc-datepicker .table-box-input{width:100%}.input-tc-datepicker .table-box-input td:first-child{width:20px}.input-tc-datepicker .table-box-input td:first-child .delimiter-time-icon{text-align:center;cursor:pointer}.input-tc-datepicker .table-box-input input{border:none}\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 });
|
|
2888
|
+
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", ngModel: "ngModel", code: "code" }, outputs: { onChange: "onChange", ngModelChange: "ngModelChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1], 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=\"input-tc-datepicker\" [class.no-border]=\"!useBorder\">\r\n <table class=\"table-box-input\">\r\n <tr>\r\n <td>\r\n <div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fas fa-calendar-alt\"></i></div>\r\n </td>\r\n <td>\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 #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 #ccc;border-radius:3px}.input-tc-datepicker.no-border{border:none!important}.input-tc-datepicker .table-box-input{width:100%}.input-tc-datepicker .table-box-input td:first-child{width:20px}.input-tc-datepicker .table-box-input td:first-child .delimiter-time-icon{text-align:center;cursor:pointer}.input-tc-datepicker .table-box-input input{border:none}\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 });
|
|
2884
2889
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDatepickerComponent, decorators: [{
|
|
2885
2890
|
type: Component,
|
|
2886
|
-
args: [{ selector: 'tcloud-ui-datepicker', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1], encapsulation: ViewEncapsulation.None, template: "<!-- Input mode -->\r\n<ng-container *ngIf=\"modeInput\">\r\n\r\n <div class=\"input-tc-datepicker\" [class.no-border]=\"!useBorder\">\r\n <table class=\"table-box-input\">\r\n <tr>\r\n <td>\r\n <div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fas fa-calendar-alt\"></i></div>\r\n </td>\r\n <td>\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 #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{border:1px solid #ccc;border-radius:3px}.input-tc-datepicker.no-border{border:none!important}.input-tc-datepicker .table-box-input{width:100%}.input-tc-datepicker .table-box-input td:first-child{width:20px}.input-tc-datepicker .table-box-input td:first-child .delimiter-time-icon{text-align:center;cursor:pointer}.input-tc-datepicker .table-box-input input{border:none}\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"] }]
|
|
2891
|
+
args: [{ selector: 'tcloud-ui-datepicker', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1], encapsulation: ViewEncapsulation.None, template: "<!-- Input mode -->\r\n<ng-container *ngIf=\"modeInput\">\r\n\r\n <div class=\"input-tc-datepicker\" [class.no-border]=\"!useBorder\">\r\n <table class=\"table-box-input\">\r\n <tr>\r\n <td>\r\n <div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fas fa-calendar-alt\"></i></div>\r\n </td>\r\n <td>\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 #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 #ccc;border-radius:3px}.input-tc-datepicker.no-border{border:none!important}.input-tc-datepicker .table-box-input{width:100%}.input-tc-datepicker .table-box-input td:first-child{width:20px}.input-tc-datepicker .table-box-input td:first-child .delimiter-time-icon{text-align:center;cursor:pointer}.input-tc-datepicker .table-box-input input{border:none}\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"] }]
|
|
2887
2892
|
}], ctorParameters: function () { return [{ type: DateBRPipe }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { multiple: [{
|
|
2888
2893
|
type: Input
|
|
2889
2894
|
}], maxNumberOfDates: [{
|
|
@@ -3102,10 +3107,10 @@ class TCloudUiDatepickerTimeComponent {
|
|
|
3102
3107
|
}
|
|
3103
3108
|
}
|
|
3104
3109
|
TCloudUiDatepickerTimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDatepickerTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3105
|
-
TCloudUiDatepickerTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiDatepickerTimeComponent, selector: "tcloud-ui-datepicker-time", inputs: { ngModel: "ngModel" }, outputs: { ngModelChange: "ngModelChange", onChange: "onChange", eventChange: "eventChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "datepickertime", first: true, predicate: ["_datepickertime"], descendants: true }], ngImport: i0, template: "<input type=\"hidden\" value=\"{{ innerValue }}\" #_datepickertime >\r\n<form #_formulario=\"ngForm\">\r\n <div class=\"input-control-time\">\r\n <div class=\"form-control-time\">\r\n <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\"><tcloud-ui-datepicker #_tclouddatepickertime [modeInput]=\"true\" name=\"date\" [useBorder]=\"false\" [(ngModel)]=\"DD_MM_YYYY\" (onChange)=\"toSetDate($event)\" ></tcloud-ui-datepicker></td>\r\n <td class=\"area-delimiter\"><div class=\"delimiter-time\"></div></td>\r\n <td class=\"area-input-hour\"><input type=\"text\" placeholder=\"HH\" (keyup)=\"toSetTime()\" [(ngModel)]=\"HH\" maxlength=\"2\" name=\"hh\" pattern=\"[0][0-9]|[1][0-9]|2[0-3]\"></td>\r\n <td class=\"area-delimiter\"><div class=\"delimiter-time\">:</div></td>\r\n <td class=\"area-input-minute\"><input type=\"text\" placeholder=\"MM\" (keyup)=\"toSetTime()\" [(ngModel)]=\"MM\" maxlength=\"2\" name=\"mm\" pattern=\"[012345][0-9]\"></td>\r\n <td class=\"area-clean\"></td>\r\n </tr>\r\n </table>\r\n </div>\r\n </div>\r\n</form>", styles: [".input-control-time{border:1px solid #ccc;border-radius:3px;width:100%}.form-control-time{max-width:220px;border:none}.form-control-time input{text-align:center}.form-time{width:100%}.delimiter-time{width:100%;text-align:center}.delimiter-time-icon{border:none;height:35px;width:10px;padding:4px;font-size:17px;text-align:center;opacity:.6}.area-icon{width:25px}.area-input-date{width:105px}.area-delimiter{width:2px;text-align:center}.area-input-hour,.area-input-minute{text-align:center;width:28px}.area-input-hour input,.area-input-minute input{height:35px;width:28px;text-align:center;color:#999;font-weight:600;font-style:italic}.area-input-hour input:focus,.area-input-minute input:focus{outline:none}.area-clean{width:15px}input,.datepicker-input{border:none!important}\n"], dependencies: [{ kind: "component", type: TCloudUiDatepickerComponent, selector: "tcloud-ui-datepicker", inputs: ["multiple", "maxNumberOfDates", "daysOfWeekDisabled", "minDate", "maxDate", "datesDisabled", "modeInput", "useBorder", "ngModel", "code"], outputs: ["onChange", "ngModelChange"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
|
|
3110
|
+
TCloudUiDatepickerTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiDatepickerTimeComponent, selector: "tcloud-ui-datepicker-time", inputs: { ngModel: "ngModel" }, outputs: { ngModelChange: "ngModelChange", onChange: "onChange", eventChange: "eventChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "datepickertime", first: true, predicate: ["_datepickertime"], descendants: true }], ngImport: i0, template: "<input type=\"hidden\" value=\"{{ innerValue }}\" #_datepickertime >\r\n<form #_formulario=\"ngForm\">\r\n <div class=\"input-control-time\">\r\n <div class=\"form-control-time\">\r\n <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\"><tcloud-ui-datepicker #_tclouddatepickertime [modeInput]=\"true\" name=\"date\" [useBorder]=\"false\" [(ngModel)]=\"DD_MM_YYYY\" (onChange)=\"toSetDate($event)\" ></tcloud-ui-datepicker></td>\r\n <td class=\"area-delimiter\"><div class=\"delimiter-time\"></div></td>\r\n <td class=\"area-input-hour\"><input type=\"text\" placeholder=\"HH\" (keyup)=\"toSetTime()\" [(ngModel)]=\"HH\" maxlength=\"2\" name=\"hh\" pattern=\"[0][0-9]|[1][0-9]|2[0-3]\"></td>\r\n <td class=\"area-delimiter\"><div class=\"delimiter-time\">:</div></td>\r\n <td class=\"area-input-minute\"><input type=\"text\" placeholder=\"MM\" (keyup)=\"toSetTime()\" [(ngModel)]=\"MM\" maxlength=\"2\" name=\"mm\" pattern=\"[012345][0-9]\"></td>\r\n <td class=\"area-clean\"></td>\r\n </tr>\r\n </table>\r\n </div>\r\n </div>\r\n</form>", styles: [".input-control-time{background-color:#fff;border:1px solid #ccc;border-radius:3px;width:100%}.form-control-time{max-width:220px;border:none}.form-control-time input{text-align:center}.form-time{width:100%}.delimiter-time{width:100%;text-align:center}.delimiter-time-icon{border:none;height:35px;width:10px;padding:4px;font-size:17px;text-align:center;opacity:.6}.area-icon{width:25px}.area-input-date{width:105px}.area-delimiter{width:2px;text-align:center}.area-input-hour,.area-input-minute{text-align:center;width:28px}.area-input-hour input,.area-input-minute input{height:35px;width:28px;text-align:center;color:#999;font-weight:600;font-style:italic}.area-input-hour input:focus,.area-input-minute input:focus{outline:none}.area-clean{width:15px}input,.datepicker-input{border:none!important}\n"], dependencies: [{ kind: "component", type: TCloudUiDatepickerComponent, selector: "tcloud-ui-datepicker", inputs: ["multiple", "maxNumberOfDates", "daysOfWeekDisabled", "minDate", "maxDate", "datesDisabled", "modeInput", "useBorder", "ngModel", "code"], outputs: ["onChange", "ngModelChange"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
|
|
3106
3111
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDatepickerTimeComponent, decorators: [{
|
|
3107
3112
|
type: Component,
|
|
3108
|
-
args: [{ selector: 'tcloud-ui-datepicker-time', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], template: "<input type=\"hidden\" value=\"{{ innerValue }}\" #_datepickertime >\r\n<form #_formulario=\"ngForm\">\r\n <div class=\"input-control-time\">\r\n <div class=\"form-control-time\">\r\n <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\"><tcloud-ui-datepicker #_tclouddatepickertime [modeInput]=\"true\" name=\"date\" [useBorder]=\"false\" [(ngModel)]=\"DD_MM_YYYY\" (onChange)=\"toSetDate($event)\" ></tcloud-ui-datepicker></td>\r\n <td class=\"area-delimiter\"><div class=\"delimiter-time\"></div></td>\r\n <td class=\"area-input-hour\"><input type=\"text\" placeholder=\"HH\" (keyup)=\"toSetTime()\" [(ngModel)]=\"HH\" maxlength=\"2\" name=\"hh\" pattern=\"[0][0-9]|[1][0-9]|2[0-3]\"></td>\r\n <td class=\"area-delimiter\"><div class=\"delimiter-time\">:</div></td>\r\n <td class=\"area-input-minute\"><input type=\"text\" placeholder=\"MM\" (keyup)=\"toSetTime()\" [(ngModel)]=\"MM\" maxlength=\"2\" name=\"mm\" pattern=\"[012345][0-9]\"></td>\r\n <td class=\"area-clean\"></td>\r\n </tr>\r\n </table>\r\n </div>\r\n </div>\r\n</form>", styles: [".input-control-time{border:1px solid #ccc;border-radius:3px;width:100%}.form-control-time{max-width:220px;border:none}.form-control-time input{text-align:center}.form-time{width:100%}.delimiter-time{width:100%;text-align:center}.delimiter-time-icon{border:none;height:35px;width:10px;padding:4px;font-size:17px;text-align:center;opacity:.6}.area-icon{width:25px}.area-input-date{width:105px}.area-delimiter{width:2px;text-align:center}.area-input-hour,.area-input-minute{text-align:center;width:28px}.area-input-hour input,.area-input-minute input{height:35px;width:28px;text-align:center;color:#999;font-weight:600;font-style:italic}.area-input-hour input:focus,.area-input-minute input:focus{outline:none}.area-clean{width:15px}input,.datepicker-input{border:none!important}\n"] }]
|
|
3113
|
+
args: [{ selector: 'tcloud-ui-datepicker-time', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], template: "<input type=\"hidden\" value=\"{{ innerValue }}\" #_datepickertime >\r\n<form #_formulario=\"ngForm\">\r\n <div class=\"input-control-time\">\r\n <div class=\"form-control-time\">\r\n <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\"><tcloud-ui-datepicker #_tclouddatepickertime [modeInput]=\"true\" name=\"date\" [useBorder]=\"false\" [(ngModel)]=\"DD_MM_YYYY\" (onChange)=\"toSetDate($event)\" ></tcloud-ui-datepicker></td>\r\n <td class=\"area-delimiter\"><div class=\"delimiter-time\"></div></td>\r\n <td class=\"area-input-hour\"><input type=\"text\" placeholder=\"HH\" (keyup)=\"toSetTime()\" [(ngModel)]=\"HH\" maxlength=\"2\" name=\"hh\" pattern=\"[0][0-9]|[1][0-9]|2[0-3]\"></td>\r\n <td class=\"area-delimiter\"><div class=\"delimiter-time\">:</div></td>\r\n <td class=\"area-input-minute\"><input type=\"text\" placeholder=\"MM\" (keyup)=\"toSetTime()\" [(ngModel)]=\"MM\" maxlength=\"2\" name=\"mm\" pattern=\"[012345][0-9]\"></td>\r\n <td class=\"area-clean\"></td>\r\n </tr>\r\n </table>\r\n </div>\r\n </div>\r\n</form>", styles: [".input-control-time{background-color:#fff;border:1px solid #ccc;border-radius:3px;width:100%}.form-control-time{max-width:220px;border:none}.form-control-time input{text-align:center}.form-time{width:100%}.delimiter-time{width:100%;text-align:center}.delimiter-time-icon{border:none;height:35px;width:10px;padding:4px;font-size:17px;text-align:center;opacity:.6}.area-icon{width:25px}.area-input-date{width:105px}.area-delimiter{width:2px;text-align:center}.area-input-hour,.area-input-minute{text-align:center;width:28px}.area-input-hour input,.area-input-minute input{height:35px;width:28px;text-align:center;color:#999;font-weight:600;font-style:italic}.area-input-hour input:focus,.area-input-minute input:focus{outline:none}.area-clean{width:15px}input,.datepicker-input{border:none!important}\n"] }]
|
|
3109
3114
|
}], propDecorators: { ngModel: [{
|
|
3110
3115
|
type: Input
|
|
3111
3116
|
}], ngModelChange: [{
|
|
@@ -3479,10 +3484,10 @@ class TCloudUiFiltersComponent {
|
|
|
3479
3484
|
}
|
|
3480
3485
|
}
|
|
3481
3486
|
TCloudUiFiltersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiFiltersComponent, deps: [{ token: i1.DatePipe }], target: i0.ɵɵFactoryTarget.Component });
|
|
3482
|
-
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", useOnChangeSubmit: "useOnChangeSubmit", useButtonSubmit: "useButtonSubmit", useNormalizeCaseSensitive: "useNormalizeCaseSensitive" }, 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=\"area-filter\">\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 <div class=\"box-filter-input\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n\n <ng-container *ngIf=\"item.type === 'datetime-local'\">\n <div class=\"m-description\"><i [class.to-active]=\"(datepickers[i] !== undefined && datepickers[i] !== null && datepickers[i] !== '')\" class=\"fas fa-filter icon-filter\"></i> {{ item.description }}</div>\n <div>\n <tcloud-ui-datepicker-time #_input [(ngModel)]=\"datepickers[i]\" name=\"input_{{i+1}}\" (eventChange)=\"searchIn(item, _input, 'teste')\" > </tcloud-ui-datepicker-time>\n <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(datepickers[i] !== undefined && datepickers[i] !== null && datepickers[i] !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; datepickers[i] = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div> \n </ng-container>\n \n <ng-container *ngIf=\"item.type !== 'select' && item.type !== 'datetime-local'\">\n <div class=\"m-description\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i> {{ item.description }}</div>\n <div>\n <input \n #_input\n placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n name=\"input_{{i+1}}\" \n type=\"{{ (item.type === 'number') ? 'text' : item.type }}\" \n class=\"form-control 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 </ng-container>\n\n <ng-container *ngIf=\"item.type === 'select' && item.data && (item.data).length > 0\" >\n <div class=\"m-description\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i> {{ item.description }}</div>\n <div>\n <select \n #_input\n name=\"input_{{i+1}}\" \n class=\"form-control 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 <!-- <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 </ng-container>\n\n </div>\n\n\n \n </ng-container>\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\"><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=\"form-control 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 btn-new-grey\" (click)=\"toSubmit()\" >{{ submitText }} <i class=\"fas fa-filter icon-filter\"></i></button>\n </div>\n\n</div>\n\n<!-- <pre>{{ inputs | json }}</pre> -->\n <!-- <pre> {{ data | json }} </pre> -->\n<!-- \n<p>FILTERS</p>\n<pre> {{ filters | json }}</pre> -->", 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(--verde)}.area-input-checkbox label{cursor:pointer;margin-bottom:0;color:#9f9f9f}.m-description{margin-bottom:3px}input{color:#535353}\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.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"], outputs: ["ngModelChange", "onChange", "eventChange"] }] });
|
|
3487
|
+
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", useOnChangeSubmit: "useOnChangeSubmit", useButtonSubmit: "useButtonSubmit", useNormalizeCaseSensitive: "useNormalizeCaseSensitive" }, 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=\"area-filter\">\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 <div class=\"box-filter-input type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n\n <ng-container *ngIf=\"item.type === 'datetime-local'\">\n <div class=\"m-description\"><i [class.to-active]=\"(datepickers[i] !== undefined && datepickers[i] !== null && datepickers[i] !== '')\" class=\"fas fa-filter icon-filter\"></i> {{ item.description }}</div>\n <div>\n <tcloud-ui-datepicker-time #_input [(ngModel)]=\"datepickers[i]\" name=\"input_{{i+1}}\" (eventChange)=\"searchIn(item, _input, 'teste')\" > </tcloud-ui-datepicker-time>\n <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(datepickers[i] !== undefined && datepickers[i] !== null && datepickers[i] !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; datepickers[i] = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div> \n </ng-container>\n \n <ng-container *ngIf=\"item.type !== 'select' && item.type !== 'datetime-local'\">\n <div class=\"m-description\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i> {{ item.description }}</div>\n <div>\n <input \n #_input\n placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n name=\"input_{{i+1}}\" \n type=\"{{ (item.type === 'number') ? 'text' : item.type }}\" \n class=\"form-control 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 </ng-container>\n\n <ng-container *ngIf=\"item.type === 'select' && item.data && (item.data).length > 0\" >\n <div class=\"m-description\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i> {{ item.description }}</div>\n <div>\n <select \n #_input\n name=\"input_{{i+1}}\" \n class=\"form-control 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 <!-- <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 </ng-container>\n\n </div>\n\n\n \n </ng-container>\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\"><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=\"form-control 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 btn-new-grey\" (click)=\"toSubmit()\" >{{ submitText }} <i class=\"fas fa-filter icon-filter\"></i></button>\n </div>\n\n</div>\n\n<!-- <pre>{{ inputs | json }}</pre> -->\n <!-- <pre> {{ data | json }} </pre> -->\n<!-- \n<p>FILTERS</p>\n<pre> {{ filters | json }}</pre> -->", 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(--verde)}.area-input-checkbox label{cursor:pointer;margin-bottom:0;color:#9f9f9f}.m-description{margin-bottom:3px}input{color:#535353}.type-hidden{display:none;width:0px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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"], outputs: ["ngModelChange", "onChange", "eventChange"] }] });
|
|
3483
3488
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiFiltersComponent, decorators: [{
|
|
3484
3489
|
type: Component,
|
|
3485
|
-
args: [{ selector: 'tcloud-ui-filters', template: "<div *ngIf=\"show_filters\" class=\"area-filter\">\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 <div class=\"box-filter-input\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n\n <ng-container *ngIf=\"item.type === 'datetime-local'\">\n <div class=\"m-description\"><i [class.to-active]=\"(datepickers[i] !== undefined && datepickers[i] !== null && datepickers[i] !== '')\" class=\"fas fa-filter icon-filter\"></i> {{ item.description }}</div>\n <div>\n <tcloud-ui-datepicker-time #_input [(ngModel)]=\"datepickers[i]\" name=\"input_{{i+1}}\" (eventChange)=\"searchIn(item, _input, 'teste')\" > </tcloud-ui-datepicker-time>\n <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(datepickers[i] !== undefined && datepickers[i] !== null && datepickers[i] !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; datepickers[i] = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div> \n </ng-container>\n \n <ng-container *ngIf=\"item.type !== 'select' && item.type !== 'datetime-local'\">\n <div class=\"m-description\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i> {{ item.description }}</div>\n <div>\n <input \n #_input\n placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n name=\"input_{{i+1}}\" \n type=\"{{ (item.type === 'number') ? 'text' : item.type }}\" \n class=\"form-control 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 </ng-container>\n\n <ng-container *ngIf=\"item.type === 'select' && item.data && (item.data).length > 0\" >\n <div class=\"m-description\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i> {{ item.description }}</div>\n <div>\n <select \n #_input\n name=\"input_{{i+1}}\" \n class=\"form-control 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 <!-- <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 </ng-container>\n\n </div>\n\n\n \n </ng-container>\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\"><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=\"form-control 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 btn-new-grey\" (click)=\"toSubmit()\" >{{ submitText }} <i class=\"fas fa-filter icon-filter\"></i></button>\n </div>\n\n</div>\n\n<!-- <pre>{{ inputs | json }}</pre> -->\n <!-- <pre> {{ data | json }} </pre> -->\n<!-- \n<p>FILTERS</p>\n<pre> {{ filters | json }}</pre> -->", 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(--verde)}.area-input-checkbox label{cursor:pointer;margin-bottom:0;color:#9f9f9f}.m-description{margin-bottom:3px}input{color:#535353}\n"] }]
|
|
3490
|
+
args: [{ selector: 'tcloud-ui-filters', template: "<div *ngIf=\"show_filters\" class=\"area-filter\">\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 <div class=\"box-filter-input type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n\n <ng-container *ngIf=\"item.type === 'datetime-local'\">\n <div class=\"m-description\"><i [class.to-active]=\"(datepickers[i] !== undefined && datepickers[i] !== null && datepickers[i] !== '')\" class=\"fas fa-filter icon-filter\"></i> {{ item.description }}</div>\n <div>\n <tcloud-ui-datepicker-time #_input [(ngModel)]=\"datepickers[i]\" name=\"input_{{i+1}}\" (eventChange)=\"searchIn(item, _input, 'teste')\" > </tcloud-ui-datepicker-time>\n <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(datepickers[i] !== undefined && datepickers[i] !== null && datepickers[i] !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; datepickers[i] = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div> \n </ng-container>\n \n <ng-container *ngIf=\"item.type !== 'select' && item.type !== 'datetime-local'\">\n <div class=\"m-description\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i> {{ item.description }}</div>\n <div>\n <input \n #_input\n placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n name=\"input_{{i+1}}\" \n type=\"{{ (item.type === 'number') ? 'text' : item.type }}\" \n class=\"form-control 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 </ng-container>\n\n <ng-container *ngIf=\"item.type === 'select' && item.data && (item.data).length > 0\" >\n <div class=\"m-description\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i> {{ item.description }}</div>\n <div>\n <select \n #_input\n name=\"input_{{i+1}}\" \n class=\"form-control 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 <!-- <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 </ng-container>\n\n </div>\n\n\n \n </ng-container>\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\"><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=\"form-control 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 btn-new-grey\" (click)=\"toSubmit()\" >{{ submitText }} <i class=\"fas fa-filter icon-filter\"></i></button>\n </div>\n\n</div>\n\n<!-- <pre>{{ inputs | json }}</pre> -->\n <!-- <pre> {{ data | json }} </pre> -->\n<!-- \n<p>FILTERS</p>\n<pre> {{ filters | json }}</pre> -->", 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(--verde)}.area-input-checkbox label{cursor:pointer;margin-bottom:0;color:#9f9f9f}.m-description{margin-bottom:3px}input{color:#535353}.type-hidden{display:none;width:0px!important}\n"] }]
|
|
3486
3491
|
}], ctorParameters: function () { return [{ type: i1.DatePipe }]; }, propDecorators: { _formulario: [{
|
|
3487
3492
|
type: ViewChild,
|
|
3488
3493
|
args: ['_formulario']
|