@dev-tcloud/tcloud-ui 0.0.10 → 0.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -5,7 +5,7 @@ import { CommonModule, DatePipe } from '@angular/common';
5
5
  import { Subject } from 'rxjs';
6
6
  import * as i1$1 from '@angular/router';
7
7
  import * as i2 from '@angular/forms';
8
- import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormControl } from '@angular/forms';
8
+ import { FormsModule, ReactiveFormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR, FormControl } from '@angular/forms';
9
9
  import { trigger, state, style, transition, animate } from '@angular/animations';
10
10
 
11
11
  class TCloudUiLinhaLogoComponent {
@@ -199,10 +199,10 @@ class TCloudUiTabMenuComponent {
199
199
  }
200
200
  }
201
201
  TCloudUiTabMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTabMenuComponent, deps: [{ token: TabMenuService }], target: i0.ɵɵFactoryTarget.Component });
202
- TCloudUiTabMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiTabMenuComponent, selector: "tcloud-ui-tab-menu", inputs: { registerInUrl: "registerInUrl", loading: "loading", active: "active" }, outputs: { onChange: "onChange" }, providers: [TabMenuService], ngImport: i0, template: "<div class=\"tc-tab-menu\" [class.loading]=\"loading\" >\r\n <ng-content></ng-content>\r\n</div>", styles: [".tc-tab-menu{width:100%;overflow-x:hidden}.loading{opacity:.7;cursor:progress!important}\n"] });
202
+ TCloudUiTabMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiTabMenuComponent, selector: "tcloud-ui-tab-menu", inputs: { registerInUrl: "registerInUrl", loading: "loading", active: "active" }, outputs: { onChange: "onChange" }, providers: [TabMenuService], ngImport: i0, template: "<div class=\"tc-tab-menu\" [class.loading]=\"loading\" >\r\n <ng-content></ng-content>\r\n</div>", styles: [".tc-tab-menu{width:100%;overflow-x:hidden}.tc-tab-menu .fas{color:var(--primary);margin:0}.loading{opacity:.7;cursor:progress!important}\n"] });
203
203
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTabMenuComponent, decorators: [{
204
204
  type: Component,
205
- args: [{ selector: 'tcloud-ui-tab-menu', providers: [TabMenuService], template: "<div class=\"tc-tab-menu\" [class.loading]=\"loading\" >\r\n <ng-content></ng-content>\r\n</div>", styles: [".tc-tab-menu{width:100%;overflow-x:hidden}.loading{opacity:.7;cursor:progress!important}\n"] }]
205
+ args: [{ selector: 'tcloud-ui-tab-menu', providers: [TabMenuService], template: "<div class=\"tc-tab-menu\" [class.loading]=\"loading\" >\r\n <ng-content></ng-content>\r\n</div>", styles: [".tc-tab-menu{width:100%;overflow-x:hidden}.tc-tab-menu .fas{color:var(--primary);margin:0}.loading{opacity:.7;cursor:progress!important}\n"] }]
206
206
  }], ctorParameters: function () { return [{ type: TabMenuService }]; }, propDecorators: { registerInUrl: [{
207
207
  type: Input
208
208
  }], loading: [{
@@ -289,10 +289,10 @@ class TCloudUiTabTitleComponent {
289
289
  }
290
290
  }
291
291
  TCloudUiTabTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTabTitleComponent, deps: [{ token: TabMenuService }], target: i0.ɵɵFactoryTarget.Component });
292
- TCloudUiTabTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiTabTitleComponent, selector: "tcloud-ui-tab-title", inputs: { tab: "tab", title: "title", active: "active", disabled: "disabled" }, ngImport: i0, template: "<button [class.loading]=\"loading\" [attr.data-id]=\"tab\" [class.tab-title-active]=\"active\" [disabled]=\"disabled || loading\" type=\"button\" (click)=\"toTab()\" class=\"tab-title\" >\r\n <ng-content></ng-content>\r\n</button>\r\n", styles: [".tab-title{color:var(--cinza);border:none;background:none;text-transform:uppercase;font-size:11px;padding:20px;cursor:pointer;min-width:60px;max-width:200px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;transition:all .25s}.tab-title:hover,.tab-title-active{background:var(--verde);color:#fff}@media (max-width: 1580px){.tab-title{font-size:11px;padding:20px 14px}}@media (max-width: 1440px){.tab-title{font-size:10px;padding:20px 13px}}.loading{cursor:progress!important}button:disabled{opacity:.7;cursor:not-allowed!important}\n"] });
292
+ TCloudUiTabTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiTabTitleComponent, selector: "tcloud-ui-tab-title", inputs: { tab: "tab", title: "title", active: "active", disabled: "disabled" }, ngImport: i0, template: "<button [class.loading]=\"loading\" [attr.data-id]=\"tab\" [class.tab-title-active]=\"active\" [disabled]=\"disabled || loading\" type=\"button\" (click)=\"toTab()\" class=\"tab-title\" >\r\n <ng-content></ng-content>\r\n</button>\r\n", styles: [".tab-title{border-radius:0!important;height:initial;display:inline-block;margin:0!important;color:var(--cinza);border:none;background:none;text-transform:uppercase;font-size:11px;padding:20px;cursor:pointer;min-width:60px;max-width:200px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;transition:all .25s}.tab-title:hover,.tab-title-active{background:var(--verde);color:#fff}.loading{cursor:progress!important}button:disabled{opacity:.7;cursor:not-allowed!important}.tab-title:hover,.tab-title-active{background:var(--primary);background:var(--verde)}@media (max-width: 1580px){.tab-title{font-size:11px;padding:20px 14px}}@media (max-width: 1440px){.tab-title{font-size:10px;padding:20px 13px}}\n"] });
293
293
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTabTitleComponent, decorators: [{
294
294
  type: Component,
295
- args: [{ selector: 'tcloud-ui-tab-title', template: "<button [class.loading]=\"loading\" [attr.data-id]=\"tab\" [class.tab-title-active]=\"active\" [disabled]=\"disabled || loading\" type=\"button\" (click)=\"toTab()\" class=\"tab-title\" >\r\n <ng-content></ng-content>\r\n</button>\r\n", styles: [".tab-title{color:var(--cinza);border:none;background:none;text-transform:uppercase;font-size:11px;padding:20px;cursor:pointer;min-width:60px;max-width:200px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;transition:all .25s}.tab-title:hover,.tab-title-active{background:var(--verde);color:#fff}@media (max-width: 1580px){.tab-title{font-size:11px;padding:20px 14px}}@media (max-width: 1440px){.tab-title{font-size:10px;padding:20px 13px}}.loading{cursor:progress!important}button:disabled{opacity:.7;cursor:not-allowed!important}\n"] }]
295
+ args: [{ selector: 'tcloud-ui-tab-title', template: "<button [class.loading]=\"loading\" [attr.data-id]=\"tab\" [class.tab-title-active]=\"active\" [disabled]=\"disabled || loading\" type=\"button\" (click)=\"toTab()\" class=\"tab-title\" >\r\n <ng-content></ng-content>\r\n</button>\r\n", styles: [".tab-title{border-radius:0!important;height:initial;display:inline-block;margin:0!important;color:var(--cinza);border:none;background:none;text-transform:uppercase;font-size:11px;padding:20px;cursor:pointer;min-width:60px;max-width:200px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;transition:all .25s}.tab-title:hover,.tab-title-active{background:var(--verde);color:#fff}.loading{cursor:progress!important}button:disabled{opacity:.7;cursor:not-allowed!important}.tab-title:hover,.tab-title-active{background:var(--primary);background:var(--verde)}@media (max-width: 1580px){.tab-title{font-size:11px;padding:20px 14px}}@media (max-width: 1440px){.tab-title{font-size:10px;padding:20px 13px}}\n"] }]
296
296
  }], ctorParameters: function () { return [{ type: TabMenuService }]; }, propDecorators: { tab: [{
297
297
  type: Input
298
298
  }], title: [{
@@ -407,10 +407,10 @@ class TCloudUiTabHeadComponent {
407
407
  }
408
408
  }
409
409
  TCloudUiTabHeadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTabHeadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
410
- TCloudUiTabHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiTabHeadComponent, selector: "tcloud-ui-tab-head", inputs: { background: "background" }, ngImport: i0, template: "\r\n\r\n<table class=\"area-navigation\">\r\n <tr>\r\n <td>\r\n <button (click)=\"to_scroll('prev')\"> <i class=\"fas fa-chevron-left\"></i> </button>\r\n </td>\r\n\r\n <td>\r\n \r\n </td>\r\n\r\n <td>\r\n <button (click)=\"to_scroll('next')\"> <i class=\"fas fa-chevron-right\"></i> </button>\r\n </td>\r\n </tr>\r\n</table>\r\n\r\n<div class=\"tc-menu {{ ID }}\" [attr.style]=\"'background: ' + background_color + ';'\" >\r\n <ng-content></ng-content>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".area-navigation{display:none;width:100%;line-height:0}.area-navigation td{width:100%;height:0;line-height:0}.area-navigation td:first-child{width:10px!important;text-align:left}.area-navigation td:first-child button{color:var(--verde);cursor:pointer;position:relative;top:15px;right:6px;border:none;background-color:transparent;font-size:15px;height:30px}.area-navigation td:last-child{width:10px!important;text-align:right}.area-navigation td:last-child button{color:var(--verde);cursor:pointer;position:relative;top:15px;left:6px;border:none;background-color:transparent;font-size:15px;height:30px}.tc-menu{display:flex;align-items:center;border-radius:10px;overflow:hidden;margin-bottom:5px;z-index:1;position:relative}@media (max-width: 1440px){.area-navigation{display:block!important;position:relative;top:0;height:2px}.tc-menu{margin-left:15px;margin-right:15px}}\n"] });
410
+ TCloudUiTabHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiTabHeadComponent, selector: "tcloud-ui-tab-head", inputs: { background: "background" }, ngImport: i0, template: "\r\n\r\n<table class=\"area-navigation\">\r\n <tr>\r\n <td>\r\n <button (click)=\"to_scroll('prev')\"> <i class=\"fas fa-chevron-left\"></i> </button>\r\n </td>\r\n\r\n <td>\r\n \r\n </td>\r\n\r\n <td>\r\n <button (click)=\"to_scroll('next')\"> <i class=\"fas fa-chevron-right\"></i> </button>\r\n </td>\r\n </tr>\r\n</table>\r\n\r\n<div class=\"tc-menu {{ ID }}\" [attr.style]=\"'background: ' + background_color + ';'\" >\r\n <ng-content></ng-content>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".area-navigation{display:none;width:100%;line-height:0}.area-navigation button{padding:0!important}.area-navigation td{width:100%;height:0;line-height:0}.area-navigation td:first-child{width:10px!important;text-align:left}.area-navigation td:first-child button{color:var(--verde);cursor:pointer;position:relative;top:15px;right:6px;border:none;background-color:transparent;font-size:15px;height:30px}.area-navigation td:last-child{width:10px!important;text-align:right}.area-navigation td:last-child button{color:var(--verde);cursor:pointer;position:relative;top:15px;left:6px;border:none;background-color:transparent;font-size:15px;height:30px}.tc-menu{display:flex;align-items:center;border-radius:10px;overflow:hidden;margin-bottom:5px;z-index:1;position:relative}@media (max-width: 1440px){.area-navigation{display:block!important;position:relative;top:0;height:2px}.tc-menu{margin-left:15px;margin-right:15px}}\n"] });
411
411
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiTabHeadComponent, decorators: [{
412
412
  type: Component,
413
- args: [{ selector: 'tcloud-ui-tab-head', template: "\r\n\r\n<table class=\"area-navigation\">\r\n <tr>\r\n <td>\r\n <button (click)=\"to_scroll('prev')\"> <i class=\"fas fa-chevron-left\"></i> </button>\r\n </td>\r\n\r\n <td>\r\n \r\n </td>\r\n\r\n <td>\r\n <button (click)=\"to_scroll('next')\"> <i class=\"fas fa-chevron-right\"></i> </button>\r\n </td>\r\n </tr>\r\n</table>\r\n\r\n<div class=\"tc-menu {{ ID }}\" [attr.style]=\"'background: ' + background_color + ';'\" >\r\n <ng-content></ng-content>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".area-navigation{display:none;width:100%;line-height:0}.area-navigation td{width:100%;height:0;line-height:0}.area-navigation td:first-child{width:10px!important;text-align:left}.area-navigation td:first-child button{color:var(--verde);cursor:pointer;position:relative;top:15px;right:6px;border:none;background-color:transparent;font-size:15px;height:30px}.area-navigation td:last-child{width:10px!important;text-align:right}.area-navigation td:last-child button{color:var(--verde);cursor:pointer;position:relative;top:15px;left:6px;border:none;background-color:transparent;font-size:15px;height:30px}.tc-menu{display:flex;align-items:center;border-radius:10px;overflow:hidden;margin-bottom:5px;z-index:1;position:relative}@media (max-width: 1440px){.area-navigation{display:block!important;position:relative;top:0;height:2px}.tc-menu{margin-left:15px;margin-right:15px}}\n"] }]
413
+ args: [{ selector: 'tcloud-ui-tab-head', template: "\r\n\r\n<table class=\"area-navigation\">\r\n <tr>\r\n <td>\r\n <button (click)=\"to_scroll('prev')\"> <i class=\"fas fa-chevron-left\"></i> </button>\r\n </td>\r\n\r\n <td>\r\n \r\n </td>\r\n\r\n <td>\r\n <button (click)=\"to_scroll('next')\"> <i class=\"fas fa-chevron-right\"></i> </button>\r\n </td>\r\n </tr>\r\n</table>\r\n\r\n<div class=\"tc-menu {{ ID }}\" [attr.style]=\"'background: ' + background_color + ';'\" >\r\n <ng-content></ng-content>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".area-navigation{display:none;width:100%;line-height:0}.area-navigation button{padding:0!important}.area-navigation td{width:100%;height:0;line-height:0}.area-navigation td:first-child{width:10px!important;text-align:left}.area-navigation td:first-child button{color:var(--verde);cursor:pointer;position:relative;top:15px;right:6px;border:none;background-color:transparent;font-size:15px;height:30px}.area-navigation td:last-child{width:10px!important;text-align:right}.area-navigation td:last-child button{color:var(--verde);cursor:pointer;position:relative;top:15px;left:6px;border:none;background-color:transparent;font-size:15px;height:30px}.tc-menu{display:flex;align-items:center;border-radius:10px;overflow:hidden;margin-bottom:5px;z-index:1;position:relative}@media (max-width: 1440px){.area-navigation{display:block!important;position:relative;top:0;height:2px}.tc-menu{margin-left:15px;margin-right:15px}}\n"] }]
414
414
  }], ctorParameters: function () { return []; }, propDecorators: { background: [{
415
415
  type: Input
416
416
  }] } });
@@ -898,18 +898,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
898
898
  }]
899
899
  }] });
900
900
 
901
+ const CUSTOM_INPUT_VALIDATORS$1 = {
902
+ provide: NG_VALIDATORS,
903
+ useExisting: forwardRef(() => TCloudUiMultiSelectComponent),
904
+ multi: true
905
+ };
906
+ const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$3 = {
907
+ provide: NG_VALUE_ACCESSOR,
908
+ useExisting: forwardRef(() => TCloudUiMultiSelectComponent),
909
+ multi: true
910
+ };
911
+ const noop$3 = () => {
912
+ };
901
913
  class TCloudUiMultiSelectComponent {
902
914
  constructor() {
903
915
  this.placeholder = 'Selecione um item';
904
916
  this.disabled = false;
905
917
  this.loading = false;
906
- this.count_actives = 0;
907
918
  this.tcChange = new EventEmitter();
919
+ this.use_validation_required = false;
920
+ this.count_actives = 0;
921
+ this.onChange = new EventEmitter();
922
+ //Placeholders for the callbacks which are later providesd
923
+ //by the Control Value Accessor
924
+ this.onTouchedCallback = noop$3;
925
+ this.onChangeCallback = noop$3;
908
926
  }
909
927
  ngOnInit() {
910
- setTimeout(() => {
911
- this.toChange();
912
- });
928
+ setTimeout(() => { this.toChange(); });
913
929
  }
914
930
  addItem(item) {
915
931
  if (this.disabled) {
@@ -953,15 +969,76 @@ class TCloudUiMultiSelectComponent {
953
969
  }
954
970
  }
955
971
  }
972
+ this.item_value = null;
956
973
  this.count_actives = count_actives;
957
974
  this.tcChange.emit(itens);
975
+ this.onChangeCallback(this.tcList);
976
+ }
977
+ check_is_valid() {
978
+ let active = 0;
979
+ if (this.tcList) {
980
+ for (let i = 0; i < (this.tcList).length; i++) {
981
+ const item = this.tcList[i];
982
+ if (item && item.active && item.active === true) {
983
+ active++;
984
+ break;
985
+ }
986
+ }
987
+ }
988
+ return (active > 0) ? true : false;
989
+ }
990
+ onChangeTouched() {
991
+ this.onTouchedCallback();
992
+ }
993
+ //get accessor
994
+ get value() {
995
+ return this.innerValue;
996
+ }
997
+ ;
998
+ //set accessor including call the onchange callback
999
+ set value(v) {
1000
+ if (v !== this.innerValue) {
1001
+ this.innerValue = v;
1002
+ this.onChangeCallback(v);
1003
+ }
1004
+ }
1005
+ //Set touched on blur
1006
+ onBlur() {
1007
+ this.onTouchedCallback();
1008
+ }
1009
+ //From ControlValueAccessor interface
1010
+ writeValue(value) {
1011
+ if (value !== this.innerValue) {
1012
+ this.innerValue = value;
1013
+ this.toSetDefault(value);
1014
+ }
1015
+ }
1016
+ //From ControlValueAccessor interface
1017
+ registerOnChange(fn) {
1018
+ this.onChangeCallback = fn;
1019
+ }
1020
+ //From ControlValueAccessor interface
1021
+ registerOnTouched(fn) {
1022
+ this.onTouchedCallback = fn;
1023
+ }
1024
+ toSetDefault(value) {
1025
+ this.tcList = value;
1026
+ }
1027
+ validate(c) {
1028
+ if (c && (typeof this.required !== 'undefined')) {
1029
+ this.use_validation_required = true;
1030
+ return (this.check_is_valid()) ? null : 'required';
1031
+ }
1032
+ return null;
1033
+ }
1034
+ ngOnDestroy() {
958
1035
  }
959
1036
  }
960
1037
  TCloudUiMultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
961
- 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\r\n <ng-container *ngIf=\"item.active\">\r\n <div class=\"box-label\">\r\n <div class=\"box-value\" [title]=\"item.value\">\r\n {{ item.value }} \r\n </div>\r\n <div class=\"box-action\">\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 </div>\r\n </ng-container>\r\n\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}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{display:flex;max-width:220px;height:35px;min-width:100px;background-color:var(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{width:8px}.box-label .box-action button{color:#d72020;background-color:var(--verde);border:none;font-weight:700;cursor:pointer}\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"] }] });
1038
+ 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", required: "required" }, outputs: { tcChange: "tcChange", onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$3, CUSTOM_INPUT_VALIDATORS$1], ngImport: i0, template: "\r\n <div>\r\n <table>\r\n <tr *ngIf=\"tcList\">\r\n <td>\r\n <select \r\n [(ngModel)]=\"item_value\"\r\n [class.tc-parent-validation]=\"use_validation_required\" \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]=\"!item_value || tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n title=\"Adicionar\"\r\n class=\"btn-plus-select\"\r\n (click)=\"addItem(_select.value);onChangeTouched()\"\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 && (tcList && tcList.length > 0)\">\r\n <ng-container *ngFor=\"let item of tcList\">\r\n\r\n <ng-container *ngIf=\"item.active\">\r\n <div class=\"box-label\">\r\n <div class=\"box-value\" [title]=\"item.value\">\r\n {{ item.value }} \r\n </div>\r\n <div class=\"box-action\">\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);onChangeTouched()\">\r\n <i class=\"fas fa-times\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\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}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{display:flex;max-width:220px;height:35px;min-width:100px;background-color:var(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{width:8px}.box-label .box-action button{color:#d72020;background-color:var(--verde);border:none;font-weight:700;cursor:pointer}\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"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
962
1039
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiSelectComponent, decorators: [{
963
1040
  type: Component,
964
- 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\r\n <ng-container *ngIf=\"item.active\">\r\n <div class=\"box-label\">\r\n <div class=\"box-value\" [title]=\"item.value\">\r\n {{ item.value }} \r\n </div>\r\n <div class=\"box-action\">\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 </div>\r\n </ng-container>\r\n\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}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{display:flex;max-width:220px;height:35px;min-width:100px;background-color:var(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{width:8px}.box-label .box-action button{color:#d72020;background-color:var(--verde);border:none;font-weight:700;cursor:pointer}\n"] }]
1041
+ args: [{ selector: 'tcloud-ui-multi-select', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$3, CUSTOM_INPUT_VALIDATORS$1], template: "\r\n <div>\r\n <table>\r\n <tr *ngIf=\"tcList\">\r\n <td>\r\n <select \r\n [(ngModel)]=\"item_value\"\r\n [class.tc-parent-validation]=\"use_validation_required\" \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]=\"!item_value || tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\r\n title=\"Adicionar\"\r\n class=\"btn-plus-select\"\r\n (click)=\"addItem(_select.value);onChangeTouched()\"\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 && (tcList && tcList.length > 0)\">\r\n <ng-container *ngFor=\"let item of tcList\">\r\n\r\n <ng-container *ngIf=\"item.active\">\r\n <div class=\"box-label\">\r\n <div class=\"box-value\" [title]=\"item.value\">\r\n {{ item.value }} \r\n </div>\r\n <div class=\"box-action\">\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);onChangeTouched()\">\r\n <i class=\"fas fa-times\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\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}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{display:flex;max-width:220px;height:35px;min-width:100px;background-color:var(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{width:8px}.box-label .box-action button{color:#d72020;background-color:var(--verde);border:none;font-weight:700;cursor:pointer}\n"] }]
965
1042
  }], ctorParameters: function () { return []; }, propDecorators: { tcList: [{
966
1043
  type: Input
967
1044
  }], placeholder: [{
@@ -970,22 +1047,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
970
1047
  type: Input
971
1048
  }], loading: [{
972
1049
  type: Input
1050
+ }], required: [{
1051
+ type: Input
973
1052
  }], tcChange: [{
974
1053
  type: Output
1054
+ }], onChange: [{
1055
+ type: Output
975
1056
  }] } });
976
1057
 
977
1058
  class TCloudUiMultiSelectModule {
978
1059
  }
979
1060
  TCloudUiMultiSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
980
- TCloudUiMultiSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiSelectModule, declarations: [TCloudUiMultiSelectComponent], imports: [CommonModule], exports: [TCloudUiMultiSelectComponent] });
981
- TCloudUiMultiSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiSelectModule, imports: [CommonModule] });
1061
+ TCloudUiMultiSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiSelectModule, declarations: [TCloudUiMultiSelectComponent], imports: [CommonModule,
1062
+ FormsModule,
1063
+ ReactiveFormsModule], exports: [TCloudUiMultiSelectComponent] });
1064
+ TCloudUiMultiSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiSelectModule, imports: [CommonModule,
1065
+ FormsModule,
1066
+ ReactiveFormsModule] });
982
1067
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiSelectModule, decorators: [{
983
1068
  type: NgModule,
984
1069
  args: [{
985
1070
  declarations: [TCloudUiMultiSelectComponent],
986
1071
  exports: [TCloudUiMultiSelectComponent],
987
1072
  imports: [
988
- CommonModule
1073
+ CommonModule,
1074
+ FormsModule,
1075
+ ReactiveFormsModule
989
1076
  ]
990
1077
  }]
991
1078
  }] });
@@ -1026,12 +1113,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
1026
1113
  type: Injectable
1027
1114
  }] });
1028
1115
 
1029
- const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1 = {
1116
+ const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2 = {
1030
1117
  provide: NG_VALUE_ACCESSOR,
1031
1118
  useExisting: forwardRef(() => TCloudUiDataListComponent),
1032
1119
  multi: true
1033
1120
  };
1034
- const noop$1 = () => {
1121
+ const noop$2 = () => {
1035
1122
  };
1036
1123
  class TCloudUiDataListComponent {
1037
1124
  constructor(dataListService, formBuilder) {
@@ -1054,8 +1141,8 @@ class TCloudUiDataListComponent {
1054
1141
  this.id = '';
1055
1142
  //Placeholders for the callbacks which are later providesd
1056
1143
  //by the Control Value Accessor
1057
- this.onTouchedCallback = noop$1;
1058
- this.onChangeCallback = noop$1;
1144
+ this.onTouchedCallback = noop$2;
1145
+ this.onChangeCallback = noop$2;
1059
1146
  }
1060
1147
  set disabled(v) {
1061
1148
  this._disabled = v;
@@ -1249,13 +1336,13 @@ class TCloudUiDataListComponent {
1249
1336
  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 });
1250
1337
  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: [
1251
1338
  DataListService,
1252
- CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1
1339
+ CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2
1253
1340
  ], 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"] }] });
1254
1341
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiDataListComponent, decorators: [{
1255
1342
  type: Component,
1256
1343
  args: [{ selector: 'tcloud-ui-data-list', providers: [
1257
1344
  DataListService,
1258
- CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1
1345
+ CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2
1259
1346
  ], 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"] }]
1260
1347
  }], ctorParameters: function () { return [{ type: DataListService }, { type: i2.FormBuilder }]; }, propDecorators: { placeholder: [{
1261
1348
  type: Input
@@ -1360,12 +1447,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
1360
1447
  }]
1361
1448
  }] });
1362
1449
 
1363
- const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
1450
+ const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1 = {
1364
1451
  provide: NG_VALUE_ACCESSOR,
1365
1452
  useExisting: forwardRef(() => TCloudUiChoiceIssuesComponent),
1366
1453
  multi: true
1367
1454
  };
1368
- const noop = () => {
1455
+ const noop$1 = () => {
1369
1456
  };
1370
1457
  class TCloudUiChoiceIssuesComponent {
1371
1458
  constructor() {
@@ -1377,8 +1464,8 @@ class TCloudUiChoiceIssuesComponent {
1377
1464
  this.innerValue = false;
1378
1465
  //Placeholders for the callbacks which are later providesd
1379
1466
  //by the Control Value Accessor
1380
- this.onTouchedCallback = noop;
1381
- this.onChangeCallback = noop;
1467
+ this.onTouchedCallback = noop$1;
1468
+ this.onChangeCallback = noop$1;
1382
1469
  this.ID = 'tc-issue-' + Math.random().toString(36).substr(2, 9);
1383
1470
  }
1384
1471
  //get accessor
@@ -1424,10 +1511,10 @@ class TCloudUiChoiceIssuesComponent {
1424
1511
  }
1425
1512
  }
1426
1513
  TCloudUiChoiceIssuesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiChoiceIssuesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1427
- TCloudUiChoiceIssuesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiChoiceIssuesComponent, selector: "tcloud-ui-choice-issues", inputs: { view: "view", titulo: "titulo", subTitulo: "subTitulo", disabled: "disabled" }, outputs: { onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["campo"], descendants: true, read: true }], ngImport: i0, template: "\r\n\r\n<input #campo [(ngModel)]=\"value\" type=\"hidden\" [value]=\"false\" >\r\n<div class=\"box p-2 mt-3 mb-2\">\r\n <div class=\"row\">\r\n <div class=\"col-md-8\">\r\n <p class=\"titulo\">{{ titulo }}</p> \r\n </div>\r\n <div class=\"col-md-4 text-right\"> \r\n\r\n <table class=\"mt-2 mr-2\" *ngIf=\"!view\" >\r\n <tr>\r\n <td>\r\n <div class=\"form-fieldset\">\r\n <label [class.v-true]=\"value\" class=\"mr-1\"><input #campo name=\"{{ ID }}\" [value]=\"true\" type=\"radio\" [(ngModel)]=\"value\" (click)=\"setV(true)\" >Sim</label>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"form-fieldset\">\r\n <label [class.v-true]=\"!value\" class=\"ml-2\"><input #campo name=\"{{ ID }}\" [value]=\"false\" type=\"radio\" [(ngModel)]=\"value\" (click)=\"setV(false)\" >N\u00E3o</label>\r\n </div>\r\n </td>\r\n </tr>\r\n </table> \r\n\r\n <table class=\"mt-2 mr-2\" *ngIf=\"view\" >\r\n <tr>\r\n <td>\r\n <div class=\"form-fieldset view\" >\r\n <label *ngIf=\"value\" class=\"v-true disabled\" >Sim</label>\r\n <label *ngIf=\"!value\">N\u00E3o</label>\r\n </div>\r\n </td>\r\n </tr>\r\n </table>\r\n </div>\r\n <div class=\"col-md-12 mt-1\">\r\n <p class=\"sub-titulo\">{{ subTitulo }}</p>\r\n </div>\r\n <div class=\"col-md-12 mt-2 mb-1\">\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n", styles: [".titulo{font-size:1rem;color:var(--cinza)}.sub-titulo{color:#b0adaa}.box{border:1px solid var(--cinza3);border-radius:10px}.box.box-icon{display:flex;justify-content:center;padding:35px 20px}.form-fieldset input{display:none}.form-fieldset .v-true{background:var(--verde);color:#fff}.form-fieldset label{font-size:11px;background:var(--cinza4);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}.form-fieldset label:before{content:\"\";background:#fff;border-radius:50%;height:15px;width:15px}.form-fieldset label:nth-child(2){margin-right:20px}table{width:100%;max-width:200px}.view,.view label{cursor:inherit!important}.disabled{background-color:#8fdfe8!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
1514
+ TCloudUiChoiceIssuesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiChoiceIssuesComponent, selector: "tcloud-ui-choice-issues", inputs: { view: "view", titulo: "titulo", subTitulo: "subTitulo", disabled: "disabled" }, outputs: { onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["campo"], descendants: true, read: true }], ngImport: i0, template: "\r\n\r\n<input #campo [(ngModel)]=\"value\" type=\"hidden\" [value]=\"false\" >\r\n<div class=\"box p-2 mt-3 mb-2\">\r\n <div class=\"row\">\r\n <div class=\"col-md-8\">\r\n <p class=\"titulo\">{{ titulo }}</p> \r\n </div>\r\n <div class=\"col-md-4 text-right\"> \r\n\r\n <table class=\"mt-2 mr-2\" *ngIf=\"!view\" >\r\n <tr>\r\n <td>\r\n <div class=\"form-fieldset\">\r\n <label [class.v-true]=\"value\" class=\"mr-1\"><input #campo name=\"{{ ID }}\" [value]=\"true\" type=\"radio\" [(ngModel)]=\"value\" (click)=\"setV(true)\" >Sim</label>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"form-fieldset\">\r\n <label [class.v-true]=\"!value\" class=\"ml-2\"><input #campo name=\"{{ ID }}\" [value]=\"false\" type=\"radio\" [(ngModel)]=\"value\" (click)=\"setV(false)\" >N\u00E3o</label>\r\n </div>\r\n </td>\r\n </tr>\r\n </table> \r\n\r\n <table class=\"mt-2 mr-2\" *ngIf=\"view\" >\r\n <tr>\r\n <td>\r\n <div class=\"form-fieldset view\" >\r\n <label *ngIf=\"value\" class=\"v-true disabled\" >Sim</label>\r\n <label *ngIf=\"!value\">N\u00E3o</label>\r\n </div>\r\n </td>\r\n </tr>\r\n </table>\r\n </div>\r\n <div class=\"col-md-12 mt-1\">\r\n <p class=\"sub-titulo\">{{ subTitulo }}</p>\r\n </div>\r\n <div class=\"col-md-12 mt-2 mb-1\">\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n", styles: [".titulo{font-size:1rem;color:var(--cinza)}.sub-titulo{color:#b0adaa}.box{border:1px solid var(--cinza3);border-radius:10px}.box.box-icon{display:flex;justify-content:center;padding:35px 20px}.form-fieldset input{display:none}.form-fieldset .v-true{background:var(--verde);color:#fff}.form-fieldset label{font-size:11px;background:var(--cinza4);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}.form-fieldset label:before{content:\"\";background:#fff;border-radius:50%;height:15px;width:15px}.form-fieldset label:nth-child(2){margin-right:20px}table{width:100%;max-width:200px}.view,.view label{cursor:inherit!important}.disabled{background-color:#8fdfe8!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
1428
1515
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiChoiceIssuesComponent, decorators: [{
1429
1516
  type: Component,
1430
- args: [{ selector: 'tcloud-ui-choice-issues', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], template: "\r\n\r\n<input #campo [(ngModel)]=\"value\" type=\"hidden\" [value]=\"false\" >\r\n<div class=\"box p-2 mt-3 mb-2\">\r\n <div class=\"row\">\r\n <div class=\"col-md-8\">\r\n <p class=\"titulo\">{{ titulo }}</p> \r\n </div>\r\n <div class=\"col-md-4 text-right\"> \r\n\r\n <table class=\"mt-2 mr-2\" *ngIf=\"!view\" >\r\n <tr>\r\n <td>\r\n <div class=\"form-fieldset\">\r\n <label [class.v-true]=\"value\" class=\"mr-1\"><input #campo name=\"{{ ID }}\" [value]=\"true\" type=\"radio\" [(ngModel)]=\"value\" (click)=\"setV(true)\" >Sim</label>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"form-fieldset\">\r\n <label [class.v-true]=\"!value\" class=\"ml-2\"><input #campo name=\"{{ ID }}\" [value]=\"false\" type=\"radio\" [(ngModel)]=\"value\" (click)=\"setV(false)\" >N\u00E3o</label>\r\n </div>\r\n </td>\r\n </tr>\r\n </table> \r\n\r\n <table class=\"mt-2 mr-2\" *ngIf=\"view\" >\r\n <tr>\r\n <td>\r\n <div class=\"form-fieldset view\" >\r\n <label *ngIf=\"value\" class=\"v-true disabled\" >Sim</label>\r\n <label *ngIf=\"!value\">N\u00E3o</label>\r\n </div>\r\n </td>\r\n </tr>\r\n </table>\r\n </div>\r\n <div class=\"col-md-12 mt-1\">\r\n <p class=\"sub-titulo\">{{ subTitulo }}</p>\r\n </div>\r\n <div class=\"col-md-12 mt-2 mb-1\">\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n", styles: [".titulo{font-size:1rem;color:var(--cinza)}.sub-titulo{color:#b0adaa}.box{border:1px solid var(--cinza3);border-radius:10px}.box.box-icon{display:flex;justify-content:center;padding:35px 20px}.form-fieldset input{display:none}.form-fieldset .v-true{background:var(--verde);color:#fff}.form-fieldset label{font-size:11px;background:var(--cinza4);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}.form-fieldset label:before{content:\"\";background:#fff;border-radius:50%;height:15px;width:15px}.form-fieldset label:nth-child(2){margin-right:20px}table{width:100%;max-width:200px}.view,.view label{cursor:inherit!important}.disabled{background-color:#8fdfe8!important}\n"] }]
1517
+ args: [{ selector: 'tcloud-ui-choice-issues', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1], template: "\r\n\r\n<input #campo [(ngModel)]=\"value\" type=\"hidden\" [value]=\"false\" >\r\n<div class=\"box p-2 mt-3 mb-2\">\r\n <div class=\"row\">\r\n <div class=\"col-md-8\">\r\n <p class=\"titulo\">{{ titulo }}</p> \r\n </div>\r\n <div class=\"col-md-4 text-right\"> \r\n\r\n <table class=\"mt-2 mr-2\" *ngIf=\"!view\" >\r\n <tr>\r\n <td>\r\n <div class=\"form-fieldset\">\r\n <label [class.v-true]=\"value\" class=\"mr-1\"><input #campo name=\"{{ ID }}\" [value]=\"true\" type=\"radio\" [(ngModel)]=\"value\" (click)=\"setV(true)\" >Sim</label>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"form-fieldset\">\r\n <label [class.v-true]=\"!value\" class=\"ml-2\"><input #campo name=\"{{ ID }}\" [value]=\"false\" type=\"radio\" [(ngModel)]=\"value\" (click)=\"setV(false)\" >N\u00E3o</label>\r\n </div>\r\n </td>\r\n </tr>\r\n </table> \r\n\r\n <table class=\"mt-2 mr-2\" *ngIf=\"view\" >\r\n <tr>\r\n <td>\r\n <div class=\"form-fieldset view\" >\r\n <label *ngIf=\"value\" class=\"v-true disabled\" >Sim</label>\r\n <label *ngIf=\"!value\">N\u00E3o</label>\r\n </div>\r\n </td>\r\n </tr>\r\n </table>\r\n </div>\r\n <div class=\"col-md-12 mt-1\">\r\n <p class=\"sub-titulo\">{{ subTitulo }}</p>\r\n </div>\r\n <div class=\"col-md-12 mt-2 mb-1\">\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n", styles: [".titulo{font-size:1rem;color:var(--cinza)}.sub-titulo{color:#b0adaa}.box{border:1px solid var(--cinza3);border-radius:10px}.box.box-icon{display:flex;justify-content:center;padding:35px 20px}.form-fieldset input{display:none}.form-fieldset .v-true{background:var(--verde);color:#fff}.form-fieldset label{font-size:11px;background:var(--cinza4);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}.form-fieldset label:before{content:\"\";background:#fff;border-radius:50%;height:15px;width:15px}.form-fieldset label:nth-child(2){margin-right:20px}table{width:100%;max-width:200px}.view,.view label{cursor:inherit!important}.disabled{background-color:#8fdfe8!important}\n"] }]
1431
1518
  }], ctorParameters: function () { return []; }, propDecorators: { view: [{
1432
1519
  type: Input
1433
1520
  }], titulo: [{
@@ -1469,13 +1556,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
1469
1556
  }]
1470
1557
  }] });
1471
1558
 
1559
+ const CUSTOM_INPUT_VALIDATORS = {
1560
+ provide: NG_VALIDATORS,
1561
+ useExisting: forwardRef(() => TCloudUiMultiInputComponent),
1562
+ multi: true
1563
+ };
1564
+ const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
1565
+ provide: NG_VALUE_ACCESSOR,
1566
+ useExisting: forwardRef(() => TCloudUiMultiInputComponent),
1567
+ multi: true
1568
+ };
1569
+ const noop = () => {
1570
+ };
1472
1571
  class TCloudUiMultiInputComponent {
1473
1572
  constructor() {
1474
1573
  this.placeholder = '';
1475
1574
  this.disabled = false;
1476
1575
  this.loading = false;
1477
1576
  this.count_actives = 0;
1577
+ this.use_validation_required = false;
1478
1578
  this.tcChange = new EventEmitter();
1579
+ this.onChange = new EventEmitter();
1580
+ //Placeholders for the callbacks which are later providesd
1581
+ //by the Control Value Accessor
1582
+ this.onTouchedCallback = noop;
1583
+ this.onChangeCallback = noop;
1479
1584
  }
1480
1585
  ngOnInit() {
1481
1586
  setTimeout(() => {
@@ -1517,15 +1622,69 @@ class TCloudUiMultiInputComponent {
1517
1622
  (itens).push(row);
1518
1623
  }
1519
1624
  }
1625
+ this.item_value = null;
1520
1626
  this.count_actives = count_actives;
1521
1627
  this.tcChange.emit(itens);
1628
+ this.onChangeCallback(this.tcList);
1629
+ }
1630
+ check_is_valid() {
1631
+ if (this.tcList) {
1632
+ return ((this.tcList).length > 0) ? true : false;
1633
+ }
1634
+ return false;
1635
+ }
1636
+ onChangeTouched() {
1637
+ this.onTouchedCallback();
1638
+ }
1639
+ //get accessor
1640
+ get value() {
1641
+ return this.innerValue;
1642
+ }
1643
+ ;
1644
+ //set accessor including call the onchange callback
1645
+ set value(v) {
1646
+ if (v !== this.innerValue) {
1647
+ this.innerValue = v;
1648
+ this.onChangeCallback(v);
1649
+ }
1650
+ }
1651
+ //Set touched on blur
1652
+ onBlur() {
1653
+ this.onTouchedCallback();
1654
+ }
1655
+ //From ControlValueAccessor interface
1656
+ writeValue(value) {
1657
+ if (value !== this.innerValue) {
1658
+ this.innerValue = value;
1659
+ this.toSetDefault(value);
1660
+ }
1661
+ }
1662
+ //From ControlValueAccessor interface
1663
+ registerOnChange(fn) {
1664
+ this.onChangeCallback = fn;
1665
+ }
1666
+ //From ControlValueAccessor interface
1667
+ registerOnTouched(fn) {
1668
+ this.onTouchedCallback = fn;
1669
+ }
1670
+ toSetDefault(value) {
1671
+ this.tcList = value;
1672
+ }
1673
+ validate(c) {
1674
+ if (c && (typeof this.required !== 'undefined')) {
1675
+ this.use_validation_required = true;
1676
+ return (this.check_is_valid()) ? null : 'required';
1677
+ }
1678
+ return null;
1679
+ }
1680
+ ngOnDestroy() {
1522
1681
  }
1523
1682
  }
1524
1683
  TCloudUiMultiInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1525
- TCloudUiMultiInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiMultiInputComponent, selector: "tcloud-ui-multi-input", inputs: { tcList: "tcList", placeholder: "placeholder", disabled: "disabled", loading: "loading" }, outputs: { tcChange: "tcChange" }, ngImport: i0, template: "<div>\n <form #_formulario=\"ngForm\">\n <table>\n <tr *ngIf=\"tcList\">\n <td>\n <input type=\"text\" [(ngModel)]=\"input_value\" [disabled]=\"disabled || loading\" name=\"input_value\" required>\n </td>\n <td>\n <button\n [disabled]=\"disabled || loading || !_formulario.valid\"\n title=\"Adicionar\"\n class=\"btn-plus-select\"\n (click)=\"addItem(input_value)\"\n type=\"button\">\n <i class=\"fas fa-plus\"></i>\n </button>\n </td>\n </tr>\n </table>\n \n <div class=\"box-itens-selected\">\n <ng-container *ngFor=\"let item of tcList; let i = index\">\n \n <div class=\"box-label\">\n <div class=\"box-value\" [title]=\"item.value\">\n {{ item.value }} \n </div>\n <div class=\"box-action\">\n <button\n [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\n title=\"Remover\"\n type=\"button\"\n (click)=\"removeItem(item.value, i)\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n\n </ng-container>\n </div>\n </form>\n</div>\n ", styles: ["table{width:100%;border-collapse:collapse;border:none}table td:first-child{width:100%}input{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}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{display:flex;max-width:220px;height:35px;min-width:100px;background-color:var(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{width:8px}.box-label .box-action button{color:#d72020;background-color:var(--verde);border:none;font-weight:700;cursor:pointer}\n"], dependencies: [{ 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"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
1684
+ TCloudUiMultiInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiMultiInputComponent, selector: "tcloud-ui-multi-input", inputs: { tcList: "tcList", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required" }, outputs: { tcChange: "tcChange", onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, CUSTOM_INPUT_VALIDATORS], ngImport: i0, template: "<div>\n\n <table>\n <tr>\n <td>\n <input (blur)=\"onChangeTouched()\" [(ngModel)]=\"item_value\" [class.tc-parent-validation]=\"use_validation_required\" type=\"text\" [(ngModel)]=\"input_value\" [disabled]=\"disabled || loading\" name=\"input_value\">\n </td>\n <td>\n <button\n [disabled]=\"!item_value || disabled || loading\"\n title=\"Adicionar\"\n class=\"btn-plus-select\"\n (click)=\"addItem(input_value);onChangeTouched()\"\n type=\"button\">\n <i class=\"fas fa-plus\"></i>\n </button>\n </td>\n </tr>\n </table>\n \n <div class=\"box-itens-selected\" *ngIf=\"(tcList && tcList.length > 0)\">\n <ng-container *ngFor=\"let item of tcList; let i = index\">\n \n <div class=\"box-label\">\n <div class=\"box-value\" [title]=\"item.value\">\n {{ item.value }} \n </div>\n <div class=\"box-action\">\n <button\n [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\n title=\"Remover\"\n type=\"button\"\n (click)=\"removeItem(item.value, i);onChangeTouched()\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n\n </ng-container>\n </div>\n \n</div>\n ", styles: ["table{width:100%;border-collapse:collapse;border:none}table td:first-child{width:100%}input{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}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{display:flex;max-width:220px;height:35px;min-width:100px;background-color:var(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{width:8px}.box-label .box-action button{color:#d72020;background-color:var(--verde);border:none;font-weight:700;cursor:pointer}\n"], dependencies: [{ 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
1526
1685
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiMultiInputComponent, decorators: [{
1527
1686
  type: Component,
1528
- args: [{ selector: 'tcloud-ui-multi-input', template: "<div>\n <form #_formulario=\"ngForm\">\n <table>\n <tr *ngIf=\"tcList\">\n <td>\n <input type=\"text\" [(ngModel)]=\"input_value\" [disabled]=\"disabled || loading\" name=\"input_value\" required>\n </td>\n <td>\n <button\n [disabled]=\"disabled || loading || !_formulario.valid\"\n title=\"Adicionar\"\n class=\"btn-plus-select\"\n (click)=\"addItem(input_value)\"\n type=\"button\">\n <i class=\"fas fa-plus\"></i>\n </button>\n </td>\n </tr>\n </table>\n \n <div class=\"box-itens-selected\">\n <ng-container *ngFor=\"let item of tcList; let i = index\">\n \n <div class=\"box-label\">\n <div class=\"box-value\" [title]=\"item.value\">\n {{ item.value }} \n </div>\n <div class=\"box-action\">\n <button\n [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\n title=\"Remover\"\n type=\"button\"\n (click)=\"removeItem(item.value, i)\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n\n </ng-container>\n </div>\n </form>\n</div>\n ", styles: ["table{width:100%;border-collapse:collapse;border:none}table td:first-child{width:100%}input{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}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{display:flex;max-width:220px;height:35px;min-width:100px;background-color:var(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{width:8px}.box-label .box-action button{color:#d72020;background-color:var(--verde);border:none;font-weight:700;cursor:pointer}\n"] }]
1687
+ args: [{ selector: 'tcloud-ui-multi-input', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, CUSTOM_INPUT_VALIDATORS], template: "<div>\n\n <table>\n <tr>\n <td>\n <input (blur)=\"onChangeTouched()\" [(ngModel)]=\"item_value\" [class.tc-parent-validation]=\"use_validation_required\" type=\"text\" [(ngModel)]=\"input_value\" [disabled]=\"disabled || loading\" name=\"input_value\">\n </td>\n <td>\n <button\n [disabled]=\"!item_value || disabled || loading\"\n title=\"Adicionar\"\n class=\"btn-plus-select\"\n (click)=\"addItem(input_value);onChangeTouched()\"\n type=\"button\">\n <i class=\"fas fa-plus\"></i>\n </button>\n </td>\n </tr>\n </table>\n \n <div class=\"box-itens-selected\" *ngIf=\"(tcList && tcList.length > 0)\">\n <ng-container *ngFor=\"let item of tcList; let i = index\">\n \n <div class=\"box-label\">\n <div class=\"box-value\" [title]=\"item.value\">\n {{ item.value }} \n </div>\n <div class=\"box-action\">\n <button\n [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\n title=\"Remover\"\n type=\"button\"\n (click)=\"removeItem(item.value, i);onChangeTouched()\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </div>\n\n </ng-container>\n </div>\n \n</div>\n ", styles: ["table{width:100%;border-collapse:collapse;border:none}table td:first-child{width:100%}input{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}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{display:flex;max-width:220px;height:35px;min-width:100px;background-color:var(--verde);color:#fff;padding:8px 15px 10px;border:none;border-radius:5px;margin:2px}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{width:8px}.box-label .box-action button{color:#d72020;background-color:var(--verde);border:none;font-weight:700;cursor:pointer}\n"] }]
1529
1688
  }], ctorParameters: function () { return []; }, propDecorators: { tcList: [{
1530
1689
  type: Input
1531
1690
  }], placeholder: [{
@@ -1534,8 +1693,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
1534
1693
  type: Input
1535
1694
  }], loading: [{
1536
1695
  type: Input
1696
+ }], required: [{
1697
+ type: Input
1537
1698
  }], tcChange: [{
1538
1699
  type: Output
1700
+ }], onChange: [{
1701
+ type: Output
1539
1702
  }] } });
1540
1703
 
1541
1704
  class TCloudUiMultiInputModule {
@@ -2386,5 +2549,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
2386
2549
  * Generated bundle index. Do not edit.
2387
2550
  */
2388
2551
 
2389
- export { CNPJPipe, CPFPipe, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1 as CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, MonthNamePipe, RespectivePipe, StatusInfoPipe, TCloudUiChoiceIssuesComponent, TCloudUiChoiceIssuesModule, TCloudUiDataListComponent, TCloudUiDataListModule, TCloudUiDataListOptionComponent, TCloudUiDirectiveModule, TCloudUiInputSearchComponent, TCloudUiInputSearchModule, TCloudUiLineStepCircleComponent, TCloudUiLineStepCircleModule, TCloudUiLinhaLogoComponent, TCloudUiLinhaLogoModule, TCloudUiLoadingTransitionsService, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModalModule, TCloudUiModule, TCloudUiMultiInputComponent, TCloudUiMultiInputModule, TCloudUiMultiSelectComponent, TCloudUiMultiSelectModule, TCloudUiNotFoundComponent, TCloudUiNotFoundModule, TCloudUiPipesModule, TCloudUiSearchInObjectService, TCloudUiTabContentComponent, TCloudUiTabHeadComponent, TCloudUiTabMenuComponent, TCloudUiTabMenuModule, TCloudUiTabSubtitleComponent, TCloudUiTabTitleComponent, TCloudUiTooltipDirective };
2552
+ export { CNPJPipe, CPFPipe, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2 as CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, MonthNamePipe, RespectivePipe, StatusInfoPipe, TCloudUiChoiceIssuesComponent, TCloudUiChoiceIssuesModule, TCloudUiDataListComponent, TCloudUiDataListModule, TCloudUiDataListOptionComponent, TCloudUiDirectiveModule, TCloudUiInputSearchComponent, TCloudUiInputSearchModule, TCloudUiLineStepCircleComponent, TCloudUiLineStepCircleModule, TCloudUiLinhaLogoComponent, TCloudUiLinhaLogoModule, TCloudUiLoadingTransitionsService, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModalModule, TCloudUiModule, TCloudUiMultiInputComponent, TCloudUiMultiInputModule, TCloudUiMultiSelectComponent, TCloudUiMultiSelectModule, TCloudUiNotFoundComponent, TCloudUiNotFoundModule, TCloudUiPipesModule, TCloudUiSearchInObjectService, TCloudUiTabContentComponent, TCloudUiTabHeadComponent, TCloudUiTabMenuComponent, TCloudUiTabMenuModule, TCloudUiTabSubtitleComponent, TCloudUiTabTitleComponent, TCloudUiTooltipDirective };
2390
2553
  //# sourceMappingURL=dev-tcloud-tcloud-ui.mjs.map