@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
|
|
|
@@ -1811,7 +1831,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
1811
1831
|
|
|
1812
1832
|
class MonthNamePipe {
|
|
1813
1833
|
constructor() {
|
|
1814
|
-
this.meses = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', '
|
|
1834
|
+
this.meses = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
|
|
1815
1835
|
}
|
|
1816
1836
|
transform(yyyy_mm) {
|
|
1817
1837
|
if (yyyy_mm !== '') {
|
|
@@ -2826,12 +2846,15 @@ class TCloudUiFiltersComponent {
|
|
|
2826
2846
|
this.datepipe = datepipe;
|
|
2827
2847
|
this.inputs = [];
|
|
2828
2848
|
this.show_filters = false;
|
|
2849
|
+
this.submitText = 'Filtrar';
|
|
2829
2850
|
this.useOnChangeSubmit = true; // useOnChangeSubmit - Submit automatico quando for alterado quanquer input
|
|
2830
2851
|
this.useButtonSubmit = false; // useButtonSubmit - Exibe um botão de submit e não executa a busca automaticamente
|
|
2852
|
+
this.useNormalizeCaseSensitive = true; // useNormalizeCaseSensitive - Não valida caixa alta ou baixa e caracteres especiais
|
|
2831
2853
|
this.result = new EventEmitter();
|
|
2832
2854
|
this.onFilter = new EventEmitter();
|
|
2833
2855
|
this.onChange = new EventEmitter();
|
|
2834
2856
|
this.onSubmit = new EventEmitter();
|
|
2857
|
+
this.start_filter_fc = undefined;
|
|
2835
2858
|
}
|
|
2836
2859
|
set data(data) {
|
|
2837
2860
|
// this._data = JSON.parse(JSON.stringify(data));
|
|
@@ -2849,7 +2872,6 @@ class TCloudUiFiltersComponent {
|
|
|
2849
2872
|
ngOnChanges(changes) {
|
|
2850
2873
|
if (changes && changes['data']) {
|
|
2851
2874
|
const data = changes['data'].currentValue;
|
|
2852
|
-
//console.log('ngOnChanges data', data);
|
|
2853
2875
|
if (this._data !== data) {
|
|
2854
2876
|
this._data = JSON.parse(JSON.stringify(data));
|
|
2855
2877
|
this.search_data = JSON.parse(JSON.stringify(data));
|
|
@@ -2876,12 +2898,17 @@ class TCloudUiFiltersComponent {
|
|
|
2876
2898
|
if (!this.useOnChangeSubmit) {
|
|
2877
2899
|
this.result.emit(this.data);
|
|
2878
2900
|
}
|
|
2879
|
-
this.
|
|
2901
|
+
if (this.useOnChangeSubmit || this.useButtonSubmit) {
|
|
2902
|
+
this.start_filter();
|
|
2903
|
+
}
|
|
2880
2904
|
}
|
|
2881
2905
|
}
|
|
2882
2906
|
normalize(text) {
|
|
2883
|
-
|
|
2884
|
-
|
|
2907
|
+
if (this.useNormalizeCaseSensitive) {
|
|
2908
|
+
const v = (((`${text}`).normalize('NFD').replace(/[\u0300-\u036f]/g, "")).trim()).toLowerCase();
|
|
2909
|
+
return v;
|
|
2910
|
+
}
|
|
2911
|
+
return text;
|
|
2885
2912
|
}
|
|
2886
2913
|
toSubmit() {
|
|
2887
2914
|
if (this.filters && (this.filters).length > 0) {
|
|
@@ -2907,7 +2934,6 @@ class TCloudUiFiltersComponent {
|
|
|
2907
2934
|
}
|
|
2908
2935
|
});
|
|
2909
2936
|
}
|
|
2910
|
-
// console.log('toSubmit filters', filters);
|
|
2911
2937
|
this.onSubmit.emit(filters);
|
|
2912
2938
|
}
|
|
2913
2939
|
collectionFind(obj, path) {
|
|
@@ -2920,7 +2946,6 @@ class TCloudUiFiltersComponent {
|
|
|
2920
2946
|
const index = key.substring(key.indexOf('[') + 1, key.indexOf(']'));
|
|
2921
2947
|
const arrayKey = key.substring(0, key.indexOf('['));
|
|
2922
2948
|
if (current && current[arrayKey] && current[arrayKey][index]) {
|
|
2923
|
-
//console.log('current[arrayKey][index]', current[arrayKey][index]);
|
|
2924
2949
|
return this.collectionFind(current[arrayKey][index], nextKeys.join("."));
|
|
2925
2950
|
}
|
|
2926
2951
|
}
|
|
@@ -2953,7 +2978,8 @@ class TCloudUiFiltersComponent {
|
|
|
2953
2978
|
return current;
|
|
2954
2979
|
}
|
|
2955
2980
|
searchIn(item, event) {
|
|
2956
|
-
var _a
|
|
2981
|
+
var _a;
|
|
2982
|
+
this.start_filter_fc = undefined;
|
|
2957
2983
|
if (event !== undefined) {
|
|
2958
2984
|
if (typeof event === 'boolean') {
|
|
2959
2985
|
item.searchText = event;
|
|
@@ -2964,12 +2990,15 @@ class TCloudUiFiltersComponent {
|
|
|
2964
2990
|
item.searchText = '';
|
|
2965
2991
|
}
|
|
2966
2992
|
else {
|
|
2967
|
-
if (
|
|
2968
|
-
|
|
2969
|
-
|
|
2970
|
-
|
|
2971
|
-
|
|
2972
|
-
|
|
2993
|
+
if (event.target) {
|
|
2994
|
+
if (event.target.valueAsDate) {
|
|
2995
|
+
item.searchText = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.valueAsDate;
|
|
2996
|
+
}
|
|
2997
|
+
else {
|
|
2998
|
+
if (event.target.value) {
|
|
2999
|
+
// item.searchText = (event.target.value).toUpperCase();
|
|
3000
|
+
item.searchText = this.normalize(event.target.value);
|
|
3001
|
+
}
|
|
2973
3002
|
}
|
|
2974
3003
|
}
|
|
2975
3004
|
this.onChange.emit(true);
|
|
@@ -2977,7 +3006,7 @@ class TCloudUiFiltersComponent {
|
|
|
2977
3006
|
}
|
|
2978
3007
|
}
|
|
2979
3008
|
if (this.useOnChangeSubmit) {
|
|
2980
|
-
this.start_filter();
|
|
3009
|
+
this.start_filter_fc = this.start_filter();
|
|
2981
3010
|
}
|
|
2982
3011
|
if (!this.useButtonSubmit) {
|
|
2983
3012
|
this.emitSubmitFilters();
|
|
@@ -2985,7 +3014,6 @@ class TCloudUiFiltersComponent {
|
|
|
2985
3014
|
}
|
|
2986
3015
|
start_filter() {
|
|
2987
3016
|
for (let i = 0; i < (this.data).length; i++) {
|
|
2988
|
-
// this.data[i]['tc_filter_accept'] = true;
|
|
2989
3017
|
this.setDataIndex(i, true);
|
|
2990
3018
|
for (let j = 0; j < (this.filters).length; j++) {
|
|
2991
3019
|
const filter_item = this.filters[j];
|
|
@@ -3124,10 +3152,10 @@ class TCloudUiFiltersComponent {
|
|
|
3124
3152
|
}
|
|
3125
3153
|
}
|
|
3126
3154
|
TCloudUiFiltersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiFiltersComponent, deps: [{ token: i1.DatePipe }], target: i0.ɵɵFactoryTarget.Component });
|
|
3127
|
-
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()\" >
|
|
3155
|
+
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"] }] });
|
|
3128
3156
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiFiltersComponent, decorators: [{
|
|
3129
3157
|
type: Component,
|
|
3130
|
-
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()\" >
|
|
3158
|
+
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"] }]
|
|
3131
3159
|
}], ctorParameters: function () { return [{ type: i1.DatePipe }]; }, propDecorators: { _formulario: [{
|
|
3132
3160
|
type: ViewChild,
|
|
3133
3161
|
args: ['_formulario']
|
|
@@ -3135,10 +3163,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
3135
3163
|
type: Input
|
|
3136
3164
|
}], filters: [{
|
|
3137
3165
|
type: Input
|
|
3166
|
+
}], submitText: [{
|
|
3167
|
+
type: Input
|
|
3138
3168
|
}], useOnChangeSubmit: [{
|
|
3139
3169
|
type: Input
|
|
3140
3170
|
}], useButtonSubmit: [{
|
|
3141
3171
|
type: Input
|
|
3172
|
+
}], useNormalizeCaseSensitive: [{
|
|
3173
|
+
type: Input
|
|
3142
3174
|
}], result: [{
|
|
3143
3175
|
type: Output
|
|
3144
3176
|
}], onFilter: [{
|