@dev-tcloud/tcloud-ui 0.1.23 → 2.0.0

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

@@ -0,0 +1,396 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,97 @@
+<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

@@ -0,0 +1,160 @@
+.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;
+  }
+}