@dev-tcloud/tcloud-ui 0.1.23 → 2.0.0

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-accordion/services/tcloud-ui-accordion.service.ts

@@ -0,0 +1,46 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Injectable()
+export class TCloudUiAccordionService {
+
+  private disabled: boolean | undefined;
+  private loading: boolean | undefined;
+  private show: boolean | undefined;
+
+  private _stateToggle = new Subject<boolean>();
+  public stateToggle$ = this._stateToggle.asObservable();
+
+  private _stateLoading = new Subject<boolean>();
+  public stateLoading$ = this._stateLoading.asObservable();
+
+  private _stateDisabled = new Subject<boolean>();
+  public stateDisabled$ = this._stateDisabled.asObservable();
+
+
+  toggle(action: boolean): void{
+    this._stateToggle.next( action );
+  }
+
+  getLoading(){
+    return this.loading;
+  }
+
+  setLoading(loading: boolean){
+    this.loading = loading;
+    this._stateLoading.next(loading);
+  }
+
+  getShow(){
+    return this.show;
+  }
+
+  setDisabled(disabled: boolean): void{
+    this._stateDisabled.next( disabled );
+  }
+
+  getDisabled(){
+    return this.disabled;
+  }
+
+}

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-accordion/tcloud-ui-accordion.component.css

@@ -0,0 +1,11 @@
+.tc-accordion{
+    border: 1px solid #ccc;
+    padding: 8px 12px;
+    border-radius: 15px;
+    margin-bottom: 5px;
+}
+
+.tc-accordion-disabled{
+    background-color: #e3e3e3;
+    opacity: 0.6;
+}

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-accordion/tcloud-ui-accordion.component.html

@@ -0,0 +1,3 @@
+<div class="tcloud-ui-accordion tc-accordion" [class.tc-accordion-disabled]="disabled">
+    <ng-content></ng-content>
+</div>

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-accordion/tcloud-ui-accordion.component.ts

@@ -0,0 +1,77 @@
+import { Subscription } from 'rxjs';
+import { Component, EventEmitter, Input, OnInit, Output, OnDestroy } from '@angular/core';
+import { TCloudUiAccordionService } from './services/tcloud-ui-accordion.service';
+
+@Component({
+  selector: 'tcloud-ui-accordion',
+  templateUrl: './tcloud-ui-accordion.component.html',
+  styleUrls: ['./tcloud-ui-accordion.component.css'],
+  providers: [
+    TCloudUiAccordionService
+  ],
+})
+export class TCloudUiAccordionComponent implements OnInit, OnDestroy {
+
+  subscription_01: Subscription | undefined;
+  subscription_02: Subscription | undefined;
+  
+  private _disabled: boolean = false;
+  @Input() set disabled(v: boolean){  
+    this._disabled = v;
+    if( this._disabled ){      
+      setTimeout(() => { 
+        this._tCloudUiAccordionService.setDisabled(this._disabled);
+        this._tCloudUiAccordionService.toggle(false); 
+      });
+    }
+  }
+  get disabled(){ return this._disabled; }
+
+
+  private _show: boolean = false;
+  @Input() set show(v: boolean){    
+    if( this._show !== v ){
+      this._show = v;
+      if( !this.disabled ){
+        setTimeout(() => { this._tCloudUiAccordionService.toggle(this._show); }); 
+      }           
+    }
+  }
+
+  get show(){ return this._show; }
+
+
+  @Output() onAction = new EventEmitter<'open'|'close'>();
+
+  private _loading: boolean = false;
+  /**
+   * loading - boolean - Coloca o modal em modo de carregamento - default false
+   */
+  @Input() set loading(loading: boolean){ 
+    this._loading = loading;
+    this._tCloudUiAccordionService.setLoading(loading);
+  }
+  get loading(): boolean { return this._loading; }
+
+  constructor(
+    private _tCloudUiAccordionService: TCloudUiAccordionService
+  ) { }
+
+  ngOnInit(): void {
+
+    this.subscription_01 = this._tCloudUiAccordionService.stateLoading$.subscribe((loading: boolean) => {
+      this.loading = loading;      
+    });
+    
+    this.subscription_02 = this._tCloudUiAccordionService.stateToggle$.subscribe((show: boolean) => {
+      this.onAction.emit( (show === true) ? 'open' : 'close' );
+    })
+
+  }
+
+  ngOnDestroy(): void {
+    if( this.subscription_01 ){ this.subscription_01.unsubscribe(); }
+    if( this.subscription_02 ){ this.subscription_02.unsubscribe(); }
+  }
+
+}

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-accordion/tcloud-ui-accordion.module.ts

@@ -0,0 +1,25 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TCloudUiAccordionComponent } from './tcloud-ui-accordion.component';
+import { TCloudUiAccordionTitleComponent } from './components/tcloud-ui-accordion-title/tcloud-ui-accordion-title.component';
+import { TCloudUiAccordionBodyComponent } from './components/tcloud-ui-accordion-body/tcloud-ui-accordion-body.component';
+
+
+
+@NgModule({
+  declarations: [
+    TCloudUiAccordionComponent,
+    TCloudUiAccordionTitleComponent,
+    TCloudUiAccordionBodyComponent
+  ],
+  exports: [
+    TCloudUiAccordionComponent,
+    TCloudUiAccordionTitleComponent,
+    TCloudUiAccordionBodyComponent
+  ],
+  imports: [
+    CommonModule
+  ],
+  schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA ]
+})
+export class TCloudUiAccordionModule { }

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-choice-issues/tcloud-ui-choice-issues.component.html

@@ -0,0 +1,42 @@
+<div class="tcloud-ui-choice-issues box p-2 mt-3 mb-2">
+  <input #campo [(ngModel)]="value" type="hidden" [value]="false" >
+  <div class="row">
+    <div class="col-md-8">
+      <p class="titulo">{{ titulo }}</p>      
+    </div>
+    <div class="col-md-4 text-right">  
+
+      <table class="mt-2 mr-2" *ngIf="!view" >
+        <tr>
+          <td>
+            <div class="form-fieldset">
+              <label [class.v-true]="value" class="mr-1"><input #campo name="{{ ID }}" [value]="true" type="radio" [(ngModel)]="value" (click)="setV(true)" >Sim</label>
+            </div>
+          </td>
+          <td>
+            <div class="form-fieldset">
+              <label [class.v-true]="!value" class="ml-2"><input #campo name="{{ ID }}" [value]="false" type="radio" [(ngModel)]="value" (click)="setV(false)" >Não</label>
+            </div>
+          </td>
+        </tr>
+      </table>    
+
+      <table class="mt-2 mr-2" *ngIf="view" >
+        <tr>
+          <td>
+            <div class="form-fieldset view" >
+              <label *ngIf="value" class="v-true disabled" >Sim</label>
+              <label *ngIf="!value">Não</label>
+            </div>
+          </td>
+        </tr>
+      </table>
+    </div>
+    <div class="col-md-12 mt-1">
+      <p class="sub-titulo">{{ subTitulo }}</p>
+    </div>
+    <div class="col-md-12 mt-2 mb-1">
+      <ng-content></ng-content>
+    </div>
+  </div>
+</div>

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-choice-issues/tcloud-ui-choice-issues.component.scss

@@ -0,0 +1,88 @@
+// ------------------------------------
+// Colors
+// ------------------------------------
+$green: var(--tc-primary);
+$gray: var(--cinza);
+$gray2: var(--cinza2);
+$gray3: var(--cinza3);
+$gray4: var(--cinza4);
+$gray5: var(--cinza5);
+$red: var(--red);
+
+.titulo{
+  font-size: 1rem;
+  color: $gray;
+}
+.sub-titulo{
+  color: #b0adaa;
+}
+
+.box {
+  border: 1px solid $gray3;
+  border-radius: 10px;
+
+  &.box-icon {
+    display: flex;
+    justify-content: center;
+    padding: 35px 20px;
+  }
+}
+
+.form-fieldset {
+  
+
+  input {
+    display: none;
+  }
+
+  .v-true{
+    background: $green;
+    color: white;
+  }
+
+  label {
+    font-size: 11px;
+    background: $gray4;
+    cursor: pointer;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-around;
+    text-transform: uppercase;
+    border-radius: 30px;
+    padding: 7px;
+    margin: 0;
+    width: 66px;
+
+    &:before {
+      content: '';
+      background: #fff;
+      border-radius: 50%;
+      height: 15px;
+      width: 15px;
+    }
+
+    &:nth-child(2) {
+      margin-right: 20px;
+    }
+  }
+}
+
+table{
+  width: 100%;
+  max-width: 200px;
+
+  th, td{
+    vertical-align: top;
+  }
+}
+.view{
+  cursor: inherit !important;
+  label{
+    cursor: inherit !important;
+  }
+}
+
+.disabled{
+  background-color: #8fdfe8 !important;
+}

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-choice-issues/tcloud-ui-choice-issues.component.ts

@@ -0,0 +1,94 @@
+import { Subscription } from 'rxjs';
+import { Component, EventEmitter, Input, forwardRef, ViewChild, ElementRef, Output } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => TCloudUiChoiceIssuesComponent),
+  multi: true
+};
+
+const noop = () => {
+};
+
+@Component({
+  selector: 'tcloud-ui-choice-issues',
+  templateUrl: './tcloud-ui-choice-issues.component.html',
+  styleUrls: ['./tcloud-ui-choice-issues.component.scss'],
+  providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
+})
+export class TCloudUiChoiceIssuesComponent {
+
+    
+  @Input() view: boolean = false;
+  @Input() titulo: string = '';
+  @Input() subTitulo: string = '';
+
+  @Input() disabled: boolean = false;
+  @Output() onChange = new EventEmitter<any>();
+
+  subscription: Subscription | undefined;
+  // Referencia o campo (input,select,textarea)
+  @ViewChild('campo',{ read: true, static: false })  inputRef: ElementRef | undefined;
+
+  innerValue: boolean = false;
+
+  ID: string;
+
+  constructor(){
+    this.ID = 'tc-issue-' + Math.random().toString(36).substr(2, 9);
+  }
+  //Placeholders for the callbacks which are later providesd
+    //by the Control Value Accessor
+    private onTouchedCallback: () => void = noop;
+    private onChangeCallback: (_: any) => void = noop;
+
+    //get accessor
+    get value(): boolean {
+        return this.innerValue;
+    };
+
+    //set accessor including call the onchange callback
+    set value(v: boolean) {
+        if (v !== this.innerValue) {
+            this.innerValue = v;
+            this.onChangeCallback(v);
+        }
+    }
+
+    //Set touched on blur
+    onBlur() {
+        this.onTouchedCallback();
+    }
+
+    //From ControlValueAccessor interface
+    writeValue(value: any) {
+        if (value !== this.innerValue) {
+            this.innerValue = value;
+        }
+    }
+
+    //From ControlValueAccessor interface
+    registerOnChange(fn: any) {
+        this.onChangeCallback = fn;
+    }
+
+    //From ControlValueAccessor interface
+    registerOnTouched(fn: any) {
+        this.onTouchedCallback = fn;
+    }
+
+    setV(v: any){
+        this.value = v;
+        this.onChange.emit(v);
+    }
+
+    createID() {
+        // Math.random should be unique because of its seeding algorithm.
+        // Convert it to base 36 (numbers + letters), and grab the first 9 characters
+        // after the decimal.
+        return '_' + Math.random().toString(36).substr(2, 9);
+    }
+
+
+}

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-choice-issues/tcloud-ui-choice-issues.module.ts

@@ -0,0 +1,22 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { TCloudUiChoiceIssuesComponent } from './tcloud-ui-choice-issues.component';
+
+
+
+@NgModule({
+  declarations: [
+    TCloudUiChoiceIssuesComponent,
+  ],
+  exports: [
+    TCloudUiChoiceIssuesComponent,
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule
+  ],
+  schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
+})
+export class TCloudUiChoiceIssuesModule { }

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-data-list/services/data-list.service.ts

@@ -0,0 +1,42 @@
+import { Injectable } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+
+@Injectable()
+export class DataListService {
+  private _stateSourceValue: Subject<any> = new Subject<any>();
+  public stateValue$: Observable<Subject<any>> = this._stateSourceValue.asObservable();
+
+  private _stateSourceDescription: Subject<any> = new Subject<any>();
+  public stateDescription$: Observable<Subject<any>> = this._stateSourceDescription.asObservable();
+
+  private _stateSourceOptions: Subject<any> = new Subject<any>();
+  public stateOptions$: Observable<Subject<any>> = this._stateSourceOptions.asObservable();
+
+  private _stateSourceActive: Subject<any> = new Subject<any>();
+  public stateActive$: Observable<Subject<any>> = this._stateSourceActive.asObservable();
+
+  private actived_value: any | undefined;
+
+  public setItemValue(v: any): void {
+    this.actived_value = v;
+    this._stateSourceValue.next(v);
+  }
+
+  public setItemDescription(v: any): void {
+    this._stateSourceDescription.next(v);
+  }
+
+  public registerSelectionOptionsDescription(v: any): void {
+    this._stateSourceOptions.next(v);
+  }
+
+  public setActiveItem(v: any): void {
+    this._stateSourceActive.next(v);   
+  }
+
+  public getActiveItem(): any {
+    // console.log('getActiveItem', this.actived_value);
+    return this.actived_value;
+  }
+ 
+}

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-data-list/tcloud-ui-data-list-option/tcloud-ui-data-list-option.component.html

@@ -0,0 +1,13 @@
+<button 
+  [title]="select_options.description"
+  id="{{id}}"
+  [attr.data-description]="select_options.description"
+  [attr.data-actived-value]="actived_value"
+  class="tcloud-ui-data-list-option dropdown-item" 
+  [class.null-value]="value === undefined || value === null || value === ''"
+  [class.active]="value === actived_value" 
+  type="button" 
+  [value]="value"
+  (click)="setSelectedItem(value)" >
+  <ng-content></ng-content>
+</button>

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-data-list/tcloud-ui-data-list-option/tcloud-ui-data-list-option.component.scss

@@ -0,0 +1,25 @@
+button{
+  color: #666;
+  width: 100%;
+
+  padding: 10px;
+  font-size: 14px;
+
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+button:hover{
+  background-color: #e5f5f9;
+  color: #333;
+}
+
+button.active{
+  background-color: #ceedf5;
+  color: #333;
+}
+
+.null-value{
+  height: 35px;
+}

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-data-list/tcloud-ui-data-list-option/tcloud-ui-data-list-option.component.ts

@@ -0,0 +1,63 @@
+import { OnDestroy } from '@angular/core';
+import { ISelectOptions } from './../tcloud-ui-data-list';
+import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
+import { DataListService } from '../services/data-list.service';
+import { Subscription } from 'rxjs';
+
+@Component({
+  selector: 'tcloud-ui-data-list-option',
+  templateUrl: './tcloud-ui-data-list-option.component.html',
+  styleUrls: ['./tcloud-ui-data-list-option.component.scss']
+})
+export class TCloudUiDataListOptionComponent implements OnInit, OnDestroy {
+
+  id: string = '';  
+  actived_value: any;
+  select_options = new ISelectOptions();
+  private subscription_active: Subscription | undefined;
+
+  @Input() value: any | undefined;
+
+  @Output() selected = new EventEmitter<any>();  
+
+  constructor( private dataListService: DataListService ) { 
+  }
+
+  ngOnInit(): void {
+    this.actived_value = this.dataListService.getActiveItem();
+    this.subscription_active = this.dataListService.stateActive$.subscribe(v => { 
+      this.actived_value = v; 
+    });
+    this.id = this.generateID();
+    this.setSelectOptions();
+  }
+
+  generateID(): string{
+    return `data-list-option-${Math.floor(Math.random() * Math.floor(Math.random() * Date.now()))}`;
+  }
+
+  setSelectedItem(value: any){
+    if( value === '' ){ this.value = ''; }
+
+    this.dataListService.setItemValue(this.value);
+    const description = <any> document.getElementById(this.id)?.innerText || '';
+    this.dataListService.setItemDescription(description);
+    this.setSelectOptions();    
+  }
+
+  setSelectOptions(){
+    setTimeout(() => {
+      try {
+        const description = <any> document.getElementById(this.id)?.innerText;
+        this.select_options.value = this.value;
+        this.select_options.description = description;  
+        this.dataListService.registerSelectionOptionsDescription(this.select_options);
+      } catch (error) { }
+    });    
+  }
+
+  ngOnDestroy() {
+    if( this.subscription_active ){ this.subscription_active.unsubscribe(); }    
+  }
+
+}

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-data-list/tcloud-ui-data-list.component.html

@@ -0,0 +1,58 @@
+<div *ngIf="formulario" id="area-{{ id }}" class="tcloud-ui-data-list tc-dropdown" [class.disabled]="disabled || loading">
+  <div *ngIf="loading" class="loading-area">
+    <i class="fas fa-spinner fa-spin"></i>
+  </div>
+  <!-- [attr.data-bs-toggle]="'dropdown'"  -->
+  <button 
+    #_option
+    [class.input-hidden]="!showInput"
+    [class.in-border]="border"
+    [class.loading-box]="loading"
+    [disabled]="disabled || loading"
+    class="dropdown-toggle button-select no-margin-bottom" 
+    type="button" 
+    id="{{ id }}" 
+    
+    [attr.aria-haspopup]="'true'" 
+    [attr.aria-expanded]="'false'" 
+    (click)="toOpen();toInput(_option)" >
+
+    <i class="tc-placeholder" *ngIf="(selected_description === undefined || selected_description === null || selected_description === '' ) && !loading ">{{ placeholder }}</i>
+    {{ selected_description }}
+    <span><i class="fas fa-angle-down"></i></span>
+  </button>
+  <div class="tc-dropdown-menu {{ menu_on_top }}" id="box-{{ id }}" [attr.aria-labelledby]="id" [class.to-hide]="!menu_show" [style]="box_style">
+
+    <div class="line-search" *ngIf="search">
+      <table class="box-search">
+        <tr>
+
+          <td class="area-input">
+            <input type="text" class="tc-form-control" [(ngModel)]="search_text" (input)="toSearch($event)" placeholder="Buscar..." >            
+          </td>
+
+          <td class="area-icon">
+            <i *ngIf="search_text === ''" class="fas fa-search icon-search"></i>
+            <button type="button" *ngIf="search_text !== ''" (click)="clearTextSearch()"><i class="fas fa-times"></i></button>
+          </td>
+          
+        </tr>
+      </table>
+    </div>
+    
+    <div class="area-options" id="{{ id }}-options" (click)="toClose()">
+      <ng-content></ng-content>  
+      <ng-container *ngIf="listItems && (listItems).length > 0">
+        <ng-container *ngFor="let item of listItems">
+          <tcloud-ui-data-list-option [value]="item.value">{{ item?.description }}</tcloud-ui-data-list-option>
+          </ng-container>
+      </ng-container>    
+    </div>
+  </div>
+</div>
+
+<div *ngIf="formulario">
+  <form [formGroup]="formulario" style="display: none;" >
+    <input id="{{ id }}-hidden" formControlName="selected_item" type="hidden">
+  </form>
+</div>