@dev-tcloud/tcloud-ui 0.1.23 → 2.0.0

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-modal/components/tcloud-ui-modal-footer/tcloud-ui-modal-footer.component.html

@@ -0,0 +1,30 @@
+<div class="tcloud-ui-modal-footer tc-modal-footer">
+
+  <div class="input-confirm" *ngIf="param_confirm && param_confirm.confirmText">
+    <p>Digite a palavra <strong>&quot;{{ param_confirm.confirmText }}&quot;</strong> para confirmar.</p>
+    
+    <form #_formulario="ngForm" (ngSubmit)="toConfirm(_formulario.valid)">
+      <input 
+        [disabled]="loading"
+        placeholder="{{ param_confirm.confirmText }}"
+        name="txt_value" 
+        [(ngModel)]="txt_value" 
+        type="text" 
+        class="tc-form-confirm" 
+        required 
+        [class.different-text]="(txt_value).length >= (param_confirm.confirmText).length && (txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase()" >
+    </form>
+
+  </div>
+
+  <hr>
+
+  <div class="actions-footer {{ (loading) ? 'state-loading' : '' }}">
+    <!-- {{ param_confirm | json }} -->
+    <button [disabled]="loading" *ngIf="param_confirm && !param_confirm.confirm" type="button" class="tc-btn margin-l-5" (click)="toClose()">{{ btnCloseText }}</button>
+
+    <button [disabled]="loading" *ngIf="param_confirm && param_confirm.confirm" type="button" class="tc-btn margin-l-5" (click)="toCancel()">{{ btnCancelText }}</button>
+    <button [disabled]="(txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase() || loading" *ngIf="param_confirm && param_confirm.confirm" type="button" class="tc-btn tc-btn-primary margin-l-5" (click)="toConfirm(_formulario?.valid)">{{ btnConfirmText }}</button>
+
+  </div>
+</div>

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

@@ -0,0 +1,30 @@
+.actions-footer{
+  text-align: right;
+}
+
+.ng-valid.ng-touched.different-text{ /* , .ng-valid .different-text */
+  border-color: #fb9c23;
+}
+
+.form-confirm{
+  max-width: 200px;
+}
+
+button:disabled{
+  opacity: 0.7 !important;
+  cursor: not-allowed;
+}
+
+.input-confirm{
+  padding: 5px 14px;
+}
+
+.state-loading{
+  button{
+    cursor: progress !important;
+  }  
+}
+
+.margin-l-5{
+  margin-left: 5px;
+}

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

@@ -0,0 +1,66 @@
+import { Subscription } from 'rxjs';
+import { TcloudModalService } from './../../services/tcloud-modal.service';
+import { Component, OnInit, ViewChild, Input, OnDestroy } from '@angular/core';
+import { IConfirm } from '../../tcloud-ui-modal';
+import { NgForm } from '@angular/forms';
+
+@Component({
+  selector: 'tcloud-ui-modal-footer',
+  templateUrl: './tcloud-ui-modal-footer.component.html',
+  styleUrls: ['./tcloud-ui-modal-footer.component.scss']
+})
+export class TCloudUiModalFooterComponent implements OnInit, OnDestroy {
+
+  @Input() btnCloseText: string = 'Fechar';
+  @Input() btnCancelText: string = 'Cancelar';
+  @Input() btnConfirmText: string = 'Confirmar';
+
+  @ViewChild('_formulario')  _formulario: NgForm | undefined; 
+  txt_value: string = '';
+
+  param_confirm: IConfirm = {} as IConfirm;
+
+  loading: boolean = false;
+
+  subscription: Subscription |undefined
+
+  constructor(
+    private tcloudModalService: TcloudModalService
+  ) { }
+
+  ngOnInit(): void {
+    this.txt_value = '';
+    this.param_confirm = this.tcloudModalService.getParamConfirm();
+
+    this.toStateLoading();
+  }
+
+  toClose(){
+    this.tcloudModalService.toModal('close');
+  }
+
+  toConfirm(valid: boolean | any){
+    if( typeof valid === 'boolean' ){
+      if( valid && (this.txt_value).toLowerCase() === (this.param_confirm.confirmText).toLowerCase() ){
+        this.tcloudModalService.toRespConfirm(true);
+        this.txt_value = ''; 
+      }
+    }
+  }
+
+  toCancel(){
+    this.tcloudModalService.toRespConfirm(false);
+  }
+
+  toStateLoading(){
+    this.loading = <any> this.tcloudModalService.getLoading();
+    this.subscription = this.tcloudModalService.stateLoading$.subscribe((loading: boolean) => { this.loading = loading; } )
+  }
+
+
+  ngOnDestroy(): void {
+    this.tcloudModalService.fixed_body('off');
+    if( this.subscription ){ this.subscription.unsubscribe(); }
+  }
+
+}

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-modal/components/tcloud-ui-modal-header/tcloud-ui-modal-header.component.html

@@ -0,0 +1,6 @@
+<div class="tcloud-ui-modal-header tc-modal-header tc-mode-{{ mode }}" >
+  <h4 *ngIf="title" [innerHTML]="title"></h4>
+  <ng-content></ng-content>
+
+  <hr>
+</div>

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

@@ -0,0 +1,32 @@
+h4 {
+  font-size: 16px;
+  margin: 5px 30px 10px 0;
+  font-weight: 700;
+}
+
+.tc-modal-header {
+  padding: 12px 12px;
+  color: #fff;
+  margin: -12px -12px 15px;
+  border-radius: 7px 7px 0 0;
+}
+
+hr {
+  display: none;
+}
+
+.tc-mode-success{
+  background: #62c46d;
+}
+
+.tc-mode-info{
+  background: var(--tc-primary); 
+}
+
+.tc-mode-danger{
+  background: #f06868;
+}
+
+.tc-mode-warning{
+  background: #e8b02e;
+}

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

@@ -0,0 +1,18 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'tcloud-ui-modal-header',
+  templateUrl: './tcloud-ui-modal-header.component.html',
+  styleUrls: ['./tcloud-ui-modal-header.component.scss']
+})
+export class TCloudUiModalHeaderComponent implements OnInit {
+
+  @Input() mode: 'info' | 'success' | 'danger' | 'warning' = 'info';
+  @Input() title: any | undefined;
+  
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -0,0 +1,66 @@
+import { IConfirm } from './../tcloud-ui-modal';
+import { Injectable } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+
+@Injectable()
+export class TcloudModalService {
+
+  private loading: boolean | undefined;
+
+  private param_confirm: IConfirm = {} as IConfirm;
+
+  private _stateClose = new Subject<boolean>();
+  public stateClose$ = this._stateClose.asObservable();
+
+  private _stateConfirm = new Subject<IConfirm>();
+  public stateConfirm$ = this._stateConfirm.asObservable();
+
+  private _stateRespConfirm = new Subject<boolean>();
+  public stateRespConfirm$ = this._stateRespConfirm.asObservable();
+
+  private _stateLoading = new Subject<boolean>();
+  public stateLoading$ = this._stateLoading.asObservable();
+
+
+  toModal(action: 'open'|'close'): void{
+    if(action === 'close'){
+      this.fixed_body('off');
+    }
+    this._stateClose.next( (action === 'open') );
+  }
+
+  toRespConfirm(resp: boolean){    
+    this._stateRespConfirm.next(resp);
+  }
+
+  getParamConfirm(): IConfirm{
+    return this.param_confirm;
+  }
+
+  toConfirm(confirm: IConfirm){
+    this.param_confirm = confirm;
+    this._stateConfirm.next(confirm);
+  }
+
+  getLoading(){
+    return this.loading;
+  }
+
+  setLoading(loading: boolean){
+    this.loading = loading;
+    this._stateLoading.next(loading);
+  }
+
+  fixed_body(fixed: 'on'|'off'){    
+    let body = <any> document.getElementsByTagName("BODY")[0];
+    if( body && body.style ){
+      if( fixed === 'on' ){
+        body.style.overflowY = "hidden";
+      }
+      if( fixed === 'off' ){
+        body.style.removeProperty('overflow-y');
+      }
+    }
+  }
+
+}

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

@@ -0,0 +1,54 @@
+<div class="tc-background-modal" *ngIf="control_open" >{{ checkIsOpen() }}</div>
+
+<div class="tcloud-ui-modal base-modal" *ngIf="open">
+  <div class="sub-modal" [@fade]="'visible'">
+    <div class="tc-modal tc-modal-shadow" [attr.style]="'max-width: ' + maxWidth + 'px;'">
+      <div class="area-top-actions">
+        <button type="button" [class.no-use-header]="title" (click)="toClose()" [disabled]="loading">
+          <i *ngIf="!loading" class="fas fa-times"></i>
+          <i *ngIf="loading" class="fas fa-spinner fa-spin"></i>
+        </button>
+      </div>
+
+      <h4 *ngIf="title" [innerHTML]="title"></h4>
+
+      <ng-content></ng-content>
+
+    </div>
+  </div>
+</div>
+
+<!-- Ex: Modal -->
+<!-- 
+  <tcloud-ui-modal [(open)]="open">
+
+    <tcloud-ui-modal-header title="Título do Modal" ></tcloud-ui-modal-header>
+
+    <tcloud-ui-modal-body>
+      Conteúdo do modal aqui
+    </tcloud-ui-modal-body>
+
+    <tcloud-ui-modal-footer></tcloud-ui-modal-footer>
+
+  </tcloud-ui-modal>
+
+  <button type="button" (click)="open = !open">open modal {{ open }}</button>
+-->
+
+<!-- ****** -->
+<!-- ****** -->
+<!-- ****** -->
+<!-- ****** -->
+
+<!-- Ex: Confirm Modal -->
+<!-- 
+  <tcloud-ui-modal [(open)]="open_confirm" [title]="'Atenção'" [confirmText]="'Aceito'" [confirm]="true" (toAction)="$event" >
+
+    <tcloud-ui-modal-body>Deseja realmente executar esta ação?</tcloud-ui-modal-body>
+
+    <tcloud-ui-modal-footer></tcloud-ui-modal-footer>
+
+  </tcloud-ui-modal>
+
+  <button type="button" (click)="open_confirm = !open_confirm">open_confirm modal {{ open_confirm }}</button>
+-->

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

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

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

@@ -0,0 +1,32 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA  } 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
+  ],
+  schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
+})
+export class TCloudUiModalModule { }

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

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

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

@@ -0,0 +1,43 @@
+<div class="tcloud-ui-multi-input">
+
+    <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">
+          <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>
+