@dev-tcloud/tcloud-ui 1.0.0 → 2.0.1

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

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

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

@@ -1,5 +0,0 @@
-<div class="tc-ui-progress-bar">
-    <div class="tc-progress-bar {{ height_class }}">
-        <div class="tc-progress-bar-status {{ progress_class }} {{ height_class }}" [style]="'width: ' + status + '%'"></div>
-    </div>
-</div>

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

@@ -1,49 +0,0 @@
-.tc-ui-progress-bar{
-    border: 1px solid #ccc;
-    border-radius: 9px;
-
-    .height-slim{
-        height: 10px;
-        border-radius: 5px;
-    }
-
-    .height-normal{
-        height: 15px;
-        border-radius: 8px;
-    }
-
-    .height-fat{
-        height: 20px;
-        border-radius: 10px;
-    }
-
-    .tc-progress-bar{        
-        border: 1px solid #fff;
-        background-color: var(--tc-gray-200);
-        overflow: hidden;
-
-        .tc-progress-bar-status{     
-            transition: width 2s ease;       
-            
-            position: relative;
-            bottom: 1px;
-            
-            &.progress-primary{
-                background-color: var(--tc-primary);
-            }
-        
-            &.progress-danger{
-                background-color: var(--red);
-            }
-        
-            &.progress-warning{
-                background-color: var(--orange);
-            }
-        
-            &.progress-info{
-                background-color: var(--azul);
-            }
-        }
-    }
-
-}

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

@@ -1,81 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'tcloud-ui-progress-bar',
-  templateUrl: './tcloud-ui-progress-bar.component.html',
-  styleUrls: ['./tcloud-ui-progress-bar.component.scss']
-})
-export class TCloudUiProgressBarComponent implements OnInit {
-
-  /*
-  status
-  */
-  private _status: any = '0';
-  @Input() set status(status: any){
-    let value = `${status}`;
-    if( value ){
-      setTimeout(() => {
-        this._status = value;
-      });      
-    }
-  }
-  get status():string { return this._status } 
-
-  /*
-  mode
-  */
-  private _mode: string = 'primary';
-  @Input() set mode(mode: string){
-    if( mode ){
-      this._mode = mode;  
-      this.setMode();
-    }    
-  }
-  get mode():string { return this._mode } 
-
-  /*
-  height
-  */
-  private _height: string = 'normal';
-  @Input() set height(height: string){
-    if( height ){
-      this._height = height; 
-      this.setheight();     
-    }    
-  }
-  get height():string { return this._height }
-
-  progress_class: string = '';
-  height_class: string = '';
-
-  constructor() { }
-
-  ngOnInit(): void {
-    this.setMode();
-    this.setheight();
-  }
-
-  setMode(): void{
-    const mode = this.mode;
-    let progress_class = 'progress-primary';
-    switch (mode) {
-      case 'primary': progress_class = 'progress-primary'; break;
-      case 'danger': progress_class = 'progress-danger'; break;
-      case 'warning': progress_class = 'progress-warning'; break;
-      case 'info': progress_class = 'progress-info'; break;
-    }
-    this.progress_class = progress_class;
-  }
-
-  setheight(): void{
-    const height = this.height;
-    let height_class = 'height-normal';
-    switch (height) {
-      case 'normal': height_class = 'height-normal'; break;
-      case 'slim': height_class = 'height-slim'; break;
-      case 'fat': height_class = 'height-fat'; break;
-    }
-    this.height_class = height_class;
-  }
-
-}

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

@@ -1,15 +0,0 @@
-import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { TCloudUiProgressBarComponent } from './tcloud-ui-progress-bar.component';
-
-
-
-@NgModule({
-  declarations: [TCloudUiProgressBarComponent],
-  exports: [TCloudUiProgressBarComponent],
-  imports: [
-    CommonModule
-  ],
-  schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
-})
-export class TCloudUiProgressBarModule { }

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

@@ -1,5 +0,0 @@
-<div class="tcloud-ui-scroll-box 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: 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

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

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

@@ -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="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

@@ -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(--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

@@ -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="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

@@ -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(--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

@@ -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(); }
-  }
-
-}

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

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

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