@dev-tcloud/tcloud-ui 2.2.2 → 2.2.3

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

@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-ui-datepicker',
+  templateUrl: './ui-datepicker.component.html',
+  styleUrls: ['./ui-datepicker.component.scss']
+})
+export class UiDatepickerComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  dateValue: any | undefined = ['22/01/2024'];
+  // dateValue: any | undefined = ['22/01/2024','26/01/2024','29/01/2024','05/02/2024', '06/02/2024','10/02/2024','05/03/2024','08/03/2024','13/03/2024'];
+
+  onCheckDate(obj_date: any){
+
+    console.log( 'onCheckDate obj_date', obj_date );
+
+  }
+}

package/src/app/pages/ui-datepicker-time/ui-datepicker-time.component.html

@@ -0,0 +1,7 @@
+<tcloud-ui-datepicker-time [(ngModel)]="dateValue1"> </tcloud-ui-datepicker-time>
+<pre>Input Value: {{ dateValue1 }}</pre>
+
+<br>
+
+<tcloud-ui-datepicker-time [(ngModel)]="dateValue2" [useOptionsDateTime]="true"></tcloud-ui-datepicker-time>
+<pre>Input Value: {{ dateValue2 }}</pre>

package/src/app/pages/ui-datepicker-time/ui-datepicker-time.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-ui-datepicker-time',
+  templateUrl: './ui-datepicker-time.component.html',
+  styleUrls: ['./ui-datepicker-time.component.scss']
+})
+export class UiDatepickerTimeComponent implements OnInit {
+
+  dateValue1 = new Date();
+  dateValue2 = new Date();
+
+  constructor() { }
+
+  ngOnInit(): void {
+    //console.log('dateValue', this.dateValue1);
+  }
+
+  
+
+}

package/src/app/pages/ui-el-copy/ui-el-copy.component.html

@@ -0,0 +1,16 @@
+    
+<div>
+    <label TCCopy>Clique aqui para copiar</label>
+</div>
+
+<br>
+
+<div>
+    <input type="text" TCCopy>
+</div>
+
+<br>
+
+<div>
+    <input type="text" class="tc-form-control" TCCopy>
+</div>

package/src/app/pages/ui-el-copy/ui-el-copy.component.ts

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

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

@@ -0,0 +1,34 @@
+<tcloud-ui-filters [data]="data" [filters]="filters" (result)="result = $event"  (onFilter)="toApplyFilter($event)" [useRangeDate]="true" ></tcloud-ui-filters>
+<!-- [useOnChangeSubmit]="false" [useButtonSubmit]="true" -->
+
+<table class="table">
+    <tr>
+        <th>Valor</th>
+        <th>Data</th>
+        <th>Nome</th>
+        <th>Sobreome</th>
+        <th>Produto</th>
+        <th>Ativo</th>
+    </tr>
+
+    <ng-container *ngFor="let item of result">
+        <tr>
+            <td>{{ item.valor }}</td>
+            <td>{{ item.start | date: 'dd/MM/yyyy - HH:mm' }}</td>
+            <td>{{ item.name }}</td>
+            <td>{{ item.last_name }}</td>
+            <td>{{ item.product.name }}</td>
+            <td>
+                <i *ngIf="item.active" class="far fa-check-circle"></i>
+                <i *ngIf="!item.active" class="fas fa-minus-circle"></i>
+            </td>
+        </tr>
+    </ng-container>
+</table>
+
+<hr class="mt-4">
+<p>Result:</p>
+<pre>{{ result | json }}</pre>
+<hr class="mt-4">
+<p>filter:</p>
+<pre>{{ filters | json }}</pre>

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

@@ -0,0 +1,154 @@
+import { TCCondition, TCDataFilters, TCFiltersType } from './../../../../projects/tcloud-ui/src/lib/_modules/tcloud-ui-filters/tcloud-ui-filters';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-ui-filters',
+  templateUrl: './ui-filters.component.html',
+  styleUrls: ['./ui-filters.component.scss']
+})
+export class UiFiltersComponent implements OnInit {
+
+  text_date: string = '2011-04-11T10:20:30Z';
+
+  data: any = [
+    {
+      "valor": 1,
+       "start": new Date('2023-04-11T10:20:30Z'),
+       "name":"Rodrigo",
+       "last_name":"Rea",
+       "active":true,
+       "tipo":"prime",
+       "dt_created": 20230411,
+       "product":{
+          "name":"Protheus"
+       },
+       /*"list": [
+        { "description":"10mb"},
+        { "description":"15mb"},
+       ],*/
+       "subitem": [
+        {
+          "list": [
+            { "description":"10Gb"},
+            { "description":"15Gb"},
+         ]
+        }
+       ]
+    },
+    {
+      "valor": 2,
+      "start": new Date('2023-03-11T10:20:30Z'),
+       "name":"João",
+       "last_name":"Alves",
+       "active":true,
+       "tipo":"prime",
+       "dt_created": 20230311,
+       "product":{
+          "name":"RM"
+       },
+       "list": [
+        { "description":"20mb"},
+        { "description":"25mb"},
+       ],
+       "subitem": [
+        {
+          "list": [
+            { "description":"20Gb"},
+            { "description":"25Gb"},
+         ]
+        }
+       ]
+    },
+    {
+      "valor": 10,
+      "start": new Date('2023-03-15T20:30:30Z'),
+       "name":"Maria",
+       "last_name":"Eduarda",
+       "active":false,
+       "tipo":"standard",
+       "dt_created": 20230315,
+       "product":{
+          "name":"Fluig"
+       },
+       "list": [
+        { "description":"30mb"},
+        { "description":"20mb"},
+       ],
+       "subitem": [
+        {
+          "list": [
+            { "description":"45Gb"},
+            { "description":"35Gb"},
+         ]
+        }
+       ]
+    },
+    {
+      "valor": 5,
+      "start": new Date('2023-08-15T20:30:30Z'),
+       "name":"Maria",
+       "last_name":"Alves",
+       "active":true,
+       "tipo":"standard",
+       "dt_created": 20230815,
+       "product":{
+          "name":"Fluig"
+       },
+       "list": [
+        { "description":true},
+        { "description":"10mb"},
+       ],
+       "subitem": [
+        {
+          "list": [
+            { "description":"30Gb"},
+            { "description":"45Gb"},
+         ]
+        }
+       ]
+    }
+  ];
+
+  now = new Date();
+
+  filters: TCDataFilters[] = [
+    { description: 'Nome', searchIn: 'name', placeholder: 'Nome', width: '20%', value: 'Rodrigo'},
+    { description: 'Sobrenome', searchIn: 'last_name', width: '20%' },
+    { description: 'Produto', searchIn: 'product.name', width: '20%' },
+    { description: 'Ativo', searchIn: 'active', type: TCFiltersType.boolean, placeholder: 'Exibir somente ativos', width: '20%' },
+    { description: 'Espaço', searchIn: 'list[].description', width: '10%' },
+    { description: 'Memória', searchIn: 'subitem[].list[].description', width: '10%' },
+    { description: 'Tipo', searchIn: 'tipo', width: '20%', type: TCFiltersType.select, data: [{description:'1° Prime',value:'prime'},{description:'2° Standard',value:'standard'}] },
+    { description: 'Data Inicial', id: 'start', searchIn: 'start', defaultValuePeriodStartStop: '7-days', placeholder: 'Data Inicial', width: '20%', type: TCFiltersType.datetime, condition: TCCondition.gte, useOptionsDateTime: false },
+    { description: 'Data Final', id: 'stop', searchIn: 'stop', placeholder: 'Data Final', width: '20%', type: TCFiltersType.datetime, condition: TCCondition.lte },
+    { description: 'Valor maior ou igual', searchIn: 'valor', placeholder: 'Maior ou igual', width: '20%', type: TCFiltersType.number, condition: TCCondition.gte },
+    { description: 'Valor menor ou igual', searchIn: 'valor', placeholder: 'Menor ou igual', width: '20%', type: TCFiltersType.number, condition: TCCondition.lte },
+
+    { description: 'Data Final', searchIn: 'dt_created', placeholder: 'Data Final', width: '20%', type: TCFiltersType.date, condition: TCCondition.equal },    
+    { description: 'Data Final', searchIn: 'stop', placeholder: 'Data Final', width: '20%', type: TCFiltersType.datetime, condition: TCCondition.lte },
+
+  ];
+
+  result: any = [];
+
+  constructor() { }
+
+  ngOnInit(): void {
+
+   setTimeout(() => {
+      (this.data[1].list).push({"description":"85mb"});
+
+      this.data = [...this.data];
+      
+
+      console.log('adicionando no décimo segundo 85mb em Espaço para o João');
+   }, 10000);
+
+  }
+
+
+  toApplyFilter(event: any){
+    //console.log('toApplyFilter event', event);
+  }
+
+}

package/src/app/pages/ui-hover-parent/ui-hover-parent.component.html

@@ -0,0 +1,14 @@
+<div class="box-parent" id="id_parent">
+
+    <div class="child">
+        <div class="tc-btn tc-btn-primary" [TCHoverParent]="'id_parent'" [TCHoverParentClass]="'parent-to-child-success'" >SUCCESS</div>
+        <br>
+        <br>
+        <div class="tc-btn" [TCHoverParent]="'id_parent'" [TCHoverParentClass]="'parent-to-child-danger'" >DANGER</div>
+    </div>
+
+    
+
+    
+
+</div>

package/src/app/pages/ui-hover-parent/ui-hover-parent.component.scss

@@ -0,0 +1,22 @@
+.box-parent{
+    border: 1px solid #ccc;
+    height: 150px;
+    width: 100%;
+    margin-top: 20px;
+    margin-bottom: 20px;
+
+    .child{
+        width: 150px;
+        margin: 25px auto;
+        text-align: center;
+    }
+
+}
+
+.parent-to-child-success{
+    border: 1px solid #1dca1d;
+}
+
+.parent-to-child-danger{
+    border: 1px solid #ff0000;
+}

package/src/app/pages/ui-hover-parent/ui-hover-parent.component.ts

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

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

@@ -0,0 +1 @@
+<tcloud-ui-input-password [(ngModel)]="password" [actionGeneratePassword]="false" ></tcloud-ui-input-password>

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

@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-ui-input-password',
+  templateUrl: './ui-input-password.component.html',
+  styleUrls: ['./ui-input-password.component.scss']
+})
+export class UiInputPasswordComponent implements OnInit {
+
+  password: string = '123ABC';
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -0,0 +1,19 @@
+<div class="row">
+    <div class="col-md-6">
+        <div>
+            <h3>Base:</h3>
+            <pre>{{ base_object | json }}</pre>
+        </div>
+    </div>
+
+    <div class="col-md-6">
+
+        <tcloud-ui-input-search [base_object]="base_object" (found)="result_object = $event" ></tcloud-ui-input-search>
+        
+        <div>
+            <h3>Resultado:</h3>
+            <pre>{{ result_object | json }}</pre>
+        </div>
+
+    </div>
+</div>

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

@@ -0,0 +1,100 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-ui-input-search',
+  templateUrl: './ui-input-search.component.html',
+  styleUrls: ['./ui-input-search.component.scss']
+})
+export class UiInputSearchComponent implements OnInit {
+
+  base_object: any = [
+    {
+      "name":"Rodrigo",
+      "last_name":"Rea",
+      "active":true,
+      "product":{
+        "name":"Protheus"
+      },
+      "list": [
+      { "description":"10mb"},
+      { "description":"15mb"},
+      ],
+      "subitem": [
+      {
+        "list": [
+          { "description":"10Gb"},
+          { "description":"15Gb"},
+        ]
+      }
+      ]
+    },
+    {
+      "name":"João",
+      "last_name":"Alves",
+      "active":true,
+      "product":{
+        "name":"RM"
+      },
+      "list": [
+      { "description":"20mb"},
+      { "description":"25mb"},
+      ],
+      "subitem": [
+      {
+        "list": [
+          { "description":"20Gb"},
+          { "description":"25Gb"},
+        ]
+      }
+      ]
+    },
+    {
+      "name":"Maria",
+      "last_name":"Eduarda",
+      "active":false,
+      "product":{
+        "name":"Fluig"
+      },
+      "list": [
+      { "description":"30mb"},
+      { "description":"20mb"},
+      ],
+      "subitem": [
+      {
+        "list": [
+          { "description":"45Gb"},
+          { "description":"35Gb"},
+        ]
+      }
+      ]
+    },
+    {
+      "name":"Maria",
+      "last_name":"Alves",
+      "active":true,
+      "product":{
+        "name":"Fluig"
+      },
+      "list": [
+      { "description":true},
+      { "description":"10mb"},
+      ],
+      "subitem": [
+      {
+        "list": [
+          { "description":"30Gb"},
+          { "description":"45Gb"},
+        ]
+      }
+      ]
+    }
+  ];
+
+  result_object: any[] = [];
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/app/pages/ui-line-step-circle/ui-line-step-circle.component.html

@@ -0,0 +1 @@
+<tcloud-ui-line-step-circle [step]="5" [active]="step_active" [inactives]="[2,3]" ></tcloud-ui-line-step-circle>

package/src/app/pages/ui-line-step-circle/ui-line-step-circle.component.ts

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

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

@@ -0,0 +1 @@
+<tcloud-ui-linha-logo [product]="'protheus'"></tcloud-ui-linha-logo>

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/ui-loading.component.html

@@ -0,0 +1,33 @@
+<h4>Exemplo com 3 segundos de carregamento</h4>
+
+<table class="table">
+    <tr>
+        <td style="width: 100%;">
+            <div class="area-example-loading">
+
+                <tcloud-ui-loading [loading]="loading"></tcloud-ui-loading>
+            </div>
+        </td>
+        <td>
+            <button type="button" class="tc-btn" (click)="start()">Start</button>
+        </td>
+    </tr>
+</table>
+
+
+
+<br>
+position: relative
+<table class="table">
+    <tr>
+        <td style="width: 100%;">
+            <div class="area-example-loading" style="position: relative;">
+
+                <tcloud-ui-loading [loading]="loading_relative"></tcloud-ui-loading>
+            </div>
+        </td>
+        <td>
+            <button type="button" class="tc-btn" (click)="start_relative()">Start</button>
+        </td>
+    </tr>
+</table>

package/src/app/pages/ui-loading/ui-loading.component.scss

@@ -0,0 +1,8 @@
+.area-example-loading{
+    
+    width: 100%;
+    border: 1px solid #ccc;
+    height: 200px;
+    margin: 20px;
+    
+}

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

@@ -0,0 +1,42 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-ui-loading',
+  templateUrl: './ui-loading.component.html',
+  styleUrls: ['./ui-loading.component.scss']
+})
+export class UiLoadingComponent {
+
+
+  loading: boolean = false;
+  loading_relative: boolean = false;
+  constructor(
+    
+  ) { }
+
+  ngOnInit(): void {
+  }
+
+  start(){
+    this.loading = true;
+    this.stop();
+  }
+
+  stop(){
+    setTimeout(() => {
+      this.loading = false; 
+    }, 3000);
+  }
+
+  start_relative(){
+    this.loading_relative = true;
+    this.stop_relative();
+  }
+
+  stop_relative(){
+    setTimeout(() => {
+      this.loading_relative = false; 
+    }, 3000);
+  }
+
+}

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);
+  }
+
+}