@dev-tcloud/tcloud-ui 0.1.23 → 2.0.0

package/{public-api.d.ts → projects/tcloud-ui/src/public-api.ts}

@@ -1,64 +1,116 @@
+/*
+ * Public API Surface of tcloud-ui
+ */
+
 export * from './lib/tcloud-ui.module';
+
+// UI-MODAL
 export * from './lib/_modules/tcloud-ui-modal/tcloud-ui-modal.module';
 export * from './lib/_modules/tcloud-ui-modal/tcloud-ui-modal.component';
 export * from './lib/_modules/tcloud-ui-modal/components/tcloud-ui-modal-header/tcloud-ui-modal-header.component';
 export * from './lib/_modules/tcloud-ui-modal/components/tcloud-ui-modal-body/tcloud-ui-modal-body.component';
 export * from './lib/_modules/tcloud-ui-modal/components/tcloud-ui-modal-footer/tcloud-ui-modal-footer.component';
+
+// UI-TAB-MENU
 export * from './lib/_modules/tcloud-ui-tab-menu/tcloud-ui-tab-menu.module';
 export * from './lib/_modules/tcloud-ui-tab-menu/tcloud-ui-tab-menu.component';
 export * from './lib/_modules/tcloud-ui-tab-menu/components/tcloud-ui-tab-content/tcloud-ui-tab-content.component';
 export * from './lib/_modules/tcloud-ui-tab-menu/components/tcloud-ui-tab-head/tcloud-ui-tab-head.component';
 export * from './lib/_modules/tcloud-ui-tab-menu/components/tcloud-ui-tab-subtitle/tcloud-ui-tab-subtitle.component';
 export * from './lib/_modules/tcloud-ui-tab-menu/components/tcloud-ui-tab-title/tcloud-ui-tab-title.component';
+
+// UI-LINHA-LOGO
 export * from './lib/_modules/tcloud-ui-linha-logo/tcloud-ui-linha-logo.module';
 export * from './lib/_modules/tcloud-ui-linha-logo/tcloud-ui-linha-logo.component';
+
+// UI-STEP-CIRCLE
 export * from './lib/_modules/tcloud-ui-line-step-circle/tcloud-ui-line-step-circle.module';
 export * from './lib/_modules/tcloud-ui-line-step-circle/tcloud-ui-line-step-circle.component';
+
+// UI-MULTI-SELECT
 export * from './lib/_modules/tcloud-ui-multi-select/tcloud-ui-multi-select.module';
 export * from './lib/_modules/tcloud-ui-multi-select/tcloud-ui-multi-select.component';
+
+// UI-TOOLTIP
 export * from './lib/_modules/tcloud-ui-data-list/tcloud-ui-data-list.module';
 export * from './lib/_modules/tcloud-ui-data-list/tcloud-ui-data-list.component';
 export * from './lib/_modules/tcloud-ui-data-list/tcloud-ui-data-list-option/tcloud-ui-data-list-option.component';
+
+// UI-MULTI-INPUT
 export * from './lib/_modules/tcloud-ui-multi-input/tcloud-ui-multi-input.module';
 export * from './lib/_modules/tcloud-ui-multi-input/tcloud-ui-multi-input.component';
+
+// UI-CHOICE-ISSUES
 export * from './lib/_modules/tcloud-ui-choice-issues/tcloud-ui-choice-issues.module';
 export * from './lib/_modules/tcloud-ui-choice-issues/tcloud-ui-choice-issues.component';
+
+// UI-INPUT-SEARCH
 export * from './lib/_modules/tcloud-ui-input-search/tcloud-ui-input-search.module';
 export * from './lib/_modules/tcloud-ui-input-search/tcloud-ui-input-search.component';
+
+// UI-NOT-FOUND
 export * from './lib/_modules/tcloud-ui-not-found/tcloud-ui-not-found.module';
 export * from './lib/_modules/tcloud-ui-not-found/tcloud-ui-not-found.component';
+
+// UI-TABLE
 export * from './lib/_modules/tcloud-ui-table/tcloud-ui-table.module';
 export * from './lib/_modules/tcloud-ui-table/tcloud-ui-table.component';
+
+// UI-NUMBER-STEP
 export * from './lib/_modules/tcloud-ui-number-step/tcloud-ui-number-step.module';
 export * from './lib/_modules/tcloud-ui-number-step/tcloud-ui-number-step.component';
+
+// UI-SCROLL-BOX
 export * from './lib/_modules/tcloud-ui-scroll-box/tcloud-ui-scroll-box.module';
 export * from './lib/_modules/tcloud-ui-scroll-box/tcloud-ui-scroll-box.component';
+
+// UI-FILTERS
 export * from './lib/_modules/tcloud-ui-filters/tcloud-ui-filters';
 export * from './lib/_modules/tcloud-ui-filters/tcloud-ui-filters.module';
 export * from './lib/_modules/tcloud-ui-filters/tcloud-ui-filters.component';
 export * from './lib/_modules/tcloud-ui-filters/components/range-date/range-date.component';
+
+// UI-ACCORDION
 export * from './lib/_modules/tcloud-ui-accordion/tcloud-ui-accordion.module';
 export * from './lib/_modules/tcloud-ui-accordion/tcloud-ui-accordion.component';
 export * from './lib/_modules/tcloud-ui-accordion/components/tcloud-ui-accordion-title/tcloud-ui-accordion-title.component';
 export * from './lib/_modules/tcloud-ui-accordion/components/tcloud-ui-accordion-body/tcloud-ui-accordion-body.component';
+
+// UI-DATEPICKER
 export * from './lib/_modules/tcloud-ui-datepicker/tcloud-ui-datepicker.module';
 export * from './lib/_modules/tcloud-ui-datepicker/tcloud-ui-datepicker.component';
+
+// UI-DATEPICKER-TIME
 export * from './lib/_modules/tcloud-ui-datepicker-time/tcloud-ui-datepicker-time.module';
 export * from './lib/_modules/tcloud-ui-datepicker-time/tcloud-ui-datepicker-time.component';
+
+// UI-MULTIPLES-VALUES
 export * from './lib/_modules/tcloud-ui-multiples-values/tcloud-ui-multiples-values.module';
 export * from './lib/_modules/tcloud-ui-multiples-values/tcloud-ui-multiples-values.component';
+
+// UI-WELCOME
 export * from './lib/_modules/tcloud-ui-welcome/tcloud-ui-welcome.module';
 export * from './lib/_modules/tcloud-ui-welcome/tcloud-ui-welcome.component';
+
+// UI-INPUT-PASSWORD
 export * from './lib/_modules/tcloud-ui-input-password/tcloud-ui-input-password.module';
 export * from './lib/_modules/tcloud-ui-input-password/tcloud-ui-input-password.component';
+
+// UI-PROGRESS-BAR
 export * from './lib/_modules/tcloud-ui-progress-bar/tcloud-ui-progress-bar.module';
 export * from './lib/_modules/tcloud-ui-progress-bar/tcloud-ui-progress-bar.component';
+
+// DIRECTIVES
 export * from './lib/_directives/directives.module';
 export * from './lib/_directives/tooltip/tooltip.directive';
 export * from './lib/_directives/align/align.directive';
 export * from './lib/_directives/hover-parent/hover-parent.directive';
 export * from './lib/_directives/el-copy/el-copy.directive';
+
+// PIPES
 export * from './lib/_pipes/tcloud-pipes.module';
 export * from './lib/_pipes/index';
+
+// SERVICES
 export * from './lib/_services/loading-transitions.service';
-export * from './lib/_services/search-in-object.service';
+export * from './lib/_services/search-in-object.service';

package/projects/tcloud-ui/src/test.ts

@@ -0,0 +1,15 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+);

package/projects/tcloud-ui/tsconfig.lib.json

@@ -0,0 +1,15 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

package/projects/tcloud-ui/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/projects/tcloud-ui/tsconfig.spec.json

@@ -0,0 +1,17 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

package/scripts/copy-artifacts.js

@@ -0,0 +1,40 @@
+const fs = require('fs')
+const path = require('path')
+const artifacts = ['README.md'/*, 'CHANGELOG.md', 'LICENSE.md'*/]
+artifacts.forEach(file => {
+  let fromPath = path.resolve(__dirname, '..', 'projects/tcloud-ui/', file)
+  let destPath = path.resolve(__dirname, '..', 'dist/tcloud-ui/', file)
+  fs.readFile(fromPath, 'utf-8', (err, data) => {
+    if (err) {
+      console.log('An error occured:', err)
+      return
+    }
+    fs.writeFile(destPath, data, (err) => {
+      if (err) {
+        console.log('An error occured:', err)
+        return
+      }
+      console.log(`Copied ${file}:`)
+    })
+  })
+})
+
+const fse = require('fs-extra');
+const scss = 'scss'
+let fromPath = path.resolve(__dirname, '..', 'projects/tcloud-ui/assets', scss)
+let destPath = path.resolve(__dirname, '..', 'dist/tcloud-ui', scss)
+try {
+  fse.copySync(fromPath, destPath, { overwrite: true|false })
+  console.log('assets successfully copied')
+} catch (err) {
+  console.error(err)
+}
+
+let DatePickerfromPath = path.resolve(__dirname, '..', 'projects/tcloud-ui/assets', 'datepicker')
+let DatePickerdestPath = path.resolve(__dirname, '..', 'dist/tcloud-ui', 'datepicker')
+try {
+  fse.copySync(DatePickerfromPath, DatePickerdestPath, { overwrite: true|false })
+  console.log('datepicker successfully copied')
+} catch (err) {
+  console.error(err)
+}

package/src/app/app.component.html

@@ -0,0 +1,177 @@
+
+
+<div class="container">
+    <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 class="mt-5">
+        <button (click)="setTab('app-ui-modal')" >UI-MODAL</button>
+        <button (click)="setTab('app-ui-tab-menu')" >UI-TAB-MENU</button>
+        <button (click)="setTab('app-ui-linha-logo')" >UI-LINHA-LOGO</button>
+        <button (click)="setTab('app-ui-line-step-circle')" >UI-LINE-STEP-CIRCLE</button>
+        <button (click)="setTab('app-ui-tooltip')" >UI-TOOTIP</button>
+        <button (click)="setTab('app-ui-multi-select')" >UI-MULTI-SELECT</button>
+        <button (click)="setTab('app-ui-data-list')" >UI-DATA-LIST</button>
+        <button (click)="setTab('app-ui-multi-input')" >UI-MULTI-INPUT</button>
+        <button (click)="setTab('app-ui-choice-issues')" >UI-CHOICE-ISSUES</button>
+        <button (click)="setTab('app-ui-loading-transitions')" >UI-LOADING-TRANSITIONS</button>
+        <button (click)="setTab('app-ui-search-in-object')" >UI-SEARCH-IN-OBJECT</button>
+        <button (click)="setTab('app-ui-input-search')" >UI-INPUT-SEARCH</button>
+        <button (click)="setTab('app-ui-not-found')" >UI-NOT-FOUND</button>
+        <button (click)="setTab('app-ui-table')" >UI-TABLE</button>
+        <button (click)="setTab('app-ui-number-step')" >UI-NUMBER-STEP</button>
+        <button (click)="setTab('app-ui-scroll-box')" >UI-SCROLL-BOX</button>
+        <button (click)="setTab('app-ui-filters')" >UI-FILTERS</button>
+        <button (click)="setTab('app-ui-accordion')" >UI-ACCORDION</button>
+        <button (click)="setTab('app-ui-hover-parent')" >UI-HOVER-PARENT</button>
+        <button (click)="setTab('app-ui-datepicker')" >UI-DATEPICKER</button>
+        <button (click)="setTab('app-ui-datepicker-time')" >UI-DATEPICKER-TIME</button>
+        <button (click)="setTab('app-ui-multiples-values')" >UI-MULTIPLES-VALUES</button>
+        <button (click)="setTab('app-ui-welcome')" >UI-WELCOME</button>
+        <button (click)="setTab('app-ui-array-to-text')" >UI-ARRAY-TO-TEXT</button>
+        <button (click)="setTab('app-ui-input-password')" >UI-INPUT-PASSWORD</button>
+        <button (click)="setTab('app-ui-el-copy')" >UI-EL-COPY</button>
+        <button (click)="setTab('app-ui-progress-bar')" >UI-PROGRESS-BAR</button>
+    </div>
+
+    <hr>
+
+    <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>

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,85 @@
+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';
+
+
+@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
+  ],
+  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);
+  }
+
+}