@dev-tcloud/tcloud-ui 0.1.20 → 0.1.22

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

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

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

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

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

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

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

@@ -0,0 +1,16 @@
+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 { }