@dev-tcloud/tcloud-ui 0.1.21 → 0.1.22

package/src/app/pages/ui-linha-logo/ui-linha-logo.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-ui-linha-logo',
+  templateUrl: './ui-linha-logo.component.html',
+  styleUrls: ['./ui-linha-logo.component.scss']
+})
+export class UiLinhaLogoComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/app/pages/ui-loading-transitions/ui-loading-transitions.component.html

@@ -0,0 +1,3 @@
+<p>Exemplo com 3 segundos de carregamento</p>
+
+<button type="button" (click)="start()">Start</button>

package/src/app/pages/ui-loading-transitions/ui-loading-transitions.component.ts

@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { TCloudUiLoadingTransitionsService } from 'projects/tcloud-ui/src/public-api';
+
+@Component({
+  selector: 'app-ui-loading-transitions',
+  templateUrl: './ui-loading-transitions.component.html',
+  styleUrls: ['./ui-loading-transitions.component.scss']
+})
+export class UiLoadingTransitionsComponent implements OnInit {
+
+  n: number = 0;
+  constructor(
+    private loadingTransitionsService: TCloudUiLoadingTransitionsService
+  ) { }
+
+  ngOnInit(): void {
+  }
+
+  start(){
+    this.loadingTransitionsService.start();
+    this.stop();
+  }
+
+  stop(){
+    setTimeout(() => {
+      this.loadingTransitionsService.stop();
+    }, 3000);
+  }
+
+}

package/src/app/pages/ui-modal/ui-modal.component.html

@@ -0,0 +1,20 @@
+
+<tcloud-ui-modal [(open)]="open" [window]="'big'">
+  <tcloud-ui-modal-header title="Título do Modal"  ></tcloud-ui-modal-header>
+  <tcloud-ui-modal-body>
+    <div style="height: 600px;"></div>
+  </tcloud-ui-modal-body>
+  <tcloud-ui-modal-footer></tcloud-ui-modal-footer>
+</tcloud-ui-modal>
+
+<button type="button" class="tc-btn tc-btn-primary mt-4" (click)="open = !open">open modal {{ open }}</button>
+
+<br>
+
+<tcloud-ui-modal [(open)]="open_confirm" [confirmText]="'Aceito'" [confirm]="true" (toAction)="$event" >
+    <tcloud-ui-modal-header title="Atenção" mode="warning" ></tcloud-ui-modal-header>
+    <tcloud-ui-modal-body>Deseja realmente executar esta ação?</tcloud-ui-modal-body>
+    <tcloud-ui-modal-footer></tcloud-ui-modal-footer>
+</tcloud-ui-modal>
+
+<button type="button" class="tc-btn tc-btn-primary mt-4" (click)="open_confirm = !open_confirm">open_confirm modal {{ open_confirm }}</button>

package/src/app/pages/ui-modal/ui-modal.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-ui-modal',
+  templateUrl: './ui-modal.component.html',
+  styleUrls: ['./ui-modal.component.scss']
+})
+export class UiModalComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  open: boolean = false;
+  open_confirm: boolean = false;
+
+}

package/src/app/pages/ui-multi-input/ui-multi-input.component.html

@@ -0,0 +1,14 @@
+<div class="row">
+    <div class="col-md-6">
+        <p>Modo simples</p>
+        <tcloud-ui-multi-input [tcList]="opt" (tcChange)="toChangeItem($event)"></tcloud-ui-multi-input>
+        <pre>{{ opt | json }}</pre>
+    </div>
+    <div class="col-md-6">
+        <p>Modo com validacao ngModel - required - Requer ao menos um item marcado</p>
+        <form #_formulario="ngForm">
+            <tcloud-ui-multi-input name="name_of_input" [(ngModel)]="opt_ngmodel" required></tcloud-ui-multi-input>
+            <pre>{{ opt_ngmodel | json }}</pre>
+        </form>
+    </div>
+</div>

package/src/app/pages/ui-multi-input/ui-multi-input.component.ts

@@ -0,0 +1,41 @@
+import { Component, OnInit } from '@angular/core';
+
+interface IOptions {
+  value: any;
+}
+
+@Component({
+  selector: 'app-ui-multi-input',
+  templateUrl: './ui-multi-input.component.html',
+  styleUrls: ['./ui-multi-input.component.scss']
+})
+export class UiMultiInputComponent implements OnInit {
+
+  values: any | undefined;
+  opt: IOptions[] = [];
+  opt_ngmodel: any | undefined;
+
+  constructor() { }
+
+  ngOnInit(): void {
+
+    this.opt = [
+      {
+        value: 'Texto 1',
+      },
+      {
+        value: 'Texto 2'
+      },
+      {
+        value: 'Texto 3',
+      }
+    ]
+
+    //this.opt_ngmodel = JSON.parse(JSON.stringify(this.opt));
+  }
+
+  toChangeItem(event: any){
+    this.values = event;
+  }
+
+}

package/src/app/pages/ui-multi-select/ui-multi-select.component.html

@@ -0,0 +1,14 @@
+<div class="row">
+    <div class="col-md-6">
+        <p>Modo simples</p>
+        <tcloud-ui-multi-select [tcList]="opt" (tcChange)="toChangeItem($event)"></tcloud-ui-multi-select>
+        <pre>{{ values | json }}</pre>
+    </div>
+    <div class="col-md-6">
+        <p>Modo com validacao ngModel - required - Requer ao menos um item marcado</p>
+        <form #_formulario="ngForm">
+            <tcloud-ui-multi-select name="name_of_input" [(ngModel)]="opt_ngmodel" required></tcloud-ui-multi-select>
+            <pre>{{ opt_ngmodel | json }}</pre>
+        </form>
+    </div>
+</div>

package/src/app/pages/ui-multi-select/ui-multi-select.component.ts

@@ -0,0 +1,51 @@
+import { Component, OnInit } from '@angular/core';
+
+interface IOptions {
+    description: string;
+    value: any;
+    active?: boolean;
+    block?: boolean;
+    infoText?: string;
+}
+
+@Component({
+  selector: 'app-ui-multi-select',
+  templateUrl: './ui-multi-select.component.html',
+  styleUrls: ['./ui-multi-select.component.scss']
+})
+export class UiMultiSelectComponent implements OnInit {
+
+  values: any | undefined;
+  opt: IOptions[] = [];
+
+  opt_ngmodel: any | undefined;
+
+  constructor() { }
+
+  ngOnInit(): void {
+
+    this.opt = [
+      {
+        description: 'Opção 1',
+        value: 'opt_1',
+        active: true
+      },
+      {
+        description: 'Opção 2',
+        value: 'opt_2'
+      },
+      {
+        description: 'Opção 3',
+        value: 'opt_3',
+        active: true
+      }
+    ]
+
+    this.opt_ngmodel = JSON.parse(JSON.stringify(this.opt));
+  }
+
+  toChangeItem(event: any){
+    this.values = event;
+  }
+
+}

package/src/app/pages/ui-multiples-values/ui-multiples-values.component.html

@@ -0,0 +1,8 @@
+
+<tcloud-ui-multiples-values [pattern]="pattern" [(ngModel)]="items" [disabled]="false" required [delimiter]="';'" [placeholder]="'Utilize `;` para adicionar mais de um item'" [uppercase]="true" ></tcloud-ui-multiples-values>
+<p>Exemplo de uso</p>
+
+<br>
+<br>
+<tcloud-ui-multiples-values [(ngModel)]="items_data_list" [listItems]="listItems" [disabled]="false" required [placeholder]="'Selecione ao menos um item'" [uppercase]="true" ></tcloud-ui-multiples-values>
+<p>Exemplo de uso</p>

package/src/app/pages/ui-multiples-values/ui-multiples-values.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-ui-multiples-values',
+  templateUrl: './ui-multiples-values.component.html',
+  styleUrls: ['./ui-multiples-values.component.scss']
+})
+export class UiMultiplesValuesComponent implements OnInit {
+
+  pattern = new RegExp('^(?:(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(?:\\/\\d{1,2})?(?:;|$)){1,10}$');
+
+  items = ['COD0001', 'COD0002'];
+  items_data_list = ['COD0003', 'COD0004'];
+
+  listItems: any | undefined;
+
+  constructor() { }
+
+  ngOnInit(): void {
+
+    this.listItems = [
+      {description:'COD0001', value: 'COD0001'},
+      {description:'COD0002', value: 'COD0002'}
+    ];
+  }
+
+}

package/src/app/pages/ui-not-found/ui-not-found.component.html

@@ -0,0 +1 @@
+<tcloud-ui-not-found message="Nenhum registro encontrado"></tcloud-ui-not-found>

package/src/app/pages/ui-not-found/ui-not-found.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-ui-not-found',
+  templateUrl: './ui-not-found.component.html',
+  styleUrls: ['./ui-not-found.component.scss']
+})
+export class UiNotFoundComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/app/pages/ui-number-step/ui-number-step.component.html

@@ -0,0 +1,11 @@
+<tcloud-ui-number-step [step]="5" [active]="step_active"></tcloud-ui-number-step>
+<br>
+<tcloud-ui-number-step [step]="5" [complete]="true"></tcloud-ui-number-step>
+<br>
+<tcloud-ui-number-step [step]="5" [complete]="true" [useIconCheck]="true"></tcloud-ui-number-step>
+<br>
+<tcloud-ui-number-step [step]="5" [active]="4" [inactives]="[2,3]"></tcloud-ui-number-step>
+<br>
+<tcloud-ui-number-step [step]="5" [active]="4" [inactives]="[2,3]" [useIconCheck]="true"></tcloud-ui-number-step>
+<br>
+<tcloud-ui-number-step [step]="5" [active]="3" [useIconCheck]="true"></tcloud-ui-number-step>

package/src/app/pages/ui-number-step/ui-number-step.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-ui-number-step',
+  templateUrl: './ui-number-step.component.html',
+  styleUrls: ['./ui-number-step.component.scss']
+})
+export class UiNumberStepComponent implements OnInit {
+
+  step_active: number = 2;
+
+  constructor() { }
+
+  ngOnInit(): void {
+
+    setTimeout(() => {
+      this.step_active = 3;
+    }, 5000);
+  }
+
+}

package/src/app/pages/ui-progress-bar/ui-progress-bar.component.html

@@ -0,0 +1,15 @@
+<br>
+
+<tcloud-ui-progress-bar status="70"></tcloud-ui-progress-bar>
+
+<br>
+
+<tcloud-ui-progress-bar status="50" mode="warning" height="fat"></tcloud-ui-progress-bar>
+
+<br>
+
+<tcloud-ui-progress-bar status="30" mode="danger"></tcloud-ui-progress-bar>
+
+<br>
+
+<tcloud-ui-progress-bar [status]="status_test" mode="info" height="slim"></tcloud-ui-progress-bar>

package/src/app/pages/ui-progress-bar/ui-progress-bar.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-ui-progress-bar',
+  templateUrl: './ui-progress-bar.component.html',
+  styleUrls: ['./ui-progress-bar.component.scss']
+})
+export class UiProgressBarComponent implements OnInit {
+
+  status_test: number = 10;
+
+  constructor() { }
+
+  ngOnInit(): void {
+
+    setTimeout(() => {
+      this.status_test = 30;
+    }, 2000);
+  }
+
+}

package/src/app/pages/ui-scroll-box/ui-scroll-box.component.html

@@ -0,0 +1,69 @@
+
+<tcloud-ui-scroll-box>
+    <table class="table">
+        <thead>
+            <tr>
+                <th>Nome</th>
+                <th>Nacionalidade</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>Rodrigo</td>
+                <td>Brasileiro</td>
+            </tr>
+            <tr>
+                <td>Leonardo</td>
+                <td>Brasileiro</td>
+            </tr>
+            <tr>
+                <td>Romano</td>
+                <td>Italiano</td>
+            </tr>
+            <tr>
+                <td>Antônio</td>
+                <td>Brasileiro</td>
+            </tr>
+            <tr>
+                <td>Bruno</td>
+                <td>Canadense</td>
+            </tr>
+            <tr>
+                <td>Ana</td>
+                <td>Brasileiro</td>
+            </tr>
+            <tr>
+                <td>Marcia</td>
+                <td>Italiano</td>
+            </tr>
+            <tr>
+                <td>Rodrigo</td>
+                <td>Brasileiro</td>
+            </tr>
+            <tr>
+                <td>Leonardo</td>
+                <td>Brasileiro</td>
+            </tr>
+            <tr>
+                <td>Romano</td>
+                <td>Italiano</td>
+            </tr>
+            <tr>
+                <td>Antônio</td>
+                <td>Brasileiro</td>
+            </tr>
+            <tr>
+                <td>Bruno</td>
+                <td>Canadense</td>
+            </tr>
+            <tr>
+                <td>Ana</td>
+                <td>Brasileiro</td>
+            </tr>
+            <tr>
+                <td>Marcia</td>
+                <td>Italiano</td>
+            </tr>
+        </tbody>
+    </table>
+</tcloud-ui-scroll-box>

package/src/app/pages/ui-scroll-box/ui-scroll-box.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-ui-scroll-box',
+  templateUrl: './ui-scroll-box.component.html',
+  styleUrls: ['./ui-scroll-box.component.scss']
+})
+export class UiScrollBoxComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/app/pages/ui-search-in-object/ui-search-in-object.component.html

@@ -0,0 +1,27 @@
+<div class="row">
+    <div class="col-md-6">
+        <div>
+            <h3>Base:</h3>
+            <pre>{{ base_object | json }}</pre>
+        </div>
+    </div>
+
+    <div class="col-md-6">
+
+        <table>
+            <tr>
+                <td><input class="tc-form-control" #_input_text type="text"></td>
+                <td><button type="button" (click)="buscar(_input_text.value)">Procurar</button></td>
+            </tr>
+        </table>
+        
+        <div>
+            <h3>Resultado:</h3>
+            <pre>{{ result_object | json }}</pre>
+        </div>
+
+    </div>
+</div>
+
+
+

package/src/app/pages/ui-search-in-object/ui-search-in-object.component.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import { TCloudUiSearchInObjectService } from 'projects/tcloud-ui/src/public-api';
+
+@Component({
+  selector: 'app-ui-search-in-object',
+  templateUrl: './ui-search-in-object.component.html',
+  styleUrls: ['./ui-search-in-object.component.scss']
+})
+export class UiSearchInObjectComponent implements OnInit {
+
+  base_object: any = [
+    {"name":"Rodrigo", "last_name": "Rea"},
+    {"name":"João", "last_name": "Alves"},
+    {"name":"Maria", "last_name": "Alves"},
+  ];
+  result_object: any[] = [];
+
+  constructor(
+    private searchInObjectService: TCloudUiSearchInObjectService
+  ) { }
+
+  ngOnInit(): void {
+  }
+
+  buscar(value: string){
+    this.result_object = this.searchInObjectService.meet(`${value}`, this.base_object);
+  }
+}

package/src/app/pages/ui-tab-menu/ui-tab-menu.component.html

@@ -0,0 +1,31 @@
+<tcloud-ui-tab-menu [active]="'item-id-A1'" [full]="true" (onChange)="changeTab($event)">
+    <tcloud-ui-tab-head [background]="false"> 
+        <tcloud-ui-tab-title [tab]="'item-id-A1'" [TCtooltip]="'Tab 1'" >Alterar Senha em Massa</tcloud-ui-tab-title>
+        <tcloud-ui-tab-title [tab]="'item-id-A2'" >Excluir usuários em massa</tcloud-ui-tab-title>
+        <tcloud-ui-tab-title [tab]="'item-id-A3'" >Aplicativos</tcloud-ui-tab-title>
+        <tcloud-ui-tab-title [tab]="'item-id-A4'" >Sessões</tcloud-ui-tab-title>
+    </tcloud-ui-tab-head>
+
+    <tcloud-ui-tab-content [tab]="'item-id-A1'" [hideContent]="true">Content 1</tcloud-ui-tab-content>
+    <tcloud-ui-tab-content [tab]="'item-id-A2'" [hideContent]="true">Content 2</tcloud-ui-tab-content>
+    <tcloud-ui-tab-content [tab]="'item-id-A3'" [hideContent]="true">Content 3</tcloud-ui-tab-content>
+
+</tcloud-ui-tab-menu>
+
+<br>
+<br>
+
+
+<tcloud-ui-tab-menu [active]="'item-id-1'" (onChange)="changeTab($event)">
+    <tcloud-ui-tab-head [background]="false"> 
+        <tcloud-ui-tab-subtitle [tab]="'item-id-1'" [TCtooltip]="'Tab 1'" >Alterar Senha em Massa</tcloud-ui-tab-subtitle>
+        <tcloud-ui-tab-subtitle [tab]="'item-id-2'" >Excluir usuários em massa</tcloud-ui-tab-subtitle>
+        <tcloud-ui-tab-subtitle [tab]="'item-id-3'" >Aplicativos</tcloud-ui-tab-subtitle>
+        <tcloud-ui-tab-subtitle [tab]="'item-id-4'" >Sessões</tcloud-ui-tab-subtitle>
+    </tcloud-ui-tab-head>
+
+    <tcloud-ui-tab-content [tab]="'item-id-1'" [hideContent]="true">Content 1</tcloud-ui-tab-content>
+    <tcloud-ui-tab-content [tab]="'item-id-2'" [hideContent]="true">Content 2</tcloud-ui-tab-content>
+    <tcloud-ui-tab-content [tab]="'item-id-3'" [hideContent]="true">Content 3</tcloud-ui-tab-content>
+
+</tcloud-ui-tab-menu>

package/src/app/pages/ui-tab-menu/ui-tab-menu.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-ui-tab-menu',
+  templateUrl: './ui-tab-menu.component.html',
+  styleUrls: ['./ui-tab-menu.component.scss']
+})
+export class UiTabMenuComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  changeTab(tab: any){
+
+  }
+
+}

package/src/app/pages/ui-table/ui-table.component.html

@@ -0,0 +1,37 @@
+<tcloud-ui-table [striped]="true" [responsive]="true">
+
+    <thead tc-thead>
+        <tr>
+          <th TCalign="start">Nome</th>
+          <th TCalign="end">Email</th>
+          <th>Produtos</th>
+          <th>TCODE</th>
+          <th>Telefone</th>
+          <th>Status</th> 
+          <th>Ações</th>        
+        </tr>
+    </thead>
+
+    <tbody tc-tbody>      
+        <tr>
+            <td TCalign="start" tc-data-label="Nome">info</td>
+            <td TCalign="end" tc-data-label="Email">info</td>
+            <td tc-data-label="Produtos">info</td>
+            <td tc-data-label="TCODE">info</td>
+            <td tc-data-label="Telefone">info</td>
+            <td tc-data-label="Status">info</td>
+            <td tc-data-label="Ações">info</td>          
+        </tr>
+
+        <tr>
+            <td TCalign="start" tc-data-label="Nome">info</td>
+            <td TCalign="end" tc-data-label="Email">info</td>
+            <td tc-data-label="Produtos">info</td>
+            <td tc-data-label="TCODE">info</td>
+            <td tc-data-label="Telefone">info</td>
+            <td tc-data-label="Status">info</td>
+            <td tc-data-label="Ações">info</td>          
+        </tr>  
+    </tbody>
+
+</tcloud-ui-table>

package/src/app/pages/ui-table/ui-table.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-ui-table',
+  templateUrl: './ui-table.component.html',
+  styleUrls: ['./ui-table.component.scss']
+})
+export class UiTableComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}