@dev-tcloud/tcloud-ui 0.0.91 → 0.0.92

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

@@ -1,352 +0,0 @@
-import { DataListService } from './services/data-list.service';
-import { Component, forwardRef, OnInit, Output, EventEmitter, ViewChild, Input, OnDestroy, AfterViewChecked } from '@angular/core';
-import { NG_VALUE_ACCESSOR, NgForm, FormGroup, FormBuilder, FormControl } from '@angular/forms';
-import { Subscription } from 'rxjs';
-import { ISelectOptions } from './tcloud-ui-data-list';
-
-export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
-  provide: NG_VALUE_ACCESSOR,
-  useExisting: forwardRef(() => TCloudUiDataListComponent),
-  multi: true
-};
-
-const noop = () => {
-};
-
-
-@Component({
-  selector: 'tcloud-ui-data-list',
-  templateUrl: './tcloud-ui-data-list.component.html',
-  styleUrls: ['./tcloud-ui-data-list.component.scss'],
-  providers: [
-    DataListService, 
-    CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR
-  ],
-})
-export class TCloudUiDataListComponent implements OnInit, OnDestroy, AfterViewChecked {
-
-  viewport_width: number = 0;
-  viewport_height: number = 0;
-  box_height: number = 0;
-  box_style: string = '';
-  menu_on_top: string = '';
-
-  @Input() placeholder: string = '';
-
-  private _disabled: boolean = false;
-  @Input() set disabled(v){
-    if( typeof v === 'boolean' && v !== this._disabled ){
-      this._disabled = v;    
-      //this.selected_description = '';
-      //this.selected_item ='';
-      this.toChange();
-    }
-  }
-  get disabled():boolean { return this._disabled; }
-
-  private _loading: boolean = false;
-  @Input() set loading(v: boolean){
-    if( typeof v === 'boolean' && v !== this._loading ){
-      this._loading = v;    
-      //this.selected_description = '';
-      //this.selected_item = '';
-      this.toChange();
-    }
-  }
-  get loading():boolean { return this._loading; }
-
-
-  @Input() showInput: boolean = true;
-  @Input() search: boolean = true;
-  
-  private _listItems: ISelectOptions[] = [];
-  @Input() set listItems(v: ISelectOptions[]){
-    if( v && (v).length > 0 ){
-      this._listItems = v;
-    }
-  }
-  get listItems():ISelectOptions[] { return this._listItems; }
-
-  private _open: boolean = false;
-  @Input() set open(v: boolean){
-    if( v !== this._open ){
-      this._open = v;
-      if( v ){
-        this.menu_show = false;
-        setTimeout(()=>{ this.toOpen(); });        
-      }
-    }
-  }
-  get open():boolean { return this._open; }
-
-  
-  @Input() border: boolean = true;
-
-  @Output() onInputChange = new EventEmitter<ISelectOptions>();
-  @Output() onChange = new EventEmitter<ISelectOptions>();
-
-  @Output() onOpened = new EventEmitter<any>();
-  @Output() onClosed = new EventEmitter<any>();
-
-  private _ngModel: any | undefined;
-  @Input() set ngModel(v: any){
-    this.selected_item = v;    
-    this.selectDescription();   
-  }
-  @Output() ngModelChange = new EventEmitter<any>();
-
-  list_selected_options = new Array<ISelectOptions>();
-
-  selected_item: any | undefined;
-  selected_description: any | undefined;
-
-  private subscription_value: Subscription | undefined;
-  private subscription_description: Subscription | undefined;
-  private subscription_options: Subscription | undefined;
-
-  menu_show: boolean = false;
-  search_text: string = '';
-  id: string = '';
-
-  formulario: FormGroup | undefined;
-
-  constructor(
-    private dataListService: DataListService,
-    private formBuilder: FormBuilder
-  ){
-
-    this.subscription_value = this.dataListService.stateValue$.subscribe(v => {
-      this.selected_item = v;      
-      this.selectDescription();
-      this.ngModelChange.emit(this.selected_item);
-    })
-
-    this.subscription_description = this.dataListService.stateDescription$.subscribe(v => {
-      this.selected_description = v;      
-    })
-
-
-    this.subscription_options = this.dataListService.stateOptions$.subscribe((v:any) => {
-      if( v && v.value ){
-        (this.list_selected_options).push(v);
-      }
-    })
-
-  }
-
-  ngOnInit(){
-
-    
-
-    this.id = this.generateID();
-
-    this.formulario = this.formBuilder.group({
-      "selected_item": new FormControl('',[]),
-    })
-
-    
-
-    this.toResize();
-    this.toClick();
-  }
-
-  t_fc: any | undefined;
-  ngAfterViewChecked(): void {
-    this.t_fc = undefined;
-    this.t_fc = this.get_selected_description();
-  }
-
-  get_selected_description(): void{
-    if( this.list_selected_options && (this.list_selected_options).length > 0 ){
-      for( let i = 0; i < (this.list_selected_options).length; i++ ){
-        const item = this.list_selected_options[i];
-        if( item.value === this.selected_item ){         
-          if( this.selected_description !== item.description ){
-            if( item.description && item.description !== this.selected_description ){
-              setTimeout(() => {
-                this.selected_description = item.description; 
-                this.dataListService.setActiveItem(this.selected_item);
-              });
-            }
-          }        
-          break;
-        }
-      }
-    } 
-  }
-
-  generateID(): string{
-    return `data-list-${Math.floor(Math.random() * Math.floor(Math.random() * Date.now()))}`;
-  }
-
-  ngOnDestroy() {
-    if( this.subscription_value ){ this.subscription_value.unsubscribe(); }    
-    if( this.subscription_description ){ this.subscription_description.unsubscribe(); } 
-    if( this.subscription_options ){ this.subscription_options.unsubscribe(); } 
-  }
-
-  toSearch(e: any) {
-    let input = (e && e.target && e.target.value) ? e.target.value : '';
-    
-    let filter = ( ( (input).normalize('NFD').replace(/[\u0300-\u036f]/g, "") ).trim() ).toLowerCase();
-    let ul = <any> document.getElementById(`${this.id}-options`);
-    if( ul ){
-      let li = ul.getElementsByTagName("button");
-      for (let i = 0; i < li.length; i++) {
-          const a = li[i];
-          const txtValue = ( ( ( a.textContent || a.innerText ).normalize('NFD').replace(/[\u0300-\u036f]/g, "") ).trim() ).toLowerCase();
-          if (txtValue.indexOf(filter) > -1) {
-              li[i].style.display = "";
-          } else {
-              li[i].style.display = "none";
-          }
-      }
-    }
-  }
-
-  selectDescription(){
-    if( this.list_selected_options && (this.list_selected_options).length > 0 ){
-      for( let i = 0; i < (this.list_selected_options).length; i++ ){
-        const item = this.list_selected_options[i];
-        if( item.value === this.selected_item ){
-          this.selected_description = item.description;
-          this.toChange();
-          return;
-        }
-      }
-    }
-
-    if( this.selected_item === undefined || this.selected_item === null || this.selected_item === '' ){
-      this.selected_description = '';
-      this.toChange();
-    }
-    
-  }
-
-  
-  toInput(e: any){
-    this.onInputChange.emit(this.selected_description);
-    this.onChange.emit(e);
-  }
-
-  toChange(){
-    setTimeout(() => {
-      if( this.selected_item === undefined || this.selected_item === null ){
-        this.selected_item = '';
-      }
-      this.toSearch('');
-      this.search_text = '';
-      this.dataListService.setActiveItem(this.selected_item);
-
-      this.onInputChange.emit(this.selected_description);
-
-      if( this.formulario ){
-        this.formulario?.get('selected_item')?.setValue(this.selected_item);
-        // const input_hidden = document.getElementById(`${this.id}-hidden`);
-        this.toInput(this.formulario.get('selected_item'));
-      }   
-    });
-  }
-
-
-  clearTextSearch(){
-    this.search_text = '';
-    this.toSearch('');
-  }
-
-  toOpen(){
-    this.menu_show = !this.menu_show; 
-    this.resolve_position_dropdown(this.menu_show);
-    this.onOpened.emit();
-  }
-
-  resolve_position_dropdown(open: boolean){
-    if( open ){
-      this.box_style = '';
-      this.menu_on_top = '';   
-      const id = `${this.id}`; 
-      const box = `box-${this.id}`;
-      if( this.viewport_height === 0 ){
-        this.viewport_height = window.innerWidth;
-      }
-      const rect  = document.getElementById(id)?.getBoundingClientRect();
-      const box_position = rect?.bottom || 0;      
-      setTimeout(() => {
-        this.box_height  = document.getElementById(box)?.clientHeight || 0;
-        if( ( this.viewport_height - box_position) < this.box_height ){
-          this.menu_on_top = 'menu-on-top';
-          this.box_style = `top: -${ (this.box_height) }px; height: ${this.box_height}px;`;
-        }
-      });    
-    }
-  }
-
-  toClose(){
-    this.menu_show = false;
-    this.onClosed.emit();
-  }
-
-
-  toResize(){
-    window.addEventListener('resize', () => {
-      this.viewport_width = window.innerWidth;
-      this.viewport_height = window.innerHeight;
-      this.resolve_position_dropdown(this.menu_show);
-    });
-  }
-
-  toClick(){
-    const box = `area-${this.id}`;
-    window.addEventListener('click',(e: any) => {   
-      if( this.menu_show ){
-        if( !(document.getElementById(box)?.contains(e.target)) ){        
-          this.toClose();
-        }
-      }
-    });
-  }
-
-
-  
-  //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.selected_item;
-    };
-
-    //set accessor including call the onchange callback
-    set value(v: any) {
-        if (v !== this.selected_item) {
-            this.selected_item = v;
-            this.onChangeCallback(v);
-        }
-    }
-
-    //Set touched on blur
-    onBlur() {
-        this.onTouchedCallback();
-    }
-
-    //From ControlValueAccessor interface
-    writeValue(value: any) {
-        if (value !== this.selected_item) {
-            this.selected_item = 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-data-list/tcloud-ui-data-list.module.ts

@@ -1,25 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-
-import { TCloudUiDataListComponent } from './tcloud-ui-data-list.component';
-import { TCloudUiDataListOptionComponent } from './tcloud-ui-data-list-option/tcloud-ui-data-list-option.component';
-
-
-
-@NgModule({
-  declarations: [
-    TCloudUiDataListComponent,
-    TCloudUiDataListOptionComponent,
-  ],
-  exports: [
-    TCloudUiDataListComponent,
-    TCloudUiDataListOptionComponent
-  ],
-  imports: [
-    CommonModule,
-    FormsModule,
-    ReactiveFormsModule
-  ]
-})
-export class TCloudUiDataListModule { }

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-data-list/tcloud-ui-data-list.ts

@@ -1,4 +0,0 @@
-export class ISelectOptions{
-  description: any;
-  value: any;
-}

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-datepicker/datepicker/css/datepicker.min.css

@@ -1 +0,0 @@
-.datepicker{display:none}.datepicker.active{display:block}.datepicker-dropdown{left:0;padding-top:4px;position:absolute;top:0;z-index:20}.datepicker-dropdown.datepicker-orient-top{padding-bottom:4px;padding-top:0}.datepicker-picker{background-color:#fff;border-radius:4px;display:inline-block}.datepicker-dropdown .datepicker-picker{box-shadow:0 2px 3px hsla(0,0%,4%,.1),0 0 0 1px hsla(0,0%,4%,.1)}.datepicker-picker span{-webkit-touch-callout:none;border:0;border-radius:4px;cursor:default;display:block;flex:1;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.datepicker-main{padding:2px}.datepicker-footer{background-color:#f5f5f5;box-shadow:inset 0 1px 1px hsla(0,0%,4%,.1)}.datepicker-controls,.datepicker-grid,.datepicker-view,.datepicker-view .days-of-week{display:flex}.datepicker-grid{flex-wrap:wrap}.datepicker-view .days .datepicker-cell,.datepicker-view .dow{flex-basis:14.2857142857%}.datepicker-view.datepicker-grid .datepicker-cell{flex-basis:25%}.datepicker-cell,.datepicker-view .week{height:2.25rem;line-height:2.25rem}.datepicker-title{background-color:#f5f5f5;box-shadow:inset 0 -1px 1px hsla(0,0%,4%,.1);font-weight:700;padding:.375rem .75rem;text-align:center}.datepicker-header .datepicker-controls{padding:2px 2px 0}.datepicker-controls .button{align-items:center;background-color:#fff;border:1px solid #dbdbdb;border-radius:4px;box-shadow:none;color:#363636;cursor:pointer;display:inline-flex;font-size:1rem;height:2.25em;justify-content:center;line-height:1.5;margin:0;padding:calc(.375em - 1px) .75em;position:relative;text-align:center;vertical-align:top;white-space:nowrap}.datepicker-controls .button:active,.datepicker-controls .button:focus{outline:none}.datepicker-controls .button:hover{border-color:#b5b5b5;color:#363636}.datepicker-controls .button:focus{border-color:#3273dc;color:#363636}.datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em rgba(50,115,220,.25)}.datepicker-controls .button:active{border-color:#4a4a4a;color:#363636}.datepicker-controls .button[disabled]{cursor:not-allowed}.datepicker-header .datepicker-controls .button{border-color:transparent;font-weight:700}.datepicker-header .datepicker-controls .button:hover{background-color:#f9f9f9}.datepicker-header .datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em hsla(0,0%,100%,.25)}.datepicker-header .datepicker-controls .button:active{background-color:#f2f2f2}.datepicker-header .datepicker-controls .button[disabled]{box-shadow:none}.datepicker-footer .datepicker-controls .button{border-radius:2px;font-size:.75rem;margin:calc(.375rem - 1px) .375rem;width:100%}.datepicker-controls .view-switch{flex:auto}.datepicker-controls .next-btn,.datepicker-controls .prev-btn{padding-left:.375rem;padding-right:.375rem;width:2.25rem}.datepicker-controls .next-btn.disabled,.datepicker-controls .prev-btn.disabled{visibility:hidden}.datepicker-view .dow{font-size:.875rem;font-weight:700;height:1.5rem;line-height:1.5rem}.datepicker-view .week{color:#b5b5b5;font-size:.75rem;width:2.25rem}@media (max-width:22.5rem){.datepicker-view .week{width:1.96875rem}}.datepicker-grid{width:15.75rem}@media (max-width:22.5rem){.calendar-weeks+.days .datepicker-grid{width:13.78125rem}}.datepicker-cell:not(.disabled):hover{background-color:#f9f9f9;cursor:pointer}.datepicker-cell.focused:not(.selected){background-color:#e8e8e8}.datepicker-cell.selected,.datepicker-cell.selected:hover{background-color:#3273dc;color:#fff;font-weight:600}.datepicker-cell.disabled{color:#dbdbdb}.datepicker-cell.next:not(.disabled),.datepicker-cell.prev:not(.disabled){color:#7a7a7a}.datepicker-cell.next.selected,.datepicker-cell.prev.selected{color:#e6e6e6}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today){background-color:#f5f5f5;border-radius:0}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover{background-color:#eee}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused{background-color:#e8e8e8}.datepicker-cell.today:not(.selected){background-color:#00d1b2}.datepicker-cell.today:not(.selected):not(.disabled){color:#fff}.datepicker-cell.today.focused:not(.selected){background-color:#00c4a7}.datepicker-cell.range-end:not(.selected),.datepicker-cell.range-start:not(.selected){background-color:#b5b5b5;color:#fff}.datepicker-cell.range-end.focused:not(.selected),.datepicker-cell.range-start.focused:not(.selected){background-color:#afafaf}.datepicker-cell.range-start{border-radius:4px 0 0 4px}.datepicker-cell.range-end{border-radius:0 4px 4px 0}.datepicker-cell.range{background-color:#dbdbdb;border-radius:0}.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover{background-color:#d5d5d5}.datepicker-cell.range.disabled{color:#c2c2c2}.datepicker-cell.range.focused{background-color:#cfcfcf}.datepicker-view.datepicker-grid .datepicker-cell{height:4.5rem;line-height:4.5rem}.datepicker-input.in-edit{border-color:#2366d1}.datepicker-input.in-edit:active,.datepicker-input.in-edit:focus{box-shadow:0 0 .25em .25em rgba(35,102,209,.2)}

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-datepicker/datepicker/css/style.css

@@ -1,4 +0,0 @@
-.datepicker-picker{
-  border: 1px solid #ccc;
-  padding: 10px 15px;
-}

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

@@ -1,45 +0,0 @@
-<!-- Input mode -->
-<ng-container *ngIf="modeInput">
-
-  <div class="input-tc-datepicker" [class.no-border]="!useBorder">
-    <table class="table-box-input">
-      <tr>
-        <td class="td-icon">
-          <div class="delimiter-time-icon" (click)="toClickIn(ID)" ><i class="fas fa-calendar-alt"></i></div>
-        </td>
-        <td class="td-date">
-          <input #input_datepicker type="text" name="{{ID}}" id="{{ID}}" class="form-control" >
-        </td>
-      </tr>
-    </table>
-  </div>
-
-  
-  
-</ng-container>
-
-<!-- Inline mode -->
-<ng-container *ngIf="!modeInput">  
-  <div #input_datepicker id="{{ID}}" pattern="/^\d{2}\/\d{2}\/\d{4}$/"></div>
-</ng-container>
-
-
-<!-- EX de uso 
-  <tc-datepicker 
-    [multiple]="false"
-    [daysOfWeekDisabled]="[0,6]"
-    [minDate]="'18/11/2021'"
-    [maxDate]="'18/12/2023'"
-    [datesDisabled]="['12/10/2022','25/12/2022']"
-    [modeInput]="false"
-    [(ngModel)]="dateValue" >
-  </tc-datepicker>
-  
-  // multiple = false
-  // dateValue - string - pode ser: 12/12/2022 
-
-  // multiple = true
-  // dateValue - string - pode ser: 11/12/2022,12/12/2022 ... 
-
-  <pre>data: {{ dateValue }}</pre>
--->

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

@@ -1,44 +0,0 @@
-.input_datepicker{
-  width: 100%;
-  max-width: 290px;
-}
-
-.input-tc-datepicker{
-
-  background-color: #fff;
-  border: 1px solid #ccc;
-  border-radius: 3px;
-
-  &.no-border{
-    border: none !important;
-  }
-
-  .table-box-input{
-    width: 100%;
-
-    .td-icon{
-      width: 14px;
-      .delimiter-time-icon{
-        text-align: center;
-        cursor: pointer;
-        i{
-          position: relative;
-          left: 1px;
-          opacity: 0.5;
-        }
-      }
-    }
-
-    .td-date{
-      width: 101px
-      input{
-        width: 100%;
-      }
-    }
-
-
-    input{
-      border: none;
-    }
-  }
-}