@dev-tcloud/tcloud-ui 2.2.2 → 2.2.3

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

@@ -0,0 +1,37 @@
+.tc-box-scroll ::-webkit-scrollbar {
+    width: 13px;    
+}
+
+.tc-box-scroll ::-webkit-scrollbar-track {
+    background: #F1F1F1;
+    border-radius: 15px;
+}
+
+.tc-box-scroll ::-webkit-scrollbar-thumb {
+    background: var(--tc-primary);
+    border-radius: 10px;
+}
+
+.tc-box-scroll ::-webkit-scrollbar-thumb:hover {
+    background: #2B95A0;    
+}
+
+
+
+.tc-box-scroll{
+    .box-content{
+        overflow-x: hidden;
+        overflow-y: auto;
+
+        /* FireFox */ 
+        scrollbar-width: thin;
+        scrollbar-color: var(--tc-primary) #F1F1F1;
+        scrollbar-gutter: stable;
+    }
+}
+
+.tc-box-scroll-border{
+    border: 1px solid #eee;
+    border-radius: 10px;
+    overflow: hidden;
+}

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

@@ -0,0 +1,45 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'tcloud-ui-scroll-box',
+  templateUrl: './tcloud-ui-scroll-box.component.html',
+  styleUrls: ['./tcloud-ui-scroll-box.component.scss']
+})
+export class TCloudUiScrollBoxComponent implements OnInit {
+
+  @Input() border: boolean = true;
+  @Input() maxHeight: number | string = '400';
+
+  unidade: string = 'px';
+  style_height: any | undefined;
+
+  constructor() { }
+
+  ngOnInit(): void {
+    let und = '';
+    if( `${this.maxHeight}` ){
+      und = this.retirarNumeros(`${this.maxHeight}`);
+    }
+    console.log("und",und);
+
+    if( ((und) && (und).trim() === '') || !und ){
+      this.unidade = 'px';
+    }else{
+      this.unidade = (und).toLowerCase();      
+    }
+
+    this.maxHeight = (`${this.maxHeight}`).replace(this.unidade, '');
+    if( this.unidade === 'vh' ){      
+      this.style_height = {'height': this.maxHeight+this.unidade};
+    }else{
+      this.style_height = {'max-height': this.maxHeight+this.unidade};
+    }
+  }
+
+  retirarNumeros(str: string) {
+    // Utiliza regex para substituir todos os dígitos por uma string vazia
+    const resultado = str.replace(/\d/g, '');
+    return resultado;
+}
+
+}

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

@@ -0,0 +1,19 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TCloudUiScrollBoxComponent } from './tcloud-ui-scroll-box.component';
+
+
+
+@NgModule({
+  declarations: [
+    TCloudUiScrollBoxComponent
+  ],
+  exports: [
+    TCloudUiScrollBoxComponent
+  ],
+  imports: [
+    CommonModule
+  ],
+  schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
+})
+export class TCloudUiScrollBoxModule { }

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

@@ -0,0 +1,4 @@
+<div class="tcloud-ui-tab-content tc-tabmenu-content" *ngIf="active || hideContent" [class.tc-table-hide]="!active">
+  <ng-content></ng-content>
+</div>
+

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

@@ -0,0 +1,7 @@
+.tc-tabmenu-content {
+  margin: 20px 0;
+}
+
+.tc-table-hide{
+  display: none !important;
+}

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

@@ -0,0 +1,39 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { TabMenuService } from '../../services/tab-menu.service';
+
+@Component({
+  selector: 'tcloud-ui-tab-content',
+  templateUrl: './tcloud-ui-tab-content.component.html',
+  styleUrls: ['./tcloud-ui-tab-content.component.scss']
+})
+export class TCloudUiTabContentComponent implements OnInit {
+
+  @Input() hideContent: boolean = false;
+  @Input() tab: string = '';
+
+  active: boolean = false;
+  
+  private subscription: Subscription | undefined;
+
+  constructor(
+    private tabMenuService: TabMenuService
+  ) { }
+
+  ngOnInit(): void {
+
+    const disabled = this.tabMenuService.getIsDisabled(this.tab);
+    const tab = this.tabMenuService.getTabState();
+
+    this.active = ( tab === this.tab && !disabled );
+
+    this.subscription = this.tabMenuService.tabState$.subscribe((tab: string)=>{
+      this.active = ( tab === this.tab );
+    });
+  }
+
+  ngOnDestroy(){
+    if( this.subscription ){ this.subscription.unsubscribe(); }
+  }
+
+}

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

@@ -0,0 +1,24 @@
+
+
+<table class="tcloud-ui-tab-head area-navigation">
+  <tr>
+    <td *ngIf="scroll">
+      <button (click)="to_scroll('prev')"> <i class="fas fa-chevron-left"></i> </button>
+    </td>
+
+    <td>
+      
+    </td>
+
+    <td *ngIf="scroll">
+      <button (click)="to_scroll('next')"> <i class="fas fa-chevron-right"></i> </button>
+    </td>
+  </tr>
+</table>
+
+<div class="tc-menu {{ ID }}" [attr.style]="'background: ' + backgroundColor + ';'" [class.tab-full]="!scroll" >
+  <ng-content></ng-content>
+</div>
+
+
+

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

@@ -0,0 +1,85 @@
+.area-navigation{
+  display: none;
+  width: 100%;
+  line-height: 0;
+
+  button {
+    padding: 0 !important;
+  }
+
+  td{
+    width: 100%;
+    height: 0;  
+    line-height: 0;
+
+  }
+  td:first-child{
+    width: 10px !important;
+    text-align: left;
+
+    button{
+      color: var(--tc-primary);
+      cursor: pointer;
+      position: relative;
+      top: 15px;
+      right: 0px;
+      border: none;
+      background-color: transparent;
+      font-size: 15px;
+      height: 30px;
+    }   
+  }
+
+
+  td:last-child{
+    width: 10px !important;
+    text-align: right;
+
+    button{
+      color: var(--tc-primary);
+      cursor: pointer;
+      position: relative;
+      top: 15px;
+      left: 0px;
+      border: none;
+      background-color: transparent;
+      font-size: 15px;
+      height: 30px;
+    }
+  }
+}
+
+.tc-menu {
+  /* background: var(--cinza4); */
+  display: flex;
+  align-items: center;
+  border-radius: 10px;
+  overflow: hidden;
+  margin-bottom: 5px;
+
+  z-index: 1;
+  position: relative;
+}
+
+/* com botoes de scroll */
+
+@media (max-width: 1440px) {
+
+  .area-navigation{
+    display: block !important;
+    position: relative;
+    top: 0px;
+    height: 2px;
+  }
+
+  .tc-menu{
+    margin-left: 15px;
+    margin-right: 15px;
+  }
+
+}
+
+.tab-full{
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}

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

@@ -0,0 +1,76 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { TabMenuService } from '../../services/tab-menu.service';
+
+@Component({
+  selector: 'tcloud-ui-tab-head',
+  templateUrl: './tcloud-ui-tab-head.component.html',
+  styleUrls: ['./tcloud-ui-tab-head.component.scss']
+})
+export class TCloudUiTabHeadComponent implements OnInit {
+
+  private _scroll: boolean = true;
+  @Input() set scroll(scroll: boolean){
+    if( typeof scroll === 'boolean' ){
+      this._scroll = scroll;
+      this.tabMenuService.setTabScroll(scroll);
+    }
+  }
+  get scroll(): boolean { return this._scroll; }
+
+  ID: string = '';
+  @Input() background: boolean = true;
+
+  @Input() backgroundColor: '#FFFFFF'|'#F1F1F1'|'white'|'transparent' = 'transparent';  // var(--cinza4)
+
+  constructor(
+    private tabMenuService: TabMenuService
+  ) { }
+
+  ngOnInit(): void {
+    if( this.background ){
+      if( this.backgroundColor === 'white' ){
+        this.backgroundColor = '#FFFFFF';
+      }else{
+        this.backgroundColor = '#F1F1F1';
+      }     
+    }
+    this.ID = this.generateID();
+  }
+
+  generateID(): string{
+    return `tc-head-scroll-box-${Math.floor(Math.random() * Math.floor(Math.random() * Date.now()))}`;
+  }
+
+  to_scroll(action: 'prev'|'next'){
+    this.moveScroll(action, this.width_scroll());
+  }
+  
+  private width_scroll(): number{
+    var ele = <any> document.querySelectorAll(`.${this.ID}`);  
+    return ele[0].querySelector("button").offsetWidth;
+ }
+
+ private scrollSuave(old:any, des:any, atu:any, ele:any){
+    const _this = this;
+    var easeOutCubic = (t:any) => { return (--t)*t*t+1 };
+    atu += 5; // move de 5 em 5 pixel. Aumentando o valor da velocidade
+    var ease = easeOutCubic(atu/100);
+    var del = des-old;
+    del *= ease;
+    del += old;
+    ele.scrollTo(del, 0);
+    if(atu < 100){
+      window.requestAnimationFrame(() => {
+        _this.scrollSuave(old, des, atu, ele);
+      });
+    }
+  }
+
+  private moveScroll(action: any, wid: number){
+    var ele = document.querySelectorAll(`.${this.ID}`);
+    var ccs = ele[0];
+    var ccs_s = ccs.scrollLeft;
+    this.scrollSuave(ccs_s, action == 'next' ? wid+ccs_s : ccs_s-wid, 0, ccs);
+ }
+
+}

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

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

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

@@ -0,0 +1,23 @@
+.tab-subtitle {
+  cursor: pointer;
+  color: var(--cinza);
+  border: none;
+  background: none;
+  text-transform: uppercase;
+  font-size: 11px;
+  padding: 0;
+  margin: 20px 10px;
+}
+
+.tab-subtitle-active {
+  color: var(--tc-primary);
+}
+
+.loading{
+  cursor: progress !important;
+}
+
+button:disabled{
+  opacity: 0.7;
+  cursor: not-allowed !important;
+}

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

@@ -0,0 +1,66 @@
+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-subtitle',
+  templateUrl: './tcloud-ui-tab-subtitle.component.html',
+  styleUrls: ['./tcloud-ui-tab-subtitle.component.scss']
+})
+export class TCloudUiTabSubtitleComponent implements OnInit, OnDestroy {
+
+  @Input() tab: string = '';
+  @Input() active: 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; }
+
+  loading: boolean = false;
+
+  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/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="tcloud-ui-tab-title 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,72 @@
+.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(--tc-primary);
+    color: #fff;
+  }
+}
+
+.tab-title-active {
+  background: var(--tc-primary);
+  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(--tc-primary);
+}
+
+@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,115 @@
+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();
+
+  private _full: boolean | undefined;
+  private fullSubject = new Subject<boolean>(); 
+  public fullState$ = this.fullSubject.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;
+  }
+
+  setTabfull(full: boolean){
+    this._full = full;
+    this.fullSubject.next(full);
+  }
+
+  getTabFull(){
+    return this._full;
+  }
+
+  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
+   });
+  }
+
+}