@dev-tcloud/tcloud-ui 2.2.3 → 2.2.4

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

@@ -1,518 +0,0 @@
-import { Component, OnInit, ViewChild, ElementRef, Output, EventEmitter, forwardRef, Input, ViewEncapsulation } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { DateBRPipe } from '../../_pipes';
-
-// https://mymth.github.io/vanillajs-datepicker/#/
-declare var Datepicker: any;
-
-var translation = {
-  ptBR: {
-    days: ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado"],
-    daysShort: ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"],
-    daysMin: ["Do", "Se", "Te", "Qu", "Qu", "Se", "Sa"],
-    months: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
-    monthsShort: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
-    today: "Hoje",
-    clear: "Limpar",
-    titleFormat: "MM y",
-    format: "dd/mm/yyyy",
-    weekStart: 0
-  }
-};
-
-const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
-  provide: NG_VALUE_ACCESSOR,
-  useExisting: forwardRef(() => TCloudUiDatepickerComponent),
-  multi: true
-};
-
-const noop = () => {
-};
-
-@Component({
-  selector: 'tcloud-ui-datepicker',
-  templateUrl: './tcloud-ui-datepicker.component.html',
-  styleUrls: [
-    './tcloud-ui-datepicker.component.scss',
-    './datepicker/css/datepicker.min.css',
-    './datepicker/css/style.css',
-  ],
-  providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR],
-  encapsulation: ViewEncapsulation.None
-})
-export class TCloudUiDatepickerComponent implements OnInit {
-
-  // multiple permite selecionar multiplas datas
-  @Input() multiple: boolean = false;
-
-  // maxNumberOfDates - Maximum number of dates users can select. No limit is applied if 0 is set.
-  // Depende de: multiple como true
-  @Input() maxNumberOfDates: number = 0;
-
-  // daysOfWeekDisabled - Dias da semana desabilidatos = 0 para sabado até 6 para domingo
-  @Input() daysOfWeekDisabled: number[] = [];
-
-  // minDate - Data minima para exibicao do calendario - ex: 01/01/2020
-  @Input() minDate: string = '';
-
-  // maxDate - Data maxima para exibicao do calendario - ex: 31/12/2020
-  @Input() maxDate: string = '';
-
-  // datesDisabled - Datas desabilitadas - Ex: ['12/10/2020','25/12/2020']
-  @Input() datesDisabled: string[] = [];
-
-  // modeInput - Exibe um input para quando clicar abrir o calendario
-  @Input() modeInput: boolean = false;
-
-  @Input() useBorder: boolean = true;
-
-  @Input() childInputDateTime: boolean = false;
-
-  @Input() startViewInMinDate: boolean = false;
-
-  @Input() startViewInMaxDate: boolean = false;
-
-  @Input() disabled: boolean = false;
-
-  // onChange - Dispara a data selecionada
-  @Output() onChange = new EventEmitter<any|undefined>();
-
-  default_innerValue: any | undefined;
-  default_innerValue_convertida: any | undefined;
-  default_qtd_innerValue: number = 0;
-  date_changed: any | undefined;
-
-  @Input() set ngModel(v: any){
-
-    if( v && v !== this.innerValue ){
-      this.innerValue = v; //this.toSetMask(v); 
-      this.default_innerValue = v;
-      this.default_innerValue_convertida = this.convertDates(v);
-      if( this.multiple ){
-        this.default_qtd_innerValue = (v).length;
-      }      
-      this.onChange.emit(v);
-    } 
-  }
-
-  @Output() ngModelChange = new EventEmitter<any|undefined>();
-
-  @Output() onCheckDate = new EventEmitter<any>();
-
-  @ViewChild('input_datepicker', {static: false}) input_datepicker: ElementRef<HTMLElement> | undefined;
-  private datepicker: any | undefined;
-  @Input() code: string = 'tcloud-ui-datepicker';
-
-  constructor(
-    private _DateBRPipe: DateBRPipe
-  ) { }
-
-  ID: string = '';
-
-  ngOnInit(): void {
-    this.ID = this.generateID();
-    Datepicker.locales.ptBR = translation.ptBR;    
-    this.start_datepicker();
-  }
-
-  generateID(): string{
-    return `tcloud-ui-datepicker-${Math.floor(Math.random() * Math.floor(Math.random() * Date.now()))}`;
-  }
-
-  toSetMask(v: string){
-    return this._DateBRPipe.transform(v);
-  }
-
-  parseDateLocal(dateString: any, _split?: string){
-    if( !_split ){ _split = '-'; }
-    const [day , month, year] = dateString.split(_split);
-    return new Date(year, month - 1, day); // Subtrai 1 porque os meses são indexados a partir de 0
-  }
-
-  formatDateLocal(date: any){
-    const year = date.getFullYear();
-    const month = String(date.getMonth() + 1).padStart(2, '0'); // Adiciona 1 porque os meses são indexados a partir de 0
-    const day = String(date.getDate()).padStart(2, '0');
-    return `${day}/${month}/${ year}`;
-  }
-
-  get_options(){
-    // Função para formatar uma data no fuso horário local
-    const formatDateLocal = (date: any) => {
-      const year = date.getFullYear();
-      const month = String(date.getMonth() + 1).padStart(2, '0');
-      const day = String(date.getDate()).padStart(2, '0');
-      return `${year}-${month}-${day}`;
-    }
-
-    // Função para analisar uma data no fuso horário local
-    const parseDateLocal = (dateString: any) => {
-      const [year, month, day] = dateString.split('-');
-      return new Date(year, month - 1, day);
-    }
-
-    let options = {
-      nextArrow: `<i class="fas fa-caret-right"></i>`,
-      prevArrow: `<i class="fas fa-caret-left"></i>`,
-      format: 'dd/mm/yyyy',      
-      daysOfWeekHighlighted: [0,6],
-      language: 'ptBR',
-      formatter: {
-        date: formatDateLocal,
-      },
-      parser: {
-        date: parseDateLocal,
-      }     
-    } as any;
-
-    if( (this.daysOfWeekDisabled).length > 0 ){
-      options['daysOfWeekDisabled'] = this.daysOfWeekDisabled;
-    }
-
-    if( (this.datesDisabled).length > 0 ){
-      options['datesDisabled'] = this.datesDisabled;
-    }
-
-    if( this.minDate !== '' ){
-      options['minDate'] = this.minDate;
-    }
-
-    if( this.maxDate !== '' ){
-      options['maxDate'] = this.maxDate;
-    }
-
-    if( this.multiple ){  
-      options['multiple'] = true;  
-      options['autohide'] = false; 
-      options['maxNumberOfDates'] = this.maxNumberOfDates;
-    }
-    
-    return options;
-  }
-
-  clearDate(){
-    if( this.datepicker ){ this.datepicker.setDate({clear: true}); }
-  }
-
-  start_datepicker(){
-    setTimeout(() => {     
-      const input_datepicker = <any> this.input_datepicker?.nativeElement;
-      if( input_datepicker ){
-        input_datepicker.setAttribute('placeholder','DD/MM/YYYY');
-
-        if( !this.useBorder ){
-          input_datepicker.setAttribute('style','border:none; text-align: center; max-width: 105px; padding: 0;');
-        }
-        
-        this.datepicker = new Datepicker( input_datepicker, this.get_options() );        
-        if( this.innerValue && this.innerValue !== '' ){
-          this.toSetDefaultDate(this.innerValue);
-        }
-
-        input_datepicker.addEventListener('keyup', (event: any) => {
-          const v = (input_datepicker['value']) ? input_datepicker['value'] : '';
-          input_datepicker['value'] = this.toSetMask(v);
-          if( (input_datepicker['value']).length >= 10 ){
-            const v = (input_datepicker['value']).substring(0, 10);
-            const part_date = (v).split('/');
-            if( (part_date).length === 3 ){
-
-              let dia = part_date[0];
-              let mes = part_date[1];
-              let ano = part_date[2];
-
-              mes = (+(mes) < 10 ) ? `0${+mes}` : mes;  
-              dia = (+(dia) < 10 ) ? `0${+dia}` : dia;
-
-              const dt = new Date(ano+'-'+mes+'-'+dia);
-              if( dt ){
-                input_datepicker?.changeDate;
-                document.getElementById(this.ID)?.blur();
-                this.onChange.emit(this.innerValue);
-                this.ngModelChange.emit(this.innerValue);
-              }
-            }
-          }else{
-            this.innerValue = undefined;
-            this.onChange.emit(this.innerValue);
-            this.ngModelChange.emit(this.innerValue);
-          }
-        })
-
-       
-        input_datepicker.addEventListener('changeDate', (event: any) => {
-
-          if( event?.detail?.date ){
-
-            let qtd = (event.detail.date).length;  
-
-            if( this.disabled ){
-
-              if( !this.multiple ){
-                let dt = this.formatDateLocal(event.detail?.date);
-                if( this.default_innerValue && this.default_innerValue[0] && ( `${this.default_innerValue[0]}` !== `${dt}` ) ){
-                  qtd = 1
-                }
-              }
-             
-              this.datepicker.setDate( this.default_innerValue_convertida, {clear: true, render: true});
-              
-              if( qtd > this.default_qtd_innerValue ){
-                this.date_changed = event?.detail.viewDate;
-                this.datepicker.setFocusedDate( this.date_changed, {resetView: false} );
-
-                this.onCheckDate.emit({
-                  value: this.formatDateLocal(this.date_changed), 
-                  date: this.date_changed, 
-                  checked: true,
-                  disabled: this.disabled
-                });
-              }else{
-
-                if( this.multiple ){
-                  const so = this.findDifferences( this.default_innerValue, this.formatArrayDates(event.detail.date) );
-                  if( so && (so).length > 0 ){
-
-                    this.date_changed = this.parseDateLocal(so[0], '/');
-                    this.onCheckDate.emit({
-                      value :so[0], 
-                      date: this.date_changed,
-                      checked: false,
-                      disabled: this.disabled
-                    });
-                  }
-                }
-
-                this.datepicker.setFocusedDate( this.date_changed, {resetView: false} );
-              }
-            }else{
-
-
-              this.toSelectedDate( event.detail );
-            }
-          }else{
-            this.innerValue = '';
-            this.ngModelChange.emit(this.innerValue);
-          }
-        })
-      }      
-    });
-  }
-
-
-  toSetDefaultDate(date: string | string[]){
-    
-    if( date === undefined || date === null || date === '' ){
-      this.clearDate();
-      return;
-    }
-
-    let dates = [] as string[];
-
-    if( date && typeof date === 'string' ){
-      if( (date).includes(',') ){
-        const dates = (date).split(',');
-        date = dates;
-        if( !this.multiple ){
-          this.innerValue = date = dates[0];
-          this.ngModelChange.emit(this.innerValue); 
-        }
-      }
-    }
-    
-    if( date && typeof date === 'string' ){
-      (dates).push( date ); 
-    }else{
-      dates = <Array<string>> date;
-    }
-    if( this.datepicker ){
-
-      if( dates && dates.length > 0 && this.multiple ){
-        if( this.startViewInMinDate ){          
-          dates = this.sortDatesDescending(dates);          
-        }else if(this.startViewInMaxDate){
-          dates = this.sortDatesAscending(dates); 
-        }
-      }
-      this.datepicker.setDate(dates);      
-    } 
-  }
-
-  convertDates(arrayDeDatas: any[]) {
-    const formatDate = (dateString: any) => {
-      const [day, month, year] = dateString.split('/');
-      return new Date(year, month - 1, day); 
-    }
-    if( arrayDeDatas && Array.isArray(arrayDeDatas) ){
-      const datasOrdenadas = arrayDeDatas.map((data: any) => ({ original: data, convertida: formatDate(data) }));
-      return datasOrdenadas.map(item => item.convertida); 
-    }else{
-      return [arrayDeDatas];
-    }
-  }
-
-  sortDatesDescending(arrayDeDatas: any[]) {
-    const formatDate = (dateString: any) => {
-      const [day, month, year] = dateString.split('/');
-      return new Date(year, month - 1, day); 
-    }
-    const datasOrdenadas = arrayDeDatas.map((data: any) => ({ original: data, convertida: formatDate(data) })).sort((a:any, b: any) => b.convertida - a.convertida);
-    const datasOrdenadasFormatadas = datasOrdenadas.map(item => item.original); 
-    return datasOrdenadasFormatadas;
-  }
-  
-  sortDatesAscending(arrayDeDatas: any[]) {
-    const formatDate = (dateString: any) => {
-      const [day, month, year] = dateString.split('/');
-      return new Date(year, month - 1, day); 
-    }
-    const datasOrdenadas = arrayDeDatas.map((data: any) => ({ original: data, convertida: formatDate(data) })).sort((a:any, b: any) => a.convertida - b.convertida);
-    const datasOrdenadasFormatadas = datasOrdenadas.map(item => item.original);
-    return datasOrdenadasFormatadas;
-  }
-
-  toSelectedDate(detail: any){    
-    if( detail.datepicker.dates && (detail.datepicker.dates).length > 0 ){
-      if( this.multiple ){
-        let dates = [];
-        for( let i = 0; i < (detail.datepicker.dates).length; i++ ){
-          const timeStamp = <number> detail.datepicker.dates[i];
-          (dates).push( this.format_date( timeStamp ) );
-        }
-        this.innerValue = dates;
-        this.onChange.emit(this.innerValue);        
-      }else{
-        const timeStamp = <number> detail.datepicker.dates[0];
-        const date = this.format_date( timeStamp );
-        this.onChange.emit(date);
-        this.innerValue = date;
-      }      
-    }else{
-      this.clearDate();
-      this.innerValue = null;
-      this.onChange.emit(this.innerValue);
-    } 
-    this.value = this.innerValue;
-    this.ngModelChange.emit(this.innerValue); 
-  }
-
-  format_date(timeStamp: number){
-    var date = new Date(timeStamp);
-
-    let dia = `${date.getDate()}`;
-    let mes = `${date.getMonth()+1}`;
-    let ano = `${date.getFullYear()}`;
-
-    dia = (+(dia) < 10 ) ? `0${+dia}` : dia;
-    mes = (+(mes) < 10 ) ? `0${+mes}` : mes; 
-
-    const dateFormat = `${dia}/${mes}/${ano}`;
-    return dateFormat;
-  }
-
-  toClickIn(id: string){
-    const element = document.getElementById(id) as any;
-    setTimeout(() => {      
-      element?.datepicker?.show();
-    });
-  }
-
-
-
-  findDifferences(array1: any, array2: any) {
-    const conjuntoComum = new Set([...array1, ...array2]);
-    return Array.from(conjuntoComum).filter(item => !(array1.includes(item) && array2.includes(item)));
-  }
-
-
-
-  formatArrayDates(array_dates: any){
-    let formateds = [];
-    if( array_dates && (array_dates).length > 0 ){
-      const formatDateLocal = (date: any) => {
-        const year = date.getFullYear();
-        const month = String(date.getMonth() + 1).padStart(2, '0'); // Adiciona 1 porque os meses são indexados a partir de 0
-        const day = String(date.getDate()).padStart(2, '0');
-        return `${day}/${month}/${year}`;
-      }
-      for( let i = 0; i < (array_dates).length; i++ ){
-        const dt = array_dates[i];
-        (formateds).push( formatDateLocal(dt) )
-      }
-    }
-    return formateds;
-  }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-  innerValue: any | undefined;
-  //Placeholders for the callbacks which are later providesd
-  //by the Control Value Accessor
-  private onTouchedCallback: () => void = noop;
-  private onChangeCallback: (_: any) => void = noop;
-
-  //get accessor
-  get value(): any {
-      return this.innerValue;
-  };
-
-  //set accessor including call the onchange callback
-  set value(v: any) {
-
-    if (v !== this.innerValue) {
-      this.innerValue = v; // this.toSetMask(v);      
-      this.onChangeCallback(v);
-    }else{
-     // this.innerValue = '';
-    }
-  }
-
-  //Set touched on blur
-  onBlur() {
-    this.onTouchedCallback();
-  }
-
-  //From ControlValueAccessor interface
-  writeValue(value: any) {
-    if (value !== this.innerValue) {
-      this.innerValue = value;
-      this.toSetDefaultDate(value);
-    }
-  }
-
-  //From ControlValueAccessor interface
-  registerOnChange(fn: any) {
-    this.onChangeCallback = fn;
-  }
-
-  //From ControlValueAccessor interface
-  registerOnTouched(fn: any) {
-    this.onTouchedCallback = fn;
-  }
-
-}

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

@@ -1,22 +0,0 @@
-import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { TCloudUiDatepickerComponent } from './tcloud-ui-datepicker.component';
-
-
-
-@NgModule({
-  declarations: [
-    TCloudUiDatepickerComponent
-  ],
-  exports: [
-    TCloudUiDatepickerComponent
-  ],
-  imports: [
-    CommonModule,
-    FormsModule,
-    ReactiveFormsModule
-  ],
-  schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
-})
-export class TCloudUiDatepickerModule { }

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-datepicker-time/tcloud-ui-datepicker-time.component.html

@@ -1,97 +0,0 @@
-<div class="tcloud-ui-datepicker-time">
-  <input type="hidden" value="{{ innerValue }}" #_datepickertime >
-  <form #_formulario="ngForm">
-    <div class="input-control-time">
-      <div class="form-control-time">
-
-        <table style="width: 100%;">
-          <tr>
-            <td>
-
-              <div class="input-options-date">
-              <table class="form-time">
-                <tr>
-                  <!-- <td class="area-icon"><div class="delimiter-time-icon" (click)="toClickIn(ID)" ><i class="fas fa-calendar-alt"></i></div></td> -->
-                  <td class="area-input-date">
-                    <ng-container *ngIf="show_date_picker">
-                      <tcloud-ui-datepicker #_tclouddatepickertime [childInputDateTime]="true" [modeInput]="true" name="date" [useBorder]="false" [(ngModel)]="DD_MM_YYYY" (onChange)="toSetDate($event)" ></tcloud-ui-datepicker>
-                    </ng-container>
-                  </td>
-                  
-                  <td class="area-delimiter"><div class="delimiter-time"></div></td>
-                  <td class="area-input-hour">
-                    <!--<input type="text" placeholder="HH" (keyup)="toSetTime()" [(ngModel)]="HH" maxlength="2" name="hh" pattern="[0][0-9]|[1][0-9]|2[0-3]">-->
-                    <select class="select-time-date" (change)="toSetTime()" [(ngModel)]="HH" name="hh">
-                      <ng-container *ngFor="let hh of option_HH">
-                        <option [ngValue]="hh">{{ hh }}</option>
-                      </ng-container>
-                    </select>
-                  </td>
-                  <td class="area-delimiter"><div class="delimiter-time">:</div></td>
-                  <td class="area-input-minute">
-                    <!--<input type="text" placeholder="MM" (keyup)="toSetTime()" [(ngModel)]="MM" maxlength="2" name="mm" pattern="[012345][0-9]">-->
-                    <select class="select-time-date" (change)="toSetTime()" [(ngModel)]="MM" name="mm">
-                      <ng-container *ngFor="let mm of option_MM">
-                        <option [value]="mm">{{ mm }}</option>
-                      </ng-container>
-                    </select>
-                  </td>
-                  <td class="area-clean"></td>
-                </tr>
-              </table>
-
-              <div class="description-options-date" *ngIf="value_options_date_time !== ''">
-                <strong>{{ description_options_date_time }}</strong>
-
-                  <!-- <div class="area-action-date-time-selected">
-                    <button class="btn-icon" type="button" (click)="closedTimeDescription()" >
-                      <i class="fas fa-times"></i>
-                    </button>                  
-                  </div> -->
-              </div>
-
-
-            </div>
-
-            </td>
-            <td *ngIf="useOptionsDateTime && options_date_time && (options_date_time).length > 0" style="width: 20px">
-              <button type="button" class="icon-short-time" (click)="open_options_date_time = !open_options_date_time" [title]="description_options_date_time" >
-                <i *ngIf="!open_options_date_time" class="fas fa-caret-down"></i>
-                <i *ngIf="open_options_date_time" class="fas fa-caret-up"></i>
-              </button>
-
-              <ng-container *ngIf="value_options_date_time !== ''">
-                <button class="btn-icon-close" type="button" (click)="closedTimeDescription()" >
-                  <i class="fas fa-times"></i>
-                </button> 
-              </ng-container>
-
-            </td>
-          </tr>
-          <tr *ngIf="useOptionsDateTime && options_date_time && (options_date_time).length > 0 && open_options_date_time">
-            <td colspan="2">
-                <tcloud-ui-data-list 
-                  name="value_options_date_time"
-                  [showInput]="false" 
-                  [search]="false" 
-                  [open]="true" 
-                  [listItems]="options_date_time" 
-                  (onClosed)="onClosedOptionsDateTime()"
-                  [ngModel]="value_options_date_time"
-                  (ngModelChange)="onChangeOptionsDateTime($event)"
-                  >
-                </tcloud-ui-data-list>
-
-                
-
-
-              
-            </td>
-          </tr>
-        </table>
-
-        
-      </div>
-    </div>
-  </form>
-</div>