@dev-tcloud/tcloud-ui 2.2.1 → 2.2.3

package/src/app/app.component.html

@@ -0,0 +1,204 @@
+<div class="dev-container">
+    <div class="mt-2 mb-4">
+        <h4>TCLOUD-UI - dev componentes</h4>
+        <p class="test-theme">Theme</p>
+        <div>
+            <button class="tc-btn mr-3" [class.tc-btn-primary]="theme === 'tc-standard'" type="button"
+                (click)="setTheme('tc-standard')">Standard</button>
+            <button class="tc-btn mr-3" [class.tc-btn-primary]="theme === 'tc-prime'" type="button"
+                (click)="setTheme('tc-prime')">Prime</button>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-md-3 box-bordered">
+            <tcloud-ui-scroll-box [maxHeight]="'550'">
+                <button class="tc-btn m-2" [class.tc-btn-primary]="tab === 'app-ui-modal'" (click)="setTab('app-ui-modal')">UI-MODAL</button>
+                <button class="tc-btn m-2" [class.tc-btn-primary]="tab === 'app-ui-tab-menu'" (click)="setTab('app-ui-tab-menu')">UI-TAB-MENU</button>
+                <button class="tc-btn m-2" [class.tc-btn-primary]="tab === 'app-ui-linha-logo'" (click)="setTab('app-ui-linha-logo')">UI-LINHA-LOGO</button>
+                <button class="tc-btn m-2" [class.tc-btn-primary]="tab === 'app-ui-line-step-circle'" (click)="setTab('app-ui-line-step-circle')">UI-LINE-STEP-CIRCLE</button>
+                <button class="tc-btn m-2" [class.tc-btn-primary]="tab === 'app-ui-tooltip'" (click)="setTab('app-ui-tooltip')">UI-TOOTIP</button>
+                <button class="tc-btn m-2" [class.tc-btn-primary]="tab === 'app-ui-multi-select'" (click)="setTab('app-ui-multi-select')">UI-MULTI-SELECT</button>
+                <button class="tc-btn m-2" [class.tc-btn-primary]="tab === 'app-ui-data-list'" (click)="setTab('app-ui-data-list')">UI-DATA-LIST</button>
+                <button class="tc-btn m-2" [class.tc-btn-primary]="tab === 'app-ui-multi-input'" (click)="setTab('app-ui-multi-input')">UI-MULTI-INPUT</button>
+                <button class="tc-btn m-2" [class.tc-btn-primary]="tab === 'app-ui-choice-issues'" (click)="setTab('app-ui-choice-issues')">UI-CHOICE-ISSUES</button>
+                <button class="tc-btn m-2" [class.tc-btn-primary]="tab === 'app-ui-loading-transitions'" (click)="setTab('app-ui-loading-transitions')">UI-LOADING-TRANSITIONS</button>
+                <button class="tc-btn m-2" [class.tc-btn-primary]="tab === 'app-ui-search-in-object'" (click)="setTab('app-ui-search-in-object')">UI-SEARCH-IN-OBJECT</button>
+                <button class="tc-btn m-2" [class.tc-btn-primary]="tab === 'app-ui-input-search'" (click)="setTab('app-ui-input-search')">UI-INPUT-SEARCH</button>
+                <button class="tc-btn m-2" [class.tc-btn-primary]="tab === 'app-ui-not-found'" (click)="setTab('app-ui-not-found')">UI-NOT-FOUND</button>
+                <button class="tc-btn m-2" [class.tc-btn-primary]="tab === 'app-ui-table'" (click)="setTab('app-ui-table')">UI-TABLE</button>
+                <button class="tc-btn m-2" [class.tc-btn-primary]="tab === 'app-ui-number-step'" (click)="setTab('app-ui-number-step')">UI-NUMBER-STEP</button>
+                <button class="tc-btn m-2" [class.tc-btn-primary]="tab === 'app-ui-scroll-box'" (click)="setTab('app-ui-scroll-box')">UI-SCROLL-BOX</button>
+                <button class="tc-btn m-2" [class.tc-btn-primary]="tab === 'app-ui-filters'" (click)="setTab('app-ui-filters')">UI-FILTERS</button>
+                <button class="tc-btn m-2" [class.tc-btn-primary]="tab === 'app-ui-accordion'" (click)="setTab('app-ui-accordion')">UI-ACCORDION</button>
+                <button class="tc-btn m-2" [class.tc-btn-primary]="tab === 'app-ui-hover-parent'" (click)="setTab('app-ui-hover-parent')">UI-HOVER-PARENT</button>
+                <button class="tc-btn m-2" [class.tc-btn-primary]="tab === 'app-ui-datepicker'" (click)="setTab('app-ui-datepicker')">UI-DATEPICKER</button>
+                <button class="tc-btn m-2" [class.tc-btn-primary]="tab === 'app-ui-datepicker-time'" (click)="setTab('app-ui-datepicker-time')">UI-DATEPICKER-TIME</button>
+                <button class="tc-btn m-2" [class.tc-btn-primary]="tab === 'app-ui-multiples-values'" (click)="setTab('app-ui-multiples-values')">UI-MULTIPLES-VALUES</button>
+                <button class="tc-btn m-2" [class.tc-btn-primary]="tab === 'app-ui-welcome'" (click)="setTab('app-ui-welcome')">UI-WELCOME</button>
+                <button class="tc-btn m-2" [class.tc-btn-primary]="tab === 'app-ui-array-to-text'" (click)="setTab('app-ui-array-to-text')">UI-ARRAY-TO-TEXT</button>
+                <button class="tc-btn m-2" [class.tc-btn-primary]="tab === 'app-ui-input-password'" (click)="setTab('app-ui-input-password')">UI-INPUT-PASSWORD</button>
+                <button class="tc-btn m-2" [class.tc-btn-primary]="tab === 'app-ui-el-copy'" (click)="setTab('app-ui-el-copy')">UI-EL-COPY</button>
+                <button class="tc-btn m-2" [class.tc-btn-primary]="tab === 'app-ui-progress-bar'" (click)="setTab('app-ui-progress-bar')">UI-PROGRESS-BAR</button>
+                <button class="tc-btn m-2" [class.tc-btn-primary]="tab === 'app-ui-currency'" (click)="setTab('app-ui-currency')">UI-CURRENCY</button>
+                <button class="tc-btn m-2" [class.tc-btn-primary]="tab === 'app-ui-loading'" (click)="setTab('app-ui-loading')">UI-LOADING</button>
+                <button class="tc-btn m-2" [class.tc-btn-primary]="tab === 'app-ui-reorder-items'" (click)="setTab('app-ui-reorder-items')">UI-REORDER-ITEMS</button>
+            </tcloud-ui-scroll-box>
+        </div>
+
+        <div class="col-md-9 box-bordered">
+            <div *ngIf="tab === 'app-ui-modal'">
+                <h3>UI-MODAL</h3>
+                <app-ui-modal></app-ui-modal>
+            </div>
+
+            <div *ngIf="tab === 'app-ui-tab-menu'">
+                <h3>UI-TAB-MENU</h3>
+                <app-ui-tab-menu></app-ui-tab-menu>
+            </div>
+
+            <div *ngIf="tab === 'app-ui-linha-logo'">
+                <h3>UI-LINHA-LOGO</h3>
+                <app-ui-linha-logo></app-ui-linha-logo>
+            </div>
+
+            <div *ngIf="tab === 'app-ui-line-step-circle'">
+                <h3>UI-LINE-STEP-CIRCLE</h3>
+                <app-ui-line-step-circle></app-ui-line-step-circle>
+            </div>
+
+            <div *ngIf="tab === 'app-ui-tooltip'">
+                <h3>UI-TOOTIP</h3>
+                <app-ui-tooltip></app-ui-tooltip>
+            </div>
+
+            <div *ngIf="tab === 'app-ui-multi-select'">
+                <h3>UI-MULTI-SELECT</h3>
+                <app-ui-multi-select></app-ui-multi-select>
+            </div>
+
+            <div *ngIf="tab === 'app-ui-data-list'">
+                <h3>UI-DATA-LIST</h3>
+                <app-ui-data-list></app-ui-data-list>
+            </div>
+
+            <div *ngIf="tab === 'app-ui-multi-input'">
+                <h3>UI-MULTI-INPUT</h3>
+                <app-ui-multi-input></app-ui-multi-input>
+            </div>
+
+            <div *ngIf="tab === 'app-ui-choice-issues'">
+                <h3>UI-CHOICE-ISSUES</h3>
+                <app-ui-choice-issues></app-ui-choice-issues>
+            </div>
+
+            <div *ngIf="tab === 'app-ui-loading-transitions'">
+                <h3>UI-LOADING-TRANSITIONS</h3>
+                <app-ui-loading-transitions></app-ui-loading-transitions>
+            </div>
+
+            <div *ngIf="tab === 'app-ui-search-in-object'">
+                <h3>UI-SEARCH-IN-OBJECT</h3>
+                <app-ui-search-in-object></app-ui-search-in-object>
+            </div>
+
+            <div *ngIf="tab === 'app-ui-input-search'">
+                <h3>UI-INPUT-SEARCH</h3>
+                <app-ui-input-search></app-ui-input-search>
+            </div>
+
+            <div *ngIf="tab === 'app-ui-not-found'">
+                <h3>UI-NOT-FOUND</h3>
+                <app-ui-not-found></app-ui-not-found>
+            </div>
+
+            <div *ngIf="tab === 'app-ui-table'">
+                <h3>UI-TABLE</h3>
+                <app-ui-table></app-ui-table>
+            </div>
+
+            <div *ngIf="tab === 'app-ui-number-step'">
+                <h3>UI-NUMBER-STEP</h3>
+                <app-ui-number-step></app-ui-number-step>
+            </div>
+
+            <div *ngIf="tab === 'app-ui-scroll-box'">
+                <h3>UI-SCROLL-BOX</h3>
+                <app-ui-scroll-box></app-ui-scroll-box>
+            </div>
+
+            <div *ngIf="tab === 'app-ui-filters'">
+                <h3>UI-FILTERS</h3>
+                <app-ui-filters></app-ui-filters>
+            </div>
+
+            <div *ngIf="tab === 'app-ui-accordion'">
+                <h3>UI-ACCORDION</h3>
+                <app-ui-accordion></app-ui-accordion>
+            </div>
+
+            <div *ngIf="tab === 'app-ui-hover-parent'">
+                <h3>UI-HOVER-PARENT</h3>
+                <app-ui-hover-parent></app-ui-hover-parent>
+            </div>
+
+            <div *ngIf="tab === 'app-ui-datepicker'">
+                <h3>UI-DATEPICKER</h3>
+                <app-ui-datepicker></app-ui-datepicker>
+            </div>
+
+            <div *ngIf="tab === 'app-ui-datepicker-time'">
+                <h3>UI-DATEPICKER-TIME</h3>
+                <app-ui-datepicker-time></app-ui-datepicker-time>
+            </div>
+
+            <div *ngIf="tab === 'app-ui-multiples-values'">
+                <h3>UI-MULTIPLES-VALUES</h3>
+                <app-ui-multiples-values></app-ui-multiples-values>
+            </div>
+
+            <div *ngIf="tab === 'app-ui-welcome'">
+                <h3>UI-WELCOME</h3>
+                <app-ui-welcome></app-ui-welcome>
+            </div>
+
+            <div *ngIf="tab === 'app-ui-array-to-text'">
+                <h3>UI-ARRAY-TO-TEXT</h3>
+                <app-ui-array-to-text></app-ui-array-to-text>
+            </div>
+
+            <div *ngIf="tab === 'app-ui-input-password'">
+                <h3>UI-INPUT-PASSWORD</h3>
+                <app-ui-input-password></app-ui-input-password>
+            </div>
+
+            <div *ngIf="tab === 'app-ui-el-copy'">
+                <h3>UI-EL-COPY</h3>
+                <app-ui-el-copy></app-ui-el-copy>
+            </div>
+
+            <div *ngIf="tab === 'app-ui-progress-bar'">
+                <h3>UI-PROGRESS_BAR</h3>
+                <app-ui-progress-bar></app-ui-progress-bar>
+            </div>
+
+            <div *ngIf="tab === 'app-ui-currency'">
+                <h3>UI-CURRENCY</h3>
+                <app-ui-currency></app-ui-currency>
+            </div>
+
+            <div *ngIf="tab === 'app-ui-loading'">
+                <h3>UI-LOADING</h3>
+                <app-ui-loading></app-ui-loading>
+            </div>
+
+            <div *ngIf="tab === 'app-ui-reorder-items'">
+                <h3>UI-REORDER-ITEMS</h3>
+                <app-ui-reorder-items></app-ui-reorder-items>
+            </div>
+        </div>
+    </div>
+
+
+
+</div>

package/src/app/app.component.scss

@@ -0,0 +1,9 @@
+.dev-container{
+    padding: 40px;
+}
+
+.box-bordered{
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    padding: 12px;
+}

package/src/app/app.component.ts

@@ -0,0 +1,37 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent implements OnInit {
+  theme: string = 'tc-standard';
+  title = 'tcloud-ui';
+
+  tab: string = '';
+
+  ngOnInit(){
+    this.setTheme(this.theme);
+  }
+
+  setTab(tab: string){
+    this.tab =  ( tab === this.tab ) ? '' : tab;
+  }
+
+  setTheme(theme: string){
+    this.theme = theme;
+
+    var bodyElement = document.querySelector('body') as any;
+    
+
+    if( this.theme === 'tc-prime' ){
+      bodyElement.classList.add('tc-prime');
+      bodyElement.classList.remove('tc-standard');
+    }else{
+      bodyElement.classList.add('tc-standard');
+      bodyElement.classList.remove('tc-prime');
+    }
+    
+  }
+}

package/src/app/app.module.ts

@@ -0,0 +1,91 @@
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterModule } from '@angular/router';
+
+import { TCloudUiModule } from './../../projects/tcloud-ui/src/lib/tcloud-ui.module';
+
+import { UiModalComponent } from './pages/ui-modal/ui-modal.component';
+
+import { UiTabMenuComponent } from './pages/ui-tab-menu/ui-tab-menu.component';
+
+import { UiLinhaLogoComponent } from './pages/ui-linha-logo/ui-linha-logo.component';
+
+import { UiLineStepCircleComponent } from './pages/ui-line-step-circle/ui-line-step-circle.component';
+import { UiMultiSelectComponent } from './pages/ui-multi-select/ui-multi-select.component';
+import { UiDataListComponent } from './pages/ui-data-list/ui-data-list.component';
+import { UiTooltipComponent } from './pages/ui-tooltip/ui-tooltip.component';
+import { UiMultiInputComponent } from './pages/ui-multi-input/ui-multi-input.component';
+import { UiChoiceIssuesComponent } from './pages/ui-choice-issues/ui-choice-issues.component';
+import { UiLoadingTransitionsComponent } from './pages/ui-loading-transitions/ui-loading-transitions.component';
+import { UiSearchInObjectComponent } from './pages/ui-search-in-object/ui-search-in-object.component';
+import { UiInputSearchComponent } from './pages/ui-input-search/ui-input-search.component';
+import { UiNotFoundComponent } from './pages/ui-not-found/ui-not-found.component';
+import { UiTableComponent } from './pages/ui-table/ui-table.component';
+import { UiNumberStepComponent } from './pages/ui-number-step/ui-number-step.component';
+import { UiScrollBoxComponent } from './pages/ui-scroll-box/ui-scroll-box.component';
+import { UiFiltersComponent } from './pages/ui-filters/ui-filters.component';
+import { UiAccordionComponent } from './pages/ui-accordion/ui-accordion.component';
+import { UiHoverParentComponent } from './pages/ui-hover-parent/ui-hover-parent.component';
+import { UiDatepickerComponent } from './pages/ui-datepicker/ui-datepicker.component';
+import { UiDatepickerTimeComponent } from './pages/ui-datepicker-time/ui-datepicker-time.component';
+import { UiMultiplesValuesComponent } from './pages/ui-multiples-values/ui-multiples-values.component';
+import { UiWelcomeComponent } from './pages/ui-welcome/ui-welcome.component';
+import { UiArrayToTextComponent } from './pages/ui-array-to-text/ui-array-to-text.component';
+import { UiInputPasswordComponent } from './pages/ui-input-password/ui-input-password.component';
+import { UiElCopyComponent } from './pages/ui-el-copy/ui-el-copy.component';
+import { UiProgressBarComponent } from './pages/ui-progress-bar/ui-progress-bar.component';
+import { UiCurrencyComponent } from './pages/ui-currency/ui-currency.component';
+import { UiLoadingComponent } from './pages/ui-loading/ui-loading.component';
+import { UiReorderItemsComponent } from './pages/ui-reorder-items/ui-reorder-items.component';
+
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    UiModalComponent,
+    UiTabMenuComponent,
+    UiLinhaLogoComponent,
+    UiLineStepCircleComponent,
+    UiMultiSelectComponent,
+    UiDataListComponent,
+    UiTooltipComponent,
+    UiMultiInputComponent,
+    UiChoiceIssuesComponent,
+    UiLoadingTransitionsComponent,
+    UiSearchInObjectComponent,
+    UiInputSearchComponent,
+    UiNotFoundComponent,
+    UiTableComponent,
+    UiNumberStepComponent,
+    UiScrollBoxComponent,
+    UiFiltersComponent,
+    UiAccordionComponent,
+    UiHoverParentComponent,
+    UiDatepickerComponent,
+    UiDatepickerTimeComponent,
+    UiMultiplesValuesComponent,
+    UiWelcomeComponent,
+    UiArrayToTextComponent,
+    UiInputPasswordComponent,
+    UiElCopyComponent,
+    UiProgressBarComponent,
+    UiCurrencyComponent,
+    UiLoadingComponent,
+    UiReorderItemsComponent
+  ],
+  imports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+    RouterModule.forRoot([]),
+    FormsModule,
+    ReactiveFormsModule,
+
+    TCloudUiModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

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

@@ -0,0 +1,25 @@
+<tcloud-ui-accordion [disabled]="true" [show]="show" (onAction)="toAction($event)">
+    <tcloud-ui-accordion-title>Título</tcloud-ui-accordion-title>
+    <tcloud-ui-accordion-body>
+        Conteúdo
+    </tcloud-ui-accordion-body>
+</tcloud-ui-accordion>
+
+<tcloud-ui-accordion>
+    <tcloud-ui-accordion-title>Título</tcloud-ui-accordion-title>
+    <tcloud-ui-accordion-body>
+
+        <table class="table">
+            <tr>
+                <th>Produto</th><th>Versão</th>
+            </tr>
+            <tr>
+                <td>Protheus</td><td>v0.1.0</td>
+            </tr>
+            <tr>
+                <td>RM</td><td>v0.5.5</td>
+            </tr>
+        </table>
+
+    </tcloud-ui-accordion-body>
+</tcloud-ui-accordion>

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

@@ -0,0 +1,27 @@
+import { TCloudUiAccordionService } from './../../../../projects/tcloud-ui/src/lib/_modules/tcloud-ui-accordion/services/tcloud-ui-accordion.service';
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-ui-accordion',
+  templateUrl: './ui-accordion.component.html',
+  styleUrls: ['./ui-accordion.component.scss']
+})
+export class UiAccordionComponent implements OnInit {
+
+  show: boolean = true;
+
+  constructor(
+    
+  ) { }
+
+  ngOnInit(): void {
+
+    setTimeout(() => {
+      this.show = false;
+    }, 5000);
+  }
+
+  toAction(action: string){
+  }
+
+}

package/src/app/pages/ui-array-to-text/ui-array-to-text.component.html

@@ -0,0 +1,8 @@
+
+<br>
+<pre>{{ my_array | json }}</pre>
+<br>
+<p>{{'{{'}}my_array | toText{{'}}'}}</p>
+<div>{{ my_array | toText }}</div>
+
+

package/src/app/pages/ui-array-to-text/ui-array-to-text.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-ui-array-to-text',
+  templateUrl: './ui-array-to-text.component.html',
+  styleUrls: ['./ui-array-to-text.component.scss']
+})
+export class UiArrayToTextComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  my_array = ['Abacaxi','Uva','Banana','Goiaba'];
+
+}

package/src/app/pages/ui-choice-issues/ui-choice-issues.component.html

@@ -0,0 +1,8 @@
+<tcloud-ui-choice-issues 
+    (onChange)="addIssue($event)"
+    [(ngModel)]="checked"
+    [titulo]="'Deseja sinalisar como concluído?'" 
+    [subTitulo]="'As ações concluídas serão enviadas para a fila de processamento'">
+</tcloud-ui-choice-issues>
+
+<pre>checked: {{ checked }}</pre>

package/src/app/pages/ui-choice-issues/ui-choice-issues.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-ui-choice-issues',
+  templateUrl: './ui-choice-issues.component.html',
+  styleUrls: ['./ui-choice-issues.component.scss']
+})
+export class UiChoiceIssuesComponent implements OnInit {
+
+  checked: boolean = false;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  addIssue(event: any){
+    //console.log('addIssue event', event);
+  }
+
+}

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

@@ -0,0 +1,6 @@
+<input TCcurrency [(ngModel)]="valor" class="tc-form-control">
+<br>
+Valor: {{ valor }} - {{ typeOfv(valor) }}
+<br>
+<br>
+&#x3c;&#x69;&#x6e;&#x70;&#x75;&#x74;&#x20;&#x54;&#x43;&#x63;&#x75;&#x72;&#x72;&#x65;&#x6e;&#x63;&#x79;&#x20;&#x5b;&#x28;&#x6e;&#x67;&#x4d;&#x6f;&#x64;&#x65;&#x6c;&#x29;&#x5d;&#x3d;&#x22;&#x76;&#x61;&#x6c;&#x6f;&#x72;&#x22;&#x20;&#x63;&#x6c;&#x61;&#x73;&#x73;&#x3d;&#x22;&#x74;&#x63;&#x2d;&#x66;&#x6f;&#x72;&#x6d;&#x2d;&#x63;&#x6f;&#x6e;&#x74;&#x72;&#x6f;&#x6c;&#x22;&#x3e;

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

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-ui-currency',
+  templateUrl: './ui-currency.component.html',
+  styleUrls: ['./ui-currency.component.scss']
+})
+export class UiCurrencyComponent {
+
+  valor: number = 100000.50;
+
+  typeOfv(v: any){
+    return typeof v;
+  }
+}

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'" [disabled]="true" >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" [disabled]="hardDisk?.disabled" >{{ 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" [disabled]="hardDisk?.disabled">{{ 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" [disabled]="hardDisk?.disabled">{{ 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', disabled: true },
+      { 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"
+    [startViewInMinDate]="true"
+    [daysOfWeekDisabled]="[]"
+    [modeInput]="false"
+    [(ngModel)]="dateValue"
+    [disabled]="true"
+    (onCheckDate)="onCheckDate($event)"
+    >
+</tcloud-ui-datepicker>
+<pre>Input Value: {{ dateValue }}</pre>