@dev-tcloud/tcloud-ui 0.0.4 → 0.0.6

package/fesm2020/dev-tcloud-tcloud-ui.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { Component, Input, NgModule, Injectable, EventEmitter, Output, ViewChild } from '@angular/core';
+import { Component, Input, NgModule, Injectable, EventEmitter, Output, ViewChild, forwardRef, Directive, HostListener, Pipe } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { Buffer } from 'buffer';
 import { Subject } from 'rxjs';
 import * as i1$1 from '@angular/router';
-import * as i3 from '@angular/forms';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i2 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormControl } from '@angular/forms';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 
 class TCloudUiLinhaLogoComponent {
@@ -731,7 +731,7 @@ class TCloudUiModalFooterComponent {
     }
 }
 TCloudUiModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiModalFooterComponent, deps: [{ token: TcloudModalService }], target: i0.ɵɵFactoryTarget.Component });
-TCloudUiModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiModalFooterComponent, selector: "tcloud-ui-modal-footer", inputs: { btnCloseText: "btnCloseText", btnCancelText: "btnCancelText", btnConfirmText: "btnConfirmText" }, viewQueries: [{ propertyName: "_formulario", first: true, predicate: ["_formulario"], descendants: true }], ngImport: i0, template: "<div class=\"tc-modal-footer\">\r\n\r\n  <div class=\"input-confirm\" *ngIf=\"param_confirm && param_confirm.confirmText\">\r\n    <p>Digite a palavra <strong>&quot;{{ param_confirm.confirmText }}&quot;</strong> para confirmar.</p>\r\n    \r\n    <form #_formulario=\"ngForm\" (ngSubmit)=\"toConfirm(_formulario.valid)\">\r\n      <input \r\n        [disabled]=\"loading\"\r\n        placeholder=\"{{ param_confirm.confirmText }}\"\r\n        name=\"txt_value\" \r\n        [(ngModel)]=\"txt_value\" \r\n        type=\"text\" \r\n        class=\"form-control form-confirm\" \r\n        required \r\n        [class.different-text]=\"(txt_value).length >= (param_confirm.confirmText).length && (txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase()\" >\r\n    </form>\r\n\r\n  </div>\r\n\r\n  <hr>\r\n\r\n  <div class=\"actions-footer {{ (loading) ? 'state-loading' : '' }}\">\r\n    <!-- {{ param_confirm | json }} -->\r\n    <button [disabled]=\"loading\" *ngIf=\"param_confirm && !param_confirm.confirm\" type=\"button\" class=\"btn-new-grey\" (click)=\"toClose()\">{{ btnCloseText }}</button>\r\n\r\n    <button [disabled]=\"loading\" *ngIf=\"param_confirm && param_confirm.confirm\" type=\"button\" class=\"btn-new-grey\" (click)=\"toCancel()\">{{ btnCancelText }}</button>\r\n    <button [disabled]=\"(txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase() || loading\" *ngIf=\"param_confirm && param_confirm.confirm\" type=\"button\" class=\"ml-3 btn-new-green\" (click)=\"toConfirm(_formulario?.valid)\">{{ btnConfirmText }}</button>\r\n\r\n  </div>\r\n</div>\r\n", styles: [".actions-footer{text-align:right}.ng-valid.ng-touched.different-text{border-color:#fb9c23}.form-confirm{max-width:200px}button:disabled{opacity:.7!important;cursor:not-allowed}.input-confirm{padding:5px 14px}.state-loading button{cursor:progress!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+TCloudUiModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiModalFooterComponent, selector: "tcloud-ui-modal-footer", inputs: { btnCloseText: "btnCloseText", btnCancelText: "btnCancelText", btnConfirmText: "btnConfirmText" }, viewQueries: [{ propertyName: "_formulario", first: true, predicate: ["_formulario"], descendants: true }], ngImport: i0, template: "<div class=\"tc-modal-footer\">\r\n\r\n  <div class=\"input-confirm\" *ngIf=\"param_confirm && param_confirm.confirmText\">\r\n    <p>Digite a palavra <strong>&quot;{{ param_confirm.confirmText }}&quot;</strong> para confirmar.</p>\r\n    \r\n    <form #_formulario=\"ngForm\" (ngSubmit)=\"toConfirm(_formulario.valid)\">\r\n      <input \r\n        [disabled]=\"loading\"\r\n        placeholder=\"{{ param_confirm.confirmText }}\"\r\n        name=\"txt_value\" \r\n        [(ngModel)]=\"txt_value\" \r\n        type=\"text\" \r\n        class=\"form-control form-confirm\" \r\n        required \r\n        [class.different-text]=\"(txt_value).length >= (param_confirm.confirmText).length && (txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase()\" >\r\n    </form>\r\n\r\n  </div>\r\n\r\n  <hr>\r\n\r\n  <div class=\"actions-footer {{ (loading) ? 'state-loading' : '' }}\">\r\n    <!-- {{ param_confirm | json }} -->\r\n    <button [disabled]=\"loading\" *ngIf=\"param_confirm && !param_confirm.confirm\" type=\"button\" class=\"btn-new-grey\" (click)=\"toClose()\">{{ btnCloseText }}</button>\r\n\r\n    <button [disabled]=\"loading\" *ngIf=\"param_confirm && param_confirm.confirm\" type=\"button\" class=\"btn-new-grey\" (click)=\"toCancel()\">{{ btnCancelText }}</button>\r\n    <button [disabled]=\"(txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase() || loading\" *ngIf=\"param_confirm && param_confirm.confirm\" type=\"button\" class=\"ml-3 btn-new-green\" (click)=\"toConfirm(_formulario?.valid)\">{{ btnConfirmText }}</button>\r\n\r\n  </div>\r\n</div>\r\n", styles: [".actions-footer{text-align:right}.ng-valid.ng-touched.different-text{border-color:#fb9c23}.form-confirm{max-width:200px}button:disabled{opacity:.7!important;cursor:not-allowed}.input-confirm{padding:5px 14px}.state-loading button{cursor:progress!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiModalFooterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tcloud-ui-modal-footer', template: "<div class=\"tc-modal-footer\">\r\n\r\n  <div class=\"input-confirm\" *ngIf=\"param_confirm && param_confirm.confirmText\">\r\n    <p>Digite a palavra <strong>&quot;{{ param_confirm.confirmText }}&quot;</strong> para confirmar.</p>\r\n    \r\n    <form #_formulario=\"ngForm\" (ngSubmit)=\"toConfirm(_formulario.valid)\">\r\n      <input \r\n        [disabled]=\"loading\"\r\n        placeholder=\"{{ param_confirm.confirmText }}\"\r\n        name=\"txt_value\" \r\n        [(ngModel)]=\"txt_value\" \r\n        type=\"text\" \r\n        class=\"form-control form-confirm\" \r\n        required \r\n        [class.different-text]=\"(txt_value).length >= (param_confirm.confirmText).length && (txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase()\" >\r\n    </form>\r\n\r\n  </div>\r\n\r\n  <hr>\r\n\r\n  <div class=\"actions-footer {{ (loading) ? 'state-loading' : '' }}\">\r\n    <!-- {{ param_confirm | json }} -->\r\n    <button [disabled]=\"loading\" *ngIf=\"param_confirm && !param_confirm.confirm\" type=\"button\" class=\"btn-new-grey\" (click)=\"toClose()\">{{ btnCloseText }}</button>\r\n\r\n    <button [disabled]=\"loading\" *ngIf=\"param_confirm && param_confirm.confirm\" type=\"button\" class=\"btn-new-grey\" (click)=\"toCancel()\">{{ btnCancelText }}</button>\r\n    <button [disabled]=\"(txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase() || loading\" *ngIf=\"param_confirm && param_confirm.confirm\" type=\"button\" class=\"ml-3 btn-new-green\" (click)=\"toConfirm(_formulario?.valid)\">{{ btnConfirmText }}</button>\r\n\r\n  </div>\r\n</div>\r\n", styles: [".actions-footer{text-align:right}.ng-valid.ng-touched.different-text{border-color:#fb9c23}.form-confirm{max-width:200px}button:disabled{opacity:.7!important;cursor:not-allowed}.input-confirm{padding:5px 14px}.state-loading button{cursor:progress!important}\n"] }]
@@ -873,23 +873,956 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 }]
         }] });
 
+class TCloudUiMultiSelectComponent {
+    constructor() {
+        this.placeholder = 'Selecione um item';
+        this.disabled = false;
+        this.loading = false;
+        this.count_actives = 0;
+        this.tcChange = new EventEmitter();
+    }
+    ngOnInit() {
+        setTimeout(() => {
+            this.toChange();
+        });
+    }
+    addItem(item) {
+        if (this.disabled) {
+            return;
+        }
+        if (this.tcList) {
+            for (let i = 0; i < (this.tcList).length; i++) {
+                const row = this.tcList[i];
+                if (item === row.value) {
+                    this.tcList[i].active = true;
+                    break;
+                }
+            }
+            this.toChange();
+        }
+    }
+    removeItem(item) {
+        if (this.disabled) {
+            return;
+        }
+        if (this.tcList) {
+            for (let i = 0; i < (this.tcList).length; i++) {
+                const row = this.tcList[i];
+                if (item === row.value) {
+                    this.tcList[i].active = false;
+                    break;
+                }
+            }
+            this.toChange();
+        }
+    }
+    toChange() {
+        let count_actives = 0;
+        let itens = [];
+        if (this.tcList) {
+            for (let i = 0; i < (this.tcList).length; i++) {
+                const row = this.tcList[i];
+                if (row.active) {
+                    count_actives++;
+                    (itens).push(row);
+                }
+            }
+        }
+        this.count_actives = count_actives;
+        this.tcChange.emit(itens);
+    }
+}
+TCloudUiMultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TCloudUiMultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiMultiSelectComponent, selector: "tcloud-ui-multi-select", inputs: { tcList: "tcList", placeholder: "placeholder", disabled: "disabled", loading: "loading" }, outputs: { tcChange: "tcChange" }, ngImport: i0, template: "<div>\r\n  <table>\r\n    <tr *ngIf=\"tcList\">\r\n      <td>\r\n        <select\r\n          #_select\r\n          [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n          [title]=\"tcList.length === 0 ? 'Nenhum item dispon\u00EDvel' : placeholder\">\r\n          <option></option>\r\n          <ng-container *ngFor=\"let item of tcList; let i = index\">\r\n            <option [title]=\"item.description\" *ngIf=\"!item.active\" [value]=\"item.value\">{{ item.description }}</option>\r\n          </ng-container>\r\n        </select>\r\n      </td>\r\n      <td>\r\n        <button\r\n          [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n          title=\"Adicionar\"\r\n          class=\"btn-plus-select\"\r\n          (click)=\"addItem(_select.value)\"\r\n          type=\"button\">\r\n          <i class=\"fas fa-plus\"></i>\r\n        </button>\r\n      </td>\r\n    </tr>\r\n  </table>\r\n\r\n  <div class=\"box-itens-selected\" *ngIf=\"count_actives > 0\">\r\n    <ng-container *ngFor=\"let item of tcList\">\r\n      <div class=\"itens-selected\" *ngIf=\"item.active\" [title]=\"item.description\">\r\n        {{ item.description }}\r\n        <button\r\n          [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n          title=\"Remover\"\r\n          type=\"button\"\r\n          (click)=\"removeItem(item.value)\">\r\n          <i class=\"fas fa-times\"></i>\r\n        </button>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n", styles: ["table{width:100%;border-collapse:collapse;border:none}table td:first-child{width:100%}select{font-size:.8rem;height:40px;border:1px solid #999;border-radius:4px 0 0 4px;padding:6px 10px;white-space:nowrap;text-overflow:ellipsis;width:100%;background-color:#fff;color:#888}.btn-plus-select{width:30px;height:40px;border:none;color:#fff;background-color:var(--verde);border-radius:0 4px 4px 0}.box-itens-selected{display:flex;padding:9px;background-color:#ededed;border-radius:4px}.itens-selected{display:inline;width:100%;max-width:200px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:1px solid #ccc;height:35px;min-width:100px;background-color:var(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px}.itens-selected button{position:relative;right:0;z-index:1;float:right;line-height:1;top:2px;left:10px;color:#d72020;background-color:var(--verde);border:none;font-weight:700;cursor:pointer}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tcloud-ui-multi-select', template: "<div>\r\n  <table>\r\n    <tr *ngIf=\"tcList\">\r\n      <td>\r\n        <select\r\n          #_select\r\n          [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n          [title]=\"tcList.length === 0 ? 'Nenhum item dispon\u00EDvel' : placeholder\">\r\n          <option></option>\r\n          <ng-container *ngFor=\"let item of tcList; let i = index\">\r\n            <option [title]=\"item.description\" *ngIf=\"!item.active\" [value]=\"item.value\">{{ item.description }}</option>\r\n          </ng-container>\r\n        </select>\r\n      </td>\r\n      <td>\r\n        <button\r\n          [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n          title=\"Adicionar\"\r\n          class=\"btn-plus-select\"\r\n          (click)=\"addItem(_select.value)\"\r\n          type=\"button\">\r\n          <i class=\"fas fa-plus\"></i>\r\n        </button>\r\n      </td>\r\n    </tr>\r\n  </table>\r\n\r\n  <div class=\"box-itens-selected\" *ngIf=\"count_actives > 0\">\r\n    <ng-container *ngFor=\"let item of tcList\">\r\n      <div class=\"itens-selected\" *ngIf=\"item.active\" [title]=\"item.description\">\r\n        {{ item.description }}\r\n        <button\r\n          [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n          title=\"Remover\"\r\n          type=\"button\"\r\n          (click)=\"removeItem(item.value)\">\r\n          <i class=\"fas fa-times\"></i>\r\n        </button>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n", styles: ["table{width:100%;border-collapse:collapse;border:none}table td:first-child{width:100%}select{font-size:.8rem;height:40px;border:1px solid #999;border-radius:4px 0 0 4px;padding:6px 10px;white-space:nowrap;text-overflow:ellipsis;width:100%;background-color:#fff;color:#888}.btn-plus-select{width:30px;height:40px;border:none;color:#fff;background-color:var(--verde);border-radius:0 4px 4px 0}.box-itens-selected{display:flex;padding:9px;background-color:#ededed;border-radius:4px}.itens-selected{display:inline;width:100%;max-width:200px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:1px solid #ccc;height:35px;min-width:100px;background-color:var(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px}.itens-selected button{position:relative;right:0;z-index:1;float:right;line-height:1;top:2px;left:10px;color:#d72020;background-color:var(--verde);border:none;font-weight:700;cursor:pointer}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { tcList: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], tcChange: [{
+                type: Output
+            }] } });
+
+class TCloudUiMultiSelectModule {
+}
+TCloudUiMultiSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TCloudUiMultiSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiSelectModule, declarations: [TCloudUiMultiSelectComponent], imports: [CommonModule], exports: [TCloudUiMultiSelectComponent] });
+TCloudUiMultiSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiSelectModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiSelectModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [TCloudUiMultiSelectComponent],
+                    exports: [TCloudUiMultiSelectComponent],
+                    imports: [
+                        CommonModule
+                    ]
+                }]
+        }] });
+
+class DataListService {
+    constructor() {
+        this._stateSourceValue = new Subject();
+        this.stateValue$ = this._stateSourceValue.asObservable();
+        this._stateSourceDescription = new Subject();
+        this.stateDescription$ = this._stateSourceDescription.asObservable();
+        this._stateSourceOptions = new Subject();
+        this.stateOptions$ = this._stateSourceOptions.asObservable();
+        this._stateSourceActive = new Subject();
+        this.stateActive$ = this._stateSourceActive.asObservable();
+    }
+    setItemValue(v) {
+        this.actived_value = v;
+        this._stateSourceValue.next(v);
+    }
+    setItemDescription(v) {
+        this._stateSourceDescription.next(v);
+    }
+    registerSelectionOptionsDescription(v) {
+        this._stateSourceOptions.next(v);
+    }
+    setActiveItem(v) {
+        // console.log('setActiveItem', v);
+        this._stateSourceActive.next(v);
+    }
+    getActiveItem() {
+        // console.log('getActiveItem', this.actived_value);
+        return this.actived_value;
+    }
+}
+DataListService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DataListService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DataListService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DataListService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DataListService, decorators: [{
+            type: Injectable
+        }] });
+
+const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => TCloudUiDataListComponent),
+    multi: true
+};
+const noop = () => {
+};
+class TCloudUiDataListComponent {
+    constructor(dataListService, formBuilder) {
+        this.dataListService = dataListService;
+        this.formBuilder = formBuilder;
+        this.viewport_width = 0;
+        this.viewport_height = 0;
+        this.box_height = 0;
+        this.box_style = '';
+        this.menu_on_top = '';
+        this.placeholder = '';
+        this._disabled = false;
+        this._loading = false;
+        this.search = true;
+        this.onInputChange = new EventEmitter();
+        this.onChange = new EventEmitter();
+        this.list_selected_options = new Array();
+        this.menu_show = false;
+        this.search_text = '';
+        this.id = '';
+        //Placeholders for the callbacks which are later providesd
+        //by the Control Value Accessor
+        this.onTouchedCallback = noop;
+        this.onChangeCallback = noop;
+    }
+    set disabled(v) {
+        this._disabled = v;
+        if (this._disabled) {
+            this.selected_description = '';
+            this.selected_item = '';
+            this.toChange();
+        }
+    }
+    get disabled() { return this._disabled; }
+    set loading(v) {
+        this._loading = v;
+        if (this._loading) {
+            this.selected_description = '';
+            this.selected_item = '';
+            this.toChange();
+        }
+    }
+    get loading() { return this._loading; }
+    set ngModel(v) {
+        this.selected_item = v;
+        this.selectDescription();
+    }
+    ngOnInit() {
+        this.id = this.generateID();
+        this.formulario = this.formBuilder.group({
+            "selected_item": new FormControl('', []),
+        });
+        this.subscription_value = this.dataListService.stateValue$.subscribe(v => {
+            this.selected_item = v;
+            this.selectDescription();
+        });
+        this.subscription_description = this.dataListService.stateDescription$.subscribe(v => {
+            this.selected_description = v;
+        });
+        this.subscription_options = this.dataListService.stateOptions$.subscribe((v) => {
+            if (v && v.value) {
+                (this.list_selected_options).push(v);
+            }
+        });
+        this.toResize();
+        this.toClick();
+    }
+    generateID() {
+        return `data-list-${Math.floor(Math.random() * Math.floor(Math.random() * Date.now()))}`;
+    }
+    ngOnDestroy() {
+        if (this.subscription_value) {
+            this.subscription_value.unsubscribe();
+        }
+        if (this.subscription_description) {
+            this.subscription_description.unsubscribe();
+        }
+        if (this.subscription_options) {
+            this.subscription_options.unsubscribe();
+        }
+    }
+    toSearch(e) {
+        let input = (e && e.target && e.target.value) ? e.target.value : '';
+        let filter = (((input).normalize('NFD').replace(/[\u0300-\u036f]/g, "")).trim()).toLowerCase();
+        let ul = document.getElementById(`${this.id}-options`);
+        let li = ul.getElementsByTagName("button");
+        for (let i = 0; i < li.length; i++) {
+            const a = li[i];
+            const txtValue = (((a.textContent || a.innerText).normalize('NFD').replace(/[\u0300-\u036f]/g, "")).trim()).toLowerCase();
+            if (txtValue.indexOf(filter) > -1) {
+                li[i].style.display = "";
+            }
+            else {
+                li[i].style.display = "none";
+            }
+        }
+    }
+    selectDescription() {
+        if (this.list_selected_options && (this.list_selected_options).length > 0) {
+            for (let i = 0; i < (this.list_selected_options).length; i++) {
+                const item = this.list_selected_options[i];
+                if (item.value === this.selected_item) {
+                    this.selected_description = item.description;
+                    this.toChange();
+                    return;
+                }
+            }
+        }
+        if (this.selected_item === undefined || this.selected_item === null || this.selected_item === '') {
+            this.toChange();
+        }
+    }
+    toInput(e) {
+        this.onChange.emit(e);
+    }
+    toChange() {
+        setTimeout(() => {
+            if (this.selected_item === undefined || this.selected_item === null) {
+                this.selected_item = '';
+            }
+            this.toSearch('');
+            this.search_text = '';
+            this.dataListService.setActiveItem(this.selected_item);
+            this.onInputChange.emit(this.selected_description);
+            if (this.formulario) {
+                this.formulario?.get('selected_item')?.setValue(this.selected_item);
+                // const input_hidden = document.getElementById(`${this.id}-hidden`);
+                this.toInput(this.formulario.get('selected_item'));
+            }
+        });
+    }
+    clearTextSearch() {
+        this.search_text = '';
+        this.toSearch('');
+    }
+    toOpen() {
+        this.menu_show = !this.menu_show;
+        this.resolve_position_dropdown(this.menu_show);
+    }
+    resolve_position_dropdown(open) {
+        if (open) {
+            this.box_style = '';
+            this.menu_on_top = '';
+            const id = `${this.id}`;
+            const box = `box-${this.id}`;
+            if (this.viewport_height === 0) {
+                this.viewport_height = window.innerWidth;
+            }
+            const rect = document.getElementById(id)?.getBoundingClientRect();
+            const box_position = rect?.bottom || 0;
+            setTimeout(() => {
+                this.box_height = document.getElementById(box)?.clientHeight || 0;
+                if ((this.viewport_height - box_position) < this.box_height) {
+                    this.menu_on_top = 'menu-on-top';
+                    this.box_style = `top: -${(this.box_height)}px; height: ${this.box_height}px;`;
+                }
+            });
+        }
+    }
+    toClose() {
+        this.menu_show = false;
+    }
+    toResize() {
+        window.addEventListener('resize', () => {
+            this.viewport_width = window.innerWidth;
+            this.viewport_height = window.innerHeight;
+            this.resolve_position_dropdown(this.menu_show);
+        });
+    }
+    toClick() {
+        const box = `area-${this.id}`;
+        window.addEventListener('click', (e) => {
+            if (this.menu_show) {
+                if (!(document.getElementById(box)?.contains(e.target))) {
+                    this.menu_show = false;
+                }
+            }
+        });
+    }
+    //get accessor
+    get value() {
+        return this.selected_item;
+    }
+    ;
+    //set accessor including call the onchange callback
+    set value(v) {
+        if (v !== this.selected_item) {
+            this.selected_item = v;
+            this.onChangeCallback(v);
+        }
+    }
+    //Set touched on blur
+    onBlur() {
+        this.onTouchedCallback();
+    }
+    //From ControlValueAccessor interface
+    writeValue(value) {
+        if (value !== this.selected_item) {
+            this.selected_item = value;
+        }
+    }
+    //From ControlValueAccessor interface
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    //From ControlValueAccessor interface
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+}
+TCloudUiDataListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDataListComponent, deps: [{ token: DataListService }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+TCloudUiDataListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiDataListComponent, selector: "tcloud-ui-data-list", inputs: { placeholder: "placeholder", disabled: "disabled", loading: "loading", search: "search", ngModel: "ngModel" }, outputs: { onInputChange: "onInputChange", onChange: "onChange" }, providers: [
+        DataListService,
+        CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR
+    ], ngImport: i0, template: "<div *ngIf=\"formulario\" id=\"area-{{ id }}\" class=\"tc-dropdown\" [class.disabled]=\"disabled || loading\">\r\n  <div *ngIf=\"loading\" class=\"loading-area\">\r\n    <i class=\"fas fa-spinner fa-spin\"></i>\r\n  </div>\r\n  <!-- [attr.data-bs-toggle]=\"'dropdown'\"  -->\r\n  <button \r\n    [class.loading-box]=\"loading\"\r\n    [disabled]=\"disabled || loading\"\r\n    class=\"dropdown-toggle button-select\" \r\n    type=\"button\" \r\n    id=\"{{ id }}\" \r\n    \r\n    [attr.aria-haspopup]=\"'true'\" \r\n    [attr.aria-expanded]=\"'false'\" \r\n    (click)=\"toOpen()\" >\r\n\r\n    <i *ngIf=\"(selected_description === undefined || selected_description === null || selected_description === '' ) && !loading \">{{ placeholder }}</i>\r\n    {{ selected_description }}\r\n    <span><i class=\"fas fa-angle-down\"></i></span>\r\n  </button>\r\n  <div class=\"tc-dropdown-menu {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!menu_show\" [style]=\"box_style\">\r\n\r\n    <div class=\"line-search\" *ngIf=\"search\">\r\n      <table class=\"box-search\">\r\n        <tr>\r\n\r\n          <td class=\"area-input\">\r\n            <input type=\"text\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" >            \r\n          </td>\r\n\r\n          <td class=\"area-icon\">\r\n            <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\r\n            <button type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\r\n          </td>\r\n          \r\n        </tr>\r\n      </table>\r\n    </div>\r\n    \r\n    <div class=\"area-options\" id=\"{{ id }}-options\" (click)=\"toClose()\">\r\n      <ng-content></ng-content>      \r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"formulario\">\r\n  <form [formGroup]=\"formulario\" style=\"display: none;\" >\r\n    <input id=\"{{ id }}-hidden\" formControlName=\"selected_item\" type=\"hidden\">\r\n  </form>\r\n</div>", styles: [".dropdown-toggle:after{display:none!important}.tc-dropdown{position:relative}.tc-dropdown .button-select{width:100%;background-color:#fff;border:1px solid #ccc;height:35px;text-align:left;padding-left:15px;font-size:14px;color:#666}.tc-dropdown .button-select span{position:absolute;right:6px;top:7px}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid #ccc;background-color:#fff}.tc-dropdown .area-options{max-height:200px;overflow-y:scroll;overflow-x:hidden}.tc-dropdown .menu-on-top{position:absolute}.line-search{padding:3px}.line-search .box-search{width:100%;border-collapse:collapse}.line-search .box-search td.area-icon{padding:4px 0 2px 8px;width:35px}.line-search .box-search td.area-icon .icon-search{color:#666}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:#999;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.line-search .box-search td.area-input{border:none}.line-search .box-search td.area-input input{width:100%}.line-search .box-search 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}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDataListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tcloud-ui-data-list', providers: [
+                        DataListService,
+                        CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR
+                    ], template: "<div *ngIf=\"formulario\" id=\"area-{{ id }}\" class=\"tc-dropdown\" [class.disabled]=\"disabled || loading\">\r\n  <div *ngIf=\"loading\" class=\"loading-area\">\r\n    <i class=\"fas fa-spinner fa-spin\"></i>\r\n  </div>\r\n  <!-- [attr.data-bs-toggle]=\"'dropdown'\"  -->\r\n  <button \r\n    [class.loading-box]=\"loading\"\r\n    [disabled]=\"disabled || loading\"\r\n    class=\"dropdown-toggle button-select\" \r\n    type=\"button\" \r\n    id=\"{{ id }}\" \r\n    \r\n    [attr.aria-haspopup]=\"'true'\" \r\n    [attr.aria-expanded]=\"'false'\" \r\n    (click)=\"toOpen()\" >\r\n\r\n    <i *ngIf=\"(selected_description === undefined || selected_description === null || selected_description === '' ) && !loading \">{{ placeholder }}</i>\r\n    {{ selected_description }}\r\n    <span><i class=\"fas fa-angle-down\"></i></span>\r\n  </button>\r\n  <div class=\"tc-dropdown-menu {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!menu_show\" [style]=\"box_style\">\r\n\r\n    <div class=\"line-search\" *ngIf=\"search\">\r\n      <table class=\"box-search\">\r\n        <tr>\r\n\r\n          <td class=\"area-input\">\r\n            <input type=\"text\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" >            \r\n          </td>\r\n\r\n          <td class=\"area-icon\">\r\n            <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\r\n            <button type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\r\n          </td>\r\n          \r\n        </tr>\r\n      </table>\r\n    </div>\r\n    \r\n    <div class=\"area-options\" id=\"{{ id }}-options\" (click)=\"toClose()\">\r\n      <ng-content></ng-content>      \r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"formulario\">\r\n  <form [formGroup]=\"formulario\" style=\"display: none;\" >\r\n    <input id=\"{{ id }}-hidden\" formControlName=\"selected_item\" type=\"hidden\">\r\n  </form>\r\n</div>", styles: [".dropdown-toggle:after{display:none!important}.tc-dropdown{position:relative}.tc-dropdown .button-select{width:100%;background-color:#fff;border:1px solid #ccc;height:35px;text-align:left;padding-left:15px;font-size:14px;color:#666}.tc-dropdown .button-select span{position:absolute;right:6px;top:7px}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid #ccc;background-color:#fff}.tc-dropdown .area-options{max-height:200px;overflow-y:scroll;overflow-x:hidden}.tc-dropdown .menu-on-top{position:absolute}.line-search{padding:3px}.line-search .box-search{width:100%;border-collapse:collapse}.line-search .box-search td.area-icon{padding:4px 0 2px 8px;width:35px}.line-search .box-search td.area-icon .icon-search{color:#666}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:#999;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.line-search .box-search td.area-input{border:none}.line-search .box-search td.area-input input{width:100%}.line-search .box-search 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}\n"] }]
+        }], ctorParameters: function () { return [{ type: DataListService }, { type: i2.FormBuilder }]; }, propDecorators: { placeholder: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], search: [{
+                type: Input
+            }], onInputChange: [{
+                type: Output
+            }], onChange: [{
+                type: Output
+            }], ngModel: [{
+                type: Input
+            }] } });
+
+class ISelectOptions {
+}
+
+class TCloudUiDataListOptionComponent {
+    constructor(dataListService) {
+        this.dataListService = dataListService;
+        this.id = '';
+        this.select_options = new ISelectOptions();
+        this.selected = new EventEmitter();
+        this.subscription_active = dataListService.stateValue$.subscribe(v => { this.actived_value = v; });
+    }
+    ngOnInit() {
+        this.id = this.generateID();
+        this.setSelectOptions();
+    }
+    generateID() {
+        return `data-list-option-${Math.floor(Math.random() * Math.floor(Math.random() * Date.now()))}`;
+    }
+    setSelectedItem(value) {
+        if (value === '') {
+            this.value = '';
+        }
+        this.dataListService.setItemValue(this.value);
+        const description = document.getElementById(this.id)?.innerText || '';
+        this.dataListService.setItemDescription(description);
+        this.setSelectOptions();
+    }
+    setSelectOptions() {
+        setTimeout(() => {
+            try {
+                const description = 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();
+        }
+    }
+}
+TCloudUiDataListOptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDataListOptionComponent, deps: [{ token: DataListService }], target: i0.ɵɵFactoryTarget.Component });
+TCloudUiDataListOptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiDataListOptionComponent, selector: "tcloud-ui-data-list-option", inputs: { value: "value" }, outputs: { selected: "selected" }, ngImport: i0, template: "<button \r\n  [title]=\"select_options.description\"\r\n  id=\"{{id}}\"\r\n  [attr.data-description]=\"select_options.description\"\r\n  class=\"dropdown-item\" \r\n  [class.null-value]=\"value === undefined || value === null || value === ''\"\r\n  [class.active]=\"value === actived_value\" \r\n  type=\"button\" \r\n  [value]=\"value\"\r\n  (click)=\"setSelectedItem(value)\" >\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: ["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}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDataListOptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tcloud-ui-data-list-option', template: "<button \r\n  [title]=\"select_options.description\"\r\n  id=\"{{id}}\"\r\n  [attr.data-description]=\"select_options.description\"\r\n  class=\"dropdown-item\" \r\n  [class.null-value]=\"value === undefined || value === null || value === ''\"\r\n  [class.active]=\"value === actived_value\" \r\n  type=\"button\" \r\n  [value]=\"value\"\r\n  (click)=\"setSelectedItem(value)\" >\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: ["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}\n"] }]
+        }], ctorParameters: function () { return [{ type: DataListService }]; }, propDecorators: { value: [{
+                type: Input
+            }], selected: [{
+                type: Output
+            }] } });
+
+class TCloudUiDataListModule {
+}
+TCloudUiDataListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDataListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TCloudUiDataListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDataListModule, declarations: [TCloudUiDataListComponent,
+        TCloudUiDataListOptionComponent], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule], exports: [TCloudUiDataListComponent,
+        TCloudUiDataListOptionComponent] });
+TCloudUiDataListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDataListModule, imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDataListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        TCloudUiDataListComponent,
+                        TCloudUiDataListOptionComponent,
+                    ],
+                    exports: [
+                        TCloudUiDataListComponent,
+                        TCloudUiDataListOptionComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule
+                    ]
+                }]
+        }] });
+
+class TooltipDirective {
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+        this._direction = 'top';
+        // main
+        this.el_height = 0;
+        this.el_width = 0;
+        this.el_center = 0;
+        this.el_position = 0;
+        // tooltip
+        this.target_height = 0;
+        this.target_width = 0;
+        this.target_center = 0;
+        this.ID = '';
+        this.info_text = '';
+    }
+    onMouseOver() {
+        if (this.getElement()) {
+            const el = this.getElement();
+            el.style.display = 'inline';
+            setTimeout(() => {
+                this.el_height = this.el.nativeElement.offsetHeight;
+                this.el_width = this.el.nativeElement.offsetWidth;
+                this.el_center = this.el_width / 2;
+                const rect = this.el.nativeElement?.getBoundingClientRect();
+                this.el_position = rect?.left || 0;
+                // console.log('this.el_width', this.el_width);
+                // console.log('this.el_center', this.el_center);
+                // console.log('this.el_position', this.el_position);
+                this.target_height = el.offsetHeight;
+                this.target_width = el.offsetWidth;
+                this.target_center = this.target_width / 2;
+                // console.log('target_heigth', this.target_height);
+                // console.log('target_width', this.target_width);
+                // console.log('target_center', this.target_center);
+                // this.renderer.setStyle(el, 'bottom', `${this.el_position}px`);
+                switch (this._direction) {
+                    case 'top':
+                        this.to_top(el);
+                        break;
+                    case 'bottom':
+                        this.to_bottom(el);
+                        break;
+                    case 'left':
+                        this.to_left(el);
+                        break;
+                    case 'right':
+                        this.to_right(el);
+                        break;
+                }
+            });
+        }
+    }
+    onMouseOut() {
+        if (this.getElement()) {
+            const el = this.getElement();
+            el.style.display = 'none';
+        }
+    }
+    set tooltip(tooltip) {
+        if (tooltip) {
+            this.check(tooltip);
+        }
+    }
+    ;
+    set direction(direction) {
+        if (direction) {
+            this._direction = direction;
+        }
+    }
+    ;
+    ngOnInit() {
+    }
+    generateID() {
+        return `tc-tooltip-${Math.floor(Math.random() * Math.floor(Math.random() * Date.now()))}`;
+    }
+    getElement() {
+        return document.getElementById(this.ID) || undefined;
+    }
+    check(tooltip) {
+        this.ID = this.generateID();
+        this.info_text = tooltip;
+        let el = this.el.nativeElement;
+        this.main_el = el;
+        if (el) {
+            this.create_tooltip(tooltip, el);
+        }
+        else {
+            console.log("TCL: tooltip -> el", this.el.nativeElement);
+        }
+    }
+    setStyle(el) {
+        this.renderer.setStyle(el, 'position', 'relative');
+        this.renderer.setStyle(el, 'border', '1px');
+        this.renderer.setStyle(el, 'display', 'inline');
+    }
+    create_tooltip(tip, el) {
+        this.setStyle(el);
+        const tooltip = document.createElement("div");
+        tooltip.setAttribute('id', this.ID);
+        tooltip.setAttribute('style', `
+      position: absolute;  
+      display: none;
+      padding: .5rem;
+      border-radius: 10px;
+      text-align: center;
+      width: max-content;
+      max-width: 250px;
+      background-color: transparent;
+      color: transparent;
+      z-index: 1090;
+      bottom: ${this.el_position}px;
+      left: ${this.target_center}px;
+    `);
+        tooltip.innerHTML = tip;
+        el.insertBefore(tooltip, null);
+    }
+    to_top(el) {
+        const pos = this.el_center - (this.target_center);
+        this.renderer.setStyle(el, 'left', `${(pos)}px`);
+        this.renderer.setStyle(el, 'bottom', `24px`);
+        el.setAttribute('class', 'tc-directive-tooltip tc-directive-tooltip-top');
+    }
+    to_bottom(el) {
+        const pos = this.el_center - (this.target_center);
+        this.renderer.setStyle(el, 'left', `${(pos)}px`);
+        this.renderer.setStyle(el, 'bottom', `-${(this.target_height + 7)}px`);
+        el.setAttribute('class', 'tc-directive-tooltip tc-directive-tooltip-bottom');
+    }
+    to_right(el) {
+        const pos = this.el_width;
+        this.renderer.setStyle(el, 'left', `${(pos + 11)}px`);
+        this.renderer.setStyle(el, 'bottom', `-${(((this.target_height) / 2) - (this.el_height / 2))}px`);
+        el.setAttribute('class', 'tc-directive-tooltip tc-directive-tooltip-right');
+    }
+    to_left(el) {
+        const pos = -((this.target_width));
+        this.renderer.setStyle(el, 'left', `${(pos - 11)}px`);
+        this.renderer.setStyle(el, 'bottom', `-${(((this.target_height) / 2) - (this.el_height / 2))}px`);
+        el.setAttribute('class', 'tc-directive-tooltip tc-directive-tooltip-left');
+    }
+}
+TooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+TooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: TooltipDirective, selector: "[tooltip]", inputs: { tooltip: "tooltip", direction: "direction" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseout": "onMouseOut()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tooltip]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { onMouseOver: [{
+                type: HostListener,
+                args: ['mouseover']
+            }], onMouseOut: [{
+                type: HostListener,
+                args: ['mouseout']
+            }], tooltip: [{
+                type: Input
+            }], direction: [{
+                type: Input
+            }] } });
+
+class TCloudAccessModule {
+}
+TCloudAccessModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudAccessModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TCloudAccessModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TCloudAccessModule, declarations: [TooltipDirective], exports: [TooltipDirective] });
+TCloudAccessModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudAccessModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudAccessModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [TooltipDirective],
+                    exports: [TooltipDirective],
+                }]
+        }] });
+
+class MonthNamePipe {
+    constructor() {
+        this.meses = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezenbro'];
+    }
+    transform(yyyy_mm) {
+        if (yyyy_mm !== '') {
+            let part = (yyyy_mm).split('-');
+            if ((part).length === 2) {
+                let yyyy = +part[0];
+                let mm = +part[1];
+                return this.meses[(mm - 1)];
+            }
+        }
+        return '';
+    }
+}
+MonthNamePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MonthNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+MonthNamePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: MonthNamePipe, name: "monthname" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MonthNamePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'monthname' }]
+        }] });
+
+class StatusInfoPipe {
+    constructor() {
+        this.status_default = [
+            { key: 'SUCCEEDED', value: 'Finalizado' },
+            { key: 'PENDING', value: 'Pendente' },
+            { key: 'FAILED', value: 'Erro' },
+            { key: 'RUNNING', value: 'Em andamento' },
+            { key: 'REGISTRATION', value: 'Cadastro Pendente' },
+            { key: 'SUCCEED', value: 'Finalizado' },
+            { key: 'WAITING', value: 'Aguardando' },
+            { key: 'REJECTED', value: 'Rejeitado' },
+        ];
+        this.status_proposal = [
+            { key: 'SUCCEEDED', value: 'Finalizado' },
+            { key: 'PENDING', value: 'Aguardando Aprovação' },
+            { key: 'FAILED', value: 'Erro' },
+            { key: 'RUNNING', value: 'Provisionando Ambientes' },
+            { key: 'REGISTRATION', value: 'Cadastro Pendente' },
+            { key: 'SUCCEED', value: 'Finalizado' },
+            { key: 'WAITING', value: 'Provisionando Ambientes' },
+            { key: 'REJECTED', value: 'Rejeitada' },
+        ];
+    }
+    transform(status_name, tema) {
+        let map_tema = this.status_default;
+        if (tema && tema !== undefined) {
+            switch (tema) {
+                case 'proposal':
+                    map_tema = this.status_proposal;
+                    break;
+            }
+        }
+        let status_name_in_search = '';
+        if (tema && tema === 'ALL') {
+            map_tema = this.status_default;
+            if (status_name !== undefined && status_name !== null && `${status_name}` !== '') {
+                for (let i = 0; i < (map_tema).length; i++) {
+                    if ((`${status_name}`).toLowerCase() === (`${map_tema[i].key}`).toLowerCase()) {
+                        status_name_in_search += ' ' + map_tema[i].value;
+                        break;
+                    }
+                }
+            }
+            map_tema = this.status_proposal;
+            if (status_name !== undefined && status_name !== null && `${status_name}` !== '') {
+                for (let i = 0; i < (map_tema).length; i++) {
+                    if ((`${status_name}`).toLowerCase() === (`${map_tema[i].key}`).toLowerCase()) {
+                        status_name_in_search += ' ' + map_tema[i].value;
+                        break;
+                    }
+                }
+            }
+        }
+        else {
+            if (status_name !== undefined && status_name !== null && `${status_name}` !== '') {
+                for (let i = 0; i < (map_tema).length; i++) {
+                    if ((`${status_name}`).toLowerCase() === (`${map_tema[i].key}`).toLowerCase()) {
+                        status_name_in_search += ' ' + map_tema[i].value;
+                        break;
+                    }
+                }
+            }
+        }
+        if (status_name_in_search !== '') {
+            return status_name_in_search;
+        }
+        return status_name;
+    }
+}
+StatusInfoPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: StatusInfoPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+StatusInfoPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: StatusInfoPipe, name: "statusinfo" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: StatusInfoPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'statusinfo' }]
+        }] });
+
+class RespectivePipe {
+    constructor() {
+        this.map = [
+            // Tipos de Ambientes
+            { key: 'production', value: 'Produção' },
+            { key: 'development', value: 'Desenvolvimento' },
+            { key: 'qa', value: 'Qualidade' },
+            // Implantação / Migração
+            { key: 'golive', value: 'Pré GoLive' },
+            { key: 'kickoff', value: 'Kickoff' },
+            // Tipos de Clientes
+            { key: 'prime', value: 'Prime' },
+            { key: 'p', value: 'Pequeno' },
+            { key: 'm', value: 'Médio' },
+            { key: 'g', value: 'Grande' },
+            // Produtos
+            { key: '2c', value: 'Carol' },
+            { key: 'carol', value: 'carol' },
+            { key: 'consinco', value: 'Consinco' },
+            { key: 'datasul', value: 'Datasul' },
+            { key: 'fluig', value: 'Fluig' },
+            { key: 'license-server', value: 'License Server' },
+            { key: 'pep', value: 'PEP' },
+            { key: 'protheus', value: 'Protheus' },
+            { key: 'pvi', value: 'PVI' },
+            { key: 'rm', value: 'RM' },
+            { key: 'sfa', value: 'SFA' },
+            { key: 'smartrm', value: 'Smart RM' },
+            { key: 'smartrmcluster', value: 'Smart RM Cluster' },
+            { key: 'smartrmcontrol', value: 'Smart RM Control' },
+            { key: 'taf', value: 'TAF' },
+            { key: 'treports', value: 'Treports' },
+            { key: 'tss', value: 'TSS' },
+            { key: 'winthor', value: 'Winthor' },
+            // Tipos de SO
+            { key: 'windows', value: 'Windows' },
+            { key: 'linux', value: 'Linux' },
+            // Tipos responsaveis
+            { key: 'prime_customer_success', value: 'Customer Success' },
+            { key: 'project_manager', value: 'Gerente de Projetos' },
+            { key: 'prime_engineer', value: 'Engenheiro Prime' }
+        ];
+    }
+    transform(v) {
+        if (v !== '') {
+            for (let i = 0; i < (this.map).length; i++) {
+                let custom_v = v;
+                custom_v = (custom_v).toLowerCase();
+                custom_v = (custom_v).trim();
+                custom_v = (custom_v).replace(/\_/g, "-");
+                const current_key = (this.map[i].key).replace(/\_/g, "-");
+                if ((custom_v).toLowerCase() === current_key) {
+                    return this.map[i].value;
+                }
+            }
+        }
+        return v;
+    }
+}
+RespectivePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RespectivePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+RespectivePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: RespectivePipe, name: "respective" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RespectivePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'respective' }]
+        }] });
+
+class CNPJPipe {
+    constructor() {
+        this.mascara = "##.###.###/####-##";
+    }
+    createMask(v) {
+        const mask = this.mascara;
+        let str = v.replace(/\s/g, '');
+        let strMask = '';
+        if (str.length == 14) {
+            let j = 0;
+            for (let i = 0; i < mask.length; i++) {
+                if (mask[i] == '#') {
+                    strMask += str[j++];
+                }
+                else {
+                    strMask += mask[i];
+                }
+            }
+        }
+        else {
+            return v;
+        }
+        return strMask;
+    }
+    transform(cnpj) {
+        return this.createMask(cnpj);
+    }
+}
+CNPJPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CNPJPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+CNPJPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: CNPJPipe, name: "cnpj" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CNPJPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'cnpj' }]
+        }] });
+
+class CPFPipe {
+    constructor() {
+        this.mascara = "###.###.###-##";
+    }
+    createMask(v) {
+        const mask = this.mascara;
+        let str = v.replace(/\s/g, '');
+        let strMask = '';
+        if (str.length == 14) {
+            let j = 0;
+            for (let i = 0; i < mask.length; i++) {
+                if (mask[i] == '#') {
+                    strMask += str[j++];
+                }
+                else {
+                    strMask += mask[i];
+                }
+            }
+        }
+        else {
+            return v;
+        }
+        return strMask;
+    }
+    transform(cpf) {
+        return this.createMask(cpf);
+    }
+}
+CPFPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CPFPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+CPFPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: CPFPipe, name: "cpf" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CPFPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'cpf' }]
+        }] });
+
+class TCloudPipesModule {
+}
+TCloudPipesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudPipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TCloudPipesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TCloudPipesModule, declarations: [MonthNamePipe,
+        StatusInfoPipe,
+        RespectivePipe,
+        CNPJPipe], imports: [CommonModule], exports: [MonthNamePipe,
+        StatusInfoPipe,
+        RespectivePipe,
+        CNPJPipe] });
+TCloudPipesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudPipesModule, providers: [
+        MonthNamePipe,
+        StatusInfoPipe,
+        RespectivePipe,
+        CNPJPipe
+    ], imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudPipesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                    ],
+                    declarations: [
+                        MonthNamePipe,
+                        StatusInfoPipe,
+                        RespectivePipe,
+                        CNPJPipe
+                    ],
+                    exports: [
+                        MonthNamePipe,
+                        StatusInfoPipe,
+                        RespectivePipe,
+                        CNPJPipe
+                    ],
+                    providers: [
+                        MonthNamePipe,
+                        StatusInfoPipe,
+                        RespectivePipe,
+                        CNPJPipe
+                    ]
+                }]
+        }] });
+
 class TCloudUiModule {
 }
 TCloudUiModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 TCloudUiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiModule, imports: [TCloudUiModalModule,
         TCloudUiTabMenuModule,
         TCloudUiLinhaLogoModule,
-        TCloudUiLineStepCircleModule], exports: [TCloudUiModalModule,
+        TCloudUiLineStepCircleModule,
+        TCloudUiMultiSelectModule,
+        TCloudUiDataListModule,
+        // Directives
+        TCloudAccessModule,
+        // Pipes
+        TCloudPipesModule], exports: [TCloudUiModalModule,
         TCloudUiTabMenuModule,
         TCloudUiLinhaLogoModule,
-        TCloudUiLineStepCircleModule] });
+        TCloudUiLineStepCircleModule,
+        TCloudUiMultiSelectModule,
+        TCloudUiDataListModule,
+        // Directives
+        TCloudAccessModule,
+        // Pipes
+        TCloudPipesModule] });
 TCloudUiModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiModule, imports: [TCloudUiModalModule,
         TCloudUiTabMenuModule,
         TCloudUiLinhaLogoModule,
-        TCloudUiLineStepCircleModule, TCloudUiModalModule,
+        TCloudUiLineStepCircleModule,
+        TCloudUiMultiSelectModule,
+        TCloudUiDataListModule,
+        // Directives
+        TCloudAccessModule,
+        // Pipes
+        TCloudPipesModule, TCloudUiModalModule,
         TCloudUiTabMenuModule,
         TCloudUiLinhaLogoModule,
-        TCloudUiLineStepCircleModule] });
+        TCloudUiLineStepCircleModule,
+        TCloudUiMultiSelectModule,
+        TCloudUiDataListModule,
+        // Directives
+        TCloudAccessModule,
+        // Pipes
+        TCloudPipesModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiModule, decorators: [{
             type: NgModule,
             args: [{
@@ -897,20 +1830,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         TCloudUiModalModule,
                         TCloudUiTabMenuModule,
                         TCloudUiLinhaLogoModule,
-                        TCloudUiLineStepCircleModule
+                        TCloudUiLineStepCircleModule,
+                        TCloudUiMultiSelectModule,
+                        TCloudUiDataListModule,
+                        // Directives
+                        TCloudAccessModule,
+                        // Pipes
+                        TCloudPipesModule
                     ],
                     exports: [
                         TCloudUiModalModule,
                         TCloudUiTabMenuModule,
                         TCloudUiLinhaLogoModule,
-                        TCloudUiLineStepCircleModule
+                        TCloudUiLineStepCircleModule,
+                        TCloudUiMultiSelectModule,
+                        TCloudUiDataListModule,
+                        // Directives
+                        TCloudAccessModule,
+                        // Pipes
+                        TCloudPipesModule
                     ]
                 }]
         }] });
 
+/*
+ * Public API Surface of tcloud-ui
+ */
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { TCloudUiLineStepCircleComponent, TCloudUiLineStepCircleModule, TCloudUiLinhaLogoComponent, TCloudUiLinhaLogoModule, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModalModule, TCloudUiModule, TCloudUiTabContentComponent, TCloudUiTabHeadComponent, TCloudUiTabMenuComponent, TCloudUiTabMenuModule, TCloudUiTabSubtitleComponent, TCloudUiTabTitleComponent };
+export { CNPJPipe, CPFPipe, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, MonthNamePipe, RespectivePipe, StatusInfoPipe, TCloudAccessModule, TCloudPipesModule, TCloudUiDataListComponent, TCloudUiDataListModule, TCloudUiDataListOptionComponent, TCloudUiLineStepCircleComponent, TCloudUiLineStepCircleModule, TCloudUiLinhaLogoComponent, TCloudUiLinhaLogoModule, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModalModule, TCloudUiModule, TCloudUiMultiSelectComponent, TCloudUiMultiSelectModule, TCloudUiTabContentComponent, TCloudUiTabHeadComponent, TCloudUiTabMenuComponent, TCloudUiTabMenuModule, TCloudUiTabSubtitleComponent, TCloudUiTabTitleComponent, TooltipDirective };
 //# sourceMappingURL=dev-tcloud-tcloud-ui.mjs.map