@dev-tcloud/tcloud-ui 0.0.48 → 0.0.49
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-filters/tcloud-ui-filters.component.mjs +6 -3
- package/esm2020/lib/_modules/tcloud-ui-tab-menu/components/tcloud-ui-tab-head/tcloud-ui-tab-head.component.mjs +19 -6
- package/esm2020/lib/_modules/tcloud-ui-tab-menu/services/tab-menu.service.mjs +10 -1
- package/esm2020/lib/_pipes/monthname.mjs +2 -2
- package/fesm2015/dev-tcloud-tcloud-ui.mjs +31 -8
- package/fesm2015/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/fesm2020/dev-tcloud-tcloud-ui.mjs +31 -8
- package/fesm2020/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/lib/_modules/tcloud-ui-filters/tcloud-ui-filters.component.d.ts +2 -1
- package/lib/_modules/tcloud-ui-tab-menu/components/tcloud-ui-tab-head/tcloud-ui-tab-head.component.d.ts +7 -2
- package/lib/_modules/tcloud-ui-tab-menu/services/tab-menu.service.d.ts +5 -0
- package/package.json +1 -1
|
@@ -93,11 +93,20 @@ class TabMenuService {
|
|
|
93
93
|
this._route = _route;
|
|
94
94
|
this._router = _router;
|
|
95
95
|
this.info_tab = [];
|
|
96
|
+
this.scrollSubject = new Subject();
|
|
97
|
+
this.scrollState$ = this.scrollSubject.asObservable();
|
|
96
98
|
this.tabSubject = new Subject();
|
|
97
99
|
this.tabState$ = this.tabSubject.asObservable();
|
|
98
100
|
this.loadingSubject = new Subject();
|
|
99
101
|
this.loadingState$ = this.loadingSubject.asObservable();
|
|
100
102
|
}
|
|
103
|
+
setTabScroll(scroll) {
|
|
104
|
+
this._scroll = scroll;
|
|
105
|
+
this.scrollSubject.next(scroll);
|
|
106
|
+
}
|
|
107
|
+
getTabScroll() {
|
|
108
|
+
return this._scroll;
|
|
109
|
+
}
|
|
101
110
|
setTabLoading(loading) {
|
|
102
111
|
this._loading = loading;
|
|
103
112
|
this.loadingSubject.next(loading);
|
|
@@ -363,11 +372,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
363
372
|
}] } });
|
|
364
373
|
|
|
365
374
|
class TCloudUiTabHeadComponent {
|
|
366
|
-
constructor() {
|
|
375
|
+
constructor(tabMenuService) {
|
|
376
|
+
this.tabMenuService = tabMenuService;
|
|
377
|
+
this._scroll = true;
|
|
367
378
|
this.ID = '';
|
|
368
379
|
this.background = true;
|
|
369
380
|
this.background_color = 'transparent'; // var(--cinza4)
|
|
370
381
|
}
|
|
382
|
+
set scroll(scroll) {
|
|
383
|
+
if (typeof scroll === 'boolean') {
|
|
384
|
+
this._scroll = scroll;
|
|
385
|
+
this.tabMenuService.setTabScroll(scroll);
|
|
386
|
+
}
|
|
387
|
+
}
|
|
388
|
+
get scroll() { return this._scroll; }
|
|
371
389
|
ngOnInit() {
|
|
372
390
|
if (this.background) {
|
|
373
391
|
this.background_color = 'var(--cinza4)';
|
|
@@ -406,12 +424,14 @@ class TCloudUiTabHeadComponent {
|
|
|
406
424
|
this.scrollSuave(ccs_s, action == 'next' ? wid + ccs_s : ccs_s - wid, 0, ccs);
|
|
407
425
|
}
|
|
408
426
|
}
|
|
409
|
-
TCloudUiTabHeadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTabHeadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
410
|
-
TCloudUiTabHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiTabHeadComponent, selector: "tcloud-ui-tab-head", inputs: { background: "background" }, ngImport: i0, template: "\r\n\r\n<table class=\"area-navigation\">\r\n <tr>\r\n <td>\r\n <button (click)=\"to_scroll('prev')\"> <i class=\"fas fa-chevron-left\"></i> </button>\r\n </td>\r\n\r\n <td>\r\n \r\n </td>\r\n\r\n <td>\r\n <button (click)=\"to_scroll('next')\"> <i class=\"fas fa-chevron-right\"></i> </button>\r\n </td>\r\n </tr>\r\n</table>\r\n\r\n<div class=\"tc-menu {{ ID }}\" [attr.style]=\"'background: ' + background_color + ';'\" >\r\n <ng-content></ng-content>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".area-navigation{display:none;width:100%;line-height:0}.area-navigation button{padding:0!important}.area-navigation td{width:100%;height:0;line-height:0}.area-navigation td:first-child{width:10px!important;text-align:left}.area-navigation td:first-child button{color:var(--verde);cursor:pointer;position:relative;top:15px;right:0;border:none;background-color:transparent;font-size:15px;height:30px}.area-navigation td:last-child{width:10px!important;text-align:right}.area-navigation td:last-child button{color:var(--verde);cursor:pointer;position:relative;top:15px;left:0;border:none;background-color:transparent;font-size:15px;height:30px}.tc-menu{display:flex;align-items:center;border-radius:10px;overflow:hidden;margin-bottom:5px;z-index:1;position:relative}@media (max-width: 1440px){.area-navigation{display:block!important;position:relative;top:0;height:2px}.tc-menu{margin-left:15px;margin-right:15px}}\n"] });
|
|
427
|
+
TCloudUiTabHeadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTabHeadComponent, deps: [{ token: TabMenuService }], target: i0.ɵɵFactoryTarget.Component });
|
|
428
|
+
TCloudUiTabHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiTabHeadComponent, selector: "tcloud-ui-tab-head", inputs: { scroll: "scroll", background: "background" }, ngImport: i0, template: "\r\n\r\n<table class=\"area-navigation\">\r\n <tr>\r\n <td *ngIf=\"scroll\">\r\n <button (click)=\"to_scroll('prev')\"> <i class=\"fas fa-chevron-left\"></i> </button>\r\n </td>\r\n\r\n <td>\r\n \r\n </td>\r\n\r\n <td *ngIf=\"scroll\">\r\n <button (click)=\"to_scroll('next')\"> <i class=\"fas fa-chevron-right\"></i> </button>\r\n </td>\r\n </tr>\r\n</table>\r\n\r\n<div class=\"tc-menu {{ ID }}\" [attr.style]=\"'background: ' + background_color + ';'\" [class.tab-full]=\"!scroll\" >\r\n <ng-content></ng-content>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".area-navigation{display:none;width:100%;line-height:0}.area-navigation button{padding:0!important}.area-navigation td{width:100%;height:0;line-height:0}.area-navigation td:first-child{width:10px!important;text-align:left}.area-navigation td:first-child button{color:var(--verde);cursor:pointer;position:relative;top:15px;right:0;border:none;background-color:transparent;font-size:15px;height:30px}.area-navigation td:last-child{width:10px!important;text-align:right}.area-navigation td:last-child button{color:var(--verde);cursor:pointer;position:relative;top:15px;left:0;border:none;background-color:transparent;font-size:15px;height:30px}.tc-menu{display:flex;align-items:center;border-radius:10px;overflow:hidden;margin-bottom:5px;z-index:1;position:relative}@media (max-width: 1440px){.area-navigation{display:block!important;position:relative;top:0;height:2px}.tc-menu{margin-left:15px;margin-right:15px}}.tab-full{margin-left:0!important;margin-right:0!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
411
429
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTabHeadComponent, decorators: [{
|
|
412
430
|
type: Component,
|
|
413
|
-
args: [{ selector: 'tcloud-ui-tab-head', template: "\r\n\r\n<table class=\"area-navigation\">\r\n <tr>\r\n <td>\r\n <button (click)=\"to_scroll('prev')\"> <i class=\"fas fa-chevron-left\"></i> </button>\r\n </td>\r\n\r\n <td>\r\n \r\n </td>\r\n\r\n <td>\r\n <button (click)=\"to_scroll('next')\"> <i class=\"fas fa-chevron-right\"></i> </button>\r\n </td>\r\n </tr>\r\n</table>\r\n\r\n<div class=\"tc-menu {{ ID }}\" [attr.style]=\"'background: ' + background_color + ';'\" >\r\n <ng-content></ng-content>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".area-navigation{display:none;width:100%;line-height:0}.area-navigation button{padding:0!important}.area-navigation td{width:100%;height:0;line-height:0}.area-navigation td:first-child{width:10px!important;text-align:left}.area-navigation td:first-child button{color:var(--verde);cursor:pointer;position:relative;top:15px;right:0;border:none;background-color:transparent;font-size:15px;height:30px}.area-navigation td:last-child{width:10px!important;text-align:right}.area-navigation td:last-child button{color:var(--verde);cursor:pointer;position:relative;top:15px;left:0;border:none;background-color:transparent;font-size:15px;height:30px}.tc-menu{display:flex;align-items:center;border-radius:10px;overflow:hidden;margin-bottom:5px;z-index:1;position:relative}@media (max-width: 1440px){.area-navigation{display:block!important;position:relative;top:0;height:2px}.tc-menu{margin-left:15px;margin-right:15px}}\n"] }]
|
|
414
|
-
}], ctorParameters: function () { return []; }, propDecorators: {
|
|
431
|
+
args: [{ selector: 'tcloud-ui-tab-head', template: "\r\n\r\n<table class=\"area-navigation\">\r\n <tr>\r\n <td *ngIf=\"scroll\">\r\n <button (click)=\"to_scroll('prev')\"> <i class=\"fas fa-chevron-left\"></i> </button>\r\n </td>\r\n\r\n <td>\r\n \r\n </td>\r\n\r\n <td *ngIf=\"scroll\">\r\n <button (click)=\"to_scroll('next')\"> <i class=\"fas fa-chevron-right\"></i> </button>\r\n </td>\r\n </tr>\r\n</table>\r\n\r\n<div class=\"tc-menu {{ ID }}\" [attr.style]=\"'background: ' + background_color + ';'\" [class.tab-full]=\"!scroll\" >\r\n <ng-content></ng-content>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".area-navigation{display:none;width:100%;line-height:0}.area-navigation button{padding:0!important}.area-navigation td{width:100%;height:0;line-height:0}.area-navigation td:first-child{width:10px!important;text-align:left}.area-navigation td:first-child button{color:var(--verde);cursor:pointer;position:relative;top:15px;right:0;border:none;background-color:transparent;font-size:15px;height:30px}.area-navigation td:last-child{width:10px!important;text-align:right}.area-navigation td:last-child button{color:var(--verde);cursor:pointer;position:relative;top:15px;left:0;border:none;background-color:transparent;font-size:15px;height:30px}.tc-menu{display:flex;align-items:center;border-radius:10px;overflow:hidden;margin-bottom:5px;z-index:1;position:relative}@media (max-width: 1440px){.area-navigation{display:block!important;position:relative;top:0;height:2px}.tc-menu{margin-left:15px;margin-right:15px}}.tab-full{margin-left:0!important;margin-right:0!important}\n"] }]
|
|
432
|
+
}], ctorParameters: function () { return [{ type: TabMenuService }]; }, propDecorators: { scroll: [{
|
|
433
|
+
type: Input
|
|
434
|
+
}], background: [{
|
|
415
435
|
type: Input
|
|
416
436
|
}] } });
|
|
417
437
|
|
|
@@ -1805,7 +1825,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
1805
1825
|
|
|
1806
1826
|
class MonthNamePipe {
|
|
1807
1827
|
constructor() {
|
|
1808
|
-
this.meses = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', '
|
|
1828
|
+
this.meses = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
|
|
1809
1829
|
}
|
|
1810
1830
|
transform(yyyy_mm) {
|
|
1811
1831
|
if (yyyy_mm !== '') {
|
|
@@ -2819,6 +2839,7 @@ class TCloudUiFiltersComponent {
|
|
|
2819
2839
|
this.datepipe = datepipe;
|
|
2820
2840
|
this.inputs = [];
|
|
2821
2841
|
this.show_filters = false;
|
|
2842
|
+
this.submitText = 'Filtrar';
|
|
2822
2843
|
this.useOnChangeSubmit = true; // useOnChangeSubmit - Submit automatico quando for alterado quanquer input
|
|
2823
2844
|
this.useButtonSubmit = false; // useButtonSubmit - Exibe um botão de submit e não executa a busca automaticamente
|
|
2824
2845
|
this.useNormalizeCaseSensitive = true; // useNormalizeCaseSensitive - Não valida caixa alta ou baixa e caracteres especiais
|
|
@@ -3123,10 +3144,10 @@ class TCloudUiFiltersComponent {
|
|
|
3123
3144
|
}
|
|
3124
3145
|
}
|
|
3125
3146
|
TCloudUiFiltersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiFiltersComponent, deps: [{ token: i1.DatePipe }], target: i0.ɵɵFactoryTarget.Component });
|
|
3126
|
-
TCloudUiFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiFiltersComponent, selector: "tcloud-ui-filters", inputs: { data: "data", filters: "filters", 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 !== 'select'\">\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 [attr.data-date-format]=\"( item.type === 'datetime-local' ) ? 'MM-DD-YYYY HH:mm' : null \"\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 [ngValue]=\"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()\" >
|
|
3147
|
+
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 !== 'select'\">\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 [attr.data-date-format]=\"( item.type === 'datetime-local' ) ? 'MM-DD-YYYY HH:mm' : null \"\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 [ngValue]=\"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-block;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"] }] });
|
|
3127
3148
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiFiltersComponent, decorators: [{
|
|
3128
3149
|
type: Component,
|
|
3129
|
-
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 !== 'select'\">\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 [attr.data-date-format]=\"( item.type === 'datetime-local' ) ? 'MM-DD-YYYY HH:mm' : null \"\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 [ngValue]=\"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()\" >
|
|
3150
|
+
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 !== 'select'\">\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 [attr.data-date-format]=\"( item.type === 'datetime-local' ) ? 'MM-DD-YYYY HH:mm' : null \"\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 [ngValue]=\"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-block;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"] }]
|
|
3130
3151
|
}], ctorParameters: function () { return [{ type: i1.DatePipe }]; }, propDecorators: { _formulario: [{
|
|
3131
3152
|
type: ViewChild,
|
|
3132
3153
|
args: ['_formulario']
|
|
@@ -3134,6 +3155,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
3134
3155
|
type: Input
|
|
3135
3156
|
}], filters: [{
|
|
3136
3157
|
type: Input
|
|
3158
|
+
}], submitText: [{
|
|
3159
|
+
type: Input
|
|
3137
3160
|
}], useOnChangeSubmit: [{
|
|
3138
3161
|
type: Input
|
|
3139
3162
|
}], useButtonSubmit: [{
|