@dev-tcloud/tcloud-ui 0.0.57 → 0.0.59

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.
@@ -3079,8 +3079,11 @@ class TCloudUiDatepickerTimeComponent {
3079
3079
  //From ControlValueAccessor interface
3080
3080
  writeValue(value) {
3081
3081
  if (value !== this.innerValue) {
3082
+ try {
3083
+ value = new Date(`${value}`);
3084
+ }
3085
+ catch (error) { }
3082
3086
  this.innerValue = value;
3083
- console.log('writeValue this.innerValue', this.innerValue);
3084
3087
  if (this.checkIsDate(value)) {
3085
3088
  this.to_date_hh_mm(value);
3086
3089
  }
@@ -3122,7 +3125,8 @@ class TCloudUiFiltersComponent {
3122
3125
  this.datepickers = [];
3123
3126
  this.inputs = [];
3124
3127
  this.show_filters = false;
3125
- this.submitText = 'Filtrar';
3128
+ this._submitText = 'Filtrar';
3129
+ this.btnSubmitClass = 'btn-new-grey';
3126
3130
  this.useOnChangeSubmit = true; // useOnChangeSubmit - Submit automatico quando for alterado quanquer input
3127
3131
  this.useButtonSubmit = false; // useButtonSubmit - Exibe um botão de submit e não executa a busca automaticamente
3128
3132
  this.useNormalizeCaseSensitive = true; // useNormalizeCaseSensitive - Não valida caixa alta ou baixa e caracteres especiais
@@ -3130,6 +3134,7 @@ class TCloudUiFiltersComponent {
3130
3134
  this.onFilter = new EventEmitter();
3131
3135
  this.onChange = new EventEmitter();
3132
3136
  this.onSubmit = new EventEmitter();
3137
+ this.first_active_filter = false;
3133
3138
  this.start_filter_fc = undefined;
3134
3139
  }
3135
3140
  set data(data) {
@@ -3140,7 +3145,31 @@ class TCloudUiFiltersComponent {
3140
3145
  //this._filters = filters;
3141
3146
  }
3142
3147
  get filters() { return this._filters; }
3148
+ set submitText(v) {
3149
+ if (v && v !== this._submitText) {
3150
+ this._submitText = v;
3151
+ }
3152
+ }
3153
+ get submitText() { return this._submitText; }
3143
3154
  ngOnInit() {
3155
+ setTimeout(() => {
3156
+ for (let i = 0; i < (this.filters).length; i++) {
3157
+ if (this.filters[i].value) {
3158
+ if (this.filters[i].type === 'datetime-local') {
3159
+ try {
3160
+ this.filters[i].searchText = new Date(`${this.filters[i].value}`);
3161
+ }
3162
+ catch (error) { }
3163
+ }
3164
+ else {
3165
+ this.filters[i].searchText = this.filters[i].value;
3166
+ }
3167
+ this.first_active_filter = true;
3168
+ }
3169
+ }
3170
+ console.log('this.filters', this.filters);
3171
+ this.init();
3172
+ });
3144
3173
  }
3145
3174
  ngAfterViewInit() {
3146
3175
  // child is set
@@ -3167,7 +3196,6 @@ class TCloudUiFiltersComponent {
3167
3196
  this.show_filters = true;
3168
3197
  if (this.filters && (this.filters).length > 0) {
3169
3198
  (this.filters).forEach((filter) => {
3170
- console.log('init filter', filter);
3171
3199
  this.searchIn(filter, 'sync');
3172
3200
  });
3173
3201
  }
@@ -3255,11 +3283,8 @@ class TCloudUiFiltersComponent {
3255
3283
  return current;
3256
3284
  }
3257
3285
  searchIn(item, event, value) {
3286
+ //console.log('item TCDataFilters', item);
3258
3287
  this.start_filter_fc = undefined;
3259
- if (value) {
3260
- console.log('searchIn item', item);
3261
- console.log('searchIn event', event);
3262
- }
3263
3288
  let isValid = true;
3264
3289
  if (event === 'sync' && isValid) {
3265
3290
  isValid = false;
@@ -3277,7 +3302,6 @@ class TCloudUiFiltersComponent {
3277
3302
  }
3278
3303
  if (event?.datepickertime && isValid) {
3279
3304
  isValid = false;
3280
- console.log('is a date', event?.innerValue);
3281
3305
  item.searchText = event?.innerValue;
3282
3306
  this.onChange.emit(true);
3283
3307
  }
@@ -3291,8 +3315,9 @@ class TCloudUiFiltersComponent {
3291
3315
  item.searchText = '';
3292
3316
  this.onChange.emit(true);
3293
3317
  }
3294
- if (this.useOnChangeSubmit) {
3318
+ if (this.useOnChangeSubmit || this.first_active_filter) {
3295
3319
  this.start_filter_fc = this.start_filter();
3320
+ this.first_active_filter = false;
3296
3321
  }
3297
3322
  if (!this.useButtonSubmit) {
3298
3323
  this.emitSubmitFilters();
@@ -3475,10 +3500,10 @@ class TCloudUiFiltersComponent {
3475
3500
  }
3476
3501
  }
3477
3502
  TCloudUiFiltersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiFiltersComponent, deps: [{ token: i1.DatePipe }], target: i0.ɵɵFactoryTarget.Component });
3478
- TCloudUiFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiFiltersComponent, selector: "tcloud-ui-filters", inputs: { data: "data", filters: "filters", submitText: "submitText", useOnChangeSubmit: "useOnChangeSubmit", useButtonSubmit: "useButtonSubmit", useNormalizeCaseSensitive: "useNormalizeCaseSensitive" }, outputs: { result: "result", onFilter: "onFilter", onChange: "onChange", onSubmit: "onSubmit" }, viewQueries: [{ propertyName: "_formulario", first: true, predicate: ["_formulario"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"show_filters\" class=\"area-filter\">\n <ng-container *ngFor=\"let item of filters; let i = index\">\n\n <ng-container *ngIf=\"!item.type || (item.type && item.type !== 'boolean')\">\n \n <div class=\"box-filter-input type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n\n <ng-container *ngIf=\"item.type === 'datetime-local'\">\n <div class=\"m-description\"><i [class.to-active]=\"(datepickers[i] !== undefined && datepickers[i] !== null && datepickers[i] !== '')\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n <div>\n <tcloud-ui-datepicker-time #_input [(ngModel)]=\"datepickers[i]\" name=\"input_{{i+1}}\" (eventChange)=\"searchIn(item, _input, 'teste')\" > </tcloud-ui-datepicker-time>\n <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(datepickers[i] !== undefined && datepickers[i] !== null && datepickers[i] !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; datepickers[i] = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div> \n </ng-container>\n \n <ng-container *ngIf=\"item.type !== 'select' && item.type !== 'datetime-local'\">\n <div class=\"m-description\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n <div>\n <input \n #_input\n placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n name=\"input_{{i+1}}\" \n type=\"{{ (item.type === 'number') ? 'text' : item.type }}\" \n class=\"form-control tc-form-control\" \n (keyup)=\"searchIn(item, $event)\"> \n <button class=\"btn-clear-filter-text\" [class.to-hide]=\"_input.value === ''\" (click)=\"searchIn(item, null); _input.value = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.type === 'select' && item.data && (item.data).length > 0\" >\n <div class=\"m-description\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n <div>\n <select \n #_input\n name=\"input_{{i+1}}\" \n class=\"form-control tc-form-control\" \n (change)=\"searchIn(item, $event)\">\n <option [ngValue]=\"\"></option>\n <ng-container *ngFor=\"let v of item.data\">\n <option [value]=\"v.value\">{{ v.description }}</option>\n </ng-container>\n </select>\n <!-- <button class=\"btn-clear-filter-text\" [class.to-hide]=\"_input.value === ''\" (click)=\"searchIn(item, null); _input.value = ''\">\n <i class=\"fas fa-times\"></i>\n </button> -->\n </div>\n </ng-container>\n\n </div>\n\n\n \n </ng-container>\n\n <ng-container *ngIf=\"item.type && item.type === 'boolean'\">\n \n <div class=\"box-filter-input\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n <div class=\"m-description\"><i [class.to-active]=\"_input.checked === true\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ 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 }}&nbsp;<i class=\"fas fa-filter icon-filter\"></i></button>\n </div>\n\n</div>\n\n<!-- <pre>{{ inputs | json }}</pre> -->\n <!-- <pre> {{ data | json }} </pre> -->\n<!-- \n<p>FILTERS</p>\n<pre> {{ filters | json }}</pre> -->", styles: [".box-filter-input{display:inline-grid;padding:10px 5px;position:relative}.area-filter{border:1px solid #eeeeee;border-radius:5px;margin-bottom:5px}.btn-clear-filter-text{position:absolute;right:8px;top:38px;background-color:#fff;border:none;cursor:pointer;color:#aaa}.to-hide{display:none}.icon-filter{color:#ccc}.to-active{color:var(--verde)}.area-input-checkbox label{cursor:pointer;margin-bottom:0;color:#9f9f9f}.m-description{margin-bottom:3px}input{color:#535353}.type-hidden{display:none;width:0px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TCloudUiDatepickerTimeComponent, selector: "tcloud-ui-datepicker-time", inputs: ["ngModel"], outputs: ["ngModelChange", "onChange", "eventChange"] }] });
3503
+ 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", btnSubmitClass: "btnSubmitClass", useOnChangeSubmit: "useOnChangeSubmit", useButtonSubmit: "useButtonSubmit", useNormalizeCaseSensitive: "useNormalizeCaseSensitive" }, outputs: { result: "result", onFilter: "onFilter", onChange: "onChange", onSubmit: "onSubmit" }, viewQueries: [{ propertyName: "_formulario", first: true, predicate: ["_formulario"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"show_filters\" class=\"area-filter\">\n <ng-container *ngFor=\"let item of filters; let i = index\">\n\n <ng-container *ngIf=\"!item.type || (item.type && item.type !== 'boolean')\">\n \n <div class=\"box-filter-input type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n\n <ng-container *ngIf=\"item.type === 'datetime-local'\">\n <div class=\"m-description\"><i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n <div>\n <tcloud-ui-datepicker-time #_input [(ngModel)]=\"item.value\" name=\"input_{{i+1}}\" (eventChange)=\"searchIn(item, _input, 'teste')\" ></tcloud-ui-datepicker-time>\n <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(item.value !== undefined && item.value !== null && item.value !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; item.value = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div> \n </ng-container>\n \n <ng-container *ngIf=\"item.type !== 'select' && item.type !== 'datetime-local'\">\n <div class=\"m-description\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n <div>\n <input \n #_input\n [(ngModel)]=\"item.value\"\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>&nbsp;{{ item.description }}</div>\n <div>\n <select \n #_input\n [(ngModel)]=\"item.value\"\n name=\"input_{{i+1}}\" \n class=\"form-control tc-form-control\" \n (change)=\"searchIn(item, $event)\">\n <option [ngValue]=\"\"></option>\n <ng-container *ngFor=\"let v of item.data\">\n <option [value]=\"v.value\">{{ v.description }}</option>\n </ng-container>\n </select>\n <!-- <button class=\"btn-clear-filter-text\" [class.to-hide]=\"_input.value === ''\" (click)=\"searchIn(item, null); _input.value = ''\">\n <i class=\"fas fa-times\"></i>\n </button> -->\n </div>\n </ng-container>\n\n </div>\n\n\n \n </ng-container>\n\n <ng-container *ngIf=\"item.type && item.type === 'boolean'\">\n \n <div class=\"box-filter-input\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n <div class=\"m-description\"><i [class.to-active]=\"_input.checked === true\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ 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 {{ btnSubmitClass }}\" (click)=\"toSubmit()\" >{{ submitText }}</button>\n </div>\n\n</div>\n\n<!-- <pre>{{ inputs | json }}</pre> -->\n <!-- <pre> {{ data | json }} </pre>\n\n<p>FILTERS</p>\n<pre> {{ filters | json }}</pre> -->", styles: [".box-filter-input{display:inline-grid;padding:10px 5px;position:relative}.area-filter{border:1px solid #eeeeee;border-radius:5px;margin-bottom:5px}.btn-clear-filter-text{position:absolute;right:8px;top:38px;background-color:#fff;border:none;cursor:pointer;color:#aaa}.to-hide{display:none}.icon-filter{color:#ccc}.to-active{color:var(--verde)}.area-input-checkbox label{cursor:pointer;margin-bottom:0;color:#9f9f9f}.m-description{margin-bottom:3px}input{color:#535353}.type-hidden{display:none;width:0px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TCloudUiDatepickerTimeComponent, selector: "tcloud-ui-datepicker-time", inputs: ["ngModel"], outputs: ["ngModelChange", "onChange", "eventChange"] }] });
3479
3504
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiFiltersComponent, decorators: [{
3480
3505
  type: Component,
3481
- args: [{ selector: 'tcloud-ui-filters', template: "<div *ngIf=\"show_filters\" class=\"area-filter\">\n <ng-container *ngFor=\"let item of filters; let i = index\">\n\n <ng-container *ngIf=\"!item.type || (item.type && item.type !== 'boolean')\">\n \n <div class=\"box-filter-input type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n\n <ng-container *ngIf=\"item.type === 'datetime-local'\">\n <div class=\"m-description\"><i [class.to-active]=\"(datepickers[i] !== undefined && datepickers[i] !== null && datepickers[i] !== '')\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n <div>\n <tcloud-ui-datepicker-time #_input [(ngModel)]=\"datepickers[i]\" name=\"input_{{i+1}}\" (eventChange)=\"searchIn(item, _input, 'teste')\" > </tcloud-ui-datepicker-time>\n <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(datepickers[i] !== undefined && datepickers[i] !== null && datepickers[i] !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; datepickers[i] = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div> \n </ng-container>\n \n <ng-container *ngIf=\"item.type !== 'select' && item.type !== 'datetime-local'\">\n <div class=\"m-description\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n <div>\n <input \n #_input\n placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n name=\"input_{{i+1}}\" \n type=\"{{ (item.type === 'number') ? 'text' : item.type }}\" \n class=\"form-control tc-form-control\" \n (keyup)=\"searchIn(item, $event)\"> \n <button class=\"btn-clear-filter-text\" [class.to-hide]=\"_input.value === ''\" (click)=\"searchIn(item, null); _input.value = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"item.type === 'select' && item.data && (item.data).length > 0\" >\n <div class=\"m-description\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n <div>\n <select \n #_input\n name=\"input_{{i+1}}\" \n class=\"form-control tc-form-control\" \n (change)=\"searchIn(item, $event)\">\n <option [ngValue]=\"\"></option>\n <ng-container *ngFor=\"let v of item.data\">\n <option [value]=\"v.value\">{{ v.description }}</option>\n </ng-container>\n </select>\n <!-- <button class=\"btn-clear-filter-text\" [class.to-hide]=\"_input.value === ''\" (click)=\"searchIn(item, null); _input.value = ''\">\n <i class=\"fas fa-times\"></i>\n </button> -->\n </div>\n </ng-container>\n\n </div>\n\n\n \n </ng-container>\n\n <ng-container *ngIf=\"item.type && item.type === 'boolean'\">\n \n <div class=\"box-filter-input\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n <div class=\"m-description\"><i [class.to-active]=\"_input.checked === true\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ 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 }}&nbsp;<i class=\"fas fa-filter icon-filter\"></i></button>\n </div>\n\n</div>\n\n<!-- <pre>{{ inputs | json }}</pre> -->\n <!-- <pre> {{ data | json }} </pre> -->\n<!-- \n<p>FILTERS</p>\n<pre> {{ filters | json }}</pre> -->", styles: [".box-filter-input{display:inline-grid;padding:10px 5px;position:relative}.area-filter{border:1px solid #eeeeee;border-radius:5px;margin-bottom:5px}.btn-clear-filter-text{position:absolute;right:8px;top:38px;background-color:#fff;border:none;cursor:pointer;color:#aaa}.to-hide{display:none}.icon-filter{color:#ccc}.to-active{color:var(--verde)}.area-input-checkbox label{cursor:pointer;margin-bottom:0;color:#9f9f9f}.m-description{margin-bottom:3px}input{color:#535353}.type-hidden{display:none;width:0px!important}\n"] }]
3506
+ args: [{ selector: 'tcloud-ui-filters', template: "<div *ngIf=\"show_filters\" class=\"area-filter\">\n <ng-container *ngFor=\"let item of filters; let i = index\">\n\n <ng-container *ngIf=\"!item.type || (item.type && item.type !== 'boolean')\">\n \n <div class=\"box-filter-input type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n\n <ng-container *ngIf=\"item.type === 'datetime-local'\">\n <div class=\"m-description\"><i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n <div>\n <tcloud-ui-datepicker-time #_input [(ngModel)]=\"item.value\" name=\"input_{{i+1}}\" (eventChange)=\"searchIn(item, _input, 'teste')\" ></tcloud-ui-datepicker-time>\n <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(item.value !== undefined && item.value !== null && item.value !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; item.value = ''\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div> \n </ng-container>\n \n <ng-container *ngIf=\"item.type !== 'select' && item.type !== 'datetime-local'\">\n <div class=\"m-description\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n <div>\n <input \n #_input\n [(ngModel)]=\"item.value\"\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>&nbsp;{{ item.description }}</div>\n <div>\n <select \n #_input\n [(ngModel)]=\"item.value\"\n name=\"input_{{i+1}}\" \n class=\"form-control tc-form-control\" \n (change)=\"searchIn(item, $event)\">\n <option [ngValue]=\"\"></option>\n <ng-container *ngFor=\"let v of item.data\">\n <option [value]=\"v.value\">{{ v.description }}</option>\n </ng-container>\n </select>\n <!-- <button class=\"btn-clear-filter-text\" [class.to-hide]=\"_input.value === ''\" (click)=\"searchIn(item, null); _input.value = ''\">\n <i class=\"fas fa-times\"></i>\n </button> -->\n </div>\n </ng-container>\n\n </div>\n\n\n \n </ng-container>\n\n <ng-container *ngIf=\"item.type && item.type === 'boolean'\">\n \n <div class=\"box-filter-input\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n <div class=\"m-description\"><i [class.to-active]=\"_input.checked === true\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ 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 {{ btnSubmitClass }}\" (click)=\"toSubmit()\" >{{ submitText }}</button>\n </div>\n\n</div>\n\n<!-- <pre>{{ inputs | json }}</pre> -->\n <!-- <pre> {{ data | json }} </pre>\n\n<p>FILTERS</p>\n<pre> {{ filters | json }}</pre> -->", styles: [".box-filter-input{display:inline-grid;padding:10px 5px;position:relative}.area-filter{border:1px solid #eeeeee;border-radius:5px;margin-bottom:5px}.btn-clear-filter-text{position:absolute;right:8px;top:38px;background-color:#fff;border:none;cursor:pointer;color:#aaa}.to-hide{display:none}.icon-filter{color:#ccc}.to-active{color:var(--verde)}.area-input-checkbox label{cursor:pointer;margin-bottom:0;color:#9f9f9f}.m-description{margin-bottom:3px}input{color:#535353}.type-hidden{display:none;width:0px!important}\n"] }]
3482
3507
  }], ctorParameters: function () { return [{ type: i1.DatePipe }]; }, propDecorators: { _formulario: [{
3483
3508
  type: ViewChild,
3484
3509
  args: ['_formulario']
@@ -3488,6 +3513,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
3488
3513
  type: Input
3489
3514
  }], submitText: [{
3490
3515
  type: Input
3516
+ }], btnSubmitClass: [{
3517
+ type: Input
3491
3518
  }], useOnChangeSubmit: [{
3492
3519
  type: Input
3493
3520
  }], useButtonSubmit: [{
@@ -3564,9 +3591,11 @@ class TCloudUiFiltersModule {
3564
3591
  TCloudUiFiltersModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiFiltersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
3565
3592
  TCloudUiFiltersModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiFiltersModule, declarations: [TCloudUiFiltersComponent], imports: [CommonModule,
3566
3593
  FormsModule,
3594
+ ReactiveFormsModule,
3567
3595
  TCloudUiDatepickerTimeModule], exports: [TCloudUiFiltersComponent] });
3568
3596
  TCloudUiFiltersModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiFiltersModule, imports: [CommonModule,
3569
3597
  FormsModule,
3598
+ ReactiveFormsModule,
3570
3599
  TCloudUiDatepickerTimeModule] });
3571
3600
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiFiltersModule, decorators: [{
3572
3601
  type: NgModule,
@@ -3580,6 +3609,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
3580
3609
  imports: [
3581
3610
  CommonModule,
3582
3611
  FormsModule,
3612
+ ReactiveFormsModule,
3583
3613
  TCloudUiDatepickerTimeModule
3584
3614
  ]
3585
3615
  }]