@dev-tcloud/tcloud-ui 0.0.91 → 0.0.92

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

@@ -1,83 +0,0 @@
-.tc-background-modal{
-  border: 1px solid #ccc;
-
-  position: fixed;
-  width: 100%;
-  left: 0;
-  top: 0;
-  background-color: #000;
-  /*z-index: 3000;*/
-  z-index: 4005;
-  height: 100%;
-  opacity: 0.3;
-
-}
-
-.base-modal{
-  height: 100%;
-  overflow: scroll;
-  position: fixed;
-  width: 100%;
-  z-index: 4005;
-  left: 0;
-  top: 0;
-  text-align: left !important;
-}
-
-.sub-modal{
-  padding: 30px;
-  position: absolute;
-  width: 100%;
-}
-
-.tc-modal{
-  position: relative;
-  background-color: #fff;
-  padding: 12px;
-  border-radius: 8px;
-  margin: auto;
-  width: 100%;
-}
-
-.tc-modal-shadow{
-  -webkit-box-shadow: 2px 2px 10px 0px #0000005e;
-  box-shadow: 2px 2px 10px 0px #0000005e;
-}
-
-.area-top-actions{
-  position: absolute;
-  top: 2px;
-  right: 5px;
-  z-index: 1;
-
-  button{
-    cursor: pointer;
-    background-color: transparent;
-    border: none;
-    font-size: 15px;
-    padding: 5px 7px;
-
-    i {
-      font-size: 17px;
-      color: #fff;
-      transition: all 0.25s;
-      opacity: 0.7;
-
-      &:hover {
-        opacity: 1 !important;
-      }
-    }
-  }
-}
-
-h4 {
-  font-size: 16px;
-  margin: 5px 30px 10px 0;
-  font-weight: 700;
-}
-
-.no-use-header{
-  i{
-    color: #999 !important;
-  }
-}

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

@@ -1,185 +0,0 @@
-import { Subscription } from 'rxjs';
-import { Component, OnInit, Input, EventEmitter, Output, OnDestroy } from '@angular/core';
-import { TcloudModalService } from './services/tcloud-modal.service';
-import { animate, state, style, transition, trigger } from '@angular/animations';
-import { IConfirm } from './tcloud-ui-modal';
-
-@Component({
-  selector: 'tcloud-ui-modal',
-  templateUrl: './tcloud-ui-modal.component.html',
-  styleUrls: ['./tcloud-ui-modal.component.scss'],
-  providers: [
-    TcloudModalService
-  ],
-  animations: [
-    trigger('fade', [
-        state('visible', style({ opacity: 1 })),
-        state('hide', style({ opacity: 0, top: '-38%' })),
-        transition('void => visible', [
-            style({ opacity: 0, top: '-38%' }),
-            animate('0.3s ease-out')
-        ]),
-        transition('visible => hide', animate('0.3s ease-out'))
-    ])
-  ]
-})
-export class TCloudUiModalComponent implements OnInit, OnDestroy {
-
-   /**
-   * tcloud-ui-modal - Cria e exibe um modal
-   * 
-   * toAction - (toAction) - Resultado do evento - 'confirmed'|'cancel'|'close'
-   * toConfirm - (toConfirm) - Indica que a ação foi confirmada - resultado true
-   * toCancel - (toCancel() - Indica que a ação foi cancelada - resultado false
-   */
-
-  param_confirm: IConfirm = {} as IConfirm;
-  /* BEGIN - Parametros para modo confirmacao */
-  private _confirm: boolean = false;
-  private _confirmText: string = 'Confirmo';
-
-  /**
-   * confirm boolean - Indica se será um modal do tipo confirmação - default false
-   */
-  @Input() set confirm(v: boolean){
-    this._confirm = v;
-    this.param_confirm.confirm = this._confirm;
-    this.param_confirm.confirmText = this._confirmText;
-  }
-
-  /**
-   * confirmText string - Texto que deverá ser digitado - defualt Confirmo
-   */
-  @Input() set confirmText(v: string){
-    this._confirmText = v;
-    this.param_confirm.confirmText = this._confirmText;
-    this.param_confirm.confirm = this._confirm;    
-  }
-
-  /* END --- Parametros para modo confirmacao */
-
-  subscription: Subscription | undefined;
-  subscriptionI: Subscription | undefined;
-
-  /**
-   * autoClose boolean - Indica se deverá ser fechado quando confirmar uma ação - default true
-   */
-  @Input() autoClose: boolean = true;
-
-  /**
-   * title - string - Título a ser exibido no topo do modal
-   */
-  @Input() title: any | undefined;
-
-  /**
-   * maxWidth - number - Largura máxima do modal - default 500px
-   */
-  @Input() maxWidth: number = 500;
-
-
-  /**
-   * window - string - nome referente ao tamanho do modal - não utilizar maxWidth se for utilizar window - default 500 (medium)
-   */
-  @Input() set window( size: 'small' | 'medium' | 'large' | 'big' | 'full' ){
-    switch (size) {
-      case 'small': this.maxWidth   = 300; break;
-      case 'medium': this.maxWidth  = 500; break;
-      case 'large': this.maxWidth   = 900; break;
-      case 'big': this.maxWidth     = 1100; break;
-      case 'full': this.maxWidth     = 1400; break;
-    }
-  }
-
- 
-  control_open: boolean = false;
-  private _open: boolean = false;
-  /**
-   * open - boolean - Variável de controle para exibição do modal - obrigatório
-   */
-  @Input() set open(open: boolean){
-    this.control_open = open;
-    this.checkIsOpen();
-
-    this._open = open;
-    this.tcloudModalService.fixed_body((open) ? 'on' : 'off');
-  }
-  get open(): boolean { return this._open; }
-
-  private _loading: boolean = false;
-  /**
-   * loading - boolean - Coloca o modal em modo de carregamento - default false
-   */
-  @Input() set loading(loading: boolean){ 
-    this._loading = loading;
-    this.tcloudModalService.setLoading(loading);
-  }
-  get loading(): boolean { return this._loading; }
-  
-  @Output() openChange = new EventEmitter<boolean>();
-
-  @Output() toConfirm = new EventEmitter<boolean>();
-  @Output() toCancel = new EventEmitter<boolean>();
-  @Output() toAction = new EventEmitter<'confirmed'|'cancel'|'close'>();
-
-  constructor(
-    private tcloudModalService: TcloudModalService
-  ) { }
-
-  ngOnInit(): void {
-
-    this.subscription = this.tcloudModalService.stateClose$.subscribe((open: boolean)=>{
-      if( open ){
-        /* OPEN */
-      }
-
-      if( !open ){
-        /* CLOSE */
-        this.toClose();
-      }
-    });
-
-    this.subscriptionI = this.tcloudModalService.stateRespConfirm$.subscribe((resp: boolean)=>{
-      if( resp ){
-        /* CONFIRMADO */
-        this.toConfirm.emit(resp);
-        this.toClose('confirmed');
-
-      }
-
-      if( !resp ){
-        /* CANCELADO */
-        this.toCancel.emit(resp);
-        this.toClose('cancel');
-      }
-    })
-    
-    this.tcloudModalService.toConfirm( this.param_confirm );
-  }
-
-  toClose(action?: any | undefined){
-    if( this.autoClose ){
-      this.control_open = false;
-      this.open = false;
-      this.openChange.emit(false);
-    }
-    
-    action = (action) ? action : 'close';
-    this.toAction.emit(action);
-    this.tcloudModalService.fixed_body('off');
-  }
-
-  checkIsOpen(){
-    if( this.control_open ){
-      this.tcloudModalService.fixed_body('on');
-    }else{
-      this.tcloudModalService.fixed_body('off');
-    }
-  }
-
-  ngOnDestroy(){
-    this.checkIsOpen();
-    if( this.subscription ){ this.subscription.unsubscribe(); }
-  }
-
-
-}

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-modal/tcloud-ui-modal.module.ts

@@ -1,31 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { TCloudUiModalComponent } from './tcloud-ui-modal.component';
-import { TCloudUiModalHeaderComponent } from './components/tcloud-ui-modal-header/tcloud-ui-modal-header.component';
-import { TCloudUiModalBodyComponent } from './components/tcloud-ui-modal-body/tcloud-ui-modal-body.component';
-import { TCloudUiModalFooterComponent } from './components/tcloud-ui-modal-footer/tcloud-ui-modal-footer.component';
-
-
-
-@NgModule({
-  declarations: [
-    TCloudUiModalComponent,
-    TCloudUiModalHeaderComponent,
-    TCloudUiModalBodyComponent,
-    TCloudUiModalFooterComponent
-  ],
-  imports: [
-    CommonModule,
-    FormsModule,
-    ReactiveFormsModule
-  ],
-  exports: [
-    TCloudUiModalComponent,
-    TCloudUiModalHeaderComponent,
-    TCloudUiModalBodyComponent,
-    TCloudUiModalFooterComponent
-  ]
-})
-export class TCloudUiModalModule { }

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-modal/tcloud-ui-modal.ts

@@ -1,4 +0,0 @@
-export interface IConfirm {
-  confirmText: string;
-  confirm: boolean;
-}

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

@@ -1,43 +0,0 @@
-<div>
-
-    <table>
-      <tr>
-        <td>
-          <input class="tc-form-control" (blur)="onChangeTouched()" [(ngModel)]="item_value" [class.tc-parent-validation]="use_validation_required" type="text" [(ngModel)]="input_value" [disabled]="disabled || loading" name="input_value">
-        </td>
-        <td>
-          <button
-            [disabled]="!item_value || disabled || loading"
-            title="Adicionar"
-            class="btn-plus-select"
-            (click)="addItem(input_value);onChangeTouched()"
-            type="button">
-            <i class="fas fa-plus"></i>
-          </button>
-        </td>
-      </tr>
-    </table>
-  
-    <div class="box-itens-selected" *ngIf="(tcList && tcList.length > 0)">
-      <ng-container *ngFor="let item of tcList; let i = index">
-        
-        <div class="box-label" [ngStyle]="item_width(item.value)">
-          <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, i);onChangeTouched()">
-              <i class="fas fa-times"></i>
-            </button>
-          </div>
-        </div>
-
-      </ng-container>
-    </div>
- 
-</div>
-  

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

@@ -1,111 +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(--verde);
-    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(--verde);
-    color: #fff;
-    padding: 8px 15px 10px 15px;
-    border: none;
-    border-radius: 5px;
-    margin: 2px;
-    width: 100%;
-
-    /*
-    display: flex;
-    max-width: 220px;
-    height: 35px;
-    min-width: 100px;
-    background-color: var(--verde);
-    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: #d72020;
-        background-color: transparent;
-        border: none;
-        font-weight: bold;
-        cursor: pointer;
-
-        i{
-          font-size: 12px;
-        }
-      }
-    }
-
-    
-  }

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

@@ -1,180 +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;
-  }
-
-  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'};
-  }
-
-  ngOnDestroy(): void {
-    
-  }
-}

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

@@ -1,15 +0,0 @@
-import { 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
-  ]
-})
-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>
-    <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" [ngStyle]="item_width(item.value)">
-            <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>