@dev-tcloud/tcloud-ui 0.0.95 → 0.0.96

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

@@ -0,0 +1,21 @@
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TCloudUiInputSearchComponent } from './tcloud-ui-input-search.component';
+
+
+
+@NgModule({
+  declarations: [
+    TCloudUiInputSearchComponent
+  ],
+  exports: [
+    TCloudUiInputSearchComponent
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule
+  ]
+})
+export class TCloudUiInputSearchModule { }

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-line-step-circle/tcloud-ui-line-step-circle.component.html

@@ -0,0 +1,15 @@
+<table class="table-trilha" cellspacing="0" cellpadding="0">
+  <tr>
+    <ng-container *ngFor="let fase of trilha; let i = index" >
+      <td class="area-circle">
+        <!-- <i class="fas fa-circle icon-{{ fase.class }} {{ fase.second_class }} "></i> -->
+
+        <div class="tc-circle icon-{{ fase.class }} {{ fase.second_class }}"></div>
+      
+      </td>
+      <td class="area-line" *ngIf="(i+1) < (trilha).length">
+        <div class="step-line {{ fase.class }}"></div>
+      </td>
+    </ng-container>
+  </tr>
+</table>

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-line-step-circle/tcloud-ui-line-step-circle.component.scss

@@ -0,0 +1,68 @@
+.table-trilha{
+  width: 100%;
+  border-collapse: collapse;
+
+  margin-top: 3px;
+  margin-bottom: 2px;
+
+  td{
+    border: none;
+  }
+
+  .area-circle{
+    width: 0px;
+  }
+
+  .step-line{
+    width: 100%;
+    height: 2px;
+    background-color: #ccc;
+
+    padding: 0px;
+    margin-left: -1px;
+    width: calc( 100% + 2px);
+  }
+}
+
+table{
+  tr{
+    background-color: transparent !important;
+  }
+  th, td{
+    vertical-align: middle;
+  }
+}
+
+.step-default{
+  background-color: #D9D9D9;
+}
+
+.step-progress{
+  background-color: #039BE5 !important;
+}
+
+.icon-step-default{
+  background-color: #D9D9D9;
+}
+
+.icon-step-progress{
+  background-color: #039BE5;
+}
+
+.icon-step-active{
+  background-color: #EA9B3E;
+}
+
+.step-inactive{
+  background-color: #D9D9D9 !important;
+}
+
+
+.tc-circle{
+  height: 13px;
+  width: 13px;
+  border-radius: 50%;
+  position: relative;
+  z-index: 1;
+  font-size: 13px;
+}

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-line-step-circle/tcloud-ui-line-step-circle.component.ts

@@ -0,0 +1,102 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+class Step {
+
+  constructor(){
+    this.status = '';
+    this.index = 0;
+    this.class = '';
+    this.second_class = '';
+  }
+
+  status: string;
+  index: number;
+  class: string;
+  second_class: string;
+}
+
+@Component({
+  selector: 'tcloud-ui-line-step-circle',
+  templateUrl: './tcloud-ui-line-step-circle.component.html',
+  styleUrls: ['./tcloud-ui-line-step-circle.component.scss']
+})
+export class TCloudUiLineStepCircleComponent implements OnInit {
+
+  @Input() step: number = 7;
+  
+  private _active: number = 0;
+  @Input() set active( active: number ){
+    if( active && active !== this._active ){
+      this._active = active;
+      this.build_steps();
+    }    
+  }
+  get active(): number{ return this._active; }
+
+  private _inactives = [] as number[] | undefined;
+  @Input() set inactives( inactives: number[] | undefined){
+    if( inactives && inactives !== this._inactives ){
+      this._inactives = inactives;
+      this.build_steps();
+    }
+  }
+  get inactives(): number[] | undefined { return this._inactives; }
+
+
+  private _complete: boolean = false;
+  @Input() set complete( complete: boolean ){
+    if( complete && complete !== this._complete ){
+      this._complete = complete;
+      this.build_steps();
+    }    
+  }
+  get complete(): boolean{ return this._complete; }
+
+  trilha = new Array<Step>();
+
+  constructor() { }
+
+  ngOnInit(): void {
+    setTimeout(() => { this.build_steps(); });    
+  }
+
+  build_steps(){
+    let trilha = new Array<Step>();
+    if( this.step && this.step > 0 ){
+      for( let i = 0; i < this.step; i++ ){
+        (trilha).push({
+          status: '',
+          index: i+1,
+          class: 'step-default',
+          second_class: '',
+        })
+      }
+    }
+
+    if( this.active > this.step ){
+      this.active = this.step;
+      this.complete = true;
+    }
+
+    if( this.active && this.active > 0 ){
+      for( let i = 0; i < this.active; i++ ){        
+        trilha[i].class = "step-progress";        
+        if( (i+1) === this.active && !this.complete ){
+          trilha[i].class = "step-active";
+        }
+      }
+    }
+    
+    if( this.inactives && (this.inactives).length > 0 ){
+      for( let i = 0; i < (this.inactives).length; i++ ){
+        const icon = this.inactives[i];
+        if( icon && icon > 0 ){
+          trilha[(icon-1)].second_class = "step-inactive";     
+        }    
+      }
+    }
+
+    this.trilha = trilha;
+  }
+
+}

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-line-step-circle/tcloud-ui-line-step-circle.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TCloudUiLineStepCircleComponent } from './tcloud-ui-line-step-circle.component';
+
+
+
+@NgModule({
+  declarations: [
+    TCloudUiLineStepCircleComponent
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    TCloudUiLineStepCircleComponent
+  ]
+})
+export class TCloudUiLineStepCircleModule { }

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

@@ -0,0 +1,9 @@
+<!-- <div class="logo-product" *ngIf="product !== ''">
+  <img class="img-logo" src="/assets/img/logo-totvs.svg" alt="{{ alt_product_name }}">
+  <p class="text-small">Linha</p>
+  <p class="text-product" [style]="'font-size:'+font_size+';'" >{{ product_name }}</p>
+</div> -->
+
+<div class="logo-product" *ngIf="product !== ''">
+  <img class="img-logo" [attr.data-name-image]="logo_name" [attr.src]="url+logo_name+'.svg'" alt="{{ alt_product_name }}">
+</div>

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

@@ -0,0 +1,34 @@
+.logo-product{
+
+  /*border: 1px solid;*/
+
+  display: flex;
+  color: var(--cinza);
+  flex-flow: column;
+  width: 150px;
+
+  .img-logo{
+    width: 100%;
+    margin-bottom: 13px;
+  }
+
+  .text-small{
+    font-size: 13px;
+    margin: 0;
+    padding: 0;
+    text-align: left;
+  }
+
+  .text-product{
+    text-align: left;
+    font-size: 22px;
+    font-weight: 700;
+    line-height: 1;
+    margin: 0;
+    padding: 0;
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+
+
+}

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

@@ -0,0 +1,74 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'tcloud-ui-linha-logo',
+  templateUrl: './tcloud-ui-linha-logo.component.html',
+  styleUrls: ['./tcloud-ui-linha-logo.component.scss']
+})
+export class TCloudUiLinhaLogoComponent implements OnInit {
+
+  @Input() url: any = `h`+`t`+`t`+`p`+`s`+`:`+`/`+`/`+`ateleia`+`-`+`email`+`.s3`+`-`+`sa`+`-`+`east`+`-`+`1`+`.`+`amazonaws`+`.`+`com`+`/`; 
+  @Input() product: string = '';
+
+  logo_name: string = '';
+  product_name: string = '';
+  alt_product_name: string = '';
+  font_size: string = '';
+
+  constructor() { }
+
+  ngOnInit(): void {
+
+    this.logo_name = this.getLogoName();
+    this.product_name = this.getProductName();
+    
+    this.alt_product_name = (this.product_name).toUpperCase();
+
+    this.font_size = this.getWidthFontSize();
+  }
+
+  getProductName(){
+    if( this.product !== ''  ){
+      let name = this.product;
+      name = (name).replace('_',' ');
+      name = (name).toLowerCase();
+      return name;
+    }
+    return '';
+  }
+
+  getLogoName(){
+    if( this.product !== ''  ){
+      let name = this.product;
+      name = (name).replace('_','-');
+      name = (name).toLowerCase();
+      return 'logo-linha-'+name;
+    }
+    return '';
+  }
+
+  getWidthFontSize(){
+    let size = 28;
+    let new_size = size;
+    const count = (this.product_name).length; 
+
+    if( count > 8 ){
+      new_size = 28;
+    }
+
+    if( count > 12 ){
+      const p = (size * (5+(count*2)) ) / 100;
+      new_size = (size - p);
+    }
+
+    if( count > 15 ){
+      const p = (size * (10+(count*2)) ) / 100;
+      new_size = (size - p);
+    }
+
+
+
+    return `${new_size}px`;
+  }
+
+}

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

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TCloudUiLinhaLogoComponent } from './tcloud-ui-linha-logo.component';
+
+
+
+@NgModule({
+  declarations: [
+    TCloudUiLinhaLogoComponent
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    TCloudUiLinhaLogoComponent
+  ]
+})
+export class TCloudUiLinhaLogoModule { }

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

@@ -0,0 +1,3 @@
+<div class="tc-modal-body">
+  <ng-content></ng-content>
+</div>

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

@@ -0,0 +1,3 @@
+.tc-modal-body{
+  padding: 13px 13px;
+}

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

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'tcloud-ui-modal-body',
+  templateUrl: './tcloud-ui-modal-body.component.html',
+  styleUrls: ['./tcloud-ui-modal-body.component.scss']
+})
+export class TCloudUiModalBodyComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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="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="form-control 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="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(--verde); 
+}
+
+.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');
+      }
+    }
+  }
+
+}