@dev-tcloud/tcloud-ui 0.0.94 → 0.0.96

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

@@ -0,0 +1,33 @@
+<table class="table-trilha" cellspacing="0" cellpadding="0">
+  <tr>
+    <ng-container *ngFor="let fase of trilha; let i = index" >
+      <td class="area-circle">
+        <div class="circle icon-{{ fase.class }} {{ fase.second_class }} ">
+
+          <ng-container *ngIf="useIconCheck">
+            <ng-container *ngIf="i < active && fase.second_class !== 'step-inactive'">
+              <div class="area-index" *ngIf="(active-1) === i">{{ active }}</div>
+              <div class="area-index" *ngIf="(active-1) > i"><i class="fas fa-check"></i></div>
+            </ng-container>
+
+            <ng-container *ngIf="i < active && fase.second_class === 'step-inactive'">
+              <div class="area-index"><i class="far fa-circle"></i></div>
+            </ng-container>
+
+            <ng-container *ngIf="i >= active">
+              <div class="area-index">{{ i + 1 }}</div>
+            </ng-container>
+          </ng-container>
+
+          <ng-container *ngIf="!useIconCheck">
+            <div class="area-index">{{ i + 1 }}</div>
+          </ng-container>
+          
+        </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-number-step/tcloud-ui-number-step.component.scss

@@ -0,0 +1,117 @@
+.table-trilha{
+  width: 100%;
+  border-collapse: collapse;
+
+  margin-top: 3px;
+  margin-bottom: 2px;
+
+  td{
+    border: none;
+  }
+
+  .area-circle{
+    width: 0px;
+
+    i{
+      font-size: 18px;
+    }
+  }
+
+  .area-index{    
+    font-size: 16px;
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);    
+  }
+
+  .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;
+  }
+}
+
+
+.circle{
+  display: block;
+  border: 1px solid #ccc;
+  height: 48px;
+  width: 48px;
+  border-radius: 50%;
+  text-align: center;
+  font-size: 14px;
+}
+
+.step-progress{
+  background-color: var(--verde) !important;
+}
+
+.icon-step-progress{
+  border-color: var(--verde);
+  background-color: var(--verde) !important;  
+
+  .area-index{
+    color: #fff;
+  }
+}
+
+.icon-step-active{
+  border-color: var(--verde);
+  background-color: var(--verde) !important;
+  color: #fff !important;
+}
+
+.step-inactive{
+  background-color: #fbfbfb  !important;
+
+  .area-index{
+    color: #CCC !important;
+  }
+}
+
+
+/*
+
+.step-default{
+  background-color: #FFF;
+}
+
+.step-progress{
+  background-color: var(--verde) !important;
+  color: #fff;
+}
+
+.icon-step-default{
+  color: #FFF;
+}
+
+.icon-step-progress{
+  color: var(--verde);
+}
+
+.icon-step-active{
+  color: var(--verde);
+}
+
+.step-inactive{
+  color: #D9D9D9 !important;
+}
+
+.step-active{
+  color: #fff;
+}
+
+*/

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

@@ -0,0 +1,106 @@
+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-number-step',
+  templateUrl: './tcloud-ui-number-step.component.html',
+  styleUrls: ['./tcloud-ui-number-step.component.scss']
+})
+export class TCloudUiNumberStepComponent implements OnInit {
+
+  @Input() step: number = 7;
+  @Input() useIconCheck: boolean = false;
+
+  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.complete ){
+      this.active = this.step;
+    }
+
+    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-number-step/tcloud-ui-number-step.module.ts

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

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

@@ -0,0 +1,5 @@
+<div class="tc-box-scroll" [class.tc-box-scroll-border]="border" >
+    <div class="box-content" [style]="'max-height: '+maxHeight+'px'" >
+        <ng-content></ng-content>
+    </div>    
+</div>

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: #37B6C4;
+    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: #37B6C4 #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,18 @@
+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 = 400;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TCloudUiScrollBoxComponent } from './tcloud-ui-scroll-box.component';
+
+
+
+@NgModule({
+  declarations: [
+    TCloudUiScrollBoxComponent
+  ],
+  exports: [
+    TCloudUiScrollBoxComponent
+  ],
+  imports: [
+    CommonModule
+  ]
+})
+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="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="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(--verde);
+      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(--verde);
+      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="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(--verde);
+}
+
+.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(); }
+  }
+
+}