@dev-tcloud/tcloud-ui 0.0.96 → 0.0.97

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

@@ -1,33 +0,0 @@
-<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

@@ -1,117 +0,0 @@
-.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

@@ -1,106 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,5 +0,0 @@
-<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

@@ -1,37 +0,0 @@
-.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

@@ -1,18 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,4 +0,0 @@
-<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

@@ -1,7 +0,0 @@
-.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

@@ -1,39 +0,0 @@
-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

@@ -1,24 +0,0 @@
-
-
-<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

@@ -1,85 +0,0 @@
-.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

@@ -1,76 +0,0 @@
-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

@@ -1,3 +0,0 @@
-<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

@@ -1,23 +0,0 @@
-.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

@@ -1,66 +0,0 @@
-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(); }
-  }
-
-}