@dev-tcloud/tcloud-ui 7.0.3 → 7.0.5

package/docs/tcloud-ui-multi-input.md

@@ -9,6 +9,7 @@
 - Suporte a estados: `disabled` e `loading`.
 - Largura máxima configurável para labels.
 - Modo `showInput`: oculta o input de entrada, exibindo apenas os itens.
+- Autocomplete nativo do navegador (via `<datalist>`) a partir de `autocompleteitems`.
 - Emite alterações via evento `tcChange`.
 
 ## Instalação
@@ -46,6 +47,7 @@ export class ExampleComponent {
 | required | string | Se definido, habilita validação de pelo menos um item na lista. | undefined |
 | maxWidthLabel | string | Largura máxima de cada label (ex: '95px', '120px'). | undefined |
 | showInput | boolean | Se true, oculta o input de entrada e exibe apenas os itens existentes. | false |
+| autocompleteitems | string[] | Sugestões de autocomplete nativo (`<datalist>`) exibidas ao digitar no input. | [] |
 | ngModel | { value: any }[] | Array de itens para two-way binding. | undefined |
 
 ### Outputs
@@ -134,6 +136,22 @@ export class FormComponent {
 </tcloud-ui-multi-input>
 ```
 
+### Com Autocomplete Nativo (autocompleteitems)
+```ts
+export class ExampleComponent {
+  sugestoesTags = ['Angular', 'TypeScript', 'JavaScript', 'HTML', 'CSS'];
+}
+```
+
+```html
+<tcloud-ui-multi-input 
+  [tcList]="items"
+  [autocompleteitems]="sugestoesTags"
+  [placeholder]="'Digite uma tag'"
+  (tcChange)="onItemsChanged($event)">
+</tcloud-ui-multi-input>
+```
+
 ## Uso Avançado
 ### Com ngModel e Formulário Reativo
 ```ts

package/docs/tcloud-ui-multiples-values.md

@@ -13,6 +13,7 @@ O componente `tcloud-ui-multiples-values` permite a entrada e gerenciamento de m
 - Contador de registros adicionados
 - Botão para limpar toda a lista (quando mais de 5 itens)
 - Controle de largura máxima dos labels com `maxWidthLabel`
+- Autocomplete nativo do navegador (via `<datalist>`) no input simples, a partir de `autocompleteitems`
 - Compatível com `ngModel` e formulários Angular (ControlValueAccessor + NG_VALIDATORS)
 - Posicionamento automático do dropdown (abre para cima quando não há espaço abaixo)
 
@@ -43,6 +44,7 @@ import { TCloudUiMultiplesValuesComponent } from 'tcloud-ui';
 | `uppercase`          | `boolean`                                     | `false` | Converte automaticamente os valores inseridos para letras maiúsculas                       |
 | `lowercase`          | `boolean`                                     | `false` | Converte automaticamente os valores inseridos para letras minúsculas                       |
 | `maxWidthLabel`      | `string`                                      | —       | Define a largura máxima dos labels na lista de valores (ex: `'50px'`, `'100px'`)           |
+| `autocompleteitems`  | `string[]`                                    | `[]`    | Sugestões de autocomplete nativo (`<datalist>`) exibidas ao digitar no input simples (quando `listItems` não está definido) |
 
 ### Outputs
 
@@ -80,6 +82,35 @@ export class ExemploBasicoComponent {
 }
 ```
 
+### Autocomplete nativo — Sugestões via `autocompleteitems`
+
+```html
+<tcloud-ui-multiples-values
+  [(ngModel)]="tags"
+  [autocompleteitems]="sugestoesTags"
+  placeholder="Digite uma tag"
+  (tcChange)="onTagsChange($event)">
+</tcloud-ui-multiples-values>
+```
+
+```typescript
+import { TCloudUiMultiplesValuesComponent } from 'tcloud-ui';
+
+@Component({
+  standalone: true,
+  imports: [TCloudUiMultiplesValuesComponent],
+  template: `...`
+})
+export class ExemploAutocompleteComponent {
+  tags: string[] = [];
+  sugestoesTags = ['Angular', 'TypeScript', 'JavaScript', 'HTML', 'CSS'];
+
+  onTagsChange(itens: string[]) {
+    console.log('Tags atualizadas:', itens);
+  }
+}
+```
+
 ### Avançado — Com lista predefinida, uppercase e validação por pattern
 
 ```html

package/docs/tcloud-ui-upload-area.md

@@ -18,7 +18,7 @@ Componente de área de upload com suporte a drag-and-drop, pré-visualização d
 |------|------|---------|-----------|
 | `maxFiles` | `number \| undefined` | `undefined` | Número máximo de arquivos permitidos. Se `undefined`, não há limite. |
 | `acceptedFileTypes` | `AcceptedFileType[] \| undefined` | `undefined` | Lista de tipos MIME aceitos. Se `undefined`, todos os tipos são aceitos. Utiliza o enum `AcceptedFileType`. |
-| `acceptedExtensions` | `string[] \| undefined` | `undefined` | Lista de extensões de arquivo aceitas, ex: `['.doc', '.pdf']`. O ponto inicial é opcional. Validado com lógica **OU** em relação a `acceptedFileTypes`. |
+| `acceptedExtensions` | `string[] \| undefined` | `undefined` | Lista de extensões de arquivo aceitas, ex: `['.doc', '.pdf', '.tar.gz']`. O ponto inicial é opcional. Suporta extensões compostas (ex.: `.tar.gz`, `.tar.bz2`), validadas por sufixo do nome do arquivo. Validado com lógica **OU** em relação a `acceptedFileTypes`. |
 | `imageDimensions` | `ImageDimensions \| undefined` | `undefined` | Dimensões permitidas para imagens (largura x altura em pixels). Se `strict: true`, valida exatamente; caso contrário, aceita até as dimensões informadas. |
 | `showProgress` | `boolean` | `false` | Exibe barra de progresso animada durante o carregamento dos arquivos. |
 | `preloadedImages` | `PreloadedImage[] \| string[]` | — | Imagens pré-carregadas para modo de edição. Aceita array de URLs (strings) ou objetos `PreloadedImage` com `url`, `key` e `order`. As imagens são baixadas e convertidas em `File`. |
@@ -180,7 +180,7 @@ existingImages: PreloadedImage[] = [
 - **Pré-visualização**: Exibe thumbnails das imagens selecionadas.
 - **Reordenação**: Arraste e solte as imagens para alterar a ordem.
 - **Remoção**: Botão "×" para remover imagens individualmente.
-- **Validação de tipos**: Filtra arquivos por tipo MIME usando o enum `AcceptedFileType`.
+- **Validação de tipos**: Filtra arquivos por tipo MIME usando o enum `AcceptedFileType` ou por extensão (`acceptedExtensions`), incluindo extensões compostas como `.tar.gz` (validação por sufixo, aceita qualquer extensão composta configurada). A renomeação interna (`new_name`) e a exibição da extensão reconhecem nativamente `.tar.gz`, `.tar.bz2`, `.tar.xz`, `.tar.zst`, `.tar.lz` e `.tar.lzma`; outras extensões compostas fora dessa lista são validadas normalmente, mas exibidas/renomeadas usando apenas o último segmento.
 - **Validação de dimensões**: Valida largura e altura das imagens (exata ou máxima).
 - **Limite de arquivos**: Controla o número máximo de arquivos.
 - **Barra de progresso**: Exibe progresso animado durante o carregamento com efeito shimmer.

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

@@ -4097,10 +4097,12 @@ const noop$4 = () => {
 };
 class TCloudUiMultiInputComponent {
     constructor() {
+        this.id = '';
         this.placeholder = '';
         this.disabled = false;
         this.loading = false;
         this.showInput = false;
+        this.autocompleteitems = [];
         this.count_actives = 0;
         this.use_validation_required = false;
         this.tcChange = new EventEmitter();
@@ -4111,10 +4113,14 @@ class TCloudUiMultiInputComponent {
         this.onChangeCallback = noop$4;
     }
     ngOnInit() {
+        this.id = this.generateID();
         setTimeout(() => {
             this.toChange();
         });
     }
+    generateID() {
+        return `multi-input-${Math.floor(Math.random() * Math.floor(Math.random() * Date.now()))}`;
+    }
     addItem(item) {
         if (this.disabled) {
             return;
@@ -4208,11 +4214,11 @@ class TCloudUiMultiInputComponent {
     ngOnDestroy() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiMultiInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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 }] }); }
+    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 }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiMultiInputComponent, decorators: [{
             type: Component,
-            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"] }]
+            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"] }]
         }], ctorParameters: () => [], propDecorators: { tcList: [{
                 type: Input
             }], placeholder: [{
@@ -4227,6 +4233,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 type: Input
             }], showInput: [{
                 type: Input
+            }], autocompleteitems: [{
+                type: Input
             }], tcChange: [{
                 type: Output
             }], onChange: [{
@@ -5288,6 +5296,7 @@ class TCloudUiMultiplesValuesComponent {
         this.search = true;
         this.uppercase = false;
         this.lowercase = false;
+        this.autocompleteitems = [];
         this.tcChange = new EventEmitter();
         this.use_validation_required = false;
         this.placeholder_list = '';
@@ -5553,11 +5562,11 @@ class TCloudUiMultiplesValuesComponent {
     ngOnDestroy() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiMultiplesValuesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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" }] }); }
+    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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiMultiplesValuesComponent, decorators: [{
             type: Component,
-            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"] }]
+            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"] }]
         }], ctorParameters: () => [], propDecorators: { listItems: [{
                 type: Input
             }], openValuesInChange: [{
@@ -5582,6 +5591,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 type: Input
             }], lowercase: [{
                 type: Input
+            }], autocompleteitems: [{
+                type: Input
             }], maxWidthLabel: [{
                 type: Input
             }], tcChange: [{
@@ -6301,15 +6312,26 @@ class TCloudUiUploadAreaComponent {
         this.onImagesSelected(files);
     }
     generateNameFile(fileName) {
-        // Extrai a extensão do arquivo
-        const lastDotIndex = fileName.lastIndexOf('.');
-        const extension = lastDotIndex !== -1 ? fileName.substring(lastDotIndex) : '';
+        const extension = this.getFullExtension(fileName);
         // Gera um nome aleatório (16 caracteres)
         const randomName = Math.random().toString(36).substring(2, 15) +
             Math.random().toString(36).substring(2, 15);
         // Retorna o nome aleatório + extensão, tudo em minúsculo
         return (randomName + extension).toLowerCase();
     }
+    // Extensões compostas conhecidas (ex.: pacotes Linux) que não podem ser cortadas pelo último ponto
+    static { this.COMPOUND_EXTENSIONS = [
+        '.tar.gz', '.tar.bz2', '.tar.xz', '.tar.zst', '.tar.lz', '.tar.lzma'
+    ]; }
+    // Extrai a extensão do arquivo, reconhecendo extensões compostas (.tar.gz, etc.)
+    getFullExtension(fileName) {
+        const lower = fileName.toLowerCase();
+        const compound = TCloudUiUploadAreaComponent.COMPOUND_EXTENSIONS.find(ext => lower.endsWith(ext));
+        if (compound)
+            return compound;
+        const lastDot = fileName.lastIndexOf('.');
+        return lastDot !== -1 ? fileName.substring(lastDot).toLowerCase() : '';
+    }
     onImagesSelected(files) {
         // Não limpa o array, apenas adiciona novas imagens ao final
         // Verifica se há limite máximo e quantos arquivos ainda podem ser adicionados
@@ -6474,13 +6496,12 @@ class TCloudUiUploadAreaComponent {
         const matchesMime = hasTypesFilter
             ? this.acceptedFileTypes.includes(file.type)
             : false;
-        // Verifica por extensão (case-insensitive, garante ponto inicial)
+        // Verifica por extensão (case-insensitive, por sufixo para suportar extensões compostas como .tar.gz)
         let matchesExt = false;
         if (hasExtFilter) {
-            const lastDot = file.name.lastIndexOf('.');
-            const fileExt = lastDot !== -1 ? file.name.substring(lastDot).toLowerCase() : '';
+            const fileName = file.name.toLowerCase();
             const normalizedExts = this.acceptedExtensions.map(e => (e.startsWith('.') ? e : `.${e}`).toLowerCase());
-            matchesExt = normalizedExts.includes(fileExt);
+            matchesExt = normalizedExts.some(ext => fileName.endsWith(ext));
         }
         return matchesMime || matchesExt;
     }
@@ -6558,11 +6579,11 @@ class TCloudUiUploadAreaComponent {
     isImageFile(index) {
         return this.images[index]?.file?.type?.startsWith('image/') ?? false;
     }
-    // Retorna a extensão do arquivo em maiúsculo (sem ponto), ex: 'PDF', 'DOC'
+    // Retorna a extensão do arquivo em maiúsculo (sem ponto), ex: 'PDF', 'TAR.GZ'
     getFileExtension(index) {
         const name = this.images[index]?.name ?? '';
-        const lastDot = name.lastIndexOf('.');
-        return lastDot !== -1 ? name.substring(lastDot + 1).toUpperCase() : 'FILE';
+        const extension = this.getFullExtension(name);
+        return extension ? extension.substring(1).toUpperCase() : 'FILE';
     }
     // Valida dimensões da imagem
     validateImageDimensions(imageSrc, fileName) {