@dev-tcloud/tcloud-ui 0.0.96 → 0.0.97

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

@@ -1,273 +0,0 @@
-
-table {
-    border-collapse: collapse;
-  }
-  
-  td, th {
-    padding: 0;
-    margin: 0;
-  }
-
-::placeholder {
-  font-style: italic;
-  color: #999999;
-  text-transform: none !important;
-}
-
-.box-input{
-  border-radius: 5px 0 0 5px;
-    .input{
-        background-color: #fff;
-        border-radius: 5px 0 0 5px;
-    }
-    .ng-invalid{
-      border-color: transparent !important;
-    }
-}
-
-.bc-l{
-  background-color: #fff;
-  border-left: 1px solid #ccc;
-}
-
-.bc-r{
-  background-color: #fff;
-  border-right: 1px solid #ccc;
-}
-
-.box-input-data-list{
-  background-color: #fff;
-  border-left: 1px solid #ccc;
-  border-top: 1px solid #ccc;
-  border-bottom: 1px solid #ccc;
-  border-radius: 5px 0 0 5px;
-  height: 42px;
-  padding-left: 5px;
-}
-
-.group-input-action{
-    width: 100%;
-    background-color: #fff;
-
-    input{
-        height: 40px;
-        border: none;
-    }
-
-    td{
-      height: 40px;
-      border-top: 1px solid #ccc;
-      border-bottom: 1px solid #ccc;
-      background-color: transparent !important;
-    }
-}
-
-.count-list{
-    width: 90px;
-    text-align: center;
-    background: #fff;
-    .input{
-      background-color: transparent;
-        input{
-            height: 40px;
-            border: none;
-            text-align: center;
-            width: 100px;   
-            background-color: transparent;
-        }
-    }
-}
-
-.action-input-arrow{
-    width: 30px;
-    background: transparent;  
-    position: relative;
-    z-index: 0;   
-    button{
-        cursor: pointer;
-        background-color: transparent;
-        text-align: center;
-        font-size: 15px;
-        border-top: none;
-        border-right: none;
-        border-bottom: none;
-        border-left: none;
-        width: 30px;
-        border-radius: 0 3px 3px 0;
-        position: relative;
-        bottom: 1px;
-        color: #666;
-
-        i{
-            position: relative;
-            z-index: -1;
-        }
-    }
-}
-
-.action-input{
-    width: 50px;
-    padding-left: 10px;
-
-    .tc-btn{
-        width: 100% !important;
-        padding: 0;
-        text-align: center;
-        border-radius: 3px;
-        display: block;
-        margin: 0;
-        height: 40px;
-
-        i{
-            width: 100%;
-            text-align: center;
-            padding: 0 !important;
-            margin: 0 !important;
-        }
-    }
-}
-
-
-.box-itens-selected{
-    display: block;
-    padding: 9px;
-    background-color: #ededed;
-    border-radius: 4px;
-    width: 100%;
-
-    .box-label{
-
-        position: relative;
-        display: inline-block;
-        height: 35px;
-        min-width: 60px;
-        background-color: var(--verde);
-        color: #fff;
-        padding: 8px 15px 10px 15px;
-        border: none;
-        border-radius: 5px;
-        margin: 2px;
-        width: 100%;
-    
-        .box-value{
-            width: 100%;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            overflow: hidden;
-        }
-    
-        div.box-action{
-          
-            position: absolute;
-            right: 4px;
-            top: 7px;
-    
-            button{
-                color: #d72020;
-                background-color: transparent;
-                border: none;
-                font-weight: bold;
-                cursor: pointer;
-    
-                i{
-                font-size: 12px;
-                }
-            }
-        }
-    }
-
-}
-
-.to-hide{
-    display: none;
-}
-
-/** DROPDOW **/ 
-
-.dropdown-toggle::after{
-    display: none !important;
-}
-  
-.tc-dropdown{
-  
-    position: relative;
-    
-    .tc-dropdown-menu{
-      width: 100%;
-      border: 1px solid #ccc;
-      background-color: #fff;
-      position: absolute;
-      z-index: 1;
-    }
-  
-    .area-options{
-      max-height: 200px;
-      overflow-y: scroll;
-      overflow-x: hidden;
-    }
-  
-    .menu-on-top{
-      position: absolute;
-    }
-}
-
-
-
-
-.line-search{
-
-    padding: 3px;
-  
-    .box-search{
-      width: 100%;
-      border-collapse: collapse;
-      td.area-icon{
-        padding: 4px 0px 2px 8px;
-        width: 35px;
-        .icon-search{
-          color: #666;
-        }
-  
-        button{
-          border: none;
-          background-color: transparent;
-          color: #999;
-  
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          overflow: hidden;
-        }
-  
-      }
-      td.area-input{ 
-        input{
-          width: 100%; 
-        }          
-        border: none;
-      }
-  
-      input{
-        width: 100%;
-        font-size: 13px;
-        height: 33px;
-        border: 1px solid #ccc;
-        padding: 10px;
-  
-      }
-    }
-  
-  }
-
-
-  .btn-remove-all{
-    text-align: right;
-    button{
-        background-color: transparent;
-        border: none;
-        color: #dd5353;
-        cursor: pointer;
-        &:hover{
-            color: #ff0000 !important;
-        }
-    }
-  }

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

@@ -1,357 +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() 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)];
-  }
-
-  item_width(text: any) {
-    const value = `${text}`;
-    const value_len = (value).length;
-    let max_width = 155;
-    if( value_len < 15 ){ max_width = 138; }
-    if( value_len < 10 ){ max_width = 105; }
-    if( value_len < 8 ){ max_width = 85; }
-    if( value_len < 5 ){ max_width = 70; }
-    return { 'max-width': max_width + 'px'};
-  }
-
-  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";
-        }
-    }
-  }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-  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,23 +0,0 @@
-import { 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
-  ]
-})
-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="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,16 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { TCloudUiNotFoundComponent } from './tcloud-ui-not-found.component';
-
-@NgModule({
-  declarations: [
-    TCloudUiNotFoundComponent
-  ],
-  imports: [
-    CommonModule,
-  ],
-  exports: [
-    TCloudUiNotFoundComponent
-  ],
-})
-export class TCloudUiNotFoundModule {}