@dev-tcloud/tcloud-ui 2.2.2 → 2.2.3

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

@@ -0,0 +1,288 @@
+
+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 var(--tc-gray-300);;
+}
+
+.bc-r{
+  background-color: #fff;
+  border-right: 1px solid var(--tc-gray-300);;
+}
+
+.box-input-data-list{
+  background-color: #fff;
+  border-left: 1px solid var(--tc-gray-300);;
+  border-top: 1px solid var(--tc-gray-300);;
+  border-bottom: 1px solid var(--tc-gray-300);;
+  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 var(--tc-gray-300);
+      border-bottom: 1px solid var(--tc-gray-300);;
+      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: 3px;
+
+    .tc-btn{
+        width: 100% !important;
+        padding: 0;
+        text-align: center;
+        border-radius: 4px 16px 16px 3px;
+        display: block;
+        margin: 0;
+        height: 40px;
+        border: 1px solid var(--tc-primary) !important;
+
+        i{
+            width: 100%;
+            text-align: center;
+            padding: 0 !important;
+            margin: 0 !important;
+            font-size: 18px;
+            position: relative;
+            top: 1px;
+        }
+    }
+}
+
+
+.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(--white);
+        
+        color: var(--tc-gray-500);
+        padding: 8px 15px 10px 15px;
+        border: 1px solid var(--tc-primary);
+        border-radius: 5px;
+        margin: 2px;
+        width: auto;
+        padding-right: 24px;
+        max-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: var(--tc-primary);
+                background-color: transparent;
+                border: none;
+                font-weight: bold;
+                cursor: pointer;
+    
+                i{
+                font-size: 12px;
+                }
+                &:hover{
+                  color: var(--red);
+                }
+            }
+        }
+    }
+
+}
+
+.to-hide{
+    display: none;
+}
+
+/** DROPDOW **/ 
+
+.dropdown-toggle::after{
+    display: none !important;
+}
+  
+.tc-dropdown{
+  
+    position: relative;
+    
+    .tc-dropdown-menu{
+      width: 100%;
+      border: 1px solid var(--tc-gray-300);
+      position: absolute;
+      z-index: 1;
+      background-color: #f9f9f9;
+    }
+  
+    .area-options{
+      padding-right: 8px;
+      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 var(--tc-gray-300);
+        padding: 10px;
+  
+      }
+    }
+  
+  }
+
+
+  .btn-remove-all{
+    text-align: right;
+    button{
+        background-color: transparent;
+        border: none;
+        color: #dd5353;
+        cursor: pointer;
+        &:hover{
+            color: #ff0000 !important;
+        }
+    }
+  }
+
+  .info-no-value{
+    color: #dd5353;
+  }

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
+  {
+  }
+}
+