@dev-tcloud/tcloud-ui 7.0.4 → 7.0.5

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.
Files changed (7) hide show
  1. package/docs/tcloud-ui-multi-input.md +18 -0
  2. package/docs/tcloud-ui-multiples-values.md +31 -0
  3. package/fesm2022/dev-tcloud-tcloud-ui.mjs +15 -4
  4. package/fesm2022/dev-tcloud-tcloud-ui.mjs.map +1 -1
  5. package/js/tcloud-ui-app.js +49 -49
  6. package/package.json +1 -1
  7. package/types/dev-tcloud-tcloud-ui.d.ts +6 -2
package/docs/tcloud-ui-multi-input.md CHANGED
@@ -9,6 +9,7 @@
9
9
  - Suporte a estados: `disabled` e `loading`.
10
10
  - Largura máxima configurável para labels.
11
11
  - Modo `showInput`: oculta o input de entrada, exibindo apenas os itens.
12
+ - Autocomplete nativo do navegador (via `<datalist>`) a partir de `autocompleteitems`.
12
13
  - Emite alterações via evento `tcChange`.
13
14
 
14
15
  ## Instalação
@@ -46,6 +47,7 @@ export class ExampleComponent {
46
47
  | required | string | Se definido, habilita validação de pelo menos um item na lista. | undefined |
47
48
  | maxWidthLabel | string | Largura máxima de cada label (ex: '95px', '120px'). | undefined |
48
49
  | showInput | boolean | Se true, oculta o input de entrada e exibe apenas os itens existentes. | false |
50
+ | autocompleteitems | string[] | Sugestões de autocomplete nativo (`<datalist>`) exibidas ao digitar no input. | [] |
49
51
  | ngModel | { value: any }[] | Array de itens para two-way binding. | undefined |
50
52
 
51
53
  ### Outputs
@@ -134,6 +136,22 @@ export class FormComponent {
134
136
  </tcloud-ui-multi-input>
135
137
  ```
136
138
 
139
+ ### Com Autocomplete Nativo (autocompleteitems)
140
+ ```ts
141
+ export class ExampleComponent {
142
+ sugestoesTags = ['Angular', 'TypeScript', 'JavaScript', 'HTML', 'CSS'];
143
+ }
144
+ ```
145
+
146
+ ```html
147
+ <tcloud-ui-multi-input
148
+ [tcList]="items"
149
+ [autocompleteitems]="sugestoesTags"
150
+ [placeholder]="'Digite uma tag'"
151
+ (tcChange)="onItemsChanged($event)">
152
+ </tcloud-ui-multi-input>
153
+ ```
154
+
137
155
  ## Uso Avançado
138
156
  ### Com ngModel e Formulário Reativo
139
157
  ```ts
package/docs/tcloud-ui-multiples-values.md CHANGED
@@ -13,6 +13,7 @@ O componente `tcloud-ui-multiples-values` permite a entrada e gerenciamento de m
13
13
  - Contador de registros adicionados
14
14
  - Botão para limpar toda a lista (quando mais de 5 itens)
15
15
  - Controle de largura máxima dos labels com `maxWidthLabel`
16
+ - Autocomplete nativo do navegador (via `<datalist>`) no input simples, a partir de `autocompleteitems`
16
17
  - Compatível com `ngModel` e formulários Angular (ControlValueAccessor + NG_VALIDATORS)
17
18
  - Posicionamento automático do dropdown (abre para cima quando não há espaço abaixo)
18
19
 
@@ -43,6 +44,7 @@ import { TCloudUiMultiplesValuesComponent } from 'tcloud-ui';
43
44
  | `uppercase` | `boolean` | `false` | Converte automaticamente os valores inseridos para letras maiúsculas |
44
45
  | `lowercase` | `boolean` | `false` | Converte automaticamente os valores inseridos para letras minúsculas |
45
46
  | `maxWidthLabel` | `string` | — | Define a largura máxima dos labels na lista de valores (ex: `'50px'`, `'100px'`) |
47
+ | `autocompleteitems` | `string[]` | `[]` | Sugestões de autocomplete nativo (`<datalist>`) exibidas ao digitar no input simples (quando `listItems` não está definido) |
46
48
 
47
49
  ### Outputs
48
50
 
@@ -80,6 +82,35 @@ export class ExemploBasicoComponent {
80
82
  }
81
83
  ```
82
84
 
85
+ ### Autocomplete nativo — Sugestões via `autocompleteitems`
86
+
87
+ ```html
88
+ <tcloud-ui-multiples-values
89
+ [(ngModel)]="tags"
90
+ [autocompleteitems]="sugestoesTags"
91
+ placeholder="Digite uma tag"
92
+ (tcChange)="onTagsChange($event)">
93
+ </tcloud-ui-multiples-values>
94
+ ```
95
+
96
+ ```typescript
97
+ import { TCloudUiMultiplesValuesComponent } from 'tcloud-ui';
98
+
99
+ @Component({
100
+ standalone: true,
101
+ imports: [TCloudUiMultiplesValuesComponent],
102
+ template: `...`
103
+ })
104
+ export class ExemploAutocompleteComponent {
105
+ tags: string[] = [];
106
+ sugestoesTags = ['Angular', 'TypeScript', 'JavaScript', 'HTML', 'CSS'];
107
+
108
+ onTagsChange(itens: string[]) {
109
+ console.log('Tags atualizadas:', itens);
110
+ }
111
+ }
112
+ ```
113
+
83
114
  ### Avançado — Com lista predefinida, uppercase e validação por pattern
84
115
 
85
116
  ```html
package/fesm2022/dev-tcloud-tcloud-ui.mjs CHANGED
@@ -4097,10 +4097,12 @@ const noop$4 = () => {
4097
4097
  };
4098
4098
  class TCloudUiMultiInputComponent {
4099
4099
  constructor() {
4100
+ this.id = '';
4100
4101
  this.placeholder = '';
4101
4102
  this.disabled = false;
4102
4103
  this.loading = false;
4103
4104
  this.showInput = false;
4105
+ this.autocompleteitems = [];
4104
4106
  this.count_actives = 0;
4105
4107
  this.use_validation_required = false;
4106
4108
  this.tcChange = new EventEmitter();
@@ -4111,10 +4113,14 @@ class TCloudUiMultiInputComponent {
4111
4113
  this.onChangeCallback = noop$4;
4112
4114
  }
4113
4115
  ngOnInit() {
4116
+ this.id = this.generateID();
4114
4117
  setTimeout(() => {
4115
4118
  this.toChange();
4116
4119
  });
4117
4120
  }
4121
+ generateID() {
4122
+ return `multi-input-${Math.floor(Math.random() * Math.floor(Math.random() * Date.now()))}`;
4123
+ }
4118
4124
  addItem(item) {
4119
4125
  if (this.disabled) {
4120
4126
  return;
@@ -4208,11 +4214,11 @@ class TCloudUiMultiInputComponent {
4208
4214
  ngOnDestroy() {
4209
4215
  }
4210
4216
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiMultiInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4211
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TCloudUiMultiInputComponent, isStandalone: true, selector: "tcloud-ui-multi-input", inputs: { tcList: "tcList", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required", maxWidthLabel: "maxWidthLabel", showInput: "showInput" }, outputs: { tcChange: "tcChange", onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$4, CUSTOM_INPUT_VALIDATORS$2], ngImport: i0, template: "<div class=\"tcloud-ui-multi-input\">\n\n @if (!showInput) {\n <table>\n <tr>\n <td>\n <input\n class=\"tc-form-control\"\n (blur)=\"onChangeTouched()\"\n [(ngModel)]=\"item_value\"\n [class.tc-parent-validation]=\"use_validation_required\"\n type=\"text\"\n [(ngModel)]=\"input_value\"\n [disabled]=\"disabled || loading\"\n name=\"input_value\"\n [placeholder]=\"placeholder\">\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\n @if ((tcList && tcList.length > 0)) {\n <div class=\"box-itens-selected\">\n @for (item of tcList; track item; let i = $index) {\n <div class=\"box-label\" [ngStyle]=\"(maxWidthLabel) ? {'max-width': maxWidthLabel} : null\">\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 </div>\n }\n\n </div>\n", styles: ["table{width:100%;border-collapse:collapse;border:none}table td{vertical-align:top}table td:first-child{width:100%}input{font-size:.8rem;height:40px;border:1px solid var(--c-neutral-300);border-radius:4px 0 0 4px;padding:6px 10px;white-space:nowrap;text-overflow:ellipsis;width:100%;background-color:var(--c-neutral-50);color:var(--c-neutral-500)}.btn-plus-select{width:30px;height:40px;border:none;color:var(--c-neutral-50);background-color:var(--c-primary-500);border-radius:0 4px 4px 0}.box-itens-selected{display:block;padding:9px;background-color:var(--c-neutral-200);border-radius:4px;width:100%}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:var(--c-neutral-200)}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{position:relative;display:inline-block;height:35px;min-width:60px;background-color:var(--c-neutral-50);color:var(--c-primary-500);padding:8px 24px 10px 15px;border:1px solid var(--c-primary-500);border-radius:5px;margin:2px;width:auto;max-width:100%}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{position:absolute;right:4px;top:7px}.box-label .box-action button{color:var(--c-primary-500);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}.box-label .box-action button:hover{color:var(--c-danger-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
4217
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TCloudUiMultiInputComponent, isStandalone: true, selector: "tcloud-ui-multi-input", inputs: { tcList: "tcList", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required", maxWidthLabel: "maxWidthLabel", showInput: "showInput", autocompleteitems: "autocompleteitems" }, outputs: { tcChange: "tcChange", onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$4, CUSTOM_INPUT_VALIDATORS$2], ngImport: i0, template: "<div class=\"tcloud-ui-multi-input\">\n\n @if (!showInput) {\n <table>\n <tr>\n <td>\n <input\n class=\"tc-form-control\"\n (blur)=\"onChangeTouched()\"\n [(ngModel)]=\"item_value\"\n [class.tc-parent-validation]=\"use_validation_required\"\n type=\"text\"\n [(ngModel)]=\"input_value\"\n [disabled]=\"disabled || loading\"\n name=\"input_value\"\n [placeholder]=\"placeholder\"\n [attr.list]=\"(autocompleteitems && autocompleteitems.length > 0) ? (id + '-autocomplete-list') : null\">\n @if (autocompleteitems && autocompleteitems.length > 0) {\n <datalist id=\"{{ id }}-autocomplete-list\">\n @for (item of autocompleteitems; track item) {\n <option [value]=\"item\"></option>\n }\n </datalist>\n }\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\n @if ((tcList && tcList.length > 0)) {\n <div class=\"box-itens-selected\">\n @for (item of tcList; track item; let i = $index) {\n <div class=\"box-label\" [ngStyle]=\"(maxWidthLabel) ? {'max-width': maxWidthLabel} : null\">\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 </div>\n }\n\n </div>\n", styles: ["table{width:100%;border-collapse:collapse;border:none}table td{vertical-align:top}table td:first-child{width:100%}input{font-size:.8rem;height:40px;border:1px solid var(--c-neutral-300);border-radius:4px 0 0 4px;padding:6px 10px;white-space:nowrap;text-overflow:ellipsis;width:100%;background-color:var(--c-neutral-50);color:var(--c-neutral-500)}.btn-plus-select{width:30px;height:40px;border:none;color:var(--c-neutral-50);background-color:var(--c-primary-500);border-radius:0 4px 4px 0}.box-itens-selected{display:block;padding:9px;background-color:var(--c-neutral-200);border-radius:4px;width:100%}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:var(--c-neutral-200)}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{position:relative;display:inline-block;height:35px;min-width:60px;background-color:var(--c-neutral-50);color:var(--c-primary-500);padding:8px 24px 10px 15px;border:1px solid var(--c-primary-500);border-radius:5px;margin:2px;width:auto;max-width:100%}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{position:absolute;right:4px;top:7px}.box-label .box-action button{color:var(--c-primary-500);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}.box-label .box-action button:hover{color:var(--c-danger-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
4212
4218
  }
4213
4219
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiMultiInputComponent, decorators: [{
4214
4220
  type: Component,
4215
- args: [{ selector: 'tcloud-ui-multi-input', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$4, CUSTOM_INPUT_VALIDATORS$2], standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule], template: "<div class=\"tcloud-ui-multi-input\">\n\n @if (!showInput) {\n <table>\n <tr>\n <td>\n <input\n class=\"tc-form-control\"\n (blur)=\"onChangeTouched()\"\n [(ngModel)]=\"item_value\"\n [class.tc-parent-validation]=\"use_validation_required\"\n type=\"text\"\n [(ngModel)]=\"input_value\"\n [disabled]=\"disabled || loading\"\n name=\"input_value\"\n [placeholder]=\"placeholder\">\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\n @if ((tcList && tcList.length > 0)) {\n <div class=\"box-itens-selected\">\n @for (item of tcList; track item; let i = $index) {\n <div class=\"box-label\" [ngStyle]=\"(maxWidthLabel) ? {'max-width': maxWidthLabel} : null\">\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 </div>\n }\n\n </div>\n", styles: ["table{width:100%;border-collapse:collapse;border:none}table td{vertical-align:top}table td:first-child{width:100%}input{font-size:.8rem;height:40px;border:1px solid var(--c-neutral-300);border-radius:4px 0 0 4px;padding:6px 10px;white-space:nowrap;text-overflow:ellipsis;width:100%;background-color:var(--c-neutral-50);color:var(--c-neutral-500)}.btn-plus-select{width:30px;height:40px;border:none;color:var(--c-neutral-50);background-color:var(--c-primary-500);border-radius:0 4px 4px 0}.box-itens-selected{display:block;padding:9px;background-color:var(--c-neutral-200);border-radius:4px;width:100%}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:var(--c-neutral-200)}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{position:relative;display:inline-block;height:35px;min-width:60px;background-color:var(--c-neutral-50);color:var(--c-primary-500);padding:8px 24px 10px 15px;border:1px solid var(--c-primary-500);border-radius:5px;margin:2px;width:auto;max-width:100%}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{position:absolute;right:4px;top:7px}.box-label .box-action button{color:var(--c-primary-500);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}.box-label .box-action button:hover{color:var(--c-danger-500)}\n"] }]
4221
+ args: [{ selector: 'tcloud-ui-multi-input', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$4, CUSTOM_INPUT_VALIDATORS$2], standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule], template: "<div class=\"tcloud-ui-multi-input\">\n\n @if (!showInput) {\n <table>\n <tr>\n <td>\n <input\n class=\"tc-form-control\"\n (blur)=\"onChangeTouched()\"\n [(ngModel)]=\"item_value\"\n [class.tc-parent-validation]=\"use_validation_required\"\n type=\"text\"\n [(ngModel)]=\"input_value\"\n [disabled]=\"disabled || loading\"\n name=\"input_value\"\n [placeholder]=\"placeholder\"\n [attr.list]=\"(autocompleteitems && autocompleteitems.length > 0) ? (id + '-autocomplete-list') : null\">\n @if (autocompleteitems && autocompleteitems.length > 0) {\n <datalist id=\"{{ id }}-autocomplete-list\">\n @for (item of autocompleteitems; track item) {\n <option [value]=\"item\"></option>\n }\n </datalist>\n }\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\n @if ((tcList && tcList.length > 0)) {\n <div class=\"box-itens-selected\">\n @for (item of tcList; track item; let i = $index) {\n <div class=\"box-label\" [ngStyle]=\"(maxWidthLabel) ? {'max-width': maxWidthLabel} : null\">\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 </div>\n }\n\n </div>\n", styles: ["table{width:100%;border-collapse:collapse;border:none}table td{vertical-align:top}table td:first-child{width:100%}input{font-size:.8rem;height:40px;border:1px solid var(--c-neutral-300);border-radius:4px 0 0 4px;padding:6px 10px;white-space:nowrap;text-overflow:ellipsis;width:100%;background-color:var(--c-neutral-50);color:var(--c-neutral-500)}.btn-plus-select{width:30px;height:40px;border:none;color:var(--c-neutral-50);background-color:var(--c-primary-500);border-radius:0 4px 4px 0}.box-itens-selected{display:block;padding:9px;background-color:var(--c-neutral-200);border-radius:4px;width:100%}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:var(--c-neutral-200)}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{position:relative;display:inline-block;height:35px;min-width:60px;background-color:var(--c-neutral-50);color:var(--c-primary-500);padding:8px 24px 10px 15px;border:1px solid var(--c-primary-500);border-radius:5px;margin:2px;width:auto;max-width:100%}.box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-label .box-action{position:absolute;right:4px;top:7px}.box-label .box-action button{color:var(--c-primary-500);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-label .box-action button i{font-size:12px}.box-label .box-action button:hover{color:var(--c-danger-500)}\n"] }]
4216
4222
  }], ctorParameters: () => [], propDecorators: { tcList: [{
4217
4223
  type: Input
4218
4224
  }], placeholder: [{
@@ -4227,6 +4233,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
4227
4233
  type: Input
4228
4234
  }], showInput: [{
4229
4235
  type: Input
4236
+ }], autocompleteitems: [{
4237
+ type: Input
4230
4238
  }], tcChange: [{
4231
4239
  type: Output
4232
4240
  }], onChange: [{
@@ -5288,6 +5296,7 @@ class TCloudUiMultiplesValuesComponent {
5288
5296
  this.search = true;
5289
5297
  this.uppercase = false;
5290
5298
  this.lowercase = false;
5299
+ this.autocompleteitems = [];
5291
5300
  this.tcChange = new EventEmitter();
5292
5301
  this.use_validation_required = false;
5293
5302
  this.placeholder_list = '';
@@ -5553,11 +5562,11 @@ class TCloudUiMultiplesValuesComponent {
5553
5562
  ngOnDestroy() {
5554
5563
  }
5555
5564
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiMultiplesValuesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
5556
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TCloudUiMultiplesValuesComponent, isStandalone: true, selector: "tcloud-ui-multiples-values", inputs: { listItems: "listItems", openValuesInChange: "openValuesInChange", useBtnAdd: "useBtnAdd", pattern: "pattern", delimiter: "delimiter", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required", search: "search", uppercase: "uppercase", lowercase: "lowercase", maxWidthLabel: "maxWidthLabel" }, outputs: { tcChange: "tcChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1, CUSTOM_INPUT_VALIDATORS], ngImport: i0, template: "@if (show_component) {\n <div class=\"tcloud-ui-multiples-values tc-dropdown\" id=\"area-{{ id }}\" [class.tc-parent-validation]=\"use_validation_required\">\n <form #_formulario=\"ngForm\">\n <!-- {{ input_items }} -->\n <div class=\"dropdown-toggle\" id=\"{{id}}\" [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"'false'\">\n <table style=\"width: 100%;\">\n <tr>\n <td>\n <table class=\"group-input-action\">\n <tr>\n <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\n @if (listItems && (listItems).length > 0) {\n <div class=\"input\" (click)=\"show_itens = false\">\n <tcloud-ui-data-list [placeholder]=\"placeholder_list\" [search]=\"search\" [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [(ngModel)]=\"input_items\" (onChange)=\"toEnterKey(input_items)\">\n @for (item of listItems; track item) {\n <tcloud-ui-data-list-option [value]=\"'' + item.value\" [disabled]=\"checkIsDisabled(item)\">{{ item?.description }}</tcloud-ui-data-list-option>\n }\n </tcloud-ui-data-list>\n </div>\n }\n @if (!listItems || !(listItems && (listItems).length > 0)) {\n <div class=\"input\">\n <input\n required\n [pattern]=\"pattern\"\n (keydown.enter)=\"toEnterKey(input_items)\"\n [disabled]=\"disabled\"\n [class.text-lowercase]=\"lowercase\"\n [class.text-uppercase]=\"uppercase\"\n type=\"text\" name=\"items\" class=\"tc-form-control area-text\" [(ngModel)]=\"input_items\" [placeholder]=\"placeholder_list\" required [title]=\"placeholder_list\">\n </div>\n }\n </td>\n @if ((items && items.length > 0)) {\n <td class=\"count-list\">\n <div class=\"input\">\n <input type=\"text\" value=\"{{ items.length }} {{ (items.length > 1) ? ('multiplesValues.records' | i18nTranslate : 'Registros') : ('multiplesValues.record' | i18nTranslate : 'Registro') }}\" disabled readonly>\n </div>\n </td>\n }\n @if (!items || (items && items.length === 0)) {\n <td class=\"count-list\">\n <div class=\"input\"><input type=\"text\" class=\"info-no-value\" value=\"Vazio\" disabled readonly></div>\n </td>\n }\n <td class=\"action-input-arrow bc-r\">\n <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\n @if (show_itens) {\n <i class=\"fas fa-angle-up\"></i>\n }\n @if (!show_itens) {\n <i class=\"fas fa-angle-down\"></i>\n }\n </button>\n </td>\n </tr>\n </table>\n </td>\n @if (useBtnAdd) {\n <td style=\"width: 45px;\">\n <table>\n <tr>\n @if (!disabled) {\n <td class=\"action-input\">\n @if (!listItems || !(listItems && (listItems).length > 0)) {\n <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-outline-primary\" (click)=\"add_items()\" title=\"Adicionar item\">\n <i class=\"fas fa-plus\"></i>\n </button>\n }\n @if (listItems && (listItems).length > 0) {\n <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-outline-primary\" (click)=\"add_items_by_data_list(input_items)\" title=\"Adicionar item\">\n <i class=\"fas fa-plus\"></i>\n </button>\n }\n </td>\n }\n </tr>\n </table>\n </td>\n }\n </tr>\n </table>\n </div>\n <!-- <pre>\n {{ items | json }}\n </pre> -->\n </form>\n <!-- box-itens-selected -->\n <div class=\"tc-dropdown-menu box-itens-selected {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!show_itens\" [style]=\"box_style\">\n <div class=\"line-search\">\n @if (items && (items).length > 5) {\n <table class=\"box-search\">\n <tr>\n <td class=\"area-input\">\n <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" >\n </td>\n <td class=\"area-icon\">\n @if (search_text === '') {\n <i class=\"fas fa-search icon-search\"></i>\n }\n @if (search_text !== '') {\n <button class=\"box-action\" type=\"button\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\n }\n </td>\n </tr>\n </table>\n }\n </div>\n <div class=\"area-options\" id=\"{{ id }}-options\">\n @for (item of items; track item; let i = $index) {\n <label class=\"box-label\" [ngStyle]=\"(maxWidthLabel) ? {'max-width': maxWidthLabel} : null\">\n <div class=\"box-value\" [title]=\"item\" >\n {{ item }}\n </div>\n <div class=\"box-action\">\n <button\n class=\"box-action\"\n [disabled]=\"items === undefined || (items && items.length === 0) || disabled || loading\"\n title=\"Remover\"\n type=\"button\"\n (click)=\"removeItem(item, i)\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </label>\n }\n </div>\n @if (items && (items).length > 5) {\n <div class=\"mt-5\">\n <div class=\"btn-remove-all\">\n <button class=\"box-action\" type=\"button\" (click)=\"remove_all()\">\n Limpar toda a lista\n </button>\n </div>\n </div>\n }\n </div>\n </div>\n}", styles: ["table{border-collapse:collapse}td,th{padding:0;margin:0}::placeholder{font-style:italic;color:var(--c-neutral-400);text-transform:none!important}.box-input{border:none!important;border-radius:5px 0 0 5px}.box-input .input{background-color:var(--c-neutral-50);border-radius:5px 0 0 5px}.box-input .ng-invalid{border-color:transparent!important}.bc-l{background-color:var(--c-neutral-50);border-left:1px solid var(--c-neutral-300)}.bc-r{background-color:var(--c-neutral-50);border-right:1px solid var(--c-neutral-300)}.box-input-data-list{background-color:var(--c-neutral-50);border:none!important;border-radius:5px 0 0 5px;height:42px;padding-left:5px;max-width:150px}@media(max-width:900px){.box-input-data-list{max-width:200px}}.group-input-action{width:100%;background-color:var(--c-neutral-50)}.group-input-action input{height:40px;border:none}.group-input-action td{height:40px;border-top:1px solid var(--c-neutral-300);border-bottom:1px solid var(--c-neutral-300);background-color:transparent!important}.count-list{border:none!important;width:70px;text-align:center;background:var(--c-neutral-50)}.count-list .input{width:76px;background-color:transparent}.count-list .input input{height:40px;border:none;text-align:center;width:100px;background-color:transparent}.action-input-arrow{border:none!important;width:30px;background:transparent;position:relative;z-index:0}.action-input-arrow button{cursor:pointer;background-color:transparent;text-align:center;font-size:15px;border-top:none;border-right:none;border-bottom:none;border-left:none;width:30px;border-radius:0 3px 3px 0;position:relative;bottom:1px;color:var(--c-neutral-500)}.action-input-arrow button i{position:relative;z-index:-1}.action-input{width:50px;padding-left:3px}.action-input .tc-btn{width:100%!important;padding:0;text-align:center;display:block;margin:0;height:40px;border:1px solid var(--c-primary-500)!important;border-radius:3px!important;position:relative;left:5px!important}.action-input .tc-btn i{width:100%;text-align:center;padding:0!important;margin:0!important;font-size:18px;position:relative;top:1px}.box-itens-selected{display:block;padding:9px;background-color:var(--c-neutral-200);border-radius:4px;width:100%}.box-itens-selected .box-label{position:relative;display:inline-block;height:35px;min-width:60px;color:var(--c-primary-500);padding:8px 24px 10px 15px;border:1px solid var(--c-primary-500);border-radius:5px;margin:2px;background-color:var(--c-neutral-50);width:auto;max-width:100%}.box-itens-selected .box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-itens-selected .box-label div.box-action{position:absolute;right:4px;top:7px}.box-itens-selected .box-label div.box-action button{color:var(--c-primary-500);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-itens-selected .box-label div.box-action button i{font-size:12px}.box-itens-selected .box-label div.box-action button:hover{color:var(--c-danger-500)}.to-hide{display:none}.dropdown-toggle:after{display:none!important}.tc-dropdown{min-width:300px;border-radius:.25rem;border:1px solid var(--c-neutral-300);padding:0 5px;position:relative}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid var(--c-neutral-300);position:absolute;z-index:10;background-color:var(--c-neutral-100)}.tc-dropdown .area-options{padding-right:8px;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:var(--c-neutral-500)}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:var(--c-neutral-400);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.line-search .box-search td.area-input input{width:100%}.line-search .box-search td.area-input{border:none}.line-search .box-search input{width:100%;font-size:13px;height:33px;border:1px solid var(--c-neutral-300);padding:10px}.btn-remove-all{text-align:right}.btn-remove-all button{background-color:transparent;border:none;color:var(--c-danger-500);cursor:pointer}.btn-remove-all button:hover{color:var(--c-danger-400)!important}.info-no-value{color:var(--c-danger-500)}.area-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: TCloudUiDataListComponent, selector: "tcloud-ui-data-list", inputs: ["placeholder", "disabled", "loading", "showInput", "search", "listItems", "open", "border", "ngModel"], outputs: ["onInputChange", "onChange", "onOpened", "onClosed", "ngModelChange"] }, { kind: "component", type: TCloudUiDataListOptionComponent, selector: "tcloud-ui-data-list-option", inputs: ["disabled", "value"], outputs: ["selected"] }, { kind: "pipe", type: I18nTranslatePipe, name: "i18nTranslate" }] }); }
5565
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TCloudUiMultiplesValuesComponent, isStandalone: true, selector: "tcloud-ui-multiples-values", inputs: { listItems: "listItems", openValuesInChange: "openValuesInChange", useBtnAdd: "useBtnAdd", pattern: "pattern", delimiter: "delimiter", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required", search: "search", uppercase: "uppercase", lowercase: "lowercase", autocompleteitems: "autocompleteitems", maxWidthLabel: "maxWidthLabel" }, outputs: { tcChange: "tcChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1, CUSTOM_INPUT_VALIDATORS], ngImport: i0, template: "@if (show_component) {\n <div class=\"tcloud-ui-multiples-values tc-dropdown\" id=\"area-{{ id }}\" [class.tc-parent-validation]=\"use_validation_required\">\n <form #_formulario=\"ngForm\">\n <!-- {{ input_items }} -->\n <div class=\"dropdown-toggle\" id=\"{{id}}\" [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"'false'\">\n <table style=\"width: 100%;\">\n <tr>\n <td>\n <table class=\"group-input-action\">\n <tr>\n <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\n @if (listItems && (listItems).length > 0) {\n <div class=\"input\" (click)=\"show_itens = false\">\n <tcloud-ui-data-list [placeholder]=\"placeholder_list\" [search]=\"search\" [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [(ngModel)]=\"input_items\" (onChange)=\"toEnterKey(input_items)\">\n @for (item of listItems; track item) {\n <tcloud-ui-data-list-option [value]=\"'' + item.value\" [disabled]=\"checkIsDisabled(item)\">{{ item?.description }}</tcloud-ui-data-list-option>\n }\n </tcloud-ui-data-list>\n </div>\n }\n @if (!listItems || !(listItems && (listItems).length > 0)) {\n <div class=\"input\">\n <input\n required\n [pattern]=\"pattern\"\n (keydown.enter)=\"toEnterKey(input_items)\"\n [disabled]=\"disabled\"\n [class.text-lowercase]=\"lowercase\"\n [class.text-uppercase]=\"uppercase\"\n [attr.list]=\"(autocompleteitems && autocompleteitems.length > 0) ? (id + '-autocomplete-list') : null\"\n type=\"text\" name=\"items\" class=\"tc-form-control area-text\" [(ngModel)]=\"input_items\" [placeholder]=\"placeholder_list\" required [title]=\"placeholder_list\">\n @if (autocompleteitems && autocompleteitems.length > 0) {\n <datalist id=\"{{ id }}-autocomplete-list\">\n @for (item of autocompleteitems; track item) {\n <option [value]=\"item\"></option>\n }\n </datalist>\n }\n </div>\n }\n </td>\n @if ((items && items.length > 0)) {\n <td class=\"count-list\">\n <div class=\"input\">\n <input type=\"text\" value=\"{{ items.length }} {{ (items.length > 1) ? ('multiplesValues.records' | i18nTranslate : 'Registros') : ('multiplesValues.record' | i18nTranslate : 'Registro') }}\" disabled readonly>\n </div>\n </td>\n }\n @if (!items || (items && items.length === 0)) {\n <td class=\"count-list\">\n <div class=\"input\"><input type=\"text\" class=\"info-no-value\" value=\"Vazio\" disabled readonly></div>\n </td>\n }\n <td class=\"action-input-arrow bc-r\">\n <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\n @if (show_itens) {\n <i class=\"fas fa-angle-up\"></i>\n }\n @if (!show_itens) {\n <i class=\"fas fa-angle-down\"></i>\n }\n </button>\n </td>\n </tr>\n </table>\n </td>\n @if (useBtnAdd) {\n <td style=\"width: 45px;\">\n <table>\n <tr>\n @if (!disabled) {\n <td class=\"action-input\">\n @if (!listItems || !(listItems && (listItems).length > 0)) {\n <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-outline-primary\" (click)=\"add_items()\" title=\"Adicionar item\">\n <i class=\"fas fa-plus\"></i>\n </button>\n }\n @if (listItems && (listItems).length > 0) {\n <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-outline-primary\" (click)=\"add_items_by_data_list(input_items)\" title=\"Adicionar item\">\n <i class=\"fas fa-plus\"></i>\n </button>\n }\n </td>\n }\n </tr>\n </table>\n </td>\n }\n </tr>\n </table>\n </div>\n <!-- <pre>\n {{ items | json }}\n </pre> -->\n </form>\n <!-- box-itens-selected -->\n <div class=\"tc-dropdown-menu box-itens-selected {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!show_itens\" [style]=\"box_style\">\n <div class=\"line-search\">\n @if (items && (items).length > 5) {\n <table class=\"box-search\">\n <tr>\n <td class=\"area-input\">\n <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" >\n </td>\n <td class=\"area-icon\">\n @if (search_text === '') {\n <i class=\"fas fa-search icon-search\"></i>\n }\n @if (search_text !== '') {\n <button class=\"box-action\" type=\"button\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\n }\n </td>\n </tr>\n </table>\n }\n </div>\n <div class=\"area-options\" id=\"{{ id }}-options\">\n @for (item of items; track item; let i = $index) {\n <label class=\"box-label\" [ngStyle]=\"(maxWidthLabel) ? {'max-width': maxWidthLabel} : null\">\n <div class=\"box-value\" [title]=\"item\" >\n {{ item }}\n </div>\n <div class=\"box-action\">\n <button\n class=\"box-action\"\n [disabled]=\"items === undefined || (items && items.length === 0) || disabled || loading\"\n title=\"Remover\"\n type=\"button\"\n (click)=\"removeItem(item, i)\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </label>\n }\n </div>\n @if (items && (items).length > 5) {\n <div class=\"mt-5\">\n <div class=\"btn-remove-all\">\n <button class=\"box-action\" type=\"button\" (click)=\"remove_all()\">\n Limpar toda a lista\n </button>\n </div>\n </div>\n }\n </div>\n </div>\n}", styles: ["table{border-collapse:collapse}td,th{padding:0;margin:0}::placeholder{font-style:italic;color:var(--c-neutral-400);text-transform:none!important}.box-input{border:none!important;border-radius:5px 0 0 5px}.box-input .input{background-color:var(--c-neutral-50);border-radius:5px 0 0 5px}.box-input .ng-invalid{border-color:transparent!important}.bc-l{background-color:var(--c-neutral-50);border-left:1px solid var(--c-neutral-300)}.bc-r{background-color:var(--c-neutral-50);border-right:1px solid var(--c-neutral-300)}.box-input-data-list{background-color:var(--c-neutral-50);border:none!important;border-radius:5px 0 0 5px;height:42px;padding-left:5px;max-width:150px}@media(max-width:900px){.box-input-data-list{max-width:200px}}.group-input-action{width:100%;background-color:var(--c-neutral-50)}.group-input-action input{height:40px;border:none}.group-input-action td{height:40px;border-top:1px solid var(--c-neutral-300);border-bottom:1px solid var(--c-neutral-300);background-color:transparent!important}.count-list{border:none!important;width:70px;text-align:center;background:var(--c-neutral-50)}.count-list .input{width:76px;background-color:transparent}.count-list .input input{height:40px;border:none;text-align:center;width:100px;background-color:transparent}.action-input-arrow{border:none!important;width:30px;background:transparent;position:relative;z-index:0}.action-input-arrow button{cursor:pointer;background-color:transparent;text-align:center;font-size:15px;border-top:none;border-right:none;border-bottom:none;border-left:none;width:30px;border-radius:0 3px 3px 0;position:relative;bottom:1px;color:var(--c-neutral-500)}.action-input-arrow button i{position:relative;z-index:-1}.action-input{width:50px;padding-left:3px}.action-input .tc-btn{width:100%!important;padding:0;text-align:center;display:block;margin:0;height:40px;border:1px solid var(--c-primary-500)!important;border-radius:3px!important;position:relative;left:5px!important}.action-input .tc-btn i{width:100%;text-align:center;padding:0!important;margin:0!important;font-size:18px;position:relative;top:1px}.box-itens-selected{display:block;padding:9px;background-color:var(--c-neutral-200);border-radius:4px;width:100%}.box-itens-selected .box-label{position:relative;display:inline-block;height:35px;min-width:60px;color:var(--c-primary-500);padding:8px 24px 10px 15px;border:1px solid var(--c-primary-500);border-radius:5px;margin:2px;background-color:var(--c-neutral-50);width:auto;max-width:100%}.box-itens-selected .box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-itens-selected .box-label div.box-action{position:absolute;right:4px;top:7px}.box-itens-selected .box-label div.box-action button{color:var(--c-primary-500);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-itens-selected .box-label div.box-action button i{font-size:12px}.box-itens-selected .box-label div.box-action button:hover{color:var(--c-danger-500)}.to-hide{display:none}.dropdown-toggle:after{display:none!important}.tc-dropdown{min-width:300px;border-radius:.25rem;border:1px solid var(--c-neutral-300);padding:0 5px;position:relative}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid var(--c-neutral-300);position:absolute;z-index:10;background-color:var(--c-neutral-100)}.tc-dropdown .area-options{padding-right:8px;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:var(--c-neutral-500)}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:var(--c-neutral-400);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.line-search .box-search td.area-input input{width:100%}.line-search .box-search td.area-input{border:none}.line-search .box-search input{width:100%;font-size:13px;height:33px;border:1px solid var(--c-neutral-300);padding:10px}.btn-remove-all{text-align:right}.btn-remove-all button{background-color:transparent;border:none;color:var(--c-danger-500);cursor:pointer}.btn-remove-all button:hover{color:var(--c-danger-400)!important}.info-no-value{color:var(--c-danger-500)}.area-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}input:focus,input:focus-visible{outline:none!important;box-shadow:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: TCloudUiDataListComponent, selector: "tcloud-ui-data-list", inputs: ["placeholder", "disabled", "loading", "showInput", "search", "listItems", "open", "border", "ngModel"], outputs: ["onInputChange", "onChange", "onOpened", "onClosed", "ngModelChange"] }, { kind: "component", type: TCloudUiDataListOptionComponent, selector: "tcloud-ui-data-list-option", inputs: ["disabled", "value"], outputs: ["selected"] }, { kind: "pipe", type: I18nTranslatePipe, name: "i18nTranslate" }] }); }
5557
5566
  }
5558
5567
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiMultiplesValuesComponent, decorators: [{
5559
5568
  type: Component,
5560
- args: [{ selector: 'tcloud-ui-multiples-values', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1, CUSTOM_INPUT_VALIDATORS], standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, TCloudUiDataListComponent, TCloudUiDataListOptionComponent, I18nTranslatePipe], template: "@if (show_component) {\n <div class=\"tcloud-ui-multiples-values tc-dropdown\" id=\"area-{{ id }}\" [class.tc-parent-validation]=\"use_validation_required\">\n <form #_formulario=\"ngForm\">\n <!-- {{ input_items }} -->\n <div class=\"dropdown-toggle\" id=\"{{id}}\" [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"'false'\">\n <table style=\"width: 100%;\">\n <tr>\n <td>\n <table class=\"group-input-action\">\n <tr>\n <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\n @if (listItems && (listItems).length > 0) {\n <div class=\"input\" (click)=\"show_itens = false\">\n <tcloud-ui-data-list [placeholder]=\"placeholder_list\" [search]=\"search\" [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [(ngModel)]=\"input_items\" (onChange)=\"toEnterKey(input_items)\">\n @for (item of listItems; track item) {\n <tcloud-ui-data-list-option [value]=\"'' + item.value\" [disabled]=\"checkIsDisabled(item)\">{{ item?.description }}</tcloud-ui-data-list-option>\n }\n </tcloud-ui-data-list>\n </div>\n }\n @if (!listItems || !(listItems && (listItems).length > 0)) {\n <div class=\"input\">\n <input\n required\n [pattern]=\"pattern\"\n (keydown.enter)=\"toEnterKey(input_items)\"\n [disabled]=\"disabled\"\n [class.text-lowercase]=\"lowercase\"\n [class.text-uppercase]=\"uppercase\"\n type=\"text\" name=\"items\" class=\"tc-form-control area-text\" [(ngModel)]=\"input_items\" [placeholder]=\"placeholder_list\" required [title]=\"placeholder_list\">\n </div>\n }\n </td>\n @if ((items && items.length > 0)) {\n <td class=\"count-list\">\n <div class=\"input\">\n <input type=\"text\" value=\"{{ items.length }} {{ (items.length > 1) ? ('multiplesValues.records' | i18nTranslate : 'Registros') : ('multiplesValues.record' | i18nTranslate : 'Registro') }}\" disabled readonly>\n </div>\n </td>\n }\n @if (!items || (items && items.length === 0)) {\n <td class=\"count-list\">\n <div class=\"input\"><input type=\"text\" class=\"info-no-value\" value=\"Vazio\" disabled readonly></div>\n </td>\n }\n <td class=\"action-input-arrow bc-r\">\n <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\n @if (show_itens) {\n <i class=\"fas fa-angle-up\"></i>\n }\n @if (!show_itens) {\n <i class=\"fas fa-angle-down\"></i>\n }\n </button>\n </td>\n </tr>\n </table>\n </td>\n @if (useBtnAdd) {\n <td style=\"width: 45px;\">\n <table>\n <tr>\n @if (!disabled) {\n <td class=\"action-input\">\n @if (!listItems || !(listItems && (listItems).length > 0)) {\n <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-outline-primary\" (click)=\"add_items()\" title=\"Adicionar item\">\n <i class=\"fas fa-plus\"></i>\n </button>\n }\n @if (listItems && (listItems).length > 0) {\n <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-outline-primary\" (click)=\"add_items_by_data_list(input_items)\" title=\"Adicionar item\">\n <i class=\"fas fa-plus\"></i>\n </button>\n }\n </td>\n }\n </tr>\n </table>\n </td>\n }\n </tr>\n </table>\n </div>\n <!-- <pre>\n {{ items | json }}\n </pre> -->\n </form>\n <!-- box-itens-selected -->\n <div class=\"tc-dropdown-menu box-itens-selected {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!show_itens\" [style]=\"box_style\">\n <div class=\"line-search\">\n @if (items && (items).length > 5) {\n <table class=\"box-search\">\n <tr>\n <td class=\"area-input\">\n <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" >\n </td>\n <td class=\"area-icon\">\n @if (search_text === '') {\n <i class=\"fas fa-search icon-search\"></i>\n }\n @if (search_text !== '') {\n <button class=\"box-action\" type=\"button\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\n }\n </td>\n </tr>\n </table>\n }\n </div>\n <div class=\"area-options\" id=\"{{ id }}-options\">\n @for (item of items; track item; let i = $index) {\n <label class=\"box-label\" [ngStyle]=\"(maxWidthLabel) ? {'max-width': maxWidthLabel} : null\">\n <div class=\"box-value\" [title]=\"item\" >\n {{ item }}\n </div>\n <div class=\"box-action\">\n <button\n class=\"box-action\"\n [disabled]=\"items === undefined || (items && items.length === 0) || disabled || loading\"\n title=\"Remover\"\n type=\"button\"\n (click)=\"removeItem(item, i)\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </label>\n }\n </div>\n @if (items && (items).length > 5) {\n <div class=\"mt-5\">\n <div class=\"btn-remove-all\">\n <button class=\"box-action\" type=\"button\" (click)=\"remove_all()\">\n Limpar toda a lista\n </button>\n </div>\n </div>\n }\n </div>\n </div>\n}", styles: ["table{border-collapse:collapse}td,th{padding:0;margin:0}::placeholder{font-style:italic;color:var(--c-neutral-400);text-transform:none!important}.box-input{border:none!important;border-radius:5px 0 0 5px}.box-input .input{background-color:var(--c-neutral-50);border-radius:5px 0 0 5px}.box-input .ng-invalid{border-color:transparent!important}.bc-l{background-color:var(--c-neutral-50);border-left:1px solid var(--c-neutral-300)}.bc-r{background-color:var(--c-neutral-50);border-right:1px solid var(--c-neutral-300)}.box-input-data-list{background-color:var(--c-neutral-50);border:none!important;border-radius:5px 0 0 5px;height:42px;padding-left:5px;max-width:150px}@media(max-width:900px){.box-input-data-list{max-width:200px}}.group-input-action{width:100%;background-color:var(--c-neutral-50)}.group-input-action input{height:40px;border:none}.group-input-action td{height:40px;border-top:1px solid var(--c-neutral-300);border-bottom:1px solid var(--c-neutral-300);background-color:transparent!important}.count-list{border:none!important;width:70px;text-align:center;background:var(--c-neutral-50)}.count-list .input{width:76px;background-color:transparent}.count-list .input input{height:40px;border:none;text-align:center;width:100px;background-color:transparent}.action-input-arrow{border:none!important;width:30px;background:transparent;position:relative;z-index:0}.action-input-arrow button{cursor:pointer;background-color:transparent;text-align:center;font-size:15px;border-top:none;border-right:none;border-bottom:none;border-left:none;width:30px;border-radius:0 3px 3px 0;position:relative;bottom:1px;color:var(--c-neutral-500)}.action-input-arrow button i{position:relative;z-index:-1}.action-input{width:50px;padding-left:3px}.action-input .tc-btn{width:100%!important;padding:0;text-align:center;display:block;margin:0;height:40px;border:1px solid var(--c-primary-500)!important;border-radius:3px!important;position:relative;left:5px!important}.action-input .tc-btn i{width:100%;text-align:center;padding:0!important;margin:0!important;font-size:18px;position:relative;top:1px}.box-itens-selected{display:block;padding:9px;background-color:var(--c-neutral-200);border-radius:4px;width:100%}.box-itens-selected .box-label{position:relative;display:inline-block;height:35px;min-width:60px;color:var(--c-primary-500);padding:8px 24px 10px 15px;border:1px solid var(--c-primary-500);border-radius:5px;margin:2px;background-color:var(--c-neutral-50);width:auto;max-width:100%}.box-itens-selected .box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-itens-selected .box-label div.box-action{position:absolute;right:4px;top:7px}.box-itens-selected .box-label div.box-action button{color:var(--c-primary-500);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-itens-selected .box-label div.box-action button i{font-size:12px}.box-itens-selected .box-label div.box-action button:hover{color:var(--c-danger-500)}.to-hide{display:none}.dropdown-toggle:after{display:none!important}.tc-dropdown{min-width:300px;border-radius:.25rem;border:1px solid var(--c-neutral-300);padding:0 5px;position:relative}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid var(--c-neutral-300);position:absolute;z-index:10;background-color:var(--c-neutral-100)}.tc-dropdown .area-options{padding-right:8px;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:var(--c-neutral-500)}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:var(--c-neutral-400);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.line-search .box-search td.area-input input{width:100%}.line-search .box-search td.area-input{border:none}.line-search .box-search input{width:100%;font-size:13px;height:33px;border:1px solid var(--c-neutral-300);padding:10px}.btn-remove-all{text-align:right}.btn-remove-all button{background-color:transparent;border:none;color:var(--c-danger-500);cursor:pointer}.btn-remove-all button:hover{color:var(--c-danger-400)!important}.info-no-value{color:var(--c-danger-500)}.area-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"] }]
5569
+ args: [{ selector: 'tcloud-ui-multiples-values', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1, CUSTOM_INPUT_VALIDATORS], standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, TCloudUiDataListComponent, TCloudUiDataListOptionComponent, I18nTranslatePipe], template: "@if (show_component) {\n <div class=\"tcloud-ui-multiples-values tc-dropdown\" id=\"area-{{ id }}\" [class.tc-parent-validation]=\"use_validation_required\">\n <form #_formulario=\"ngForm\">\n <!-- {{ input_items }} -->\n <div class=\"dropdown-toggle\" id=\"{{id}}\" [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"'false'\">\n <table style=\"width: 100%;\">\n <tr>\n <td>\n <table class=\"group-input-action\">\n <tr>\n <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\n @if (listItems && (listItems).length > 0) {\n <div class=\"input\" (click)=\"show_itens = false\">\n <tcloud-ui-data-list [placeholder]=\"placeholder_list\" [search]=\"search\" [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [(ngModel)]=\"input_items\" (onChange)=\"toEnterKey(input_items)\">\n @for (item of listItems; track item) {\n <tcloud-ui-data-list-option [value]=\"'' + item.value\" [disabled]=\"checkIsDisabled(item)\">{{ item?.description }}</tcloud-ui-data-list-option>\n }\n </tcloud-ui-data-list>\n </div>\n }\n @if (!listItems || !(listItems && (listItems).length > 0)) {\n <div class=\"input\">\n <input\n required\n [pattern]=\"pattern\"\n (keydown.enter)=\"toEnterKey(input_items)\"\n [disabled]=\"disabled\"\n [class.text-lowercase]=\"lowercase\"\n [class.text-uppercase]=\"uppercase\"\n [attr.list]=\"(autocompleteitems && autocompleteitems.length > 0) ? (id + '-autocomplete-list') : null\"\n type=\"text\" name=\"items\" class=\"tc-form-control area-text\" [(ngModel)]=\"input_items\" [placeholder]=\"placeholder_list\" required [title]=\"placeholder_list\">\n @if (autocompleteitems && autocompleteitems.length > 0) {\n <datalist id=\"{{ id }}-autocomplete-list\">\n @for (item of autocompleteitems; track item) {\n <option [value]=\"item\"></option>\n }\n </datalist>\n }\n </div>\n }\n </td>\n @if ((items && items.length > 0)) {\n <td class=\"count-list\">\n <div class=\"input\">\n <input type=\"text\" value=\"{{ items.length }} {{ (items.length > 1) ? ('multiplesValues.records' | i18nTranslate : 'Registros') : ('multiplesValues.record' | i18nTranslate : 'Registro') }}\" disabled readonly>\n </div>\n </td>\n }\n @if (!items || (items && items.length === 0)) {\n <td class=\"count-list\">\n <div class=\"input\"><input type=\"text\" class=\"info-no-value\" value=\"Vazio\" disabled readonly></div>\n </td>\n }\n <td class=\"action-input-arrow bc-r\">\n <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\n @if (show_itens) {\n <i class=\"fas fa-angle-up\"></i>\n }\n @if (!show_itens) {\n <i class=\"fas fa-angle-down\"></i>\n }\n </button>\n </td>\n </tr>\n </table>\n </td>\n @if (useBtnAdd) {\n <td style=\"width: 45px;\">\n <table>\n <tr>\n @if (!disabled) {\n <td class=\"action-input\">\n @if (!listItems || !(listItems && (listItems).length > 0)) {\n <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-outline-primary\" (click)=\"add_items()\" title=\"Adicionar item\">\n <i class=\"fas fa-plus\"></i>\n </button>\n }\n @if (listItems && (listItems).length > 0) {\n <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-outline-primary\" (click)=\"add_items_by_data_list(input_items)\" title=\"Adicionar item\">\n <i class=\"fas fa-plus\"></i>\n </button>\n }\n </td>\n }\n </tr>\n </table>\n </td>\n }\n </tr>\n </table>\n </div>\n <!-- <pre>\n {{ items | json }}\n </pre> -->\n </form>\n <!-- box-itens-selected -->\n <div class=\"tc-dropdown-menu box-itens-selected {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!show_itens\" [style]=\"box_style\">\n <div class=\"line-search\">\n @if (items && (items).length > 5) {\n <table class=\"box-search\">\n <tr>\n <td class=\"area-input\">\n <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" >\n </td>\n <td class=\"area-icon\">\n @if (search_text === '') {\n <i class=\"fas fa-search icon-search\"></i>\n }\n @if (search_text !== '') {\n <button class=\"box-action\" type=\"button\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\n }\n </td>\n </tr>\n </table>\n }\n </div>\n <div class=\"area-options\" id=\"{{ id }}-options\">\n @for (item of items; track item; let i = $index) {\n <label class=\"box-label\" [ngStyle]=\"(maxWidthLabel) ? {'max-width': maxWidthLabel} : null\">\n <div class=\"box-value\" [title]=\"item\" >\n {{ item }}\n </div>\n <div class=\"box-action\">\n <button\n class=\"box-action\"\n [disabled]=\"items === undefined || (items && items.length === 0) || disabled || loading\"\n title=\"Remover\"\n type=\"button\"\n (click)=\"removeItem(item, i)\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n </label>\n }\n </div>\n @if (items && (items).length > 5) {\n <div class=\"mt-5\">\n <div class=\"btn-remove-all\">\n <button class=\"box-action\" type=\"button\" (click)=\"remove_all()\">\n Limpar toda a lista\n </button>\n </div>\n </div>\n }\n </div>\n </div>\n}", styles: ["table{border-collapse:collapse}td,th{padding:0;margin:0}::placeholder{font-style:italic;color:var(--c-neutral-400);text-transform:none!important}.box-input{border:none!important;border-radius:5px 0 0 5px}.box-input .input{background-color:var(--c-neutral-50);border-radius:5px 0 0 5px}.box-input .ng-invalid{border-color:transparent!important}.bc-l{background-color:var(--c-neutral-50);border-left:1px solid var(--c-neutral-300)}.bc-r{background-color:var(--c-neutral-50);border-right:1px solid var(--c-neutral-300)}.box-input-data-list{background-color:var(--c-neutral-50);border:none!important;border-radius:5px 0 0 5px;height:42px;padding-left:5px;max-width:150px}@media(max-width:900px){.box-input-data-list{max-width:200px}}.group-input-action{width:100%;background-color:var(--c-neutral-50)}.group-input-action input{height:40px;border:none}.group-input-action td{height:40px;border-top:1px solid var(--c-neutral-300);border-bottom:1px solid var(--c-neutral-300);background-color:transparent!important}.count-list{border:none!important;width:70px;text-align:center;background:var(--c-neutral-50)}.count-list .input{width:76px;background-color:transparent}.count-list .input input{height:40px;border:none;text-align:center;width:100px;background-color:transparent}.action-input-arrow{border:none!important;width:30px;background:transparent;position:relative;z-index:0}.action-input-arrow button{cursor:pointer;background-color:transparent;text-align:center;font-size:15px;border-top:none;border-right:none;border-bottom:none;border-left:none;width:30px;border-radius:0 3px 3px 0;position:relative;bottom:1px;color:var(--c-neutral-500)}.action-input-arrow button i{position:relative;z-index:-1}.action-input{width:50px;padding-left:3px}.action-input .tc-btn{width:100%!important;padding:0;text-align:center;display:block;margin:0;height:40px;border:1px solid var(--c-primary-500)!important;border-radius:3px!important;position:relative;left:5px!important}.action-input .tc-btn i{width:100%;text-align:center;padding:0!important;margin:0!important;font-size:18px;position:relative;top:1px}.box-itens-selected{display:block;padding:9px;background-color:var(--c-neutral-200);border-radius:4px;width:100%}.box-itens-selected .box-label{position:relative;display:inline-block;height:35px;min-width:60px;color:var(--c-primary-500);padding:8px 24px 10px 15px;border:1px solid var(--c-primary-500);border-radius:5px;margin:2px;background-color:var(--c-neutral-50);width:auto;max-width:100%}.box-itens-selected .box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-itens-selected .box-label div.box-action{position:absolute;right:4px;top:7px}.box-itens-selected .box-label div.box-action button{color:var(--c-primary-500);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-itens-selected .box-label div.box-action button i{font-size:12px}.box-itens-selected .box-label div.box-action button:hover{color:var(--c-danger-500)}.to-hide{display:none}.dropdown-toggle:after{display:none!important}.tc-dropdown{min-width:300px;border-radius:.25rem;border:1px solid var(--c-neutral-300);padding:0 5px;position:relative}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid var(--c-neutral-300);position:absolute;z-index:10;background-color:var(--c-neutral-100)}.tc-dropdown .area-options{padding-right:8px;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:var(--c-neutral-500)}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:var(--c-neutral-400);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.line-search .box-search td.area-input input{width:100%}.line-search .box-search td.area-input{border:none}.line-search .box-search input{width:100%;font-size:13px;height:33px;border:1px solid var(--c-neutral-300);padding:10px}.btn-remove-all{text-align:right}.btn-remove-all button{background-color:transparent;border:none;color:var(--c-danger-500);cursor:pointer}.btn-remove-all button:hover{color:var(--c-danger-400)!important}.info-no-value{color:var(--c-danger-500)}.area-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}input:focus,input:focus-visible{outline:none!important;box-shadow:none!important}\n"] }]
5561
5570
  }], ctorParameters: () => [], propDecorators: { listItems: [{
5562
5571
  type: Input
5563
5572
  }], openValuesInChange: [{
@@ -5582,6 +5591,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
5582
5591
  type: Input
5583
5592
  }], lowercase: [{
5584
5593
  type: Input
5594
+ }], autocompleteitems: [{
5595
+ type: Input
5585
5596
  }], maxWidthLabel: [{
5586
5597
  type: Input
5587
5598
  }], tcChange: [{