@dev-tcloud/tcloud-ui 1.0.0 → 2.0.1

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-multi-input/tcloud-ui-multi-input.component.scss

@@ -1,118 +0,0 @@
-table{
-    width: 100%;
-    border-collapse: collapse;
-    border: none;
-
-    td{
-      vertical-align: top;
-    }
-  
-    td:first-child{
-      width: 100%;
-    }
-  }
-  
-  input{ 
-    font-size: 0.8rem;
-    height: 40px;
-    border: 1px solid #999;
-    border-radius: 4px 0 0 4px;
-    padding: 6px 10px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    width: 100%;
-    background-color: #fff;
-    color: #888;
-  }
-  
-  .btn-plus-select{
-    width: 30px;
-    height: 40px;
-    border: none;
-    color: #fff;
-    background-color: var(--tc-primary);
-    border-radius: 0 4px 4px 0;
-  }
-  
-  .box-itens-selected{
-    display: block;
-    padding: 9px;
-    background-color: #ededed;
-    border-radius: 4px;
-    width: 100%;
-  }
-  
-  
-  select:disabled{
-    opacity: 0.8 !important;
-    cursor: not-allowed !important;
-    background-color: #ededed;
-  }
-  
-  button:disabled{
-    opacity: 0.5 !important;
-    cursor: not-allowed !important;
-  }
-
-  .box-label{
-
-    position: relative;
-    display: inline-block;
-    height: 35px;
-    min-width: 60px;
-    background-color: var(--white);
-    color: var(--tc-primary);
-    padding: 8px 15px 10px 15px;
-    border: 1px solid var(--tc-primary);
-    border-radius: 5px;
-    margin: 2px;
-    
-    width: auto;
-    padding-right: 24px;
-    max-width: 100%;
-
-    /*
-    display: flex;
-    max-width: 220px;
-    height: 35px;
-    min-width: 100px;
-    background-color: var(--tc-primary);
-    color: #fff;
-    padding: 8px 15px 10px 15px;
-    border: none;
-    border-radius: 5px;
-    margin: 2px;
-    */
-
-    .box-value{
-      width: 100%;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-
-    .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);
-        }
-      }
-    }
-
-    
-  }

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-multi-input/tcloud-ui-multi-input.component.ts

@@ -1,169 +0,0 @@
-import { Component, OnInit, Input, EventEmitter, Output, OnDestroy, forwardRef } from '@angular/core';
-import { FormControl, NG_VALIDATORS, NG_VALUE_ACCESSOR, Validator } from '@angular/forms';
-
-const  CUSTOM_INPUT_VALIDATORS: any = { 
-  provide: NG_VALIDATORS, 
-  useExisting: forwardRef(() => TCloudUiMultiInputComponent),
-  multi: true
-}
-
-const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
-  provide: NG_VALUE_ACCESSOR,
-  useExisting: forwardRef(() => TCloudUiMultiInputComponent),
-  multi: true
-};
-
-const noop = () => {
-};
-
-@Component({
-  selector: 'tcloud-ui-multi-input',
-  templateUrl: './tcloud-ui-multi-input.component.html',
-  styleUrls: ['./tcloud-ui-multi-input.component.scss'],
-  providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, CUSTOM_INPUT_VALIDATORS]
-})
-export class TCloudUiMultiInputComponent implements OnInit, OnDestroy, Validator {
-
-  input_value: any;
-
-  @Input() tcList: any[] | undefined;
-
-  @Input() placeholder: string = '';
-  @Input() disabled: boolean = false;
-  @Input() loading: boolean = false;
-  @Input() required: string | undefined;
-
-  values: any[] | undefined;
-  count_actives: number = 0;
-
-  use_validation_required: boolean = false;
-  item_value: any | undefined;
-
-  @Output() tcChange = new EventEmitter<any[]>();
-
-  constructor() { }
-
-  ngOnInit(): void {
-    setTimeout(() => {
-      this.toChange();
-    });
-  }
-
-  addItem(item: any): void{
-    if( this.disabled ){ return; }
-    if( !this.tcList ){
-      this.tcList = [];
-    }
-    (this.tcList).push({value: item});    
-    this.toChange();   
-    this.input_value = '';
-  }
-
-
-  removeItem(item: any, index: number): void{
-    if( this.disabled ){ return; }
-    if( this.tcList ){
-      for( let i = 0; i < (this.tcList).length; i++ ){
-        const row = this.tcList[i];
-        if( item === row.value && i === index ){
-          (this.tcList).splice(index,1);
-          break;
-        }
-      }
-      this.toChange();
-    }
-  }
-
-  private toChange(): void{
-    let count_actives = 0;
-    let itens: any[] = [];
-    if( this.tcList ){
-      for( let i = 0; i < (this.tcList).length; i++ ){
-        const row = this.tcList[i];
-        (itens).push(row);
-      }
-    }
-    this.item_value = null;
-    this.count_actives = count_actives;
-    this.tcChange.emit(itens);
-    this.onChangeCallback(this.tcList);
-  }
-
-  check_is_valid(): boolean{
-    if( this.tcList ){
-      return ((this.tcList).length > 0) ? true : false;
-    }
-    return false;
-  }
-
-  onChangeTouched(){  
-    this.onTouchedCallback();     
-  }
-
-
-
-
-
-
-
-  @Output() onChange = new EventEmitter<any>();
-  // @Output() ngModelChange = new EventEmitter<any>();
-
-  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.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;
-  }
-
-  toSetDefault(value: any){
-    this.tcList = value;
-  }
-
-  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-multi-input/tcloud-ui-multi-input.module.ts

@@ -1,16 +0,0 @@
-import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { TCloudUiMultiInputComponent } from './tcloud-ui-multi-input.component';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-
-@NgModule({
-  declarations: [TCloudUiMultiInputComponent],
-  exports: [TCloudUiMultiInputComponent],
-  imports: [
-    FormsModule,
-    ReactiveFormsModule,
-    CommonModule
-  ],
-  schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
-})
-export class TCloudUiMultiInputModule { }

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

@@ -1,54 +0,0 @@
-
-  <div class="tcloud-ui-multi-select">
-    <table>
-      <tr *ngIf="tcList">
-        <td>
-          <select  
-            class="tc-form-control"
-            [(ngModel)]="item_value"
-            [class.tc-parent-validation]="use_validation_required"     
-            #_select
-            [disabled]="tcList === undefined || (tcList && tcList.length === 0) || disabled || loading"
-            [title]="tcList.length === 0 ? 'Nenhum item disponível' : placeholder">
-            <option></option>
-            <ng-container *ngFor="let item of tcList; let i = index">
-              <option [title]="item.description" *ngIf="!item.active" [value]="item.value">{{ item.description }}</option>
-            </ng-container>
-          </select>
-        </td>
-        <td>
-          <button
-            [disabled]="!item_value || tcList === undefined || (tcList && tcList.length === 0) || disabled || loading"
-            title="Adicionar"
-            class="btn-plus-select"
-            (click)="addItem(_select.value);onChangeTouched()"
-            type="button">
-            <i class="fas fa-plus"></i>
-          </button>
-        </td>
-      </tr>
-    </table>
-
-    <div class="box-itens-selected" *ngIf="count_actives > 0 && (tcList && tcList.length > 0)">
-      <ng-container *ngFor="let item of tcList">
-
-        <ng-container *ngIf="item.active">
-          <div class="box-label">
-            <div class="box-value" [title]="item.value">
-              {{ item.value }}          
-            </div>
-            <div class="box-action">
-              <button
-                [disabled]="tcList === undefined || (tcList && tcList.length === 0) || disabled || loading"
-                title="Remover"
-                type="button"
-                (click)="removeItem(item.value);onChangeTouched()">
-                <i class="fas fa-times"></i>
-              </button>
-            </div>
-          </div>
-        </ng-container>
-
-      </ng-container>
-    </div>
-  </div>

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-multi-select/tcloud-ui-multi-select.component.scss

@@ -1,104 +0,0 @@
-table{
-  width: 100%;
-  border-collapse: collapse;
-  border: none;
-
-  td{
-    vertical-align: top;
-  }
-
-  td:first-child{
-    width: 100%;
-  }
-}
-
-select{ 
-  font-size: 0.8rem;
-  height: 40px;
-  border: 1px solid #999;
-  border-radius: 4px 0 0 4px;
-  padding: 6px 10px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  width: 100%;
-  background-color: #fff;
-  color: #888;
-}
-
-.btn-plus-select{
-  width: 30px;
-  height: 40px;
-  border: none;
-  color: #fff;
-  background-color: var(--tc-primary);
-  border-radius: 0 4px 4px 0;
-}
-
-.box-itens-selected{
-  display: flex;
-  padding: 9px;
-  background-color: #ededed;
-  border-radius: 4px;
-}
-
-
-select:disabled{
-  opacity: 0.8 !important;
-  cursor: not-allowed !important;
-  background-color: #ededed;
-}
-
-button:disabled{
-  opacity: 0.5 !important;
-  cursor: not-allowed !important;
-}
-
-.box-label{
-  
-  position: relative;
-  display: inline-block;
-  height: 35px;
-  min-width: 60px;
-  color: var(--tc-primary);
-  padding: 8px 15px 10px 15px;
-  border: 1px solid var(--tc-primary);
-  border-radius: 5px;
-  margin: 2px;
-  background-color: var(--white);
-
-  width: auto;
-  padding-right: 24px;
-  max-width: 100%;
-
-  .box-value{
-    width: 100%;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-
-  .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);
-      }
-    }
-  }
-
-  
-}

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-multi-select/tcloud-ui-multi-select.component.ts

@@ -1,178 +0,0 @@
-import { Component, EventEmitter, forwardRef, Input, OnInit, Output, OnDestroy } from '@angular/core';
-import { FormControl, NG_VALIDATORS, NG_VALUE_ACCESSOR, Validator } from '@angular/forms';
-
-const  CUSTOM_INPUT_VALIDATORS: any = { 
-  provide: NG_VALIDATORS, 
-  useExisting: forwardRef(() => TCloudUiMultiSelectComponent),
-  multi: true
-}
-
-const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
-  provide: NG_VALUE_ACCESSOR,
-  useExisting: forwardRef(() => TCloudUiMultiSelectComponent),
-  multi: true
-};
-
-const noop = () => {
-};
-
-@Component({
-  selector: 'tcloud-ui-multi-select',
-  templateUrl: './tcloud-ui-multi-select.component.html',
-  styleUrls: ['./tcloud-ui-multi-select.component.scss'],
-  providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, CUSTOM_INPUT_VALIDATORS]
-})
-export class TCloudUiMultiSelectComponent implements OnInit, OnDestroy, Validator  {
-
-  
-
-  @Input() tcList: any[] | undefined;
-  @Input() placeholder: string = 'Selecione um item';
-  @Input() disabled: boolean = false;
-  @Input() loading: boolean = false;
-  @Input() required: string | undefined;
-  @Output() tcChange = new EventEmitter<any[]>();
-
-  use_validation_required: boolean = false;
-  values: any[] | undefined;
-  count_actives: number = 0;
-  item_value: any | undefined;
-
-  constructor() {}
-
-  ngOnInit(): void {
-    setTimeout(() => { this.toChange(); });
-  }
-
-  addItem(item: any): void{
-    if( this.disabled ){ return; }
-    if( this.tcList ){
-      for( let i = 0; i < (this.tcList).length; i++ ){
-        const row = this.tcList[i];
-        if( item === row.value ){
-          this.tcList[i].active = true;
-          break;
-        }
-      }
-      this.toChange();
-    }    
-  }
-
-  removeItem(item: any): void{
-    if( this.disabled ){ return; }
-    if( this.tcList ){
-      for( let i = 0; i < (this.tcList).length; i++ ){
-        const row = this.tcList[i];
-        if( item === row.value ){
-          this.tcList[i].active = false;
-          break;
-        }
-      }
-      this.toChange();
-    }
-  }
-
-  private toChange(): void{
-    let count_actives = 0;
-    let itens: any[] = [];
-    if( this.tcList ){
-      for( let i = 0; i < (this.tcList).length; i++ ){
-        const row = this.tcList[i];
-        if( row.active ){
-          count_actives++;
-          (itens).push(row);
-        }
-      }
-    }
-    this.item_value = null;
-    this.count_actives = count_actives;
-    this.tcChange.emit(itens);
-    this.onChangeCallback(this.tcList);
-  }
-
-
-  check_is_valid(): boolean{
-    let active = 0;
-    if( this.tcList ){
-      for( let i = 0; i < (this.tcList).length; i++ ){
-        const item = this.tcList[i];
-        if( item && item.active && item.active === true){
-          active++;
-          break;
-        }
-      }
-    }
-    return (active > 0) ? true : false;
-  }
-
-  onChangeTouched(){  
-    this.onTouchedCallback();     
-  }
-
-
-
-
-
-
-
-  @Output() onChange = new EventEmitter<any>();
-  // @Output() ngModelChange = new EventEmitter<any>();
-
-  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.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;
-  }
-
-  toSetDefault(value: any){
-    this.tcList = value;
-  }
-
-  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-multi-select/tcloud-ui-multi-select.module.ts

@@ -1,16 +0,0 @@
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { TCloudUiMultiSelectComponent } from './tcloud-ui-multi-select.component';
-
-@NgModule({
-  declarations: [TCloudUiMultiSelectComponent],
-  exports: [TCloudUiMultiSelectComponent],
-  imports: [
-    CommonModule,
-    FormsModule,
-    ReactiveFormsModule
-  ],
-  schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
-})
-export class TCloudUiMultiSelectModule { }