@dev-tcloud/tcloud-ui 2.2.2 → 2.2.3

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,15 @@
+<button 
+  [disabled]="disabled"
+  [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" 
+  [class.option-disabled]="disabled"
+  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,31 @@
+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;
+}
+
+.option-disabled{
+  background-color: #fff !important;
+  color: #b5b5b5 !important;
+  cursor: not-allowed !important;
+}

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,65 @@
+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() disabled: boolean | undefined = false;
+  @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( this.disabled ){ return; }
+    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" [disabled]="item?.disabled" >{{ 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>

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

@@ -0,0 +1,136 @@
+/** DROPDOW **/ 
+
+.dropdown-toggle::after{
+  display: none !important;
+}
+
+i.tc-placeholder {
+  font-style: italic;
+  color: #999999;
+  text-transform: none !important;
+}
+
+.in-border{
+  border: 1px solid #ccc !important;
+}
+
+.tc-dropdown{
+
+  position: relative;
+
+  .button-select{
+    width: 100%;
+
+    background-color: #fff;
+    border: none;
+    height: 35px;
+    text-align: left;
+    padding-left: 15px;
+    font-size: 14px;
+    color: #666;
+
+    span{
+      position: absolute;
+      right: 6px;
+      top: 7px;
+    }
+  }
+
+  .tc-dropdown-menu{
+    width: 100%;
+    border: 1px solid #ccc;
+    background-color: #fff;
+    position: absolute;
+    z-index: 1;
+  }
+
+  .area-options{
+    max-height: 200px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+  }
+
+  .menu-on-top{
+    position: absolute;
+  }
+}
+
+.line-search{
+
+  padding: 3px;
+
+  .box-search{
+    width: 100%;
+    border-collapse: collapse;
+    td.area-icon{
+      padding: 4px 0px 2px 8px;
+      width: 35px;
+      .icon-search{
+        color: #666;
+      }
+
+      button{
+        border: none;
+        background-color: transparent;
+        color: #999;
+
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+
+    }
+    td.area-input{ 
+      input{
+        width: 100%; 
+      }          
+      border: none;
+    }
+
+    input{
+      width: 100%;
+      font-size: 13px;
+      height: 33px;
+      border: 1px solid #ccc;
+      padding: 10px;
+
+    }
+  }
+
+}
+
+.loading-area{
+  line-height: 0;
+  position: relative;
+  height: 0;
+  bottom: -10px;
+  left: 10px;
+}
+
+button:disabled{
+  background-color: #eee !important;
+  border: 1px solid #ececec !important;
+  cursor: not-allowed;
+}
+
+.loading-box{
+  cursor: progress !important;
+}
+
+.disabled{
+  i{
+    color: #999 !important; 
+  }
+}
+
+.to-hide{
+  display: none;
+}
+
+.no-margin-bottom{
+  margin-bottom: 0 !important;
+}
+
+.input-hidden{
+  display: none !important;
+}