@dev-tcloud/tcloud-ui 2.2.2 → 2.2.3

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

@@ -0,0 +1,158 @@
+import { Component, EventEmitter, Input, OnInit, Output, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => TCloudUiInputPasswordComponent),
+  multi: true
+};
+
+const noop = () => {
+};
+
+@Component({
+  selector: 'tcloud-ui-input-password',
+  templateUrl: './tcloud-ui-input-password.component.html',
+  styleUrls: ['./tcloud-ui-input-password.component.scss'],
+  providers: [ CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR ],
+})
+export class TCloudUiInputPasswordComponent implements OnInit {
+
+    @Input() actionView: boolean = true;
+    @Input() actionCopy: boolean = true;
+    @Input() actionGeneratePassword: boolean = true;
+
+    @Input() numberOfCharacter: number = 14;
+
+    @Input() atLeastOneUppercaseLetter: boolean = true;
+    @Input() atLeastOneLowercaseLetter: boolean = true;
+    @Input() atLeastOneSpecialCharacter: boolean = true;
+
+  
+    innerValue: string = '';
+
+    private _ngModel: any | undefined;
+    @Input() set ngModel(v: any){
+        this.innerValue = v;      
+    }
+    @Output() ngModelChange = new EventEmitter<any>();
+
+    mode: string = 'password';
+    isCopy: boolean = false;
+    passwordRegex: any | undefined;
+
+    constructor() { }
+
+    ngOnInit(): void {
+        this.passwordRegex = this.getRegexValidation();
+    }
+
+    toggleMode(){
+        if( this.mode === 'password' ){
+            this.mode = 'text';
+        }else{
+            this.mode = 'password';
+        }
+    }
+
+    copyText(): void {
+        this.isCopy = true;
+        navigator.clipboard.writeText(this.innerValue);
+        setTimeout(() => { this.isCopy = false; }, 3000);
+    }
+
+    generatePassword(){
+        this.innerValue = this.createNewPass();
+    }
+
+    private createNewPass() {
+        const uppercaseLetters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+        const lowercaseLetters = 'abcdefghijklmnopqrstuvwxyz';
+        const numbers = '0123456789';
+        const specialCharacters = '!@#$%^&*()_+{}[]:;<>,.?/~';
+    
+        const allCharacters = uppercaseLetters + lowercaseLetters + numbers + specialCharacters;
+    
+        const getRandomCharacter = (characters: string) => {
+        const randomIndex = Math.floor(Math.random() * characters.length);
+        return characters[randomIndex];
+        };
+    
+        let password = '';
+        password += getRandomCharacter(uppercaseLetters);
+        password += getRandomCharacter(numbers);
+        password += getRandomCharacter(specialCharacters);
+    
+        const remainingLength = this.numberOfCharacter - password.length;  
+        for (let i = 0; i < remainingLength; i++) {
+        password += getRandomCharacter(allCharacters);
+        }  
+        password = password.split('').sort(() => Math.random() - 0.5).join('');  
+        return password;
+    }
+  
+
+    getRegexValidation() {
+        /*
+        (?=.*[A-Z]): Pelo menos uma letra maiúscula.
+        (?=.*[0-9]): Pelo menos um número.
+        (?=.*[!@#$%^&*()_+{}[\]:;<>,.?\/~]): Pelo menos um caractere especial.
+        (?!.*\s): Não contém espaços em branco.
+        .{14,}: Pelo menos 14 caracteres no total.
+        */
+
+        const maiusculas = (this.atLeastOneUppercaseLetter) ? `(?=.*[A-Z])` : '';
+        const minusculas = (this.atLeastOneLowercaseLetter) ? `(?=.*[a-z])` : '';
+        const especiais  = (this.atLeastOneSpecialCharacter) ? `(?=.*[!@#$%^&*\\(\\)_+\\{\\}\\[\\]:;<>,.?\\/~])(?!.*\\s)`: '';
+
+        return `^${maiusculas}${minusculas}${especiais}.{${this.numberOfCharacter},}$`;
+    }
+
+
+
+
+
+
+
+
+  
+  //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;
+        }
+    }
+
+    //From ControlValueAccessor interface
+    registerOnChange(fn: any) {
+        this.onChangeCallback = fn;
+    }
+
+    //From ControlValueAccessor interface
+    registerOnTouched(fn: any) {
+        this.onTouchedCallback = fn;
+    }
+}

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

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

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

@@ -0,0 +1,14 @@
+<table class="tcloud-ui-input-search tc-group-input-table" cellspacing="0" cellpadding="0">
+    <tr>
+        <td><input class="tc-form-control box-ui-input-group" [(ngModel)]="search_text" type="text" (keyup)="buscar(search_text)" placeholder="{{ placeholder }}" ></td>
+        <td>     
+            <ng-container *ngIf="search_text === ''">  
+                <button type="button" (click)="buscar(search_text)"><i class="fas fa-search"></i></button>
+            </ng-container> 
+
+            <ng-container *ngIf="search_text !== ''">  
+                <button type="button" (click)="clean()"><i class="fas fa-times"></i></button>
+            </ng-container>
+        </td>
+    </tr>
+</table>

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

@@ -0,0 +1,33 @@
+.tc-group-input-table{
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+
+    td{
+        border: none;
+        border-style: hidden;
+        border-spacing: 0;
+        vertical-align: top;
+    }
+
+    td:first-child{
+        input{
+            height: 40px;
+            width: 100%;
+            border: 1px solid #ccc;
+            border-radius: 4px 0 0 4px !important;
+        }
+    }
+
+    td:last-child{
+        width: 40px;
+        button{
+            width: 100%;
+            height: 40px;
+            border: none;
+            border-radius: 0 10px 10px 0;
+            cursor: pointer;
+        }
+    }
+
+}

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

@@ -0,0 +1,69 @@
+import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
+import { TCloudUiSearchInObjectService } from '../../_services/search-in-object.service';
+
+@Component({
+  selector: 'tcloud-ui-input-search',
+  templateUrl: './tcloud-ui-input-search.component.html',
+  styleUrls: ['./tcloud-ui-input-search.component.scss']
+})
+export class TCloudUiInputSearchComponent implements OnInit {
+
+  /**
+   * tcloud-ui-input-search - Procura pelo valor informado no objeto indicado
+   * @param placeholder string - placeholder no input
+   * @param mirror boolean - Exibir os valores espelhados ou somente os valores encontrados
+   * @param base_object object - Objeto onde ser procurado 
+   * @param found - Emite o valor encontrado
+   */
+
+  @Input() placeholder: string = 'Procurar...';
+
+  @Input() mirror: boolean = true;
+
+  search_text: string = '';
+
+  private _base_object: any;
+  @Input() set base_object(base_object: any){
+    if( base_object ){
+      this._base_object = base_object;
+
+      if( this.mirror ){
+        this.result_object = base_object;
+        this.toFound();
+      }
+    }    
+  }
+  get base_object(){ return this._base_object; }
+
+  result_object: any | undefined;
+
+  @Output() found = new EventEmitter<any>();
+
+  constructor(
+    private searchInObjectService: TCloudUiSearchInObjectService
+  ) { }
+
+  ngOnInit(): void {
+  }
+
+  buscar(value: string){
+    const result = this.searchInObjectService.meet(`${value}`, this.base_object);
+    this.result_object = JSON.parse(JSON.stringify(result));
+    this.toFound();
+  }
+
+  clean(){
+    if( this.mirror ){
+      this.buscar('');
+    }else{
+      this.result_object = []; 
+      this.toFound();
+    }
+    this.search_text = '';
+  }
+
+  toFound(){
+    this.found.emit( this.result_object );
+  }
+
+}

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

@@ -0,0 +1,22 @@
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, 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
+  ],
+  schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
+})
+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="tcloud-ui-line-step-circle 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: var(--tc-gray-300);
+}
+
+.step-progress{
+  background-color: var(--tc-complemt-2) !important;
+}
+
+.icon-step-default{
+  background-color: var(--tc-gray-300);
+}
+
+.icon-step-progress{
+  background-color: var(--tc-complemt-2);
+}
+
+.icon-step-active{
+  background-color: var(--orange);
+}
+
+.step-inactive{
+  background-color: var(--tc-gray-300) !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,19 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, 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
+  ],
+  schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
+})
+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="tcloud-ui-linha-logo 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,19 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TCloudUiLinhaLogoComponent } from './tcloud-ui-linha-logo.component';
+
+
+
+@NgModule({
+  declarations: [
+    TCloudUiLinhaLogoComponent
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    TCloudUiLinhaLogoComponent
+  ],
+  schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
+})
+export class TCloudUiLinhaLogoModule { }

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-loading/components/tcloud-ui-cubes/tcloud-ui-cubes.component.html

@@ -0,0 +1,3 @@
+<div class="loadingio-spinner-cube"><div class="tc-cube-loading">
+  <div></div><div></div><div></div><div></div></div>
+</div>