@dev-tcloud/tcloud-ui 2.2.3 → 2.2.5

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;
-  }
-}

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

@@ -1,369 +0,0 @@
-import { Component, forwardRef, OnInit, EventEmitter, Output, Input, ViewChild, ElementRef } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { ISelectOptions } from '../tcloud-ui-data-list/tcloud-ui-data-list';
-
-const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
-  provide: NG_VALUE_ACCESSOR,
-  useExisting: forwardRef(() => TCloudUiDatepickerTimeComponent),
-  multi: true
-};
-
-const noop = () => {
-};
-
-@Component({
-  selector: 'tcloud-ui-datepicker-time',
-  templateUrl: './tcloud-ui-datepicker-time.component.html',
-  styleUrls: ['./tcloud-ui-datepicker-time.component.scss'],
-  providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
-})
-export class TCloudUiDatepickerTimeComponent implements OnInit {
-
-  show_date_picker: boolean = true;
-
-  private _ngModel: any | undefined;
-  @Input() set ngModel(v: any){
-    if( v && v !== this.innerValue ){
-      this.innerValue = v; 
-    } 
-  }
-  @Output() ngModelChange = new EventEmitter<Date>();
-
-  @Output() onChange = new EventEmitter<Date>();
-  @Output() eventChange = new EventEmitter<any>();
-
-  @Input() useOptionsDateTime = false;
-
-  DD_MM_YYYY: string = '';
-  HH: string = '00';
-  MM: string = '00';
-
-  ID: string = '';
-
-  option_HH: string[] | undefined;
-  option_MM: string[] | undefined;
-
-  @ViewChild('_datepickertime', {static: false}) datepickertime: ElementRef<HTMLElement> | undefined;
-
-  options_date_time : ISelectOptions[] = [];
-  open_options_date_time: boolean = false;
-
-  last_options_date_time: any;
-  description_options_date_time: any = '';
-  value_options_date_time: any = '';
-
-  ngOnInit(): void {
-
-
-    this.setOptionsDateTime();
-
-    this.ID = this.generateID();
-    this.option_HH = this.getListTIME(23);
-    this.option_MM = this.getListTIME(59);
-  }
-
-  setOptionsDateTime(){
-    this.options_date_time = [
-      {value:'7-days', description: '7 dias'},
-      {value:'15-days', description: '15 dias'},
-      {value:'30-days', description: '30 dias'},
-      {value:'current-month', description: 'Mês atual até agora'},
-      {value:'current-year', description: 'Ano atual até agora'}
-    ]
-  }
-
-  generateID(): string{
-    return `tcloud-ui-datepicker-time-${Math.floor(Math.random() * Math.floor(Math.random() * Date.now()))}`;
-  }
-
-  getListTIME(v: number){
-    let mm = [];
-    for(let i = 0; i <= v; i++ ){
-      if( i < 10 ){
-        (mm).push(`0${i}`);
-      }else{
-        (mm).push(`${i}`);
-      }
-    }
-    return mm;
-  }
-
-  toSetDate(date: string){    
-    this.set_date_by_datepicker(date);
-  }
-
-  toSetTime(){
-    if( this.DD_MM_YYYY && ((this.DD_MM_YYYY).trim()).length === 10){
-      const date = (this.DD_MM_YYYY).replace(/-/g, '/');
-      let date_part = (date).split('/');
-      let dd = date_part[0];
-      let mm = date_part[1];
-      let yy = date_part[2];
-      const datetime = new Date(`${yy}-${mm}-${dd}`);
-      if( this.checkIsDate(datetime) ){
-        this.set_date_by_datepicker(date);
-      }
-    }
-  }
-
-  set_date_by_datepicker(date: string){
-
-    if( date ){
-      date = (date).replace(/-/g, '/');
-      let date_part = (date).split('/');
-      let dia = date_part[0];
-      let mes = date_part[1];
-      let ano = date_part[2];
-
-      let hh = this.HH;
-      if( !hh ){
-        hh = '00';
-      }else{
-        if( ( +(hh) >= 0 && +(hh) < 24 ) ){
-          hh = (+(hh) < 10 ) ? `0${+(hh)}` : `${+(hh)}`;
-        }else{
-          hh = '00';
-        }
-      }
-
-      let mm = this.MM;
-      if( !mm ){
-        mm = '00';
-      }else{
-        if( ( +(mm) >= 0 && +(mm) < 60 ) ){
-          mm = (+(mm) < 10 ) ? `0${+(mm)}` : `${+(mm)}`;
-        }else{
-          mm = '00';
-        }
-      }
-
-      if( hh === '00' ){ this.HH = hh; }
-      if( mm === '00' ){ this.MM = mm; }
-
-      const notation = '00';
-
-      const str_date = `${ano}-${mes}-${dia}T${hh}:${mm}:${notation}`;
-      const datetime = new Date( str_date );
-      
-      if( this.checkIsDate(datetime) ){
-        this.innerValue = datetime;
-      }else{
-        this.innerValue = undefined;
-      }
-
-      // console.log('this.datepickertime?.nativeElement', this.datepickertime?.nativeElement);
-
-      // if(this.datepickertime && this.datepickertime.nativeElement){
-      //   const elem = <any> this.datepickertime.nativeElement;
-      //   elem.value = this.innerValue;
-      // }
-
-      this.ngModelChange.emit( this.innerValue );
-      this.onChange.emit( this.innerValue );
-      this.eventChange.emit( this.datepickertime?.nativeElement );
-
-    }else{
-
-      this.description_options_date_time = '';
-      this.value_options_date_time = '';
-
-      this.innerValue = undefined;
-      this.ngModelChange.emit( this.innerValue );
-      this.onChange.emit( this.innerValue );
-      this.eventChange.emit( this.datepickertime?.nativeElement );
-    }
-
-    if( `${this.last_options_date_time}` !== `${this.innerValue}` ){
-      // this.description_options_date_time = '';
-      // this.value_options_date_time = '';
-    }
-
-  }
-
-  // Distribuir os valores da data por pedaços: data - hora - min
-  to_date_hh_mm(d: Date){
-    let dia = `${(d).getDate()}`;
-    dia = (+(dia) < 10 ) ? `0${+dia}` : dia;
-    let mes = `${(d).getMonth()+1}`;
-    mes = (+(mes) < 10 ) ? `0${+mes}` : mes;  
-
-    let ano = `${(d).getFullYear()}`;
-    let hh  = `${(d).getHours()}`;
-    let mm  = `${(d).getMinutes()}`;
-
-    if( hh && ( +(hh) < 0 || +(hh) > 23 ) ){ hh = '00'; }
-    hh = (hh) ? ( (+(hh) < 10 ) ? `0${hh}` : hh ) : '00';
-
-    if( mm && ( +(mm) < 0 || +(mm) > 59 ) ){ mm = '00'; }
-    mm = (mm) ? ( (+(mm) < 10 ) ? `0${mm}` : mm ) : '00';
-
-    this.MM = mm;
-    this.HH = hh;
-
-    this.DD_MM_YYYY = `${dia}/${mes}/${ano}`;
-  }
-
-  checkIsDate(d: any): boolean{
-
-    if(Object.prototype.toString.call(d) === "[object Date]") {
-      if(isNaN(d)) { return false; } else { return true; }
-    } 
-    return false;
-  }
-
-
-  clean(){
-    this.DD_MM_YYYY = '';
-    this.HH = '00';
-    this.MM = '00';
-    this.description_options_date_time = '';
-    this.value_options_date_time = '';
-  }
-
-  toClickIn(id: string){
-    document.getElementById(id)?.focus();
-  }
-
-  onClosedOptionsDateTime(){
-    this.open_options_date_time = false
-  }
-
-  
-  onChangeOptionsDateTime(event: any){
-    // this.description_options_date_time = '';
-    // this.value_options_date_time = '';
-    this.show_date_picker = false;
-
-    let now = new Date();
-    let filter_date: any = undefined;
-    if( event === '7-days' ){
-      filter_date = new Date( (new Date(now)).setDate( now.getDate() - 7 ) );  
-      filter_date = new Date( (filter_date).setSeconds(0) );      
-    }
-
-    if( event === '15-days' ){
-      filter_date = new Date( (new Date(now)).setDate( now.getDate() - 15 ) );
-      filter_date = new Date( (filter_date).setSeconds(0) );
-    }
-
-    if( event === '30-days' ){
-      filter_date = new Date( (new Date(now)).setDate( now.getDate() - 30 ) );
-      filter_date = new Date( (filter_date).setSeconds(0) );
-    }
-
-    if( event === 'current-month' ){
-      filter_date = new Date(now.getFullYear(), now.getMonth(), 1);
-    }
-
-    if( event === 'current-year' ){
-      filter_date = new Date(now.getFullYear(), 0, 1);
-    }
-
-    if(filter_date){      
-      this.innerValue = filter_date;
-      if( this.checkIsDate(filter_date) ){              
-        setTimeout(() => {
-          this.to_date_hh_mm(filter_date);
-          this.toSetDate(this.DD_MM_YYYY);  
-          this.show_date_picker = true;
-          this.value_options_date_time = event;
-          this.last_options_date_time = filter_date as any;
-          this.description_options_date_time = this.get_description_options_date_time(event);
-        });       
-      }
-    }
-
-  }
-
-
-  get_description_options_date_time(value: string){
-    if( this.options_date_time && (this.options_date_time).length > 0 ){
-      for( let i = 0; i < (this.options_date_time).length; i++ ){
-        const item = this.options_date_time[i];
-        if( item.value === value ){
-          return item.description;
-        }
-      }
-    }
-    return '';
-  }
-
-
-  closedTimeDescription(){
-    this.value_options_date_time = '';
-    this.description_options_date_time = ''; 
-  }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-  
-  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.onChangeCallback(v);
-    }
-  }
-
-  //Set touched on blur
-  onBlur() {
-    this.onTouchedCallback();
-  }
-
-  //From ControlValueAccessor interface
-  writeValue(value: any) {
-    if (value !== this.innerValue) {
-
-      try {
-        value = new Date( `${value}` );
-      } catch (error) {}
-
-      this.innerValue = value;
-      if( this.checkIsDate(value) ){
-        this.to_date_hh_mm(value);
-      }else{
-        this.clean()
-      }
-    }
-  }
-
-  //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-time/tcloud-ui-datepicker-time.module.ts

@@ -1,24 +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 { TCloudUiDatepickerTimeComponent } from './tcloud-ui-datepicker-time.component';
-import { TCloudUiDatepickerModule } from './../tcloud-ui-datepicker/tcloud-ui-datepicker.module';
-import { TCloudUiDataListModule } from '../tcloud-ui-data-list/tcloud-ui-data-list.module';
-
-@NgModule({
-  declarations: [
-    TCloudUiDatepickerTimeComponent
-  ],
-  exports: [
-    TCloudUiDatepickerTimeComponent
-  ],
-  imports: [
-    CommonModule,
-    TCloudUiDatepickerModule,
-    FormsModule,
-    ReactiveFormsModule,
-    TCloudUiDataListModule
-  ],
-  schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
-})
-export class TCloudUiDatepickerTimeModule { }

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-filters/components/range-date/range-date.component.html

@@ -1,54 +0,0 @@
-<table class="tcloud-ui-filters-range-date area-range-date">
-    <tr>
-
-        <td>
-            <div *ngIf="mode === 'select'">
-                <div class="description-period">Período</div>
-                <select name="periodo" class="tc-form-control" (change)="onChangeOptionsDateTime($event.target)" [(ngModel)]="defaultValuePeriodStartStop"  >
-                    <option value=""></option> 
-                    <ng-container *ngFor="let item of options_date_time">
-                        <option [value]="item.value">{{ item.description }}</option>
-                    </ng-container>
-                </select>
-            </div>
-            <div *ngIf="mode === 'datepickers'">
-
-                <table class="area-range-datepickers">
-                    <tr>
-                        <td>
-                            <div class="description-start">{{ descriptionStart }}</div>
-                            <tcloud-ui-datepicker-time 
-                                #_input_start 
-                                [(ngModel)]="result.start" 
-                                name="input_start" 
-                                (eventChange)="onChangeStartDateTime(_input_start)">
-                            </tcloud-ui-datepicker-time>
-                        </td>
-                        <td>
-                            <div class="description-stop">{{ descriptionStop }}</div>
-                            <tcloud-ui-datepicker-time 
-                                #_input_stop
-                                [(ngModel)]="result.stop" 
-                                name="input_stop" 
-                                (eventChange)="onChangeStopDateTime(_input_stop)">
-                            </tcloud-ui-datepicker-time>
-                        </td>
-                    </tr>
-                </table>
-
-            </div>
-        </td>
-
-        <td>
-            <button class="btn-mode-range-date" [class.active]="mode === 'select'" (click)="toggle()" type="button">
-
-                <i *ngIf="mode === 'select'" class="far fa-calendar-alt" title="Alterar para calendário"></i>
-                <i *ngIf="mode !== 'select'" class="fas fa-calendar-week" title="Selecionar período"></i>
-
-                <!-- <div *ngIf="mode === 'select'">Exibir<br>Calendário</div> -->
-                <!-- <div *ngIf="mode !== 'select'">Exibir<br>Período</div> -->
-            </button>
-        </td>
-
-    </tr>
-</table>

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-filters/components/range-date/range-date.component.scss

@@ -1,68 +0,0 @@
-.area-range-date{
-    height: 40px;
-    width: 100%;
-    tr{
-
-        td:first-child{
-            width: calc(100% - 35px);
-            select{
-                color: #535353;
-                border-radius: 3px 0 0 3px !important;
-            }
-
-            .area-range-datepickers{
-                width: 100%;
-                td{
-                    width: 50% !important;
-                }
-            }
-
-        }
-
-        td:last-child{
-            width: 35px;
-
-            .btn-mode-range-date{
-                width: 100%;
-                text-align: center;
-                border: 1px solid #ccc;
-                background-color: #fff;
-                font-size: 17px;
-                line-height: 1;
-                cursor: pointer;
-                color: #6c6c6c;
-                height: 40px;
-                border-radius: 0 3px 3px 0;
-                &:focus{
-                    color: #403d3d;
-                }
-            }
-        }
-    }
-
-}
-
-
-.active{
-    background-color: #eee !important;
-}
-
-.description-period{
-    position: relative;
-    left: 17px;
-    top: -15px;
-    line-height: 0;
-}
-
-.description-start{
-    position: relative;
-    left: 17px;
-    top: -15px;
-    line-height: 0;
-}
-
-.description-stop{
-    position: relative;
-    top: -15px;
-    line-height: 0;
-}