@dev-tcloud/tcloud-ui 0.1.23 → 2.0.0

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

@@ -0,0 +1,364 @@
+import { Component, Input, OnDestroy, OnInit, forwardRef, ViewChild, ElementRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl, Validator } from '@angular/forms';
+
+const  CUSTOM_INPUT_VALIDATORS: any = { 
+  provide: NG_VALIDATORS, 
+  useExisting: forwardRef(() => TCloudUiMultiplesValuesComponent),
+  multi: true
+}
+
+const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => TCloudUiMultiplesValuesComponent),
+  multi: true
+};
+
+const noop = () => {
+};
+
+@Component({
+  selector: 'tcloud-ui-multiples-values',
+  templateUrl: './tcloud-ui-multiples-values.component.html',
+  styleUrls: ['./tcloud-ui-multiples-values.component.scss'],
+  providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, CUSTOM_INPUT_VALIDATORS]
+})
+export class TCloudUiMultiplesValuesComponent implements OnInit, OnDestroy, Validator  {
+
+  viewport_width: number = 0;
+  viewport_height: number = 0;
+  box_height: number = 0;
+  box_style: string = '';
+  menu_on_top: string = '';
+  search_text: string = '';
+
+  id: string = '';
+  show_itens: boolean = false;
+
+  
+
+  input_items: string = '';
+
+  items = [] as string[];
+
+  private _listItems: any | undefined;
+  @Input() set listItems(v: any | undefined){
+    if( v !== this._listItems ){
+      this._listItems = v;
+    }
+  }
+  get listItems():any | undefined { return this._listItems; }
+ 
+  @Input() pattern: RegExp | any = null;
+  @Input() delimiter: string = ',';
+  @Input() placeholder: string = '';
+  @Input() disabled: boolean = false;
+  @Input() loading: boolean = false;
+  @Input() required: string | undefined;
+  @Input() search: boolean = true;
+  @Input() uppercase: boolean = false;
+  @Input() lowercase: boolean = false;
+
+  use_validation_required: boolean = false;
+
+  placeholder_list: string = '';
+
+  constructor() { }
+
+  ngOnInit(): void {
+    this.id = this.generateID();
+    this.toResize();
+    this.toClick();
+    this.set_placeholder_list();
+  }
+
+  check_is_valid(): boolean{
+    if( this.items ){
+      return ((this.items).length > 0) ? true : false;
+    }
+    return false;
+  }
+
+  generateID(): string{
+    return `multiple-values-${Math.floor(Math.random() * Math.floor(Math.random() * Date.now()))}`;
+  }
+
+  remove_duplicates(items: string[]): string[] {
+    return [...new Set(items)];
+  }
+
+ 
+  add_items_by_data_list(e: any){
+    this.input_items = e;
+    this.add_items();
+  }
+
+  add_items(){
+
+    if( this.disabled ){ return; }
+
+    const input_items = this.input_items;
+
+    this.input_items = '';
+    
+    let items = [];
+    if( input_items && input_items !== '' ){
+
+      items = <any> (input_items).split(this.delimiter);
+
+    }
+
+    if( (items).length === 0 ){
+      if( input_items && input_items !== '' ){
+        let txt = `${(input_items).trim()}`;
+        items = [txt];
+      }
+    }
+
+    //items = [...new Set(items)];
+
+    for( let i = 0; i < (items).length; i++){
+      let txt = `${(items[i]).trim()}`;
+
+      if( this.uppercase ){
+        if( txt && txt !== '' ){
+          txt = (txt).toLocaleUpperCase();
+        }        
+      }
+
+      if( this.lowercase ){
+        if( txt && txt !== '' ){
+          txt = (txt).toLocaleLowerCase();
+        }
+      }
+
+      if( txt && txt !== '' ){
+        (this.items).push(txt);
+      }
+      
+    }
+
+    this.items = this.remove_duplicates(this.items);
+    this.set_placeholder_list();
+  }
+
+  set_placeholder_list(){
+    let placeholder_list = '';
+    let delimiter = '';
+    const items = this.items;
+    if( items && (items).length > 0 ){
+      for( let i = 0; i < (items).length; i++){
+        placeholder_list +=  delimiter + `${(items[i]).trim()}`;
+        delimiter = `${this.delimiter} `;
+      }
+    }
+    this.placeholder_list = (placeholder_list !== '') ? placeholder_list : this.placeholder;
+    this.onChangeTouched();
+    this.onChangeCallback(this.items);
+  }
+
+
+  removeItem(item: any, index: number): void{
+    if( this.disabled ){ return; }
+    if( this.items ){
+      for( let i = 0; i < (this.items).length; i++ ){
+        const row = this.items[i];
+        if( item === row && i === index ){
+          (this.items).splice(index,1);
+          break;
+        }
+      }
+    }
+    this.set_placeholder_list();
+  }
+
+  remove_all(){
+    if( this.disabled ){ return; }
+    this.items = [];
+    this.set_placeholder_list();
+  }
+
+  toClick(){
+    const box = `area-${this.id}`;
+    window.addEventListener('click',(e: any) => {  
+
+      if( this.show_itens ){        
+        try {
+          if( !(document.getElementById(box)?.contains(e.target)) ){  
+            if( 'box-action' !== e.target.parentElement.className ){
+              this.show_itens = false;
+            }  
+           
+          }
+        } catch (error) {
+          
+        }
+        
+      }
+    });
+
+    const boxsub = `${this.id}-options`;
+  }
+
+  toResize(){
+    window.addEventListener('resize', () => {
+      this.viewport_width = window.innerWidth;
+      this.viewport_height = window.innerHeight;
+      this.resolve_position_dropdown(this.show_itens);
+    });
+  }
+
+  toOpen(){
+    this.show_itens = !this.show_itens;
+    this.resolve_position_dropdown(this.show_itens);
+  }
+
+  toClose(){
+    this.show_itens = false;
+  }
+
+  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;`;
+        }
+      });    
+    }
+  }
+
+
+
+  clearTextSearch(){
+    this.search_text = '';
+    this.toSearch('');
+  }
+
+  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`);
+    let li = ul.getElementsByTagName("label");
+    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";
+        }
+    }
+  }
+
+
+  toEnterKey(input_items: string){
+
+    if( !input_items ){ return; }
+
+    let valid = true;
+    if( this.pattern ){
+      valid = (this.pattern).test(this.input_items);
+
+    }
+
+    if( valid ){
+      this.add_items();
+      this.toOpen();      
+    }
+    
+
+  }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  onChangeTouched(){  
+    this.onTouchedCallback();     
+  }
+
+
+  toSetDefault(v:any){
+    this.items = v;
+    this.add_items();
+  }
+
+  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.toSetDefault(v);     
+      this.onChangeCallback(v);
+    }
+  }
+
+  //Set touched on blur
+  onBlur() {
+    this.onTouchedCallback();
+  }
+
+  //From ControlValueAccessor interface
+  writeValue(value: any) {
+    if (value !== this.innerValue) {
+      this.innerValue = value;
+      this.toSetDefault(value);
+    }
+  }
+
+  //From ControlValueAccessor interface
+  registerOnChange(fn: any) {
+    this.onChangeCallback = fn;
+  }
+
+  //From ControlValueAccessor interface
+  registerOnTouched(fn: any) {
+    this.onTouchedCallback = fn;
+  }
+
+
+
+  public validate(c: FormControl): any {
+    if( c && ( typeof this.required !== 'undefined' ) ){
+      this.use_validation_required = true;
+      return (this.check_is_valid()) ? null : 'required';
+    }
+    return null;
+  }
+
+
+  ngOnDestroy(): void {
+    
+  }
+
+}

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-multiples-values/tcloud-ui-multiples-values.module.ts

@@ -0,0 +1,24 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TCloudUiMultiplesValuesComponent } from './tcloud-ui-multiples-values.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { TCloudUiDataListModule } from '../tcloud-ui-data-list/tcloud-ui-data-list.module';
+
+
+
+@NgModule({
+  declarations: [
+    TCloudUiMultiplesValuesComponent
+  ],
+  exports: [
+    TCloudUiMultiplesValuesComponent
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    TCloudUiDataListModule
+  ],
+  schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
+})
+export class TCloudUiMultiplesValuesModule { }

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

@@ -0,0 +1,6 @@
+<div class="tcloud-ui-not-found tc-container-empty">
+  <div class="tc-message-empty-icon">
+    <i class="fas fa-exclamation-triangle"></i>
+  </div>
+  <div *ngIf="message !== ''" class="tc-message-empty" [innerHTML]="message" ></div>
+</div>

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

@@ -0,0 +1,21 @@
+.tc-container-empty{
+  margin: 15px;
+  text-align: center;
+  border: 1px solid #cccccc70;
+  padding: 10px;
+  border-radius: 5px;
+  background-color: #fff;
+
+  .tc-message-empty-icon{
+    i{
+      font-size: 25px;
+      color: #c1c1c1;
+    }
+  }
+
+  .tc-message-empty{
+    margin: 15px;
+    font-size: 15px;
+    color: #a49d9d;
+  }
+}

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

@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'tcloud-ui-not-found',
+  templateUrl: './tcloud-ui-not-found.component.html',
+  styleUrls: ['./tcloud-ui-not-found.component.scss']
+})
+export class TCloudUiNotFoundComponent 
+{
+
+  @Input() message: string = 'Nenhum registro encontrado.';
+
+  public styleIcon: any = {};
+
+  ngOnInit(): void
+  {
+  }
+}
+

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-not-found/tcloud-ui-not-found.module.ts

@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
+import { TCloudUiNotFoundComponent } from './tcloud-ui-not-found.component';
+
+@NgModule({
+  declarations: [
+    TCloudUiNotFoundComponent
+  ],
+  imports: [
+    CommonModule,
+  ],
+  exports: [
+    TCloudUiNotFoundComponent
+  ],
+  schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
+})
+export class TCloudUiNotFoundModule {}

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

@@ -0,0 +1,33 @@
+<table class="tcloud-ui-number-step table-trilha" cellspacing="0" cellpadding="0">
+  <tr>
+    <ng-container *ngFor="let fase of trilha; let i = index" >
+      <td class="area-circle">
+        <div class="circle icon-{{ fase.class }} {{ fase.second_class }} ">
+
+          <ng-container *ngIf="useIconCheck">
+            <ng-container *ngIf="i < active && fase.second_class !== 'step-inactive'">
+              <div class="area-index" *ngIf="(active-1) === i">{{ active }}</div>
+              <div class="area-index" *ngIf="(active-1) > i"><i class="fas fa-check"></i></div>
+            </ng-container>
+
+            <ng-container *ngIf="i < active && fase.second_class === 'step-inactive'">
+              <div class="area-index"><i class="far fa-circle"></i></div>
+            </ng-container>
+
+            <ng-container *ngIf="i >= active">
+              <div class="area-index">{{ i + 1 }}</div>
+            </ng-container>
+          </ng-container>
+
+          <ng-container *ngIf="!useIconCheck">
+            <div class="area-index">{{ i + 1 }}</div>
+          </ng-container>
+          
+        </div>
+      </td>
+      <td class="area-line" *ngIf="(i+1) < (trilha).length">
+        <div class="step-line {{ fase.class }}"></div>        
+      </td>
+    </ng-container>
+  </tr>
+</table>

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

@@ -0,0 +1,117 @@
+.table-trilha{
+  width: 100%;
+  border-collapse: collapse;
+
+  margin-top: 3px;
+  margin-bottom: 2px;
+
+  td{
+    border: none;
+  }
+
+  .area-circle{
+    width: 0px;
+
+    i{
+      font-size: 18px;
+    }
+  }
+
+  .area-index{    
+    font-size: 16px;
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);    
+  }
+
+  .step-line{
+    width: 100%;
+    height: 2px;
+    background-color: #ccc;
+
+    padding: 0px;
+    margin-left: -1px;
+    width: calc( 100% + 2px);
+  }
+}
+
+table{
+  tr{
+    background-color: transparent !important;
+  }
+  th, td{
+    vertical-align: middle;
+  }
+}
+
+
+.circle{
+  display: block;
+  border: 1px solid #ccc;
+  height: 48px;
+  width: 48px;
+  border-radius: 50%;
+  text-align: center;
+  font-size: 14px;
+}
+
+.step-progress{
+  background-color: var(--tc-primary) !important;
+}
+
+.icon-step-progress{
+  border-color: var(--tc-primary);
+  background-color: var(--tc-primary) !important;  
+
+  .area-index{
+    color: #fff;
+  }
+}
+
+.icon-step-active{
+  border-color: var(--tc-primary);
+  background-color: var(--tc-primary) !important;
+  color: #fff !important;
+}
+
+.step-inactive{
+  background-color: #fbfbfb  !important;
+
+  .area-index{
+    color: #CCC !important;
+  }
+}
+
+
+/*
+
+.step-default{
+  background-color: #FFF;
+}
+
+.step-progress{
+  background-color: var(--tc-primary) !important;
+  color: #fff;
+}
+
+.icon-step-default{
+  color: #FFF;
+}
+
+.icon-step-progress{
+  color: var(--tc-primary);
+}
+
+.icon-step-active{
+  color: var(--tc-primary);
+}
+
+.step-inactive{
+  color: #D9D9D9 !important;
+}
+
+.step-active{
+  color: #fff;
+}
+
+*/

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

@@ -0,0 +1,106 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+class Step {
+
+  constructor(){
+    this.status = '';
+    this.index = 0;
+    this.class = '';
+    this.second_class = '';
+  }
+
+  status: string;
+  index: number;
+  class: string;
+  second_class: string;
+}
+
+@Component({
+  selector: 'tcloud-ui-number-step',
+  templateUrl: './tcloud-ui-number-step.component.html',
+  styleUrls: ['./tcloud-ui-number-step.component.scss']
+})
+export class TCloudUiNumberStepComponent implements OnInit {
+
+  @Input() step: number = 7;
+  @Input() useIconCheck: boolean = false;
+
+  private _active: number = 0;
+  @Input() set active( active: number ){
+    if( active && active !== this._active ){
+      this._active = active;
+      this.build_steps();
+    }    
+  }
+  get active(): number{ return this._active; }
+
+  private _inactives = [] as number[] | undefined;
+  @Input() set inactives( inactives: number[] | undefined){
+    if( inactives && inactives !== this._inactives ){
+      this._inactives = inactives;
+      this.build_steps();
+    }
+  }
+  get inactives(): number[] | undefined { return this._inactives; }
+
+
+  private _complete: boolean = false;
+  @Input() set complete( complete: boolean ){
+    if( complete && complete !== this._complete ){
+      this._complete = complete;
+      this.build_steps();
+    }    
+  }
+  get complete(): boolean{ return this._complete; }
+
+  trilha = new Array<Step>();
+
+  constructor() { }
+
+  ngOnInit(): void {
+    setTimeout(() => { this.build_steps(); });
+  }
+
+  build_steps(){
+    let trilha = new Array<Step>();
+    if( this.step && this.step > 0 ){
+      for( let i = 0; i < this.step; i++ ){
+        (trilha).push({
+          status: '',
+          index: i+1,
+          class: 'step-default',
+          second_class: '',
+        })
+      }
+    }
+
+    if( this.active > this.step ){
+      this.active = this.step;
+      this.complete = true;
+    }
+
+    if( this.complete ){
+      this.active = this.step;
+    }
+
+    if( this.active && this.active > 0 ){
+      for( let i = 0; i < this.active; i++ ){        
+        trilha[i].class = "step-progress";        
+        if( (i+1) === this.active && !this.complete ){
+          trilha[i].class = "step-active";
+        }
+      }
+    }
+    
+    if( this.inactives && (this.inactives).length > 0 ){
+      for( let i = 0; i < (this.inactives).length; i++ ){
+        const icon = this.inactives[i];
+        if( icon && icon > 0 ){
+          trilha[(icon-1)].second_class = "step-inactive";     
+        }    
+      }
+    }
+
+    this.trilha = trilha;    
+  }
+}