@dev-tcloud/tcloud-ui 0.0.95 → 0.0.96

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

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

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

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

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

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

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

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

@@ -0,0 +1,45 @@
+<!-- Input mode -->
+<ng-container *ngIf="modeInput">
+
+  <div class="input-tc-datepicker" [class.no-border]="!useBorder" [class.child-input-date-time]="childInputDateTime" >
+    <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

@@ -0,0 +1,53 @@
+.input_datepicker{
+  width: 100%;
+  max-width: 290px;
+}
+
+.input-tc-datepicker{
+
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  height: 40px;
+
+  &.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;   
+      margin-top: 2px;   
+      font-size: 13px !important;
+    }
+  }
+}
+
+.child-input-date-time{
+  height: 28px !important;
+  
+}