@dev-tcloud/tcloud-ui 0.0.47 → 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 +29 -17
- 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 +55 -23
- package/fesm2015/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/fesm2020/dev-tcloud-tcloud-ui.mjs +54 -22
- package/fesm2020/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/lib/_modules/tcloud-ui-filters/tcloud-ui-filters.component.d.ts +4 -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,12 +2839,15 @@ 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
|
|
2845
|
+
this.useNormalizeCaseSensitive = true; // useNormalizeCaseSensitive - Não valida caixa alta ou baixa e caracteres especiais
|
|
2824
2846
|
this.result = new EventEmitter();
|
|
2825
2847
|
this.onFilter = new EventEmitter();
|
|
2826
2848
|
this.onChange = new EventEmitter();
|
|
2827
2849
|
this.onSubmit = new EventEmitter();
|
|
2850
|
+
this.start_filter_fc = undefined;
|
|
2828
2851
|
}
|
|
2829
2852
|
set data(data) {
|
|
2830
2853
|
// this._data = JSON.parse(JSON.stringify(data));
|
|
@@ -2842,7 +2865,6 @@ class TCloudUiFiltersComponent {
|
|
|
2842
2865
|
ngOnChanges(changes) {
|
|
2843
2866
|
if (changes && changes['data']) {
|
|
2844
2867
|
const data = changes['data'].currentValue;
|
|
2845
|
-
//console.log('ngOnChanges data', data);
|
|
2846
2868
|
if (this._data !== data) {
|
|
2847
2869
|
this._data = JSON.parse(JSON.stringify(data));
|
|
2848
2870
|
this.search_data = JSON.parse(JSON.stringify(data));
|
|
@@ -2869,12 +2891,17 @@ class TCloudUiFiltersComponent {
|
|
|
2869
2891
|
if (!this.useOnChangeSubmit) {
|
|
2870
2892
|
this.result.emit(this.data);
|
|
2871
2893
|
}
|
|
2872
|
-
this.
|
|
2894
|
+
if (this.useOnChangeSubmit || this.useButtonSubmit) {
|
|
2895
|
+
this.start_filter();
|
|
2896
|
+
}
|
|
2873
2897
|
}
|
|
2874
2898
|
}
|
|
2875
2899
|
normalize(text) {
|
|
2876
|
-
|
|
2877
|
-
|
|
2900
|
+
if (this.useNormalizeCaseSensitive) {
|
|
2901
|
+
const v = (((`${text}`).normalize('NFD').replace(/[\u0300-\u036f]/g, "")).trim()).toLowerCase();
|
|
2902
|
+
return v;
|
|
2903
|
+
}
|
|
2904
|
+
return text;
|
|
2878
2905
|
}
|
|
2879
2906
|
toSubmit() {
|
|
2880
2907
|
if (this.filters && (this.filters).length > 0) {
|
|
@@ -2900,7 +2927,6 @@ class TCloudUiFiltersComponent {
|
|
|
2900
2927
|
}
|
|
2901
2928
|
});
|
|
2902
2929
|
}
|
|
2903
|
-
// console.log('toSubmit filters', filters);
|
|
2904
2930
|
this.onSubmit.emit(filters);
|
|
2905
2931
|
}
|
|
2906
2932
|
collectionFind(obj, path) {
|
|
@@ -2913,7 +2939,6 @@ class TCloudUiFiltersComponent {
|
|
|
2913
2939
|
const index = key.substring(key.indexOf('[') + 1, key.indexOf(']'));
|
|
2914
2940
|
const arrayKey = key.substring(0, key.indexOf('['));
|
|
2915
2941
|
if (current && current[arrayKey] && current[arrayKey][index]) {
|
|
2916
|
-
//console.log('current[arrayKey][index]', current[arrayKey][index]);
|
|
2917
2942
|
return this.collectionFind(current[arrayKey][index], nextKeys.join("."));
|
|
2918
2943
|
}
|
|
2919
2944
|
}
|
|
@@ -2946,6 +2971,7 @@ class TCloudUiFiltersComponent {
|
|
|
2946
2971
|
return current;
|
|
2947
2972
|
}
|
|
2948
2973
|
searchIn(item, event) {
|
|
2974
|
+
this.start_filter_fc = undefined;
|
|
2949
2975
|
if (event !== undefined) {
|
|
2950
2976
|
if (typeof event === 'boolean') {
|
|
2951
2977
|
item.searchText = event;
|
|
@@ -2956,12 +2982,15 @@ class TCloudUiFiltersComponent {
|
|
|
2956
2982
|
item.searchText = '';
|
|
2957
2983
|
}
|
|
2958
2984
|
else {
|
|
2959
|
-
if (event
|
|
2960
|
-
|
|
2961
|
-
|
|
2962
|
-
|
|
2963
|
-
|
|
2964
|
-
|
|
2985
|
+
if (event.target) {
|
|
2986
|
+
if (event.target.valueAsDate) {
|
|
2987
|
+
item.searchText = event?.target?.valueAsDate;
|
|
2988
|
+
}
|
|
2989
|
+
else {
|
|
2990
|
+
if (event.target.value) {
|
|
2991
|
+
// item.searchText = (event.target.value).toUpperCase();
|
|
2992
|
+
item.searchText = this.normalize(event.target.value);
|
|
2993
|
+
}
|
|
2965
2994
|
}
|
|
2966
2995
|
}
|
|
2967
2996
|
this.onChange.emit(true);
|
|
@@ -2969,7 +2998,7 @@ class TCloudUiFiltersComponent {
|
|
|
2969
2998
|
}
|
|
2970
2999
|
}
|
|
2971
3000
|
if (this.useOnChangeSubmit) {
|
|
2972
|
-
this.start_filter();
|
|
3001
|
+
this.start_filter_fc = this.start_filter();
|
|
2973
3002
|
}
|
|
2974
3003
|
if (!this.useButtonSubmit) {
|
|
2975
3004
|
this.emitSubmitFilters();
|
|
@@ -2977,7 +3006,6 @@ class TCloudUiFiltersComponent {
|
|
|
2977
3006
|
}
|
|
2978
3007
|
start_filter() {
|
|
2979
3008
|
for (let i = 0; i < (this.data).length; i++) {
|
|
2980
|
-
// this.data[i]['tc_filter_accept'] = true;
|
|
2981
3009
|
this.setDataIndex(i, true);
|
|
2982
3010
|
for (let j = 0; j < (this.filters).length; j++) {
|
|
2983
3011
|
const filter_item = this.filters[j];
|
|
@@ -3116,10 +3144,10 @@ class TCloudUiFiltersComponent {
|
|
|
3116
3144
|
}
|
|
3117
3145
|
}
|
|
3118
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 });
|
|
3119
|
-
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" }, 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"] }] });
|
|
3120
3148
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiFiltersComponent, decorators: [{
|
|
3121
3149
|
type: Component,
|
|
3122
|
-
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"] }]
|
|
3123
3151
|
}], ctorParameters: function () { return [{ type: i1.DatePipe }]; }, propDecorators: { _formulario: [{
|
|
3124
3152
|
type: ViewChild,
|
|
3125
3153
|
args: ['_formulario']
|
|
@@ -3127,10 +3155,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
3127
3155
|
type: Input
|
|
3128
3156
|
}], filters: [{
|
|
3129
3157
|
type: Input
|
|
3158
|
+
}], submitText: [{
|
|
3159
|
+
type: Input
|
|
3130
3160
|
}], useOnChangeSubmit: [{
|
|
3131
3161
|
type: Input
|
|
3132
3162
|
}], useButtonSubmit: [{
|
|
3133
3163
|
type: Input
|
|
3164
|
+
}], useNormalizeCaseSensitive: [{
|
|
3165
|
+
type: Input
|
|
3134
3166
|
}], result: [{
|
|
3135
3167
|
type: Output
|
|
3136
3168
|
}], onFilter: [{
|