@dev-tcloud/tcloud-ui 0.0.95 → 0.0.96

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-tab-menu/components/tcloud-ui-tab-title/tcloud-ui-tab-title.component.html

@@ -0,0 +1,3 @@
+<button [class.loading]="loading" [attr.data-id]="tab" [class.tab-title-active]="active" [disabled]="disabled || loading" type="button" (click)="toTab()" class="tab-title" >
+  <ng-content></ng-content>
+</button>

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-tab-menu/components/tcloud-ui-tab-title/tcloud-ui-tab-title.component.scss

@@ -0,0 +1,74 @@
+.tab-title {
+  border-radius: 0 !important;
+  height: initial;
+  display: inline-block;
+  margin: 0 !important;
+  color: var(--cinza);
+  border: none;
+  background: none;
+  text-transform: uppercase;
+  font-size: 11px;
+  padding: 20px;
+  cursor: pointer;
+
+  min-width: 60px;
+  max-width: 200px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  transition: all 0.25s;
+
+  &:hover {
+    // filter: brightness(0.95);
+    background: var(--verde);
+    color: #fff;
+  }
+}
+
+.tab-title-active {
+  background: var(--verde);
+  color: #fff;
+}
+
+
+
+
+@media (max-width: 1440px) {
+
+  .tab-title {
+    font-size: 10px;
+    padding: 20px 13px;
+  }
+}
+
+.loading{
+  cursor: progress !important;
+}
+
+button:disabled{
+  opacity: 0.7;
+  cursor: not-allowed !important;
+}
+
+
+.tab-title:hover,
+.tab-title-active {
+  background: var(--primary);
+  background: var(--verde);
+}
+
+@media (max-width: 1580px) {
+
+  .tab-title {
+    font-size: 11px;
+    padding: 20px 14px;
+  }
+}
+
+@media (max-width: 1440px) {
+  .tab-title {
+    font-size: 10px;
+    padding: 20px 13px;
+  }
+}
+

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-tab-menu/components/tcloud-ui-tab-title/tcloud-ui-tab-title.component.ts

@@ -0,0 +1,68 @@
+import { OnDestroy } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { TabMenuService } from '../../services/tab-menu.service';
+
+@Component({
+  selector: 'tcloud-ui-tab-title',
+  templateUrl: './tcloud-ui-tab-title.component.html',
+  styleUrls: ['./tcloud-ui-tab-title.component.scss']
+})
+export class TCloudUiTabTitleComponent implements OnInit, OnDestroy {
+
+  @Input() tab: string = '';
+  @Input() title: string | undefined;
+  @Input() active: boolean = false;
+
+  loading: boolean = false;
+
+  private _disabled: boolean = false;
+  @Input() set disabled(disabled){
+    this._disabled = disabled;
+    this.tabMenuService.setTabDisabled( this.tab, this._disabled );
+  }
+  get disabled(): boolean { return this._disabled; }
+
+  
+
+  private subscription: Subscription | undefined;
+  private subscription2: Subscription | undefined;
+
+  constructor(
+    private tabMenuService: TabMenuService
+  ) { }
+
+  ngOnInit(): void {
+
+    if( !this.disabled ){
+      const tab = this.tabMenuService.getTabState();
+      if( this.tab !== '' ){
+        this.active = ( tab === this.tab );
+      }
+    }
+    this.subscription = this.tabMenuService.tabState$.subscribe((tab: string)=>{
+      if( this.tab !== '' ){
+        this.active = ( tab === this.tab );
+      }
+    })
+
+    this.loading = <any> this.tabMenuService.getTabLoading();
+    this.subscription2 = this.tabMenuService.loadingState$.subscribe((loading: boolean)=>{
+      this.loading = loading;
+    })
+  }
+
+  toTab(){
+    if( !this.disabled ){
+      if( this.tab && this.tab !== '' ){
+        this.tabMenuService.setTabState(this.tab);
+      }
+    }
+  }
+
+  ngOnDestroy(){
+    if( this.subscription ){ this.subscription.unsubscribe(); }
+    if( this.subscription2 ){ this.subscription2.unsubscribe(); }
+  }
+
+}

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

@@ -0,0 +1,102 @@
+import { ITab } from './../tcloud-ui-tab-menu';
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+import { ActivatedRoute, Router } from '@angular/router';
+
+
+
+@Injectable()
+export class TabMenuService {
+
+  private info_tab: ITab[] = [];
+
+  private _scroll: boolean | undefined;
+  private scrollSubject = new Subject<boolean>(); 
+  public scrollState$ = this.scrollSubject.asObservable();
+
+  private _tab: string | undefined;
+  private tabSubject = new Subject<string>(); 
+  public tabState$ = this.tabSubject.asObservable();
+
+  private _loading: boolean | undefined;
+  private loadingSubject = new Subject<boolean>(); 
+  public loadingState$ = this.loadingSubject.asObservable();
+
+  constructor(
+    private _route: ActivatedRoute,
+    private _router: Router
+  ){
+
+  }
+
+  setTabScroll(scroll: boolean){
+    this._scroll = scroll;
+    this.scrollSubject.next(scroll);
+  }
+
+  getTabScroll(){
+    return this._scroll;
+  }
+
+  setTabLoading(loading: boolean){
+    this._loading = loading;
+    this.loadingSubject.next(loading);
+  }
+
+  getTabLoading(){
+    return this._loading;
+  }
+
+  setTabState(tab: string, registerInUrl?:boolean | undefined){
+    this._tab = tab;
+    if( registerInUrl ){ this.set_to_param_url(tab); }    
+    this.tabSubject.next(tab);
+  }
+
+  getTabState(){
+    return this._tab;
+  }
+
+  setTabDisabled(id: string, disabled: boolean ){
+    let create = true;
+    if( this.info_tab && (this.info_tab).length > 0 ){
+      for( let i = 0; i < (this.info_tab).length; i++ ){
+        if( this.info_tab[i].id === id ){
+          this.info_tab[i].disabled = disabled;
+          create = false;
+          break;
+        }
+      }
+    }
+    if( create ){
+      (this.info_tab).push({ id:id, disabled: disabled });
+    } 
+  }
+
+  getIsDisabled(id: string){
+    if( this.info_tab && (this.info_tab).length > 0 ){
+      for( let i = 0; i < (this.info_tab).length; i++ ){
+        if( this.info_tab[i].id === id ){
+          return this.info_tab[i].disabled;
+        }
+      }
+    }
+    return false;
+  }
+
+  set_to_param_url(tab: string){
+    // changes the route without moving from the current view or
+    // triggering a navigation event,
+    this._router.navigate([], {
+     relativeTo: this._route,
+     queryParams: {
+       tab: `${tab}`
+     },
+     queryParamsHandling: 'merge',
+     // preserve the existing query params in the route
+     skipLocationChange: false
+     // do not trigger navigation
+   });
+  }
+
+}

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

@@ -0,0 +1,3 @@
+<div class="tc-tab-menu" [class.loading]="loading" >
+  <ng-content></ng-content>
+</div>

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

@@ -0,0 +1,13 @@
+.tc-tab-menu {
+  .fas {
+    color: var(--primary);
+    margin: 0;
+  }  
+  width: 100%;
+  overflow-x: hidden;
+}
+
+.loading{
+  opacity: 0.7;
+  cursor: progress !important;
+}

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

@@ -0,0 +1,59 @@
+import { Subscription } from 'rxjs';
+import { TabMenuService } from './services/tab-menu.service';
+import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'tcloud-ui-tab-menu',
+  templateUrl: './tcloud-ui-tab-menu.component.html',
+  styleUrls: ['./tcloud-ui-tab-menu.component.scss'],
+  providers: [ TabMenuService ]
+})
+export class TCloudUiTabMenuComponent implements OnInit, OnDestroy {
+
+  @Input() registerInUrl: boolean = false;
+
+  private _loading: boolean = false;
+  @Input() set loading(loading: boolean){
+    this._loading = loading;
+    this.tabMenuService.setTabLoading(this.loading);
+  }
+  get loading(): boolean{ return this._loading; }
+
+  private _active: string = '';
+  @Input() set active(active: string){
+    this._active = active;
+    if( this.active !== '' ){
+      setTimeout(() => {
+        this.tabMenuService.setTabState(this.active, this.registerInUrl);
+      });
+      
+    }
+  }
+  get active(): string{ return this._active; }
+
+
+  @Output() onChange = new EventEmitter<string>();
+
+  private subscription: Subscription | undefined;
+
+  constructor(
+    private tabMenuService: TabMenuService
+  ) { }
+
+  ngOnInit(): void {
+
+    const tab = this.tabMenuService.getTabState();
+    if( tab === this._active ){
+      this.onChange.emit(tab);
+    }
+
+    this.subscription = this.tabMenuService.tabState$.subscribe((tab: string)=>{
+      this.onChange.emit(tab);
+    })
+  }
+
+  ngOnDestroy(){
+    if( this.subscription ){ this.subscription.unsubscribe(); }
+  }
+
+}

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

@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TCloudUiTabMenuComponent } from './tcloud-ui-tab-menu.component';
+import { TCloudUiTabContentComponent } from './components/tcloud-ui-tab-content/tcloud-ui-tab-content.component';
+import { TCloudUiTabTitleComponent } from './components/tcloud-ui-tab-title/tcloud-ui-tab-title.component';
+import { TCloudUiTabSubtitleComponent } from './components/tcloud-ui-tab-subtitle/tcloud-ui-tab-subtitle.component';
+import { TCloudUiTabHeadComponent } from './components/tcloud-ui-tab-head/tcloud-ui-tab-head.component';
+
+
+
+@NgModule({
+  declarations: [
+    TCloudUiTabMenuComponent,
+    TCloudUiTabContentComponent,
+    TCloudUiTabTitleComponent,
+    TCloudUiTabSubtitleComponent,
+    TCloudUiTabHeadComponent
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    TCloudUiTabMenuComponent,
+    TCloudUiTabContentComponent,
+    TCloudUiTabTitleComponent,
+    TCloudUiTabSubtitleComponent,
+    TCloudUiTabHeadComponent
+  ],
+})
+export class TCloudUiTabMenuModule { }

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-tab-menu/tcloud-ui-tab-menu.ts

@@ -0,0 +1,4 @@
+export interface ITab {
+  id: string;
+  disabled: boolean;
+}

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

@@ -0,0 +1,4 @@
+<table class="tc-table" [class.tc-table-striped]="striped" [class.tc-table-responsive]="responsive" cellspacing="0">
+    <ng-content select="[tc-thead]"></ng-content>
+    <ng-content select="[tc-tbody]"></ng-content>
+</table>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TCloudUiTableComponent } from './tcloud-ui-table.component';
+
+describe('TCloudUiTableComponent', () => {
+  let component: TCloudUiTableComponent;
+  let fixture: ComponentFixture<TCloudUiTableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TCloudUiTableComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TCloudUiTableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,18 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'tcloud-ui-table',
+  templateUrl: './tcloud-ui-table.component.html',
+  styleUrls: ['./tcloud-ui-table.component.scss']
+})
+export class TCloudUiTableComponent implements OnInit {
+
+  @Input() responsive: boolean = true;
+  @Input() striped: boolean = false;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

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

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

@@ -0,0 +1,22 @@
+<div class="tcloud-ui-welcome">
+    <div class="row">
+
+        <div class="col-md-4 text-center" *ngIf="imgSrc !== ''" >
+            <img class="containt-img-{{ size }}" src="{{ imgSrc }}">
+        </div>
+
+        <div class="{{ (imgSrc === '') ? 'col-md-12' : 'col-md-7' }} text-center">
+        <div class="info-new-window">
+
+            <h2 *ngIf="title !== ''" [innerHTML]="title" ></h2>
+            
+            <div class="info-{{ font }}" *ngIf="description !== ''" [innerHTML]="description"></div>
+            
+            <div class="mt-5 text-center">
+                <ng-content></ng-content>
+            </div>
+    
+        </div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,52 @@
+
+.containt-img-small{
+  text-align: center;
+  width: 100%;
+  max-width: 370px;
+  max-height: 310px;
+  padding: 10px;
+}
+
+.containt-img-normal{
+  text-align: center;
+  width: 100%;
+  max-width: 540px;
+  max-height: 345px;
+  padding: 10px;
+}
+
+.containt-img-big{
+  text-align: center;
+  width: 100%;
+  max-width: 640px;
+  max-height: 425px;
+  padding: 10px;
+}
+  
+.info-new-window{
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%); 
+}
+
+
+.info-small{
+  font-size: 0.7rem;
+}
+
+.info-normal{
+  font-size: 0.8rem;
+}
+
+.info-big{
+  font-size: 1rem;
+}
+
+  
+.top-info{
+  font-size: 15px;
+}
+
+h2{
+  color: var(--tc-primary);
+}

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

@@ -0,0 +1,22 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'tcloud-ui-welcome',
+  templateUrl: './tcloud-ui-welcome.component.html',
+  styleUrls: ['./tcloud-ui-welcome.component.scss']
+})
+export class TCloudUiWelcomeComponent implements OnInit {
+
+  @Input() imgSrc: string = '';
+  @Input() title: string = ''; 
+  @Input() description: string = ''; 
+  @Input() size: 'small'|'normal'|'big' = 'small';
+  @Input() font: 'small'|'normal'|'big' = 'normal';
+
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

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

package/projects/tcloud-ui/src/lib/_pipes/array-to-text.ts

@@ -0,0 +1,26 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'toText'})
+export class ToTextPipe implements PipeTransform {
+
+  formatBytes(value: any): string {
+    let v = '';
+    let t = '';
+    for( let i = 0; i < (value).length; i++ ){
+        t += v + `${value[i]}`;
+
+        v = ', ';
+        if( (i+1) === ((value).length) - 1 ){
+            v = ' e ';
+        }
+    }
+    return t
+  }
+  
+  transform(value: any): any{       
+    if( value && (value).length > 0 ){
+        return this.formatBytes(value);
+    }
+    return value;  
+  }
+}

package/projects/tcloud-ui/src/lib/_pipes/bytes.ts

@@ -0,0 +1,17 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'bytes'})
+export class BytesPipe implements PipeTransform {
+
+  formatBytes(a: number, b = 2): string {
+    if (!a) return '---';
+    if (0 === a) return '0 Bytes';
+    const c = 0 > b ? 0 : b, d = Math.floor(Math.log(a) / Math.log(1024));
+    return parseFloat((a / Math.pow(1024, d)).toFixed(c)) + ' ' + ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"][d];
+  }
+  
+  transform(value: any): string{       
+    const b: number = +value;      
+      return this.formatBytes(b);
+  }
+}

package/projects/tcloud-ui/src/lib/_pipes/cnpj.ts

@@ -0,0 +1,27 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'cnpj'})
+export class CNPJPipe implements PipeTransform {
+    mascara: string = "##.###.###/####-##";
+    createMask(v: any){
+        const mask = this.mascara;
+        let str = v.replace(/\s/g,'');
+        let strMask = '';
+        if( str.length == 14 ){
+            let j = 0;
+            for( let i = 0; i < mask.length; i++){
+                if( mask[i] == '#' ){
+                    strMask += str[j++];
+                }else{
+                    strMask += mask[i];
+                }
+            }
+        }else{
+            return v;
+        }
+        return strMask;
+    }
+    transform(cnpj: string): string{             
+        return this.createMask(cnpj);
+    }
+}

package/projects/tcloud-ui/src/lib/_pipes/cpf.ts

@@ -0,0 +1,27 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'cpf'})
+export class CPFPipe implements PipeTransform {
+    mascara: string = "###.###.###-##";
+    createMask(v: any){
+        const mask = this.mascara;
+        let str = v.replace(/\s/g,'');
+        let strMask = '';
+        if( str.length == 11 ){
+            let j = 0;
+            for( let i = 0; i < mask.length; i++){
+                if( mask[i] == '#' ){
+                    strMask += str[j++];
+                }else{
+                    strMask += mask[i];
+                }
+            }
+        }else{
+            return v;
+        }
+        return strMask;
+    }
+    transform(cpf: string): string{             
+        return this.createMask(cpf);
+    }
+}