@dev-tcloud/tcloud-ui 0.1.21 → 0.1.22

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

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

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

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

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

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

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

@@ -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,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,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;
+  }
+}