@dev-tcloud/tcloud-ui 0.1.23 → 2.0.0

package/src/app/pages/ui-data-list/ui-data-list.component.html

@@ -0,0 +1,41 @@
+
+<tcloud-ui-data-list [placeholder]="'Opções'" [(ngModel)]="selected_item" [loading]="loading">
+    <tcloud-ui-data-list-option [value]="''" ></tcloud-ui-data-list-option>
+    <tcloud-ui-data-list-option [value]="'a'" >Opção A</tcloud-ui-data-list-option>
+    <tcloud-ui-data-list-option [value]="'b'" >Opção B</tcloud-ui-data-list-option>
+    <tcloud-ui-data-list-option [value]="'c'" >Opção C</tcloud-ui-data-list-option>
+    <tcloud-ui-data-list-option [value]="'d'" >Opção D</tcloud-ui-data-list-option>
+    <tcloud-ui-data-list-option [value]="'e'" >Opção E</tcloud-ui-data-list-option>
+    <tcloud-ui-data-list-option [value]="'f'" >Opção F</tcloud-ui-data-list-option>
+    <tcloud-ui-data-list-option [value]="'g'" >Opção G</tcloud-ui-data-list-option>
+</tcloud-ui-data-list>
+
+<br><br>
+<pre>selected_item: {{ selected_item }}</pre>
+
+<tcloud-ui-data-list
+    [placeholder]="'Tamanho do Disco'"
+    [(ngModel)]="activeDiskSizeOne">
+    <ng-container *ngFor="let hardDisk of hardDiskListThree">
+    <tcloud-ui-data-list-option [value]="'' + hardDisk?.value">{{ hardDisk?.description }}</tcloud-ui-data-list-option>
+    </ng-container>
+</tcloud-ui-data-list>
+
+<tcloud-ui-data-list
+    [loading]="loading"
+    [placeholder]="'Tamanho do Disco'"
+    [(ngModel)]="activeDiskSizeTwo">
+    <ng-container *ngFor="let hardDisk of hardDiskListThree">
+    <tcloud-ui-data-list-option [value]="'' + hardDisk?.value">{{ hardDisk?.description }}</tcloud-ui-data-list-option>
+    </ng-container>
+</tcloud-ui-data-list>
+
+<tcloud-ui-data-list
+    (onChange)="onChange($event)"
+    (onInputChange)="onInputChange($event)"
+    [placeholder]="'Tamanho do Disco'"
+    [(ngModel)]="activeDiskSizeThree">
+    <ng-container *ngFor="let hardDisk of hardDiskListThree">
+    <tcloud-ui-data-list-option [value]="'' + hardDisk?.value">{{ hardDisk?.description }}</tcloud-ui-data-list-option>
+    </ng-container>
+</tcloud-ui-data-list>

package/src/app/pages/ui-data-list/ui-data-list.component.ts

@@ -0,0 +1,80 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-ui-data-list',
+  templateUrl: './ui-data-list.component.html',
+  styleUrls: ['./ui-data-list.component.scss']
+})
+export class UiDataListComponent implements OnInit {
+
+  loading: boolean = true;
+
+  hardDiskListThree = [] as any[];
+
+  activeDiskSizeOne: number | undefined;
+  activeDiskSizeTwo: number | undefined;
+  activeDiskSizeThree: number | undefined;
+
+  selected_item: string = 'g';
+
+  constructor() { }
+
+  ngOnInit(): void {
+
+    setTimeout(() => {
+      this.loading = false;
+    }, 5000);
+
+    this.hardDiskListThree = [
+      { value: null, description: '' },
+      { value: 50, description: '50 GB' },
+      { value: 100, description: '100 GB' },
+      { value: 150, description: '150 GB' },
+      { value: 200, description: '200 GB' },
+      { value: 250, description: '250 GB' },
+      { value: 300, description: '300 GB' },
+      { value: 350, description: '350 GB' },
+      { value: 400, description: '400 GB' },
+      { value: 450, description: '450 GB' },
+      { value: 500, description: '500 GB' },
+      { value: 550, description: '550 GB' },
+      { value: 600, description: '600 GB' },
+      { value: 650, description: '650 GB' },
+      { value: 700, description: '700 GB' },
+      { value: 750, description: '750 GB' },
+      { value: 800, description: '800 GB' },
+      { value: 850, description: '850 GB' },
+      { value: 900, description: '900 GB' },
+      { value: 950, description: '950 GB' },
+      { value: 1000, description: '1TB' },
+      { value: 1050, description: '1TB e 50GB' },
+      { value: 1100, description: '1TB e 100GB' },
+      { value: 1150, description: '1TB e 150GB' },
+      { value: 1200, description: '1TB e 200GB' },
+      { value: 1250, description: '1TB e 250GB' },
+      { value: 1300, description: '1TB e 300GB' },
+      { value: 1350, description: '1TB e 350GB' },
+      { value: 1400, description: '1TB e 400GB' },
+      { value: 1450, description: '1TB e 450GB' },
+      { value: 1500, description: '1TB e 500GB' },
+      { value: 1550, description: '1TB e 550GB' },
+      { value: 1600, description: '1TB e 600GB' },
+      { value: 1650, description: '1TB e 650GB' },
+      { value: 1700, description: '1TB e 700GB' },
+      { value: 1750, description: '1TB e 750GB' },
+      { value: 1800, description: '1TB e 800GB' },
+      { value: 1850, description: '1TB e 850GB' },
+      { value: 1900, description: '1TB e 900GB' },
+      { value: 1950, description: '1TB e 950GB' },
+      { value: 2000, description: '2TB' },
+    ];
+
+  }
+
+  onChange(event: any){
+  }
+
+  onInputChange(event: any){
+  }
+
+}

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

@@ -0,0 +1,27 @@
+<br>
+<p>Calendário</p>
+<tcloud-ui-datepicker 
+    [multiple]="false"
+    [daysOfWeekDisabled]="[0,6]"
+    [minDate]="'18/11/2021'"
+    [maxDate]="'18/12/2023'"
+    [datesDisabled]="['12/10/2022','25/12/2022']"
+    [modeInput]="false"
+    >
+</tcloud-ui-datepicker>
+<!--  [(ngModel)]="dateValue" -->
+
+
+<br>
+<p>Em Input</p>
+<tcloud-ui-datepicker 
+    [multiple]="false"
+    [daysOfWeekDisabled]="[0,6]"
+    [minDate]="'18/11/2021'"
+    [maxDate]="'18/12/2023'"
+    [datesDisabled]="['12/10/2022','25/12/2022']"
+    [modeInput]="true"
+    [(ngModel)]="dateValue"
+    >
+</tcloud-ui-datepicker>
+<pre>Input Value: {{ dateValue }}</pre>

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

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

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]="false" ></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>