@dev-tcloud/tcloud-ui 2.0.0 → 2.0.2

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

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

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

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

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

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

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

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

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

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