@dev-tcloud/tcloud-ui 1.0.0 → 2.0.1

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

@@ -1,88 +0,0 @@
-// ------------------------------------
-// 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

@@ -1,94 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,13 +0,0 @@
-<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

@@ -1,25 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,58 +0,0 @@
-<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>

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

@@ -1,136 +0,0 @@
-/** 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;
-}