@dev-tcloud/tcloud-ui 2.0.0 → 2.0.2

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

@@ -1,396 +0,0 @@
-import { Component, OnInit, ViewChild, ElementRef, Output, EventEmitter, forwardRef, Input, ViewEncapsulation, ChangeDetectorRef } 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;
-
-  // onChange - Dispara a data selecionada
-  @Output() onChange = new EventEmitter<any|undefined>();
-
-  private _ngModel: any | undefined;
-  @Input() set ngModel(v: any){
-
-    if( v && v !== this.innerValue ){
-      this.innerValue = v; //this.toSetMask(v); 
-      this.onChange.emit(v);
-    } 
-  }
-  @Output() ngModelChange = new EventEmitter<any|undefined>();
-
-  @ViewChild('input_datepicker', {static: false}) input_datepicker: ElementRef<HTMLElement> | undefined;
-  private datepicker: any | undefined;
-  @Input() code: string = 'tcloud-ui-datepicker';
-
-  constructor(
-    private _DateBRPipe: DateBRPipe,
-    private _changeDetectorRef: ChangeDetectorRef
-  ) { }
-
-  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);
-  }
-
-  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'); // Adiciona 1 porque os meses são indexados a partir de 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); // Subtrai 1 porque os meses são indexados a partir de 0
-    }
-
-    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['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 ){
-            this.toSelectedDate( event.detail );
-          }else{
-            this.innerValue = '';
-            this.ngModelChange.emit(this.innerValue);
-          }
-        })
-      }      
-    });
-  }
-
-  toSetDate(){
-    // Ex de uso
-    const dates = ['18/11/2022'];
-    if( this.datepicker ){
-      this.datepicker.setDate(dates);
-    }    
-  }
-
-  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 ){
-      this.datepicker.setDate(dates);      
-    } 
-  }
-
-  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();
-    });
-  }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-  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>

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

@@ -1,160 +0,0 @@
-.input-control-time{
-  background-color: #fff;
-  border: 1px solid #ccc;
-  border-radius: 3px;
-  width: 100%;
-  height: 40px;
-}
-
-.form-control-time{
-  max-width: 220px;
-  border: none;
-
-  input{
-    text-align: center;
-  }
-}
-
-.form-time{
-  width: 100%;
-
-  td:first-child{
-    overflow: hidden;
-  }
-}
-
-.delimiter-time{
-  width: 100%;
-  text-align: center;
-}
-
-.delimiter-time-icon{
-  border: none;
-  height: 35px;
-  width: 10px;
-  padding: 4px;
-  font-size: 17px;
-  text-align: center;
-  opacity: 0.6;
-}
-
-.area-icon{
-  width: 25px;
-}
-
-.area-input-date{
-  width: 100px;
-}
-
-.area-delimiter{
-  width: 2px;
-  text-align: center;
-}
-
-.area-input-hour, .area-input-minute{
-  text-align: center;
-  width: 28px;
-  input{
-    height: 35px;
-    width: 28px;
-    text-align: center;
-    color: #999;
-    font-weight: 600;
-    font-style: italic;
-
-
-    &:focus{
-      outline: none;
-    }
-  }
-}
-
-.area-clean{
-  width: 12px;
-}
-
-input, .datepicker-input{
-  border: none !important;
-}
-
-.select-time-date{
-  border: none;
-  background-color: transparent;
-  width: 40px;
-  height: 35px;
-  padding: 0;
-  text-align: center;
-  font-size: 13px;
-  -webkit-appearance: none;
-  appearance: none;
-  color: #777;
-  position: relative;
-  top: -2px;
-
-  -webkit-appearance: none;  /* Remove estilo padrão do Chrome */
-  -moz-appearance: none; /* Remove estilo padrão do FireFox */
-  appearance: none; /* Remove estilo padrão do FireFox*/
-
-  &:focus{
-    box-shadow: 0 0 0 0;
-    border: 0 none;
-    outline: 0;
-  }
-}
-
-.btn-icon-close{
-  border: none;
-  background-color: #fff;
-  cursor: pointer;
-  padding: 0;
-  color: #aaa;
-  width: 17px;
-  position: relative;
-  top: -20px;
-  z-index: 1;
-
-  &:hover{
-    color: #c43a3a !important
-  }
-}
-
-.icon-short-time{
-  border: none;
-  background: none;
-  cursor: pointer;
-  font-size: 15px;
-  color: #8a8a8a;
-}
-
-.input-options-date{
-  position: relative;
-
-  .description-options-date{
-    position: absolute;
-    left: 0;
-    top: 0;
-    padding: 5px 10px;
-    background-color: #fff;
-    width: 100%;
-    height: 34px;
-    overflow: hidden;
-
-    strong{
-      font-size: 14px;
-      font-weight: normal;
-      padding-left: 5px;
-    }
-  }
-
-  .area-action-date-time-selected{
-    width: 20px;
-    display: block;
-    float: right;
-    text-align: right;
-    position: relative;
-
-    top: -2px;
-    left: 30px;
-    z-index: 1;
-  }
-}