@dev-tcloud/tcloud-ui 1.0.0 → 2.0.1

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-filters/tcloud-ui-filters.component.ts

@@ -1,525 +0,0 @@
-import { DatePipe } from '@angular/common';
-import { Component, Input, OnChanges, OnInit, Output, SimpleChanges, EventEmitter, ViewChild } from '@angular/core';
-import { NgForm } from '@angular/forms';
-import { TCCondition, TCDataFilters, TCFiltersType } from './tcloud-ui-filters';
-
-@Component({
-  selector: 'tcloud-ui-filters',
-  templateUrl: './tcloud-ui-filters.component.html',
-  styleUrls: ['./tcloud-ui-filters.component.scss']
-})
-export class TCloudUiFiltersComponent implements OnInit, OnChanges {
-
-  datepickers = [] as any;
-
-  @ViewChild('_formulario')  _formulario: NgForm | undefined;
-
-  inputs: string[] = [];
-
-  show_filters: boolean = false;
-
-  search_data: any | undefined;
-
-  private _data: any | undefined;
-  @Input() set data(data: any){
-    // this._data = JSON.parse(JSON.stringify(data));
-  }
-  get data(): any{ return this._data; }
-
-  private _filters: TCDataFilters | undefined;
-  @Input() set filters(filters: any){
-    //this._filters = filters;
-  }
-  get filters(): any{ return this._filters; }
-
-  private _submitText: string = 'Filtrar';
-  @Input() set submitText(v: string){ 
-    if( v && v !== this._submitText ){
-      this._submitText = v;
-    }
-  }
-  get submitText():string{ return this._submitText; }
-
-  @Input() btnSubmitClass: string = 'tc-btn-primary';
-  @Input() useOnChangeSubmit: boolean = true; // useOnChangeSubmit - Submit automatico quando for alterado quanquer input
-  @Input() useButtonSubmit: boolean = false; // useButtonSubmit - Exibe um botão de submit e não executa a busca automaticamente
-  @Input() useNormalizeCaseSensitive: boolean = true; // useNormalizeCaseSensitive - Não valida caixa alta ou baixa e caracteres especiais
-  @Input() useRangeDate: boolean = true;
-  @Input() useFilterAccept: boolean = false;
-
-  @Output() result = new EventEmitter<any>();
-  @Output() onFilter = new EventEmitter<any>();
-  @Output() onChange = new EventEmitter<any>();
-  @Output() onSubmit = new EventEmitter<any>();
-
-  descriptionStart: string = '';
-  descriptionStop: string = '';
-
-  private first_active_filter: boolean = false;
-
-  start_stop: boolean = false;
-  start_stop_width: number = 0;
-  start_stop_und: string = ''; // px ou %
-
-  constructor(
-    private datepipe: DatePipe
-  ) { }
-
-  ngOnInit(): void {
-    setTimeout(() => {
-      if( this.filters && (this.filters).length > 0 ){
-        for(let i = 0; i < (this.filters).length; i++){
-          if( this.filters[i].value ){
-            if( this.filters[i].type === 'datetime-local' ){
-              try {
-                this.filters[i].searchText = new Date( `${this.filters[i].value}` );
-              } catch (error) {}
-            }else{
-              this.filters[i].searchText = this.filters[i].value;
-            }
-            this.first_active_filter = true;
-          }
-        }      
-      }
-      this.start_stop = (this.useRangeDate) ? this.is_start_stop_datetime() : false;
-      this.toSubmit();
-    });
-  }
-
-  is_start_stop_datetime(){
-    let start = false;
-    let stop = false;
-    if( this.filters && (this.filters).length > 0 ){
-      this.start_stop_width = 0;
-      for(let i = 0; i < (this.filters).length; i++){
-        if( this.filters[i].id === 'start' ){
-          start = true;
-          this.start_stop_width += this.getValueWidth(this.filters[i].width);
-          this.start_stop_und = this.getUnidade(this.filters[i].width);
-          this.descriptionStart = this.filters[i].description;
-        }
-        if( this.filters[i].id === 'stop' ){
-          stop = true;
-          this.start_stop_width += this.getValueWidth(this.filters[i].width);
-          this.descriptionStop = this.filters[i].description;
-        }
-      }
-    }
-    return ( start && stop ) ? true : false;
-  }
-
-  getValueWidth(v: string):number {
-    let und = this.getUnidade(v);
-    v = (v).replace(und, '');
-    return +(v);
-  }
-
-  getUnidade(v: string):string {
-    let und = '%';
-    if( v && (v).includes('px') ){
-      und = 'px';
-    }
-    return und;
-  }
- 
-
-  ngOnChanges(changes: SimpleChanges) {  
-    
-    if( changes && changes['data'] ){
-      const data = changes['data'].currentValue;
-      if( this._data !== data ){
-        this._data = JSON.parse(JSON.stringify(data));
-        this.search_data = JSON.parse(JSON.stringify(data));
-        this.init();
-      }
-    }
-
-    if( changes && changes['filters'] ){
-      const filters = changes['filters'].currentValue;
-      if( this._filters !== filters ){
-        this._filters = JSON.parse(JSON.stringify(filters));
-        this.init();
-      }
-    }
-  }
-
-  private init(){
-    if( this.data && this.filters ){
-      this.show_filters = true;
-      if( this.filters && (this.filters).length > 0 ){
-        (this.filters).forEach((filter: TCDataFilters) => {            
-          this.searchIn(filter, 'sync');
-        });
-      } 
-      if( !this.useOnChangeSubmit ){
-        this.result_accept(this.data);
-      }
-
-      if( this.useOnChangeSubmit || this.useButtonSubmit ){
-        this.start_filter();
-      }
-    }
-  }
-
-  private normalize(text: any): string{
-    if( this.useNormalizeCaseSensitive ){
-      const v = ( ( (`${text}`).normalize('NFD').replace(/[\u0300-\u036f]/g, "") ).trim() ).toLowerCase();
-      return v;
-    }
-    return text;
-  }
-
-  toSubmit(){
-    if( this.filters && (this.filters).length > 0 ){
-      this.init();
-    }
-    this.emitSubmitFilters();
-  }
-
-  private emitSubmitFilters(){
-    let filters = JSON.parse(JSON.stringify(this.filters));
-    if( filters && (filters).length > 0 ){
-      (filters).forEach((filter: TCDataFilters, i: number) => {
-
-        if( filter.width ){ delete(filters[i].width); }
-        if( filter.placeholder ){ delete(filters[i].placeholder); }
-        if( filter.description ){ delete(filters[i].description); }
-
-        if( (!filter.searchText || filter.searchText && filter.searchText === '') && filter.type !== "boolean" ){
-          delete(filters[i]);
-        }
-        if( filter.type === "boolean" ){
-          if( !filter.searchText ){
-            filter.searchText = false;
-          }
-        }
-        
-      });
-    }   
-    
-    this.onSubmit.emit(this.filters);
-  }
-
-
-  private collectionFind(obj: any, path: any): any {
-    const pathArray = path.split(".");
-    let current = obj;
-    for (let i = 0; i < pathArray.length; i++) {
-      const key = pathArray[i];
-
-      if (key.includes('[') && key.includes(']')) {
-        const nextKeys = pathArray.slice(i + 1);
-        const index = key.substring(key.indexOf('[') + 1, key.indexOf(']'));
-        const arrayKey = key.substring(0, key.indexOf('['));
-        if( current && current[arrayKey] && current[arrayKey][index] ){
-          return this.collectionFind(current[arrayKey][index], nextKeys.join("."));
-        }
-      }
-
-
-      if (key.includes("[]")) {
-        const arrayKey = key.replace("[]", "");
-        current = current[arrayKey] || [];
-        const nextKeys = pathArray.slice(i + 1);
-        const results = [];
-        for (let j = 0; j < current.length; j++) {
-          let result = this.collectionFind(current[j], nextKeys.join("."));
-          if (result !== undefined) {
-            results.push(result); 
-          }
-        }
-        if (results.length === 0) {
-          return undefined;
-        }
-        return results;
-      } else {
-        if( !current || (current && !current[key]) ){
-          return undefined;
-        }
-        current = current[key];
-        if (current === undefined) {
-          return undefined;
-        }
-      }
-    }
-    return current;
-  }
-    
-  first: boolean = true;
-  start_filter_fc: any = undefined;
-
-  start_value: any | undefined;
-  stop_value: any | undefined;
-
-  searchInRange( range_date: any){
-    
-    if( this.filters && (this.filters).length > 0 ){
-
-      let event = {} as any; 
-      event.datepickertime = true;
-
-      for( let i = 0; i < (this.filters).length; i++ ){
-
-        if( this.filters[i] && this.filters[i].id && this.filters[i].id === 'start' ){
-          this.filters[i].value = range_date?.result?.start!;
-          this.filters[i].searchText = range_date?.result?.start!;
-          event.innerValue = this.start_value = range_date?.result?.start!;
-          this.searchIn(this.filters[i], event);
-        }
-
-        if( this.filters[i] && this.filters[i].id && this.filters[i].id === 'stop' ){
-          this.filters[i].value = range_date?.result?.stop!;
-          this.filters[i].searchText = range_date?.result?.stop!;
-          event.innerValue = this.stop_value = range_date?.result?.stop!;
-          this.searchIn(this.filters[i], event);
-        }
-      }
-      if( this.first || this.useOnChangeSubmit ){
-        this.toSubmit();
-      }
-      
-    }
-    this.first = false;
-
-  }
-
-  convertDataToNumber(dataString: string): number {
-    try {
-      const [dia, mes, ano] = dataString.split('/');
-      return +(`${ano}${mes}${dia}`);
-    } catch (error) {}
-    return 0;
-  }
-
-  searchIn(item: TCDataFilters, event?: any){
-
-    
-
-    this.start_filter_fc = undefined;
-
-    let isValid = true;
-
-    if( event === 'sync' && isValid ){
-      isValid = false;
-      this.onChange.emit(true);
-    }
-
-    if( typeof event === 'boolean' && isValid ){
-      isValid = false;
-      item.searchText = event;
-      this.onChange.emit(true);
-    }
-
-    if( (event === undefined || event === null || event === '') && isValid ){
-      isValid = false;
-      item.searchText = '';
-      this.onChange.emit(true);
-    }
-
-    if( event?.datepickertime  && isValid ){
-      isValid = false;
-      item.searchText = event?.innerValue;      
-      this.onChange.emit(true);
-    }
-
-    if(event?.target?.value && isValid ){
-      isValid = false;
-      item.searchText = this.normalize(event.target.value);
-      this.onChange.emit(true);
-    }
-
-    if(event?.target?.value === '' && isValid ){
-      isValid = false;
-      item.searchText = '';
-      this.onChange.emit(true);
-    }
-
-    if( item.type === 'date-local' && item.value ){
-      isValid = false;
-      item.searchText = `${this.convertDataToNumber( item.value )}`;
-      this.onChange.emit(true);
-    }
-
-    if( event && event.result && ( event.result.start || event.result.stop ) ){
-      isValid = false;
-      this.onChange.emit(true);
-    }
-
-    
-    
-    if( this.useOnChangeSubmit || this.first_active_filter ){      
-      this.start_filter_fc = this.start_filter();
-      this.first_active_filter = false;
-    }
-
-    if( !this.useButtonSubmit ){
-      this.emitSubmitFilters();
-    } 
-  }
-
-  getDateUTC(dt: any){
-    const ano = dt.getFullYear();
-    const mes = dt.getMonth();
-    const dia = dt.getDate();
-    const horas = dt.getHours();
-    const minutos = dt.getMinutes();
-    const segundos = dt.getSeconds();
-    return new Date(Date.UTC(ano, mes, dia, horas, minutos, segundos));
-  }
-
-  
-  start_filter(){
-    for( let i = 0; i < (this.data).length; i++ ){
-
-      this.setDataIndex(i, true);
-
-      for( let j = 0; j < (this.filters).length; j++ ){        
-        const filter_item = this.filters[j];   
-
-        if( filter_item.searchText && typeof (filter_item.searchText) === 'string' && filter_item.searchText !== '' && filter_item.type !== TCFiltersType.number && filter_item.type !== TCFiltersType.date ){
-          
-          filter_item.searchText = this.normalize(filter_item.searchText);        
-          let item_value = this.collectionFind(this.data[i], filter_item.searchIn);
-          if( item_value ){
-            item_value = this.normalize(item_value);            
-            if( !( item_value.includes(filter_item.searchText) || item_value === filter_item.searchText ) ){
-              this.setDataIndex(i, false);
-            }
-          }else{
-            this.setDataIndex(i, false);
-          }
-        } 
-        
-
-        if( filter_item.searchText && filter_item.searchText instanceof Date && !isNaN( filter_item.searchText.valueOf()) && filter_item.type === TCFiltersType.datetime ){
-          
-          let item_value: any = this.collectionFind(this.data[i], filter_item.searchIn);
-
-          try { item_value = new Date(item_value); } catch (error) {}
-          if( item_value &&  item_value instanceof Date && !isNaN( item_value.valueOf()) ){
-            let is_accept = false;
-
-            const dt_target   = ( (filter_item.searchText).getTime() ).toString().substring(0, 10); /* + (3 * 60 * 60 * 1000); */
-            const dt_current  = ( (item_value).getTime() ).toString().substring(0, 10);
-            if( filter_item.condition ){
-              switch (filter_item.condition) {
-                case TCCondition.gt:    is_accept = ( Number(dt_target) >  Number(dt_current) );  break;
-                case TCCondition.lt:    is_accept = ( Number(dt_target) <  Number(dt_current) );  break;
-                case TCCondition.gte:   is_accept = ( Number(dt_target) <= Number(dt_current) );  break;
-                case TCCondition.lte:   is_accept = ( Number(dt_target) >= Number(dt_current) );  break;
-                case TCCondition.equal: is_accept = ( Number(dt_target) === Number(dt_current) );  break;
-                default: is_accept = ( Number(dt_target) == Number(dt_current) );
-              }
-            }else{
-              is_accept = ( Number(filter_item.searchText) === Number(item_value) );
-            }
-            if( !is_accept ){
-              this.setDataIndex(i, false);
-            }
-          }
-        }
-
-        
-
-        if( filter_item.searchText && typeof Number(filter_item.searchText) === 'number' && ( filter_item.type === TCFiltersType.number || filter_item.type === TCFiltersType.date ) ){
-          
-          filter_item.searchText = Number(filter_item.searchText);
-          let item_value = this.collectionFind(this.data[i], filter_item.searchIn);
-
-          if( typeof Number(item_value) === 'number' ){   
-            item_value = Number(item_value);            
-            let is_accept = false;
-            if( filter_item.condition ){
-
-              switch (filter_item.condition) {
-                case TCCondition.gt:    is_accept = ( Number(filter_item.searchText) >  Number(item_value) );  break;
-                case TCCondition.lt:    is_accept = ( Number(filter_item.searchText) <  Number(item_value) );  break;
-                case TCCondition.gte:   is_accept = ( Number(filter_item.searchText) <= Number(item_value) ); break;
-                case TCCondition.lte:   is_accept = ( Number(filter_item.searchText) >= Number(item_value) );  break;
-                case TCCondition.equal: is_accept = ( Number(filter_item.searchText) === Number(item_value) ); break;
-                default: is_accept = ( Number(filter_item.searchText) == Number(item_value) );
-              }
-            }else{
-              is_accept = ( Number(filter_item.searchText) === Number(item_value) );
-            }
-            if( !is_accept ){
-              this.setDataIndex(i, false);
-            }
-          }
-        }
-        
-        
-        if( typeof (filter_item.searchText) === 'boolean' && filter_item.searchText === true ){
-
-          let item_value: any = this.collectionFind(this.data[i], filter_item.searchIn);
-          
-          if( item_value && (item_value).length > 0 ){  
-            let qtd_is_true = 0;          
-            for( let i = 0; i < ((item_value).length); i++ ){
-              const item = item_value[i];
-              if( item === filter_item.searchText ){
-                qtd_is_true++;
-              }
-            }
-            if( qtd_is_true === 0 ){
-              this.setDataIndex(i, false);
-            }
-          }else{
-            if( !( item_value === filter_item.searchText ) ){
-              this.setDataIndex(i, false);
-            }
-          }          
-        }
-      
-      }
-
-    } // end for
-    
-    this.toResult();
-      
-  }
-
-  private toResult(){
-
-
-    const search_data = [];
-
-    let is_filter = false;
-    for( let i = 0; i < (this.filters).length; i++ ){
-      if( this.filters[i].searchText && this.filters[i].searchText !== '' ){
-        is_filter = true; break;
-      }
-    }
-
-    if( is_filter ){
-      for( let i = 0; i < (this.data).length; i++ ){
-        if( this.data && this.data[i] && this.data[i]['tc_filter_accept'] ){
-          (search_data).push(this.data[i]);
-        }
-      }
-
-      this.result_accept(search_data);
-      this.onFilter.emit({...this.filters});
-      return;
-    }
-
-    this.result_accept(this.data);
-    this.onFilter.emit({...this.filters});
-  }
-
-  setDataIndex(index: number, value: boolean ){
-    if( this.data && this.data[index] ){
-      this.data[index]['tc_filter_accept'] = value;
-    }
-  }
-
-  result_accept(data: any){
-    if( !this.useFilterAccept && data && (data).length > 0 ){
-      for( let i = 0; i < (data).length; i++ ){
-        delete data[i]['tc_filter_accept'];
-      }
-    }
-    this.result.emit(data);
-  }
-
-}

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-filters/tcloud-ui-filters.module.ts

@@ -1,29 +0,0 @@
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { TCloudUiFiltersComponent } from './tcloud-ui-filters.component';
-import { TCloudUiDatepickerTimeModule } from '../tcloud-ui-datepicker-time/tcloud-ui-datepicker-time.module';
-import { TCloudUiRangeDateComponent } from './components/range-date/range-date.component';
-import { TCloudUiDatepickerModule } from '../tcloud-ui-datepicker/tcloud-ui-datepicker.module';
-
-
-
-@NgModule({
-  declarations: [
-    TCloudUiFiltersComponent,
-    TCloudUiRangeDateComponent
-  ],
-  exports: [
-    TCloudUiFiltersComponent,
-    TCloudUiRangeDateComponent  
-  ],
-  imports: [
-    CommonModule,
-    FormsModule,
-    ReactiveFormsModule,
-    TCloudUiDatepickerTimeModule,
-    TCloudUiDatepickerModule
-  ],
-  schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
-})
-export class TCloudUiFiltersModule { }

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-input-password/tcloud-ui-input-password.component.html

@@ -1,38 +0,0 @@
-<div class="tcloud-ui-input-password">
-    <table>
-        <tr>
-            <!-- input password -->
-            <td>
-                <form #_form="ngForm">
-                    <ng-container *ngIf="passwordRegex">
-                        <input class="tc-form-control" *ngIf="mode == 'password'" type="password" name="tc_password" [pattern]="passwordRegex" autoComplete="new-password" [(ngModel)]="innerValue" required>
-                        <input class="tc-form-control" *ngIf="mode == 'text'" type="text" name="tc_text" [pattern]="passwordRegex" [(ngModel)]="innerValue" required>
-                    </ng-container>
-                </form>
-            </td>
-
-            <!-- action show hide -->
-            <td *ngIf="actionView">
-                <button type="button" (click)="toggleMode()" [title]="(mode == 'password') ? 'Visualizar Senha' : 'Esconder Senha'">
-                    <i *ngIf="mode == 'password'" class="far fa-eye-slash"></i>
-                    <i *ngIf="mode == 'text'" class="far fa-eye"></i> 
-                </button>
-            </td>
-
-            <!-- action generate pass -->
-            <td *ngIf="actionGeneratePassword">
-                <button type="button" [title]="'Gerar Senha'" (click)="generatePassword()">
-                    <i class="fa-solid fa-key"></i>
-                </button>
-            </td>
-
-            <!-- action copy pass -->
-            <td *ngIf="actionCopy">
-                <button type="button" [title]="'Copiar Senha'" (click)="copyText()">
-                    <i *ngIf="!isCopy" class="fa-regular fa-copy"></i>
-                    <i *ngIf="isCopy" class="fa-solid fa-check"></i>
-                </button>
-            </td>
-        </tr>
-    </table>
-</div>

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-input-password/tcloud-ui-input-password.component.scss

@@ -1,40 +0,0 @@
-.tcloud-ui-input-password{
-    border: 1px solid var(--tc-gray-300);
-    border-radius: 3px;
-
-    table{        
-        width: 100%;
-
-        td:first-child{
-            width: 100% !important;
-
-            input{
-                width: 100%;
-                border: none;
-                height: 38px;
-                padding-left: 8px;
-            }            
-        }
-        td{
-            width: 50px;
-            height: 40px;
-            background-color: #fff;
-
-            button{
-                background: transparent;
-                border: none;
-                margin-right: 3px;
-                cursor: pointer;
-                color: var(--tc-gray-500);
-
-                &:hover{
-                    color: var(--tc-primary2); 
-                }
-            }
-        }
-    }
-
-    .ng-invalid.ng-touched{
-        border: 1px solid var(--red) !important;
-    }
-}