@dev-tcloud/tcloud-ui 0.0.90 → 0.0.91

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

@@ -0,0 +1,147 @@
+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": 20230720,
+       "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, UTC: true },
+    //{ description: 'Data Final', id: 'stop', searchIn: 'start', 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.lt },
+
+  ];
+
+  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);
+
+  }
+
+}

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-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-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">
+  <tcloud-ui-modal-header title="Título do Modal" ></tcloud-ui-modal-header>
+  <tcloud-ui-modal-body>
+    Conteúdo do modal aqui
+  </tcloud-ui-modal-body>
+  <tcloud-ui-modal-footer></tcloud-ui-modal-footer>
+</tcloud-ui-modal>
+
+<button type="button" (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" (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 [(ngModel)]="items" [disabled]="false" required [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]="'Utilize `,` para adicionar mais de 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,25 @@
+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 {
+
+  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>