@dev-tcloud/tcloud-ui 2.2.1 → 2.2.3

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-not-found/tcloud-ui-not-found.module.ts

@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
+import { TCloudUiNotFoundComponent } from './tcloud-ui-not-found.component';
+
+@NgModule({
+  declarations: [
+    TCloudUiNotFoundComponent
+  ],
+  imports: [
+    CommonModule,
+  ],
+  exports: [
+    TCloudUiNotFoundComponent
+  ],
+  schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
+})
+export class TCloudUiNotFoundModule {}

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

@@ -0,0 +1,33 @@
+<table class="tcloud-ui-number-step 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(--tc-primary) !important;
+}
+
+.icon-step-progress{
+  border-color: var(--tc-primary);
+  background-color: var(--tc-primary) !important;  
+
+  .area-index{
+    color: #fff;
+  }
+}
+
+.icon-step-active{
+  border-color: var(--tc-primary);
+  background-color: var(--tc-primary) !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(--tc-primary) !important;
+  color: #fff;
+}
+
+.icon-step-default{
+  color: #FFF;
+}
+
+.icon-step-progress{
+  color: var(--tc-primary);
+}
+
+.icon-step-active{
+  color: var(--tc-primary);
+}
+
+.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,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-reorder-items/tcloud-ui-reorder-items.component.html

@@ -0,0 +1,44 @@
+<ng-container *ngIf="sort_items">
+
+
+
+    <table class="table-sort-items">
+
+    
+
+
+        <ng-container *ngFor="let item of sort_items; let i = index">
+
+            <tr>
+
+                <td class="area-name-description-item">
+                    {{ item }}
+                    <div *ngIf="get_description(item)" class="item-description">
+                        {{ get_description(item) }}
+                    </div>
+                </td>
+
+                <td class="area-action-item">
+                
+                    <ng-container>
+                        <div class="order-control">
+                            <button class="btn-item-action-arrow" (click)="move(item, i, (i-1))" title="Alterar para cima" [disabled]="i===0">
+                                <i class="fas fa-caret-up p-up" ></i>
+                            </button>
+                        </div>
+                         
+                        <div class="order-control">
+                            <button class="btn-item-action-arrow" (click)="move(item, i, (i+1))" title="Alterar para baixo" [disabled]="(i+1) === (sort_items).length">
+                                <i class="fas fa-caret-down p-down"></i>
+                            </button>
+                        
+                        </div>
+                    </ng-container>
+                </td>
+
+            </tr>
+        </ng-container>  
+
+    </table>
+  
+  </ng-container>

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-reorder-items/tcloud-ui-reorder-items.component.scss

@@ -0,0 +1,41 @@
+.table-sort-items{
+  width: 100%;
+  border-collapse: initial;
+}
+
+.order-control{
+  text-align: center;
+}
+
+.btn-item-action-arrow{
+  border: none;
+  background: none;
+  cursor: pointer;
+  padding: 0;
+  color: var(--tc-primary);
+  font-size: 16px;
+  line-height: 0;
+
+  &:disabled{
+      opacity: 0.4;
+      cursor: not-allowed !important;
+  }
+}
+
+.item-description{
+  color: #a2a2a2;
+}
+
+.area-name-description-item{
+  border-radius: 13px 0 0 13px;
+  border: 1px solid #ccc;
+  padding: 3px 13px;
+}
+
+.area-action-item{
+  background-color: var(--tc-gray-50);
+  border-radius: 0 13px 13px 0;
+  border: 1px solid #ccc;
+  padding: 3px;
+  width: 40px;
+}

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-reorder-items/tcloud-ui-reorder-items.component.ts

@@ -0,0 +1,107 @@
+import { Component, Input, OnInit, EventEmitter, Output } from '@angular/core';
+
+@Component({
+  selector: 'tcloud-ui-reorder-items',
+  templateUrl: './tcloud-ui-reorder-items.component.html',
+  styleUrls: ['./tcloud-ui-reorder-items.component.scss']
+})
+export class TCloudUiReorderItemsComponent implements OnInit {
+  sort_items = [] as any[];
+
+  // psg
+  private _items = [] as any[];
+  @Input() set items(v: any){
+    if( v ){
+      this._items = v;
+      this.set_sort_items();
+    }
+  }
+  get items(){ return this._items; }
+
+  @Output() itemsChange = new EventEmitter<any>();
+
+
+  ngOnInit(): void {
+  }
+
+  set_sort_items(){
+    this.sort_items = [];
+    if( this.items && (this.items).length > 0 ){
+
+      for( let i = 0; i < (this.items).length; i++ ){
+        const item = this.items[i];
+        if( item.name ){
+          (this.sort_items).push( item.name );
+        }else{
+          (this.sort_items).push( `${item}` );
+        }
+      }
+
+    }
+
+  }
+  
+  get_description(name: string){
+    if( name ){
+      if( this.items && (this.items).length > 0 ){
+        for( let i = 0; i < (this.items).length; i++ ){
+          const item = this.items[i];
+          if( name === item.name && item.description ){
+            return item.description;
+          }
+        }  
+      }
+    }
+    return undefined;
+  }
+
+  get_item(name: string){
+    if( name ){
+      if( this.items && (this.items).length > 0 ){
+        for( let i = 0; i < (this.items).length; i++ ){
+          const item = this.items[i];
+          if( name === item.name && item.description ){
+            return item;
+          }
+        }  
+      }
+    }
+    return undefined;
+  }
+
+  move(item: any, index: number, toIndex: number){
+    if( toIndex < 0 ){ return; }
+    if( toIndex > ((this.sort_items).length - 1) ){ return; }
+    if( (this.sort_items).length > 0 ){
+      for(let i = 0; i < (this.sort_items).length; i++){
+        if( i === index){
+          
+          let aux = this.sort_items[index];
+          this.sort_items[index] = this.sort_items[toIndex];
+          this.sort_items[toIndex] = aux;
+          break;
+
+          
+        }
+      }
+    }
+
+    if( this.items && (this.items).length > 0 && this.items[0] && this.items[0].name ){
+      this.items = this.result_items();
+    }else{
+      this.items = this.sort_items;
+    }
+    this.itemsChange.emit( this.items );
+    
+  }
+
+  result_items(){
+    let items = [];
+    if( this.sort_items && (this.sort_items).length > 0 ){
+      for( let i = 0; i < (this.sort_items).length; i++ ){
+        (items).push( this.get_item( `${this.sort_items[i]}` ) );
+      }
+    }
+    return items;
+  }
+}

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-reorder-items/tcloud-ui-reorder-items.module.ts

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

package/{lib/_modules/tcloud-ui-reorder-items/tcloud-ui-reorder-items.d.ts → projects/tcloud-ui/src/lib/_modules/tcloud-ui-reorder-items/tcloud-ui-reorder-items.ts}

@@ -1,4 +1,4 @@
 export interface reorderItensData {
     name: string;
     description?: string;
-}
+}

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" [ngStyle]="style_height" >
+        <ng-content></ng-content>
+    </div>    
+</div>