@dev-tcloud/tcloud-ui 0.0.47 → 0.0.48
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 +25 -16
- package/fesm2015/dev-tcloud-tcloud-ui.mjs +25 -16
- package/fesm2015/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/fesm2020/dev-tcloud-tcloud-ui.mjs +24 -15
- package/fesm2020/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/lib/_modules/tcloud-ui-filters/tcloud-ui-filters.component.d.ts +3 -1
- package/package.json +1 -1
|
@@ -2821,10 +2821,12 @@ class TCloudUiFiltersComponent {
|
|
|
2821
2821
|
this.show_filters = false;
|
|
2822
2822
|
this.useOnChangeSubmit = true; // useOnChangeSubmit - Submit automatico quando for alterado quanquer input
|
|
2823
2823
|
this.useButtonSubmit = false; // useButtonSubmit - Exibe um botão de submit e não executa a busca automaticamente
|
|
2824
|
+
this.useNormalizeCaseSensitive = true; // useNormalizeCaseSensitive - Não valida caixa alta ou baixa e caracteres especiais
|
|
2824
2825
|
this.result = new EventEmitter();
|
|
2825
2826
|
this.onFilter = new EventEmitter();
|
|
2826
2827
|
this.onChange = new EventEmitter();
|
|
2827
2828
|
this.onSubmit = new EventEmitter();
|
|
2829
|
+
this.start_filter_fc = undefined;
|
|
2828
2830
|
}
|
|
2829
2831
|
set data(data) {
|
|
2830
2832
|
// this._data = JSON.parse(JSON.stringify(data));
|
|
@@ -2842,7 +2844,6 @@ class TCloudUiFiltersComponent {
|
|
|
2842
2844
|
ngOnChanges(changes) {
|
|
2843
2845
|
if (changes && changes['data']) {
|
|
2844
2846
|
const data = changes['data'].currentValue;
|
|
2845
|
-
//console.log('ngOnChanges data', data);
|
|
2846
2847
|
if (this._data !== data) {
|
|
2847
2848
|
this._data = JSON.parse(JSON.stringify(data));
|
|
2848
2849
|
this.search_data = JSON.parse(JSON.stringify(data));
|
|
@@ -2869,12 +2870,17 @@ class TCloudUiFiltersComponent {
|
|
|
2869
2870
|
if (!this.useOnChangeSubmit) {
|
|
2870
2871
|
this.result.emit(this.data);
|
|
2871
2872
|
}
|
|
2872
|
-
this.
|
|
2873
|
+
if (this.useOnChangeSubmit || this.useButtonSubmit) {
|
|
2874
|
+
this.start_filter();
|
|
2875
|
+
}
|
|
2873
2876
|
}
|
|
2874
2877
|
}
|
|
2875
2878
|
normalize(text) {
|
|
2876
|
-
|
|
2877
|
-
|
|
2879
|
+
if (this.useNormalizeCaseSensitive) {
|
|
2880
|
+
const v = (((`${text}`).normalize('NFD').replace(/[\u0300-\u036f]/g, "")).trim()).toLowerCase();
|
|
2881
|
+
return v;
|
|
2882
|
+
}
|
|
2883
|
+
return text;
|
|
2878
2884
|
}
|
|
2879
2885
|
toSubmit() {
|
|
2880
2886
|
if (this.filters && (this.filters).length > 0) {
|
|
@@ -2900,7 +2906,6 @@ class TCloudUiFiltersComponent {
|
|
|
2900
2906
|
}
|
|
2901
2907
|
});
|
|
2902
2908
|
}
|
|
2903
|
-
// console.log('toSubmit filters', filters);
|
|
2904
2909
|
this.onSubmit.emit(filters);
|
|
2905
2910
|
}
|
|
2906
2911
|
collectionFind(obj, path) {
|
|
@@ -2913,7 +2918,6 @@ class TCloudUiFiltersComponent {
|
|
|
2913
2918
|
const index = key.substring(key.indexOf('[') + 1, key.indexOf(']'));
|
|
2914
2919
|
const arrayKey = key.substring(0, key.indexOf('['));
|
|
2915
2920
|
if (current && current[arrayKey] && current[arrayKey][index]) {
|
|
2916
|
-
//console.log('current[arrayKey][index]', current[arrayKey][index]);
|
|
2917
2921
|
return this.collectionFind(current[arrayKey][index], nextKeys.join("."));
|
|
2918
2922
|
}
|
|
2919
2923
|
}
|
|
@@ -2946,6 +2950,7 @@ class TCloudUiFiltersComponent {
|
|
|
2946
2950
|
return current;
|
|
2947
2951
|
}
|
|
2948
2952
|
searchIn(item, event) {
|
|
2953
|
+
this.start_filter_fc = undefined;
|
|
2949
2954
|
if (event !== undefined) {
|
|
2950
2955
|
if (typeof event === 'boolean') {
|
|
2951
2956
|
item.searchText = event;
|
|
@@ -2956,12 +2961,15 @@ class TCloudUiFiltersComponent {
|
|
|
2956
2961
|
item.searchText = '';
|
|
2957
2962
|
}
|
|
2958
2963
|
else {
|
|
2959
|
-
if (event
|
|
2960
|
-
|
|
2961
|
-
|
|
2962
|
-
|
|
2963
|
-
|
|
2964
|
-
|
|
2964
|
+
if (event.target) {
|
|
2965
|
+
if (event.target.valueAsDate) {
|
|
2966
|
+
item.searchText = event?.target?.valueAsDate;
|
|
2967
|
+
}
|
|
2968
|
+
else {
|
|
2969
|
+
if (event.target.value) {
|
|
2970
|
+
// item.searchText = (event.target.value).toUpperCase();
|
|
2971
|
+
item.searchText = this.normalize(event.target.value);
|
|
2972
|
+
}
|
|
2965
2973
|
}
|
|
2966
2974
|
}
|
|
2967
2975
|
this.onChange.emit(true);
|
|
@@ -2969,7 +2977,7 @@ class TCloudUiFiltersComponent {
|
|
|
2969
2977
|
}
|
|
2970
2978
|
}
|
|
2971
2979
|
if (this.useOnChangeSubmit) {
|
|
2972
|
-
this.start_filter();
|
|
2980
|
+
this.start_filter_fc = this.start_filter();
|
|
2973
2981
|
}
|
|
2974
2982
|
if (!this.useButtonSubmit) {
|
|
2975
2983
|
this.emitSubmitFilters();
|
|
@@ -2977,7 +2985,6 @@ class TCloudUiFiltersComponent {
|
|
|
2977
2985
|
}
|
|
2978
2986
|
start_filter() {
|
|
2979
2987
|
for (let i = 0; i < (this.data).length; i++) {
|
|
2980
|
-
// this.data[i]['tc_filter_accept'] = true;
|
|
2981
2988
|
this.setDataIndex(i, true);
|
|
2982
2989
|
for (let j = 0; j < (this.filters).length; j++) {
|
|
2983
2990
|
const filter_item = this.filters[j];
|
|
@@ -3116,7 +3123,7 @@ class TCloudUiFiltersComponent {
|
|
|
3116
3123
|
}
|
|
3117
3124
|
}
|
|
3118
3125
|
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()\" >Filtrar <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"] }] });
|
|
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()\" >Filtrar <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
3127
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiFiltersComponent, decorators: [{
|
|
3121
3128
|
type: Component,
|
|
3122
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()\" >Filtrar <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,6 +3138,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
3131
3138
|
type: Input
|
|
3132
3139
|
}], useButtonSubmit: [{
|
|
3133
3140
|
type: Input
|
|
3141
|
+
}], useNormalizeCaseSensitive: [{
|
|
3142
|
+
type: Input
|
|
3134
3143
|
}], result: [{
|
|
3135
3144
|
type: Output
|
|
3136
3145
|
}], onFilter: [{
|