@dev-tcloud/tcloud-ui 6.12.4 → 6.14.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, EventEmitter, Input, Output, forwardRef, ViewChild, InjectionToken, Optional, Inject, input, effect, Directive, Pipe, ViewEncapsulation, signal, inject, SkipSelf, ChangeDetectionStrategy, HostListener, ChangeDetectorRef, computed, ApplicationRef, output, model, ContentChildren, viewChild, NgModule, makeEnvironmentProviders } from '@angular/core';
+import { Injectable, Component, EventEmitter, Input, Output, InjectionToken, Optional, Inject, inject, signal, Pipe, forwardRef, ViewChild, input, effect, Directive, ViewEncapsulation, SkipSelf, ChangeDetectionStrategy, HostListener, ChangeDetectorRef, computed, ApplicationRef, output, model, ContentChildren, viewChild, NgModule, makeEnvironmentProviders } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DatePipe, DOCUMENT } from '@angular/common';
 import { Subject, Subscription, BehaviorSubject, debounceTime, distinctUntilChanged, map } from 'rxjs';
@@ -196,6 +196,215 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Token de injeção para a configuração do TCloud UI
+ */
+const TCLOUD_UI_CONFIG = new InjectionToken('TCLOUD_UI_CONFIG');
+/**
+ * Token de injeção para o serviço de usuário customizado
+ */
+const TCLOUD_UI_USER_SERVICE = new InjectionToken('TCLOUD_UI_USER_SERVICE');
+/**
+ * Token de injeção para o serviço de tema customizado
+ */
+const TCLOUD_UI_LAYOUT_SERVICE = new InjectionToken('TCLOUD_UI_LAYOUT_SERVICE');
+/**
+ * Token de injeção para o serviço de locale - i18n
+ */
+const TCLOUD_UI_LOCALE_SERVICE = new InjectionToken('TCLOUD_UI_LOCALE_SERVICE');
+/**
+ * Token de injeção para o serviço de viewport customizado
+ */
+const TCLOUD_UI_VIEWPORT_SERVICE = new InjectionToken('TCLOUD_UI_VIEWPORT_SERVICE');
+
+class TCloudUiLocaleService {
+    constructor(_LocaleService) {
+        this._LocaleService = _LocaleService;
+        this.localeService = {};
+        this.localeService = this._LocaleService;
+    }
+    getLocale() {
+        // return 'modern';
+        try {
+            return this.localeService?.getLocale();
+        }
+        catch (error) {
+            // console.warn('getLocale', error);
+        }
+        return 'pt-BR';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiLocaleService, deps: [{ token: TCLOUD_UI_LOCALE_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiLocaleService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiLocaleService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [TCLOUD_UI_LOCALE_SERVICE]
+                }] }] });
+
+var choiceIssues$1 = {
+	yes: "Yes",
+	no: "No"
+};
+var inputPassword$1 = {
+	show_password: "Show Password",
+	hide_password: "Hide Password",
+	generate_password: "Generate Password",
+	copy_password: "Copy Password"
+};
+var multiplesValues$1 = {
+	records: "Records",
+	record: "Record"
+};
+var multiSelect$1 = {
+	placeholder: "Select an item"
+};
+var notFound$1 = {
+	message: "No results found"
+};
+var searchInObject$1 = {
+	placeholder: "Search..."
+};
+var uploadArea$1 = {
+	message: "Drag and drop files here<br>or click to select files"
+};
+var enUS = {
+	choiceIssues: choiceIssues$1,
+	inputPassword: inputPassword$1,
+	multiplesValues: multiplesValues$1,
+	multiSelect: multiSelect$1,
+	notFound: notFound$1,
+	searchInObject: searchInObject$1,
+	uploadArea: uploadArea$1
+};
+
+var choiceIssues = {
+	yes: "Sí",
+	no: "No"
+};
+var inputPassword = {
+	show_password: "Mostrar Contraseña",
+	hide_password: "Ocultar Contraseña",
+	generate_password: "Generar Contraseña",
+	copy_password: "Copiar Contraseña"
+};
+var multiplesValues = {
+	records: "Registros",
+	record: "Registro"
+};
+var multiSelect = {
+	placeholder: "Selecciona un elemento"
+};
+var notFound = {
+	message: "No se encontraron resultados"
+};
+var searchInObject = {
+	placeholder: "Buscar..."
+};
+var uploadArea = {
+	message: "Arrastra y suelta archivos aquí<br>o haz clic para seleccionar archivos"
+};
+var esES = {
+	choiceIssues: choiceIssues,
+	inputPassword: inputPassword,
+	multiplesValues: multiplesValues,
+	multiSelect: multiSelect,
+	notFound: notFound,
+	searchInObject: searchInObject,
+	uploadArea: uploadArea
+};
+
+const LOCALE_MESSAGES = {
+    'en-US': enUS,
+    'es-ES': esES,
+};
+class I18nService {
+    constructor() {
+        this.localeService = inject(TCloudUiLocaleService);
+        this._messages = signal({});
+        this.messages = this._messages.asReadonly();
+        this._locale = signal('');
+        this.locale = this._locale.asReadonly();
+        this.loadMessages();
+        try {
+            window.addEventListener('i18n:changed', (e) => {
+                const locale = e?.detail || this.localeService.getLocale();
+                this.loadMessages(locale);
+            });
+        }
+        catch (e) {
+            // ignore on non-browser env
+        }
+    }
+    loadMessages(locale) {
+        const resolvedLocale = locale ?? this.localeService.getLocale();
+        this._locale.set(resolvedLocale);
+        this._messages.set(LOCALE_MESSAGES[resolvedLocale] ?? {});
+    }
+    setMessages(messages) {
+        this._messages.set({ ...this._messages(), ...messages });
+    }
+    i18nTranslate(key, fallback) {
+        if (!key)
+            return fallback ?? '';
+        const parts = key.split('.');
+        let cur = this._messages();
+        for (const p of parts) {
+            if (cur == null)
+                return fallback ?? key;
+            cur = cur[p];
+        }
+        if (cur == null)
+            return fallback ?? key;
+        return String(cur);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: I18nService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: I18nService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: I18nService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+class I18nTranslatePipe {
+    constructor(i18n, cdr) {
+        this.i18n = i18n;
+        this.cdr = cdr;
+        this.eventHandler = () => this.cdr.markForCheck();
+        // listen for runtime i18n changes and trigger change detection
+        window.addEventListener('i18n:changed', this.eventHandler);
+    }
+    transform(key, fallback) {
+        if (!key)
+            return '';
+        try {
+            return this.i18n.i18nTranslate(key, fallback ?? key) || (fallback ?? key);
+        }
+        catch (e) {
+            return fallback ?? key;
+        }
+    }
+    ngOnDestroy() {
+        window.removeEventListener('i18n:changed', this.eventHandler);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: I18nTranslatePipe, deps: [{ token: I18nService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: I18nTranslatePipe, isStandalone: true, name: "i18nTranslate", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: I18nTranslatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'i18nTranslate',
+                    standalone: true,
+                    pure: false // impure so it updates when translations change at runtime
+                }]
+        }], ctorParameters: () => [{ type: I18nService }, { type: i0.ChangeDetectorRef }] });
+
 const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$8 = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => TCloudUiChoiceIssuesComponent),
@@ -258,11 +467,15 @@ class TCloudUiChoiceIssuesComponent {
         return '_' + Math.random().toString(36).substr(2, 9);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiChoiceIssuesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: TCloudUiChoiceIssuesComponent, isStandalone: true, selector: "tcloud-ui-choice-issues", inputs: { view: "view", titulo: "titulo", subTitulo: "subTitulo", disabled: "disabled" }, outputs: { onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$8], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["campo"], descendants: true, read: true }], ngImport: i0, template: "<div class=\"tcloud-ui-choice-issues box p-2 mt-3 mb-2\">\n  <input #campo [(ngModel)]=\"value\" type=\"hidden\" [value]=\"false\">\n\n  <table class=\"choice-area\">\n    <tr>\n      <td class=\"choice-description\">\n\n        <div>\n          <p class=\"titulo\">{{ titulo }}</p>\n        </div>\n        <div class=\"mt-1\">\n          <p class=\"sub-titulo\">{{ subTitulo }}</p>\n        </div>\n        <div class=\"mt-2 mb-1\">\n          <ng-content></ng-content>\n        </div>\n\n      </td>\n      <td class=\"choice-action\">\n        <table class=\"mt-3 mr-2\" *ngIf=\"!view\">\n          <tr>\n            <td>\n              <div class=\"form-fieldset\">\n                <label [class.v-true]=\"value\" class=\"mr-1\"><input #campo name=\"{{ ID }}\" [value]=\"true\" type=\"radio\"\n                    [(ngModel)]=\"value\" (click)=\"setV(true)\">Sim</label>\n              </div>\n            </td>\n            <td>\n              <div class=\"form-fieldset\">\n                <label [class.v-true]=\"!value\" class=\"ml-2\"><input #campo name=\"{{ ID }}\" [value]=\"false\" type=\"radio\"\n                    [(ngModel)]=\"value\" (click)=\"setV(false)\">N\u00E3o</label>\n              </div>\n            </td>\n          </tr>\n        </table>\n\n        <table class=\"mt-2 mr-2\" *ngIf=\"view\">\n          <tr>\n            <td>\n              <div class=\"form-fieldset view\">\n                <label *ngIf=\"value\" class=\"v-true disabled\">Sim</label>\n                <label *ngIf=\"!value\">N\u00E3o</label>\n              </div>\n            </td>\n          </tr>\n        </table>\n      </td>\n    </tr>\n  </table>\n\n\n\n</div>", styles: [".titulo{font-size:1rem;color:var(--cinza)}.sub-titulo{color:#b0adaa}.box{border:1px solid var(--cinza3);border-radius:10px}.box.box-icon{display:flex;justify-content:center;padding:35px 20px}.form-fieldset input{display:none}.form-fieldset .v-true{background:var(--tc-primary);color:#fff}.form-fieldset label{font-size:11px;background:var(--cinza4);cursor:pointer;position:relative;display:inline-flex;align-items:center;justify-content:space-around;text-transform:uppercase;border-radius:30px;padding:7px;margin:0;width:66px}.form-fieldset label:before{content:\"\";background:#fff;border-radius:50%;height:15px;width:15px}.form-fieldset label:nth-child(2){margin-right:20px}table{width:100%}table th,table td{vertical-align:top}.view,.view label{cursor:inherit!important}.disabled{background-color:#8fdfe8!important}.choice-description{width:100%}.choice-action{width:100%;max-width:200px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: TCloudUiChoiceIssuesComponent, isStandalone: true, selector: "tcloud-ui-choice-issues", inputs: { view: "view", titulo: "titulo", subTitulo: "subTitulo", disabled: "disabled" }, outputs: { onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$8], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["campo"], descendants: true, read: true }], ngImport: i0, template: "<div class=\"tcloud-ui-choice-issues box p-2 mt-3 mb-2\">\n  <input #campo [(ngModel)]=\"value\" type=\"hidden\" [value]=\"false\">\n\n  <table class=\"choice-area\">\n    <tr>\n      <td class=\"choice-description\">\n\n        <div>\n          <p class=\"titulo\">{{ titulo }}</p>\n        </div>\n        <div class=\"mt-1\">\n          <p class=\"sub-titulo\">{{ subTitulo }}</p>\n        </div>\n        <div class=\"mt-2 mb-1\">\n          <ng-content></ng-content>\n        </div>\n\n      </td>\n      <td class=\"choice-action\">\n        <table class=\"mt-3 mr-2\" *ngIf=\"!view\">\n          <tr>\n            <td>\n              <div class=\"form-fieldset\">\n                <label [class.v-true]=\"value\" class=\"mr-1\"><input #campo name=\"{{ ID }}\" [value]=\"true\" type=\"radio\"\n                    [(ngModel)]=\"value\" (click)=\"setV(true)\">{{ 'choiceIssues.yes' | i18nTranslate : 'Sim'}}</label>\n              </div>\n            </td>\n            <td>\n              <div class=\"form-fieldset\">\n                <label [class.v-true]=\"!value\" class=\"ml-2\"><input #campo name=\"{{ ID }}\" [value]=\"false\" type=\"radio\"\n                    [(ngModel)]=\"value\" (click)=\"setV(false)\">{{ 'choiceIssues.no' | i18nTranslate : 'N\u00E3o'}}</label>\n              </div>\n            </td>\n          </tr>\n        </table>\n\n        <table class=\"mt-2 mr-2\" *ngIf=\"view\">\n          <tr>\n            <td>\n              <div class=\"form-fieldset view\">\n                <label *ngIf=\"value\" class=\"v-true disabled\">Sim</label>\n                <label *ngIf=\"!value\">N\u00E3o</label>\n              </div>\n            </td>\n          </tr>\n        </table>\n      </td>\n    </tr>\n  </table>\n\n\n\n</div>", styles: [".titulo{font-size:1rem;color:var(--cinza)}.sub-titulo{color:#b0adaa}.box{border:1px solid var(--cinza3);border-radius:10px}.box.box-icon{display:flex;justify-content:center;padding:35px 20px}.form-fieldset input{display:none}.form-fieldset .v-true{background:var(--tc-primary);color:#fff}.form-fieldset label{font-size:11px;background:var(--cinza4);cursor:pointer;position:relative;display:inline-flex;align-items:center;justify-content:space-around;text-transform:uppercase;border-radius:30px;padding:7px;margin:0;width:66px}.form-fieldset label:before{content:\"\";background:#fff;border-radius:50%;height:15px;width:15px}.form-fieldset label:nth-child(2){margin-right:20px}table{width:100%}table th,table td{vertical-align:top}.view,.view label{cursor:inherit!important}.disabled{background-color:#8fdfe8!important}.choice-description{width:100%}.choice-action{width:100%;max-width:200px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: I18nTranslatePipe, name: "i18nTranslate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiChoiceIssuesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-choice-issues', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$8], standalone: true, imports: [CommonModule, FormsModule], template: "<div class=\"tcloud-ui-choice-issues box p-2 mt-3 mb-2\">\n  <input #campo [(ngModel)]=\"value\" type=\"hidden\" [value]=\"false\">\n\n  <table class=\"choice-area\">\n    <tr>\n      <td class=\"choice-description\">\n\n        <div>\n          <p class=\"titulo\">{{ titulo }}</p>\n        </div>\n        <div class=\"mt-1\">\n          <p class=\"sub-titulo\">{{ subTitulo }}</p>\n        </div>\n        <div class=\"mt-2 mb-1\">\n          <ng-content></ng-content>\n        </div>\n\n      </td>\n      <td class=\"choice-action\">\n        <table class=\"mt-3 mr-2\" *ngIf=\"!view\">\n          <tr>\n            <td>\n              <div class=\"form-fieldset\">\n                <label [class.v-true]=\"value\" class=\"mr-1\"><input #campo name=\"{{ ID }}\" [value]=\"true\" type=\"radio\"\n                    [(ngModel)]=\"value\" (click)=\"setV(true)\">Sim</label>\n              </div>\n            </td>\n            <td>\n              <div class=\"form-fieldset\">\n                <label [class.v-true]=\"!value\" class=\"ml-2\"><input #campo name=\"{{ ID }}\" [value]=\"false\" type=\"radio\"\n                    [(ngModel)]=\"value\" (click)=\"setV(false)\">N\u00E3o</label>\n              </div>\n            </td>\n          </tr>\n        </table>\n\n        <table class=\"mt-2 mr-2\" *ngIf=\"view\">\n          <tr>\n            <td>\n              <div class=\"form-fieldset view\">\n                <label *ngIf=\"value\" class=\"v-true disabled\">Sim</label>\n                <label *ngIf=\"!value\">N\u00E3o</label>\n              </div>\n            </td>\n          </tr>\n        </table>\n      </td>\n    </tr>\n  </table>\n\n\n\n</div>", styles: [".titulo{font-size:1rem;color:var(--cinza)}.sub-titulo{color:#b0adaa}.box{border:1px solid var(--cinza3);border-radius:10px}.box.box-icon{display:flex;justify-content:center;padding:35px 20px}.form-fieldset input{display:none}.form-fieldset .v-true{background:var(--tc-primary);color:#fff}.form-fieldset label{font-size:11px;background:var(--cinza4);cursor:pointer;position:relative;display:inline-flex;align-items:center;justify-content:space-around;text-transform:uppercase;border-radius:30px;padding:7px;margin:0;width:66px}.form-fieldset label:before{content:\"\";background:#fff;border-radius:50%;height:15px;width:15px}.form-fieldset label:nth-child(2){margin-right:20px}table{width:100%}table th,table td{vertical-align:top}.view,.view label{cursor:inherit!important}.disabled{background-color:#8fdfe8!important}.choice-description{width:100%}.choice-action{width:100%;max-width:200px}\n"] }]
+            args: [{ selector: 'tcloud-ui-choice-issues', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$8], standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        I18nTranslatePipe
+                    ], template: "<div class=\"tcloud-ui-choice-issues box p-2 mt-3 mb-2\">\n  <input #campo [(ngModel)]=\"value\" type=\"hidden\" [value]=\"false\">\n\n  <table class=\"choice-area\">\n    <tr>\n      <td class=\"choice-description\">\n\n        <div>\n          <p class=\"titulo\">{{ titulo }}</p>\n        </div>\n        <div class=\"mt-1\">\n          <p class=\"sub-titulo\">{{ subTitulo }}</p>\n        </div>\n        <div class=\"mt-2 mb-1\">\n          <ng-content></ng-content>\n        </div>\n\n      </td>\n      <td class=\"choice-action\">\n        <table class=\"mt-3 mr-2\" *ngIf=\"!view\">\n          <tr>\n            <td>\n              <div class=\"form-fieldset\">\n                <label [class.v-true]=\"value\" class=\"mr-1\"><input #campo name=\"{{ ID }}\" [value]=\"true\" type=\"radio\"\n                    [(ngModel)]=\"value\" (click)=\"setV(true)\">{{ 'choiceIssues.yes' | i18nTranslate : 'Sim'}}</label>\n              </div>\n            </td>\n            <td>\n              <div class=\"form-fieldset\">\n                <label [class.v-true]=\"!value\" class=\"ml-2\"><input #campo name=\"{{ ID }}\" [value]=\"false\" type=\"radio\"\n                    [(ngModel)]=\"value\" (click)=\"setV(false)\">{{ 'choiceIssues.no' | i18nTranslate : 'N\u00E3o'}}</label>\n              </div>\n            </td>\n          </tr>\n        </table>\n\n        <table class=\"mt-2 mr-2\" *ngIf=\"view\">\n          <tr>\n            <td>\n              <div class=\"form-fieldset view\">\n                <label *ngIf=\"value\" class=\"v-true disabled\">Sim</label>\n                <label *ngIf=\"!value\">N\u00E3o</label>\n              </div>\n            </td>\n          </tr>\n        </table>\n      </td>\n    </tr>\n  </table>\n\n\n\n</div>", styles: [".titulo{font-size:1rem;color:var(--cinza)}.sub-titulo{color:#b0adaa}.box{border:1px solid var(--cinza3);border-radius:10px}.box.box-icon{display:flex;justify-content:center;padding:35px 20px}.form-fieldset input{display:none}.form-fieldset .v-true{background:var(--tc-primary);color:#fff}.form-fieldset label{font-size:11px;background:var(--cinza4);cursor:pointer;position:relative;display:inline-flex;align-items:center;justify-content:space-around;text-transform:uppercase;border-radius:30px;padding:7px;margin:0;width:66px}.form-fieldset label:before{content:\"\";background:#fff;border-radius:50%;height:15px;width:15px}.form-fieldset label:nth-child(2){margin-right:20px}table{width:100%}table th,table td{vertical-align:top}.view,.view label{cursor:inherit!important}.disabled{background-color:#8fdfe8!important}.choice-description{width:100%}.choice-action{width:100%;max-width:200px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { view: [{
                 type: Input
             }], titulo: [{
@@ -377,23 +590,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Output
             }] } });
 
-/**
- * Token de injeção para a configuração do TCloud UI
- */
-const TCLOUD_UI_CONFIG = new InjectionToken('TCLOUD_UI_CONFIG');
-/**
- * Token de injeção para o serviço de usuário customizado
- */
-const TCLOUD_UI_USER_SERVICE = new InjectionToken('TCLOUD_UI_USER_SERVICE');
-/**
- * Token de injeção para o serviço de tema customizado
- */
-const TCLOUD_UI_LAYOUT_SERVICE = new InjectionToken('TCLOUD_UI_LAYOUT_SERVICE');
-/**
- * Token de injeção para o serviço de viewport customizado
- */
-const TCLOUD_UI_VIEWPORT_SERVICE = new InjectionToken('TCLOUD_UI_VIEWPORT_SERVICE');
-
 class TCloudUiLayoutService {
     constructor(_LayoutService) {
         this._LayoutService = _LayoutService;
@@ -3046,10 +3242,17 @@ class TCloudUiInputSearchComponent {
          * @param base_object object - Objeto onde ser procurado
          * @param found - Emite o valor encontrado
          */
-        this.placeholder = 'Procurar...';
+        this._PLACEHOLDER = 'Procurar...';
+        this.placeholder = this._PLACEHOLDER;
         this.mirror = true;
         this.search_text = '';
         this.found = new EventEmitter();
+        this.i18nService = inject(I18nService);
+    }
+    ngOnInit() {
+        if (this.placeholder === this._PLACEHOLDER) {
+            this.placeholder = this.i18nService.i18nTranslate('searchInObject.placeholder', this._PLACEHOLDER);
+        }
     }
     buscar(value) {
         const result = this.searchInObjectService.meet(`${value}`, this.base_object);
@@ -3415,8 +3618,9 @@ class TCloudUiModalComponent {
         this.tcloudModalService.setLoading(loading);
     }
     get loading() { return this._loading; }
-    constructor(_tCloudUiLayoutService, tcloudModalService) {
+    constructor(_tCloudUiLayoutService, _tCloudUiLocaleService, tcloudModalService) {
         this._tCloudUiLayoutService = _tCloudUiLayoutService;
+        this._tCloudUiLocaleService = _tCloudUiLocaleService;
         this.tcloudModalService = tcloudModalService;
         /**
         * tcloud-ui-modal - Cria e exibe um modal
@@ -3453,6 +3657,9 @@ class TCloudUiModalComponent {
     get layout() {
         return `${this._tCloudUiLayoutService?.getCurrentLayout()}`;
     }
+    get locale() {
+        return `${this._tCloudUiLocaleService?.getLocale()}`;
+    }
     ngOnInit() {
         this.subscription.add(this.tcloudModalService.stateClose$.subscribe((open) => {
             if (open) {
@@ -3504,11 +3711,12 @@ class TCloudUiModalComponent {
             this.subscription.unsubscribe();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiModalComponent, deps: [{ token: TCloudUiLayoutService }, { token: TcloudModalService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiModalComponent, deps: [{ token: TCloudUiLayoutService }, { token: TCloudUiLocaleService }, { token: TcloudModalService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TCloudUiModalComponent, isStandalone: true, selector: "tcloud-ui-modal", inputs: { confirm: "confirm", confirmText: "confirmText", autoClose: "autoClose", title: "title", maxWidth: "maxWidth", position: "position", sticky: "sticky", window: "window", open: "open", loading: "loading" }, outputs: { openChange: "openChange", toConfirm: "toConfirm", toCancel: "toCancel", toAction: "toAction" }, providers: [
             TcloudModalService,
-            TCloudUiLayoutService
-        ], ngImport: i0, template: "<div class=\"tc-background-modal\" *ngIf=\"control_open\" >{{ checkIsOpen() }}</div>\n\n<div class=\"tcloud-ui-modal base-modal tcloud-ui-modal-layout-{{ layout }} tcloud-ui-modal-postition-{{ position }}\" [attr.data-layout]=\"layout\" *ngIf=\"open\">\n  <div class=\"sub-modal\" [ngClass]=\"['position-' + position, sticky ? 'is-sticky' : '']\" [@fade]=\"animationParams\">\n    <div class=\"tc-modal tc-modal-shadow\" [attr.style]=\"'max-width: ' + maxWidth + 'px;'\" [class.tcloud-ui-modal-sticky]=\"sticky\">\n      <div class=\"area-top-actions tc-ui-modal-{{mode}}\">\n\n        @if( layout === 'classic'){\n          <button type=\"button\" class=\"tc-btn-action-close-ui-modal\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\n            <i *ngIf=\"!loading\" class=\"fas fa-times\"></i>\n            <i *ngIf=\"loading\" class=\"fas fa-spinner fa-spin\"></i>\n          </button>\n        }@else{\n          <button type=\"button\" class=\"tc-rev-btn-square tc-btn-x\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\n            <i *ngIf=\"!loading\" class=\"fas fa-times\"></i>\n            <i *ngIf=\"loading\" class=\"fas fa-spinner fa-spin\"></i>\n          </button>\n        }\n\n      </div>\n\n      <h4 *ngIf=\"title\" [innerHTML]=\"title\"></h4>\n\n      <ng-content></ng-content>\n\n    </div>\n  </div>\n</div>\n\n<!-- Ex: Modal -->\n<!-- \n  <tcloud-ui-modal [(open)]=\"open\">\n\n    <tcloud-ui-modal-header title=\"T\u00EDtulo do Modal\" ></tcloud-ui-modal-header>\n\n    <tcloud-ui-modal-body>\n      Conte\u00FAdo do modal aqui\n    </tcloud-ui-modal-body>\n\n    <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n  </tcloud-ui-modal>\n\n  <button type=\"button\" (click)=\"open = !open\">open modal {{ open }}</button>\n-->\n\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n\n<!-- Ex: Confirm Modal -->\n<!-- \n  <tcloud-ui-modal [(open)]=\"open_confirm\" [title]=\"'Aten\u00E7\u00E3o'\" [confirmText]=\"'Aceito'\" [confirm]=\"true\" (toAction)=\"$event\" >\n\n    <tcloud-ui-modal-body>Deseja realmente executar esta a\u00E7\u00E3o?</tcloud-ui-modal-body>\n\n    <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n  </tcloud-ui-modal>\n\n  <button type=\"button\" (click)=\"open_confirm = !open_confirm\">open_confirm modal {{ open_confirm }}</button>\n-->", styles: [".tc-background-modal{border:1px solid #ccc;position:fixed;width:100%;left:0;top:0;background-color:#000;z-index:4005;height:100%;opacity:.3}.base-modal{height:100%;overflow:scroll;position:fixed;width:100%;z-index:4005;left:0;top:0;text-align:left!important}.sub-modal{padding:30px;position:absolute;width:100%;display:flex;justify-content:center;align-items:flex-start}.sub-modal.position-left{justify-content:flex-start}.sub-modal.position-right{justify-content:flex-end}.sub-modal.position-bottom{align-items:flex-end}.tc-modal{position:relative;background-color:#fff;padding:12px;border-radius:8px;margin:auto;width:100%}.sub-modal.is-sticky{padding:0}.sub-modal.is-sticky .tc-modal{border-radius:0}.sub-modal.is-sticky.position-left .tc-modal{margin:0 auto 0 0}.sub-modal.is-sticky.position-right .tc-modal{margin:0 0 0 auto}.sub-modal.is-sticky.position-bottom .tc-modal{margin:auto 0 0}.sub-modal.is-sticky.position-center .tc-modal,.sub-modal.is-sticky.position-bottom .tc-modal{max-width:100%!important;width:100%!important}.tc-modal-shadow{-webkit-box-shadow:2px 2px 10px 0px rgba(0,0,0,.368627451);box-shadow:2px 2px 10px #0000005e}.tc-btn-x{min-height:25px!important;min-width:25px!important;height:25px;width:25px;margin-top:8px}.area-top-actions{position:absolute;top:2px;right:5px;z-index:1}.area-top-actions.tc-ui-modal-colorless button.tc-btn-action-close-ui-modal i{color:var(--tc-gray-600)!important}.area-top-actions button.tc-btn-action-close-ui-modal{cursor:pointer;background-color:transparent;border:none;font-size:15px;padding:5px 7px}.area-top-actions button.tc-btn-action-close-ui-modal i{font-size:17px;color:#fff;transition:all .25s;opacity:.7}.area-top-actions button.tc-btn-action-close-ui-modal i:hover{opacity:1!important}h4{font-size:16px;margin:5px 30px 10px 0;font-weight:700}.no-use-header i{color:#999!important}.tcloud-ui-modal-sticky{height:100vh;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
+            TCloudUiLayoutService,
+            TCloudUiLocaleService
+        ], ngImport: i0, template: "<div class=\"tc-background-modal\" *ngIf=\"control_open\" >{{ checkIsOpen() }}</div>\n\n<div class=\"tcloud-ui-modal base-modal tcloud-ui-modal-layout-{{ layout }} tcloud-ui-modal-postition-{{ position }}\" [attr.data-layout]=\"layout\" *ngIf=\"open\">\n  <div class=\"sub-modal\" [ngClass]=\"['position-' + position, sticky ? 'is-sticky' : '']\" [@fade]=\"animationParams\">\n    <div class=\"tc-modal tc-modal-shadow\" [attr.style]=\"'max-width: ' + maxWidth + 'px;'\" [class.tcloud-ui-modal-sticky]=\"sticky\">\n      <div class=\"area-top-actions tc-ui-modal-{{mode}}\">\n\n        @if( layout === 'classic'){\n          <button type=\"button\" class=\"tc-btn-action-close-ui-modal\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\n            <i *ngIf=\"!loading\" class=\"fas fa-times\"></i>\n            <i *ngIf=\"loading\" class=\"fas fa-spinner fa-spin\"></i>\n          </button>\n        }@else{\n          <button type=\"button\" class=\"tc-rev-btn-square tc-btn-x\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\n            <i *ngIf=\"!loading\" class=\"fas fa-times\"></i>\n            <i *ngIf=\"loading\" class=\"fas fa-spinner fa-spin\"></i>\n          </button>\n        }\n\n      </div>\n\n      <h4 *ngIf=\"title\" [innerHTML]=\"title\"></h4>\n      {{ locale }}\n      <ng-content></ng-content>\n\n    </div>\n  </div>\n</div>\n\n<!-- Ex: Modal -->\n<!-- \n  <tcloud-ui-modal [(open)]=\"open\">\n\n    <tcloud-ui-modal-header title=\"T\u00EDtulo do Modal\" ></tcloud-ui-modal-header>\n\n    <tcloud-ui-modal-body>\n      Conte\u00FAdo do modal aqui\n    </tcloud-ui-modal-body>\n\n    <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n  </tcloud-ui-modal>\n\n  <button type=\"button\" (click)=\"open = !open\">open modal {{ open }}</button>\n-->\n\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n\n<!-- Ex: Confirm Modal -->\n<!-- \n  <tcloud-ui-modal [(open)]=\"open_confirm\" [title]=\"'Aten\u00E7\u00E3o'\" [confirmText]=\"'Aceito'\" [confirm]=\"true\" (toAction)=\"$event\" >\n\n    <tcloud-ui-modal-body>Deseja realmente executar esta a\u00E7\u00E3o?</tcloud-ui-modal-body>\n\n    <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n  </tcloud-ui-modal>\n\n  <button type=\"button\" (click)=\"open_confirm = !open_confirm\">open_confirm modal {{ open_confirm }}</button>\n-->", styles: [".tc-background-modal{border:1px solid #ccc;position:fixed;width:100%;left:0;top:0;background-color:#000;z-index:4005;height:100%;opacity:.3}.base-modal{height:100%;overflow:scroll;position:fixed;width:100%;z-index:4005;left:0;top:0;text-align:left!important}.sub-modal{padding:30px;position:absolute;width:100%;display:flex;justify-content:center;align-items:flex-start}.sub-modal.position-left{justify-content:flex-start}.sub-modal.position-right{justify-content:flex-end}.sub-modal.position-bottom{align-items:flex-end}.tc-modal{position:relative;background-color:#fff;padding:12px;border-radius:8px;margin:auto;width:100%}.sub-modal.is-sticky{padding:0}.sub-modal.is-sticky .tc-modal{border-radius:0}.sub-modal.is-sticky.position-left .tc-modal{margin:0 auto 0 0}.sub-modal.is-sticky.position-right .tc-modal{margin:0 0 0 auto}.sub-modal.is-sticky.position-bottom .tc-modal{margin:auto 0 0}.sub-modal.is-sticky.position-center .tc-modal,.sub-modal.is-sticky.position-bottom .tc-modal{max-width:100%!important;width:100%!important}.tc-modal-shadow{-webkit-box-shadow:2px 2px 10px 0px rgba(0,0,0,.368627451);box-shadow:2px 2px 10px #0000005e}.tc-btn-x{min-height:25px!important;min-width:25px!important;height:25px;width:25px;margin-top:8px}.area-top-actions{position:absolute;top:2px;right:5px;z-index:1}.area-top-actions.tc-ui-modal-colorless button.tc-btn-action-close-ui-modal i{color:var(--tc-gray-600)!important}.area-top-actions button.tc-btn-action-close-ui-modal{cursor:pointer;background-color:transparent;border:none;font-size:15px;padding:5px 7px}.area-top-actions button.tc-btn-action-close-ui-modal i{font-size:17px;color:#fff;transition:all .25s;opacity:.7}.area-top-actions button.tc-btn-action-close-ui-modal i:hover{opacity:1!important}h4{font-size:16px;margin:5px 30px 10px 0;font-weight:700}.no-use-header i{color:#999!important}.tcloud-ui-modal-sticky{height:100vh;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
             trigger('fade', [
                 transition('void => *', [
                     style({ opacity: 0, transform: '{{enterTransform}}' }),
@@ -3524,7 +3732,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             type: Component,
             args: [{ selector: 'tcloud-ui-modal', providers: [
                         TcloudModalService,
-                        TCloudUiLayoutService
+                        TCloudUiLayoutService,
+                        TCloudUiLocaleService
                     ], animations: [
                         trigger('fade', [
                             transition('void => *', [
@@ -3535,8 +3744,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                                 animate('0.3s ease-out', style({ opacity: 0, transform: '{{leaveTransform}}' }))
                             ], { params: { leaveTransform: 'translateY(-38%)' } })
                         ])
-                    ], standalone: true, imports: [CommonModule], template: "<div class=\"tc-background-modal\" *ngIf=\"control_open\" >{{ checkIsOpen() }}</div>\n\n<div class=\"tcloud-ui-modal base-modal tcloud-ui-modal-layout-{{ layout }} tcloud-ui-modal-postition-{{ position }}\" [attr.data-layout]=\"layout\" *ngIf=\"open\">\n  <div class=\"sub-modal\" [ngClass]=\"['position-' + position, sticky ? 'is-sticky' : '']\" [@fade]=\"animationParams\">\n    <div class=\"tc-modal tc-modal-shadow\" [attr.style]=\"'max-width: ' + maxWidth + 'px;'\" [class.tcloud-ui-modal-sticky]=\"sticky\">\n      <div class=\"area-top-actions tc-ui-modal-{{mode}}\">\n\n        @if( layout === 'classic'){\n          <button type=\"button\" class=\"tc-btn-action-close-ui-modal\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\n            <i *ngIf=\"!loading\" class=\"fas fa-times\"></i>\n            <i *ngIf=\"loading\" class=\"fas fa-spinner fa-spin\"></i>\n          </button>\n        }@else{\n          <button type=\"button\" class=\"tc-rev-btn-square tc-btn-x\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\n            <i *ngIf=\"!loading\" class=\"fas fa-times\"></i>\n            <i *ngIf=\"loading\" class=\"fas fa-spinner fa-spin\"></i>\n          </button>\n        }\n\n      </div>\n\n      <h4 *ngIf=\"title\" [innerHTML]=\"title\"></h4>\n\n      <ng-content></ng-content>\n\n    </div>\n  </div>\n</div>\n\n<!-- Ex: Modal -->\n<!-- \n  <tcloud-ui-modal [(open)]=\"open\">\n\n    <tcloud-ui-modal-header title=\"T\u00EDtulo do Modal\" ></tcloud-ui-modal-header>\n\n    <tcloud-ui-modal-body>\n      Conte\u00FAdo do modal aqui\n    </tcloud-ui-modal-body>\n\n    <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n  </tcloud-ui-modal>\n\n  <button type=\"button\" (click)=\"open = !open\">open modal {{ open }}</button>\n-->\n\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n\n<!-- Ex: Confirm Modal -->\n<!-- \n  <tcloud-ui-modal [(open)]=\"open_confirm\" [title]=\"'Aten\u00E7\u00E3o'\" [confirmText]=\"'Aceito'\" [confirm]=\"true\" (toAction)=\"$event\" >\n\n    <tcloud-ui-modal-body>Deseja realmente executar esta a\u00E7\u00E3o?</tcloud-ui-modal-body>\n\n    <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n  </tcloud-ui-modal>\n\n  <button type=\"button\" (click)=\"open_confirm = !open_confirm\">open_confirm modal {{ open_confirm }}</button>\n-->", styles: [".tc-background-modal{border:1px solid #ccc;position:fixed;width:100%;left:0;top:0;background-color:#000;z-index:4005;height:100%;opacity:.3}.base-modal{height:100%;overflow:scroll;position:fixed;width:100%;z-index:4005;left:0;top:0;text-align:left!important}.sub-modal{padding:30px;position:absolute;width:100%;display:flex;justify-content:center;align-items:flex-start}.sub-modal.position-left{justify-content:flex-start}.sub-modal.position-right{justify-content:flex-end}.sub-modal.position-bottom{align-items:flex-end}.tc-modal{position:relative;background-color:#fff;padding:12px;border-radius:8px;margin:auto;width:100%}.sub-modal.is-sticky{padding:0}.sub-modal.is-sticky .tc-modal{border-radius:0}.sub-modal.is-sticky.position-left .tc-modal{margin:0 auto 0 0}.sub-modal.is-sticky.position-right .tc-modal{margin:0 0 0 auto}.sub-modal.is-sticky.position-bottom .tc-modal{margin:auto 0 0}.sub-modal.is-sticky.position-center .tc-modal,.sub-modal.is-sticky.position-bottom .tc-modal{max-width:100%!important;width:100%!important}.tc-modal-shadow{-webkit-box-shadow:2px 2px 10px 0px rgba(0,0,0,.368627451);box-shadow:2px 2px 10px #0000005e}.tc-btn-x{min-height:25px!important;min-width:25px!important;height:25px;width:25px;margin-top:8px}.area-top-actions{position:absolute;top:2px;right:5px;z-index:1}.area-top-actions.tc-ui-modal-colorless button.tc-btn-action-close-ui-modal i{color:var(--tc-gray-600)!important}.area-top-actions button.tc-btn-action-close-ui-modal{cursor:pointer;background-color:transparent;border:none;font-size:15px;padding:5px 7px}.area-top-actions button.tc-btn-action-close-ui-modal i{font-size:17px;color:#fff;transition:all .25s;opacity:.7}.area-top-actions button.tc-btn-action-close-ui-modal i:hover{opacity:1!important}h4{font-size:16px;margin:5px 30px 10px 0;font-weight:700}.no-use-header i{color:#999!important}.tcloud-ui-modal-sticky{height:100vh;overflow:hidden}\n"] }]
-        }], ctorParameters: () => [{ type: TCloudUiLayoutService }, { type: TcloudModalService }], propDecorators: { confirm: [{
+                    ], standalone: true, imports: [CommonModule], template: "<div class=\"tc-background-modal\" *ngIf=\"control_open\" >{{ checkIsOpen() }}</div>\n\n<div class=\"tcloud-ui-modal base-modal tcloud-ui-modal-layout-{{ layout }} tcloud-ui-modal-postition-{{ position }}\" [attr.data-layout]=\"layout\" *ngIf=\"open\">\n  <div class=\"sub-modal\" [ngClass]=\"['position-' + position, sticky ? 'is-sticky' : '']\" [@fade]=\"animationParams\">\n    <div class=\"tc-modal tc-modal-shadow\" [attr.style]=\"'max-width: ' + maxWidth + 'px;'\" [class.tcloud-ui-modal-sticky]=\"sticky\">\n      <div class=\"area-top-actions tc-ui-modal-{{mode}}\">\n\n        @if( layout === 'classic'){\n          <button type=\"button\" class=\"tc-btn-action-close-ui-modal\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\n            <i *ngIf=\"!loading\" class=\"fas fa-times\"></i>\n            <i *ngIf=\"loading\" class=\"fas fa-spinner fa-spin\"></i>\n          </button>\n        }@else{\n          <button type=\"button\" class=\"tc-rev-btn-square tc-btn-x\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\n            <i *ngIf=\"!loading\" class=\"fas fa-times\"></i>\n            <i *ngIf=\"loading\" class=\"fas fa-spinner fa-spin\"></i>\n          </button>\n        }\n\n      </div>\n\n      <h4 *ngIf=\"title\" [innerHTML]=\"title\"></h4>\n      {{ locale }}\n      <ng-content></ng-content>\n\n    </div>\n  </div>\n</div>\n\n<!-- Ex: Modal -->\n<!-- \n  <tcloud-ui-modal [(open)]=\"open\">\n\n    <tcloud-ui-modal-header title=\"T\u00EDtulo do Modal\" ></tcloud-ui-modal-header>\n\n    <tcloud-ui-modal-body>\n      Conte\u00FAdo do modal aqui\n    </tcloud-ui-modal-body>\n\n    <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n  </tcloud-ui-modal>\n\n  <button type=\"button\" (click)=\"open = !open\">open modal {{ open }}</button>\n-->\n\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n\n<!-- Ex: Confirm Modal -->\n<!-- \n  <tcloud-ui-modal [(open)]=\"open_confirm\" [title]=\"'Aten\u00E7\u00E3o'\" [confirmText]=\"'Aceito'\" [confirm]=\"true\" (toAction)=\"$event\" >\n\n    <tcloud-ui-modal-body>Deseja realmente executar esta a\u00E7\u00E3o?</tcloud-ui-modal-body>\n\n    <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n  </tcloud-ui-modal>\n\n  <button type=\"button\" (click)=\"open_confirm = !open_confirm\">open_confirm modal {{ open_confirm }}</button>\n-->", styles: [".tc-background-modal{border:1px solid #ccc;position:fixed;width:100%;left:0;top:0;background-color:#000;z-index:4005;height:100%;opacity:.3}.base-modal{height:100%;overflow:scroll;position:fixed;width:100%;z-index:4005;left:0;top:0;text-align:left!important}.sub-modal{padding:30px;position:absolute;width:100%;display:flex;justify-content:center;align-items:flex-start}.sub-modal.position-left{justify-content:flex-start}.sub-modal.position-right{justify-content:flex-end}.sub-modal.position-bottom{align-items:flex-end}.tc-modal{position:relative;background-color:#fff;padding:12px;border-radius:8px;margin:auto;width:100%}.sub-modal.is-sticky{padding:0}.sub-modal.is-sticky .tc-modal{border-radius:0}.sub-modal.is-sticky.position-left .tc-modal{margin:0 auto 0 0}.sub-modal.is-sticky.position-right .tc-modal{margin:0 0 0 auto}.sub-modal.is-sticky.position-bottom .tc-modal{margin:auto 0 0}.sub-modal.is-sticky.position-center .tc-modal,.sub-modal.is-sticky.position-bottom .tc-modal{max-width:100%!important;width:100%!important}.tc-modal-shadow{-webkit-box-shadow:2px 2px 10px 0px rgba(0,0,0,.368627451);box-shadow:2px 2px 10px #0000005e}.tc-btn-x{min-height:25px!important;min-width:25px!important;height:25px;width:25px;margin-top:8px}.area-top-actions{position:absolute;top:2px;right:5px;z-index:1}.area-top-actions.tc-ui-modal-colorless button.tc-btn-action-close-ui-modal i{color:var(--tc-gray-600)!important}.area-top-actions button.tc-btn-action-close-ui-modal{cursor:pointer;background-color:transparent;border:none;font-size:15px;padding:5px 7px}.area-top-actions button.tc-btn-action-close-ui-modal i{font-size:17px;color:#fff;transition:all .25s;opacity:.7}.area-top-actions button.tc-btn-action-close-ui-modal i:hover{opacity:1!important}h4{font-size:16px;margin:5px 30px 10px 0;font-weight:700}.no-use-header i{color:#999!important}.tcloud-ui-modal-sticky{height:100vh;overflow:hidden}\n"] }]
+        }], ctorParameters: () => [{ type: TCloudUiLayoutService }, { type: TCloudUiLocaleService }, { type: TcloudModalService }], propDecorators: { confirm: [{
                 type: Input
             }], confirmText: [{
                 type: Input
@@ -3879,7 +4088,8 @@ const noop$2 = () => {
 };
 class TCloudUiMultiSelectComponent {
     constructor() {
-        this.placeholder = 'Selecione um item';
+        this._PLACEHOLDER = 'Selecione um item';
+        this.placeholder = this._PLACEHOLDER;
         this.disabled = false;
         this.loading = false;
         this.showDescriptionInValue = false;
@@ -3887,6 +4097,7 @@ class TCloudUiMultiSelectComponent {
         this.tcChange = new EventEmitter();
         this.use_validation_required = false;
         this.count_actives = 0;
+        this.i18nService = inject(I18nService);
         this.onChange = new EventEmitter();
         //Placeholders for the callbacks which are later providesd
         //by the Control Value Accessor
@@ -3894,6 +4105,9 @@ class TCloudUiMultiSelectComponent {
         this.onChangeCallback = noop$2;
     }
     ngOnInit() {
+        if (this.placeholder === this._PLACEHOLDER) {
+            this.placeholder = this.i18nService.i18nTranslate('multiSelect.placeholder', this._PLACEHOLDER);
+        }
         setTimeout(() => { this.toChange(); });
     }
     addItem(item) {
@@ -4007,7 +4221,7 @@ class TCloudUiMultiSelectComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiMultiSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-multi-select', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2, CUSTOM_INPUT_VALIDATORS$1], standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule], template: "\n  <div class=\"tcloud-ui-multi-select\">\n    <table *ngIf=\"!showInput\">\n      <tr *ngIf=\"tcList\">\n        <td>\n          <select\n            class=\"tc-form-control\"\n            [(ngModel)]=\"item_value\"\n            [class.tc-parent-validation]=\"use_validation_required\"\n            #_select\n            [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\n            [title]=\"tcList.length === 0 ? 'Nenhum item dispon\u00EDvel' : placeholder\">\n\n            <option value=\"null\" disabled selected>{{ placeholder }}</option>\n\n            <ng-container *ngFor=\"let item of tcList; let i = index\">\n              <option [title]=\"item.description\" *ngIf=\"!item.active\" [value]=\"item.value\">{{ item.description }}</option>\n            </ng-container>\n          </select>\n        </td>\n        <td>\n          <button\n            [disabled]=\"!item_value || tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\n            title=\"Adicionar\"\n            class=\"btn-plus-select\"\n            (click)=\"addItem(_select.value);onChangeTouched()\"\n            type=\"button\">\n            <i class=\"fas fa-plus\"></i>\n          </button>\n        </td>\n      </tr>\n    </table>\n\n    <div class=\"box-itens-selected\" *ngIf=\"count_actives > 0 && (tcList && tcList.length > 0)\">\n      <ng-container *ngFor=\"let item of tcList\">\n\n        <ng-container *ngIf=\"item.active\">\n          <div class=\"box-label\" [ngStyle]=\"(maxWidthLabel) ? {'max-width': maxWidthLabel} : null\" >\n            <div class=\"box-value\" [title]=\"item.value\" *ngIf=\"!showDescriptionInValue\">\n              {{ item.value }}\n            </div>\n            <div class=\"box-value\" [title]=\"item.description\" *ngIf=\"showDescriptionInValue\">\n              {{ item.description }}\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);onChangeTouched()\">\n                <i class=\"fas fa-times\"></i>\n              </button>\n            </div>\n          </div>\n        </ng-container>\n\n      </ng-container>\n    </div>\n  </div>\n", styles: ["table{width:100%;border-collapse:collapse;border:none}table td{vertical-align:top}table td:first-child{width:100%}select{font-size:.8rem;height:40px;border:1px solid #999;border-radius:4px 0 0 4px;padding:6px 30px 6px 10px;white-space:nowrap;text-overflow:ellipsis;width:100%;background-color:#fff;color:#888}.btn-plus-select{width:30px;height:40px;border:none;color:#fff;background-color:var(--tc-primary);border-radius:0 4px 4px 0}.box-itens-selected{display:block;padding:9px;background-color:#ededed;border-radius:4px;width:100%}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{position:relative;display:inline-block;height:35px;min-width:60px;color:var(--tc-primary);padding:8px 24px 10px 15px;border:1px solid var(--tc-primary);border-radius:5px;margin:2px;background-color:var(--white);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(--tc-primary);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(--red)}\n"] }]
+            args: [{ selector: 'tcloud-ui-multi-select', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2, CUSTOM_INPUT_VALIDATORS$1], standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, I18nTranslatePipe], template: "\n  <div class=\"tcloud-ui-multi-select\">\n    <table *ngIf=\"!showInput\">\n      <tr *ngIf=\"tcList\">\n        <td>\n          <select\n            class=\"tc-form-control\"\n            [(ngModel)]=\"item_value\"\n            [class.tc-parent-validation]=\"use_validation_required\"\n            #_select\n            [disabled]=\"tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\n            [title]=\"tcList.length === 0 ? 'Nenhum item dispon\u00EDvel' : placeholder\">\n\n            <option value=\"null\" disabled selected>{{ placeholder }}</option>\n\n            <ng-container *ngFor=\"let item of tcList; let i = index\">\n              <option [title]=\"item.description\" *ngIf=\"!item.active\" [value]=\"item.value\">{{ item.description }}</option>\n            </ng-container>\n          </select>\n        </td>\n        <td>\n          <button\n            [disabled]=\"!item_value || tcList === undefined || (tcList && tcList.length === 0) || disabled || loading\"\n            title=\"Adicionar\"\n            class=\"btn-plus-select\"\n            (click)=\"addItem(_select.value);onChangeTouched()\"\n            type=\"button\">\n            <i class=\"fas fa-plus\"></i>\n          </button>\n        </td>\n      </tr>\n    </table>\n\n    <div class=\"box-itens-selected\" *ngIf=\"count_actives > 0 && (tcList && tcList.length > 0)\">\n      <ng-container *ngFor=\"let item of tcList\">\n\n        <ng-container *ngIf=\"item.active\">\n          <div class=\"box-label\" [ngStyle]=\"(maxWidthLabel) ? {'max-width': maxWidthLabel} : null\" >\n            <div class=\"box-value\" [title]=\"item.value\" *ngIf=\"!showDescriptionInValue\">\n              {{ item.value }}\n            </div>\n            <div class=\"box-value\" [title]=\"item.description\" *ngIf=\"showDescriptionInValue\">\n              {{ item.description }}\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);onChangeTouched()\">\n                <i class=\"fas fa-times\"></i>\n              </button>\n            </div>\n          </div>\n        </ng-container>\n\n      </ng-container>\n    </div>\n  </div>\n", styles: ["table{width:100%;border-collapse:collapse;border:none}table td{vertical-align:top}table td:first-child{width:100%}select{font-size:.8rem;height:40px;border:1px solid #999;border-radius:4px 0 0 4px;padding:6px 30px 6px 10px;white-space:nowrap;text-overflow:ellipsis;width:100%;background-color:#fff;color:#888}.btn-plus-select{width:30px;height:40px;border:none;color:#fff;background-color:var(--tc-primary);border-radius:0 4px 4px 0}.box-itens-selected{display:block;padding:9px;background-color:#ededed;border-radius:4px;width:100%}select:disabled{opacity:.8!important;cursor:not-allowed!important;background-color:#ededed}button:disabled{opacity:.5!important;cursor:not-allowed!important}.box-label{position:relative;display:inline-block;height:35px;min-width:60px;color:var(--tc-primary);padding:8px 24px 10px 15px;border:1px solid var(--tc-primary);border-radius:5px;margin:2px;background-color:var(--white);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(--tc-primary);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(--red)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { tcList: [{
                 type: Input
             }], placeholder: [{
@@ -4032,10 +4246,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
 
 class TCloudUiNotFoundComponent {
     constructor() {
-        this.message = 'Nenhum registro encontrado.';
+        this.i18nService = inject(I18nService);
+        this._MESSAGE = 'Nenhum registro encontrado.';
+        this.message = this._MESSAGE;
         this.styleIcon = {};
     }
     ngOnInit() {
+        if (this.message === this._MESSAGE) {
+            this.message = this.i18nService.i18nTranslate('notFound.message', this._MESSAGE);
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: TCloudUiNotFoundComponent, isStandalone: true, selector: "tcloud-ui-not-found", inputs: { message: "message" }, ngImport: i0, template: "<div class=\"tcloud-ui-not-found tc-container-empty\">\n  <div class=\"tc-message-empty-icon\">\n    <i class=\"fas fa-exclamation-triangle\"></i>\n  </div>\n  <div *ngIf=\"message !== ''\" class=\"tc-message-empty\" [innerHTML]=\"message\" ></div>\n</div>", styles: [".tc-container-empty{margin:15px;text-align:center;border:1px solid rgba(204,204,204,.4392156863);padding:10px;border-radius:5px;background-color:#fff}.tc-container-empty .tc-message-empty-icon i{font-size:25px;color:#c1c1c1}.tc-container-empty .tc-message-empty{margin:15px;font-size:15px;color:#a49d9d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
@@ -4656,11 +4875,11 @@ class TCloudUiInputPasswordComponent {
         this.onTouchedCallback = fn;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiInputPasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: TCloudUiInputPasswordComponent, isStandalone: true, selector: "tcloud-ui-input-password", inputs: { actionView: "actionView", actionCopy: "actionCopy", actionGeneratePassword: "actionGeneratePassword", numberOfCharacter: "numberOfCharacter", atLeastOneUppercaseLetter: "atLeastOneUppercaseLetter", atLeastOneLowercaseLetter: "atLeastOneLowercaseLetter", atLeastOneSpecialCharacter: "atLeastOneSpecialCharacter", ngModel: "ngModel" }, outputs: { ngModelChange: "ngModelChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1], ngImport: i0, template: "<div class=\"tcloud-ui-input-password\">\n    <table>\n        <tr>\n            <!-- input password -->\n            <td>\n                <form #_form=\"ngForm\">\n                    <ng-container *ngIf=\"passwordRegex\">\n                        <input class=\"tc-form-control\" *ngIf=\"mode == 'password'\" type=\"password\" name=\"tc_password\" [pattern]=\"passwordRegex\" autoComplete=\"new-password\" [(ngModel)]=\"innerValue\" required>\n                        <input class=\"tc-form-control\" *ngIf=\"mode == 'text'\" type=\"text\" name=\"tc_text\" [pattern]=\"passwordRegex\" [(ngModel)]=\"innerValue\" required>\n                    </ng-container>\n                </form>\n            </td>\n\n            <!-- action show hide -->\n            <td *ngIf=\"actionView\">\n                <button type=\"button\" (click)=\"toggleMode()\" [title]=\"(mode == 'password') ? 'Visualizar Senha' : 'Esconder Senha'\">\n                    <i *ngIf=\"mode == 'password'\" class=\"far fa-eye-slash\"></i>\n                    <i *ngIf=\"mode == 'text'\" class=\"far fa-eye\"></i> \n                </button>\n            </td>\n\n            <!-- action generate pass -->\n            <td *ngIf=\"actionGeneratePassword\">\n                <button type=\"button\" [title]=\"'Gerar Senha'\" (click)=\"generatePassword()\">\n                    <i class=\"fa-solid fa-key\"></i>\n                </button>\n            </td>\n\n            <!-- action copy pass -->\n            <td *ngIf=\"actionCopy\">\n                <button type=\"button\" [title]=\"'Copiar Senha'\" (click)=\"copyText()\">\n                    <i *ngIf=\"!isCopy\" class=\"fa-regular fa-copy\"></i>\n                    <i *ngIf=\"isCopy\" class=\"fa-solid fa-check\"></i>\n                </button>\n            </td>\n        </tr>\n    </table>\n</div>", styles: [".tcloud-ui-input-password{border:1px solid var(--tc-gray-300);border-radius:3px}.tcloud-ui-input-password table{width:100%}.tcloud-ui-input-password table td:first-child{width:100%!important}.tcloud-ui-input-password table td:first-child input{width:100%;border:none;height:38px;padding-left:8px}.tcloud-ui-input-password table td{width:50px;height:40px;background-color:#fff}.tcloud-ui-input-password table td button{background:transparent;border:none;margin-right:3px;cursor:pointer;color:var(--tc-gray-500)}.tcloud-ui-input-password table td button:hover{color:var(--tc-primary2)}.tcloud-ui-input-password .ng-invalid.ng-touched{border:1px solid var(--red)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: TCloudUiInputPasswordComponent, isStandalone: true, selector: "tcloud-ui-input-password", inputs: { actionView: "actionView", actionCopy: "actionCopy", actionGeneratePassword: "actionGeneratePassword", numberOfCharacter: "numberOfCharacter", atLeastOneUppercaseLetter: "atLeastOneUppercaseLetter", atLeastOneLowercaseLetter: "atLeastOneLowercaseLetter", atLeastOneSpecialCharacter: "atLeastOneSpecialCharacter", ngModel: "ngModel" }, outputs: { ngModelChange: "ngModelChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1], ngImport: i0, template: "<div class=\"tcloud-ui-input-password\">\n    <table>\n        <tr>\n            <!-- input password -->\n            <td>\n                <form #_form=\"ngForm\">\n                    <ng-container *ngIf=\"passwordRegex\">\n                        <input class=\"tc-form-control\" *ngIf=\"mode == 'password'\" type=\"password\" name=\"tc_password\" [pattern]=\"passwordRegex\" autoComplete=\"new-password\" [(ngModel)]=\"innerValue\" required>\n                        <input class=\"tc-form-control\" *ngIf=\"mode == 'text'\" type=\"text\" name=\"tc_text\" [pattern]=\"passwordRegex\" [(ngModel)]=\"innerValue\" required>\n                    </ng-container>\n                </form>\n            </td>\n\n            <!-- action show hide -->\n            <td *ngIf=\"actionView\">\n                <button type=\"button\" (click)=\"toggleMode()\" [title]=\"(mode == 'password') ? ('inputPassword.show_password' | i18nTranslate : 'Visualizar Senha') : ('inputPassword.hide_password' | i18nTranslate : 'Esconder Senha')\">\n                    <i *ngIf=\"mode == 'password'\" class=\"far fa-eye-slash\"></i>\n                    <i *ngIf=\"mode == 'text'\" class=\"far fa-eye\"></i> \n                </button>\n            </td>\n\n            <!-- action generate pass -->\n            <td *ngIf=\"actionGeneratePassword\">\n                <button type=\"button\" title=\"{{ 'inputPassword.generate_password' | i18nTranslate : 'Gerar Senha'}}\" (click)=\"generatePassword()\">\n                    <i class=\"fa-solid fa-key\"></i>\n                </button>\n            </td>\n\n            <!-- action copy pass -->\n            <td *ngIf=\"actionCopy\">\n                <button type=\"button\" title=\"{{ 'inputPassword.copy_password' | i18nTranslate : 'Copiar Senha'}}\" (click)=\"copyText()\">\n                    <i *ngIf=\"!isCopy\" class=\"fa-regular fa-copy\"></i>\n                    <i *ngIf=\"isCopy\" class=\"fa-solid fa-check\"></i>\n                </button>\n            </td>\n        </tr>\n    </table>\n</div>", styles: [".tcloud-ui-input-password{border:1px solid var(--tc-gray-300);border-radius:3px}.tcloud-ui-input-password table{width:100%}.tcloud-ui-input-password table td:first-child{width:100%!important}.tcloud-ui-input-password table td:first-child input{width:100%;border:none;height:38px;padding-left:8px}.tcloud-ui-input-password table td{width:50px;height:40px;background-color:#fff}.tcloud-ui-input-password table td button{background:transparent;border:none;margin-right:3px;cursor:pointer;color:var(--tc-gray-500)}.tcloud-ui-input-password table td button:hover{color:var(--tc-primary2)}.tcloud-ui-input-password .ng-invalid.ng-touched{border:1px solid var(--red)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: I18nTranslatePipe, name: "i18nTranslate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiInputPasswordComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-input-password', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1], standalone: true, imports: [CommonModule, FormsModule], template: "<div class=\"tcloud-ui-input-password\">\n    <table>\n        <tr>\n            <!-- input password -->\n            <td>\n                <form #_form=\"ngForm\">\n                    <ng-container *ngIf=\"passwordRegex\">\n                        <input class=\"tc-form-control\" *ngIf=\"mode == 'password'\" type=\"password\" name=\"tc_password\" [pattern]=\"passwordRegex\" autoComplete=\"new-password\" [(ngModel)]=\"innerValue\" required>\n                        <input class=\"tc-form-control\" *ngIf=\"mode == 'text'\" type=\"text\" name=\"tc_text\" [pattern]=\"passwordRegex\" [(ngModel)]=\"innerValue\" required>\n                    </ng-container>\n                </form>\n            </td>\n\n            <!-- action show hide -->\n            <td *ngIf=\"actionView\">\n                <button type=\"button\" (click)=\"toggleMode()\" [title]=\"(mode == 'password') ? 'Visualizar Senha' : 'Esconder Senha'\">\n                    <i *ngIf=\"mode == 'password'\" class=\"far fa-eye-slash\"></i>\n                    <i *ngIf=\"mode == 'text'\" class=\"far fa-eye\"></i> \n                </button>\n            </td>\n\n            <!-- action generate pass -->\n            <td *ngIf=\"actionGeneratePassword\">\n                <button type=\"button\" [title]=\"'Gerar Senha'\" (click)=\"generatePassword()\">\n                    <i class=\"fa-solid fa-key\"></i>\n                </button>\n            </td>\n\n            <!-- action copy pass -->\n            <td *ngIf=\"actionCopy\">\n                <button type=\"button\" [title]=\"'Copiar Senha'\" (click)=\"copyText()\">\n                    <i *ngIf=\"!isCopy\" class=\"fa-regular fa-copy\"></i>\n                    <i *ngIf=\"isCopy\" class=\"fa-solid fa-check\"></i>\n                </button>\n            </td>\n        </tr>\n    </table>\n</div>", styles: [".tcloud-ui-input-password{border:1px solid var(--tc-gray-300);border-radius:3px}.tcloud-ui-input-password table{width:100%}.tcloud-ui-input-password table td:first-child{width:100%!important}.tcloud-ui-input-password table td:first-child input{width:100%;border:none;height:38px;padding-left:8px}.tcloud-ui-input-password table td{width:50px;height:40px;background-color:#fff}.tcloud-ui-input-password table td button{background:transparent;border:none;margin-right:3px;cursor:pointer;color:var(--tc-gray-500)}.tcloud-ui-input-password table td button:hover{color:var(--tc-primary2)}.tcloud-ui-input-password .ng-invalid.ng-touched{border:1px solid var(--red)!important}\n"] }]
+            args: [{ selector: 'tcloud-ui-input-password', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1], standalone: true, imports: [CommonModule, FormsModule, I18nTranslatePipe], template: "<div class=\"tcloud-ui-input-password\">\n    <table>\n        <tr>\n            <!-- input password -->\n            <td>\n                <form #_form=\"ngForm\">\n                    <ng-container *ngIf=\"passwordRegex\">\n                        <input class=\"tc-form-control\" *ngIf=\"mode == 'password'\" type=\"password\" name=\"tc_password\" [pattern]=\"passwordRegex\" autoComplete=\"new-password\" [(ngModel)]=\"innerValue\" required>\n                        <input class=\"tc-form-control\" *ngIf=\"mode == 'text'\" type=\"text\" name=\"tc_text\" [pattern]=\"passwordRegex\" [(ngModel)]=\"innerValue\" required>\n                    </ng-container>\n                </form>\n            </td>\n\n            <!-- action show hide -->\n            <td *ngIf=\"actionView\">\n                <button type=\"button\" (click)=\"toggleMode()\" [title]=\"(mode == 'password') ? ('inputPassword.show_password' | i18nTranslate : 'Visualizar Senha') : ('inputPassword.hide_password' | i18nTranslate : 'Esconder Senha')\">\n                    <i *ngIf=\"mode == 'password'\" class=\"far fa-eye-slash\"></i>\n                    <i *ngIf=\"mode == 'text'\" class=\"far fa-eye\"></i> \n                </button>\n            </td>\n\n            <!-- action generate pass -->\n            <td *ngIf=\"actionGeneratePassword\">\n                <button type=\"button\" title=\"{{ 'inputPassword.generate_password' | i18nTranslate : 'Gerar Senha'}}\" (click)=\"generatePassword()\">\n                    <i class=\"fa-solid fa-key\"></i>\n                </button>\n            </td>\n\n            <!-- action copy pass -->\n            <td *ngIf=\"actionCopy\">\n                <button type=\"button\" title=\"{{ 'inputPassword.copy_password' | i18nTranslate : 'Copiar Senha'}}\" (click)=\"copyText()\">\n                    <i *ngIf=\"!isCopy\" class=\"fa-regular fa-copy\"></i>\n                    <i *ngIf=\"isCopy\" class=\"fa-solid fa-check\"></i>\n                </button>\n            </td>\n        </tr>\n    </table>\n</div>", styles: [".tcloud-ui-input-password{border:1px solid var(--tc-gray-300);border-radius:3px}.tcloud-ui-input-password table{width:100%}.tcloud-ui-input-password table td:first-child{width:100%!important}.tcloud-ui-input-password table td:first-child input{width:100%;border:none;height:38px;padding-left:8px}.tcloud-ui-input-password table td{width:50px;height:40px;background-color:#fff}.tcloud-ui-input-password table td button{background:transparent;border:none;margin-right:3px;cursor:pointer;color:var(--tc-gray-500)}.tcloud-ui-input-password table td button:hover{color:var(--tc-primary2)}.tcloud-ui-input-password .ng-invalid.ng-touched{border:1px solid var(--red)!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { actionView: [{
                 type: Input
             }], actionCopy: [{
@@ -5170,11 +5389,11 @@ class TCloudUiMultiplesValuesComponent {
     ngOnDestroy() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiMultiplesValuesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", 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, CUSTOM_INPUT_VALIDATORS], ngImport: i0, template: "<div *ngIf=\"show_component\" class=\"tcloud-ui-multiples-values tc-dropdown\" id=\"area-{{ id }}\" [class.tc-parent-validation]=\"use_validation_required\">\n\n\n    <form #_formulario=\"ngForm\">\n\n        <!-- {{ input_items }} -->\n\n        <div class=\"dropdown-toggle\" id=\"{{id}}\" [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"'false'\">\n\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                                    <ng-container *ngIf=\"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                                                <ng-container *ngFor=\"let item of listItems\">                                                    \n                                                    <tcloud-ui-data-list-option [value]=\"'' + item.value\" [disabled]=\"checkIsDisabled(item)\">{{ item?.description }}</tcloud-ui-data-list-option>\n                                                </ng-container>\n                                            </tcloud-ui-data-list>\n                                        </div>\n                                    </ng-container>\n            \n                                    <ng-container *ngIf=\"!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                                        \n                                        </div>\n                                    </ng-container>\n                                </td>\n                                <td class=\"count-list\" *ngIf=\"(items && items.length > 0)\">\n                                    <div class=\"input\">\n                                        <input type=\"text\" value=\"{{ items.length }} {{ (items.length > 1) ? 'registros' : 'registro' }}\" disabled readonly>                            \n                                    </div>\n                                </td>\n                                <td class=\"count-list\" *ngIf=\"!items || (items && items.length === 0)\">\n                                    <div class=\"input\"><input type=\"text\" class=\"info-no-value\" value=\"Vazio\" disabled readonly></div>                       \n                                </td>\n                                <td class=\"action-input-arrow  bc-r\">\n                                    <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\n                                        <i class=\"fas fa-angle-up\" *ngIf=\"show_itens\"></i>\n                                        <i class=\"fas fa-angle-down\" *ngIf=\"!show_itens\"></i>\n                                    </button>\n                                </td>\n                                \n                            </tr>\n                        </table> \n                    </td>\n                    <td style=\"width: 45px;\" *ngIf=\"useBtnAdd\">\n                        <table>\n                            <tr>\n                                <td class=\"action-input\" *ngIf=\"!disabled\">\n                                    <ng-container *ngIf=\"!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                                    </ng-container>\n                                    <ng-container *ngIf=\"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                                    </ng-container>\n                                </td>\n                            </tr>\n                        </table>\n                    </td>\n                </tr>\n            </table>\n\n        </div>\n        \n        <!-- <pre>\n            {{ items | json }}\n        </pre> -->\n\n    </form> \n\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        \n\n        <div class=\"line-search\">\n            <table class=\"box-search\" *ngIf=\"items && (items).length > 5\">\n              <tr>\n      \n                <td class=\"area-input\">\n                  <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" >            \n                </td>\n      \n                <td class=\"area-icon\">\n                  <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\n                  <button class=\"box-action\" type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\n                </td>\n                \n              </tr>\n            </table>\n        </div>\n\n        <div class=\"area-options\" id=\"{{ id }}-options\">\n            <ng-container *ngFor=\"let item of items; let i = index\">\n            \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            </ng-container>\n        </div>\n\n        <div class=\"mt-5\" *ngIf=\"items && (items).length > 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>", styles: ["table{border-collapse:collapse}td,th{padding:0;margin:0}::placeholder{font-style:italic;color:#999;text-transform:none!important}.box-input{border:none!important;border-radius:5px 0 0 5px}.box-input .input{background-color:#fff;border-radius:5px 0 0 5px}.box-input .ng-invalid{border-color:transparent!important}.bc-l{background-color:#fff;border-left:1px solid var(--tc-gray-300)}.bc-r{background-color:#fff;border-right:1px solid var(--tc-gray-300)}.box-input-data-list{background-color:#fff;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:#fff}.group-input-action input{height:40px;border:none}.group-input-action td{height:40px;border-top:1px solid var(--tc-gray-300);border-bottom:1px solid var(--tc-gray-300);background-color:transparent!important}.count-list{border:none!important;width:70px;text-align:center;background:#fff}.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:#666}.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(--tc-primary)!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:#ededed;border-radius:4px;width:100%}.box-itens-selected .box-label{position:relative;display:inline-block;height:35px;min-width:60px;color:var(--tc-primary);padding:8px 24px 10px 15px;border:1px solid var(--tc-primary);border-radius:5px;margin:2px;background-color:var(--white);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(--tc-primary);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(--red)}.to-hide{display:none}.dropdown-toggle:after{display:none!important}.tc-dropdown{min-width:300px;border-radius:.25rem;border:1px solid var(--tc-gray-300);padding:0 5px;position:relative}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid var(--tc-gray-300);position:absolute;z-index:1;background-color:#f9f9f9}.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:#666}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:#999;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.line-search .box-search td.area-input 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(--tc-gray-300);padding:10px}.btn-remove-all{text-align:right}.btn-remove-all button{background-color:transparent;border:none;color:#dd5353;cursor:pointer}.btn-remove-all button:hover{color:red!important}.info-no-value{color:#dd5353}.area-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", 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, CUSTOM_INPUT_VALIDATORS], ngImport: i0, template: "<div *ngIf=\"show_component\" class=\"tcloud-ui-multiples-values tc-dropdown\" id=\"area-{{ id }}\" [class.tc-parent-validation]=\"use_validation_required\">\n\n\n    <form #_formulario=\"ngForm\">\n\n        <!-- {{ input_items }} -->\n\n        <div class=\"dropdown-toggle\" id=\"{{id}}\" [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"'false'\">\n\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                                    <ng-container *ngIf=\"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                                                <ng-container *ngFor=\"let item of listItems\">                                                    \n                                                    <tcloud-ui-data-list-option [value]=\"'' + item.value\" [disabled]=\"checkIsDisabled(item)\">{{ item?.description }}</tcloud-ui-data-list-option>\n                                                </ng-container>\n                                            </tcloud-ui-data-list>\n                                        </div>\n                                    </ng-container>\n            \n                                    <ng-container *ngIf=\"!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                                        \n                                        </div>\n                                    </ng-container>\n                                </td>\n                                <td class=\"count-list\" *ngIf=\"(items && items.length > 0)\">\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                                <td class=\"count-list\" *ngIf=\"!items || (items && items.length === 0)\">\n                                    <div class=\"input\"><input type=\"text\" class=\"info-no-value\" value=\"Vazio\" disabled readonly></div>                       \n                                </td>\n                                <td class=\"action-input-arrow  bc-r\">\n                                    <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\n                                        <i class=\"fas fa-angle-up\" *ngIf=\"show_itens\"></i>\n                                        <i class=\"fas fa-angle-down\" *ngIf=\"!show_itens\"></i>\n                                    </button>\n                                </td>\n                                \n                            </tr>\n                        </table> \n                    </td>\n                    <td style=\"width: 45px;\" *ngIf=\"useBtnAdd\">\n                        <table>\n                            <tr>\n                                <td class=\"action-input\" *ngIf=\"!disabled\">\n                                    <ng-container *ngIf=\"!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                                    </ng-container>\n                                    <ng-container *ngIf=\"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                                    </ng-container>\n                                </td>\n                            </tr>\n                        </table>\n                    </td>\n                </tr>\n            </table>\n\n        </div>\n        \n        <!-- <pre>\n            {{ items | json }}\n        </pre> -->\n\n    </form> \n\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        \n\n        <div class=\"line-search\">\n            <table class=\"box-search\" *ngIf=\"items && (items).length > 5\">\n              <tr>\n      \n                <td class=\"area-input\">\n                  <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" >            \n                </td>\n      \n                <td class=\"area-icon\">\n                  <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\n                  <button class=\"box-action\" type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\n                </td>\n                \n              </tr>\n            </table>\n        </div>\n\n        <div class=\"area-options\" id=\"{{ id }}-options\">\n            <ng-container *ngFor=\"let item of items; let i = index\">\n            \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            </ng-container>\n        </div>\n\n        <div class=\"mt-5\" *ngIf=\"items && (items).length > 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>", styles: ["table{border-collapse:collapse}td,th{padding:0;margin:0}::placeholder{font-style:italic;color:#999;text-transform:none!important}.box-input{border:none!important;border-radius:5px 0 0 5px}.box-input .input{background-color:#fff;border-radius:5px 0 0 5px}.box-input .ng-invalid{border-color:transparent!important}.bc-l{background-color:#fff;border-left:1px solid var(--tc-gray-300)}.bc-r{background-color:#fff;border-right:1px solid var(--tc-gray-300)}.box-input-data-list{background-color:#fff;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:#fff}.group-input-action input{height:40px;border:none}.group-input-action td{height:40px;border-top:1px solid var(--tc-gray-300);border-bottom:1px solid var(--tc-gray-300);background-color:transparent!important}.count-list{border:none!important;width:70px;text-align:center;background:#fff}.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:#666}.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(--tc-primary)!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:#ededed;border-radius:4px;width:100%}.box-itens-selected .box-label{position:relative;display:inline-block;height:35px;min-width:60px;color:var(--tc-primary);padding:8px 24px 10px 15px;border:1px solid var(--tc-primary);border-radius:5px;margin:2px;background-color:var(--white);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(--tc-primary);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(--red)}.to-hide{display:none}.dropdown-toggle:after{display:none!important}.tc-dropdown{min-width:300px;border-radius:.25rem;border:1px solid var(--tc-gray-300);padding:0 5px;position:relative}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid var(--tc-gray-300);position:absolute;z-index:1;background-color:#f9f9f9}.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:#666}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:#999;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.line-search .box-search td.area-input 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(--tc-gray-300);padding:10px}.btn-remove-all{text-align:right}.btn-remove-all button{background-color:transparent;border:none;color:#dd5353;cursor:pointer}.btn-remove-all button:hover{color:red!important}.info-no-value{color:#dd5353}.area-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "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: "19.2.20", ngImport: i0, type: TCloudUiMultiplesValuesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-multiples-values', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, CUSTOM_INPUT_VALIDATORS], standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, TCloudUiDataListComponent, TCloudUiDataListOptionComponent], template: "<div *ngIf=\"show_component\" class=\"tcloud-ui-multiples-values tc-dropdown\" id=\"area-{{ id }}\" [class.tc-parent-validation]=\"use_validation_required\">\n\n\n    <form #_formulario=\"ngForm\">\n\n        <!-- {{ input_items }} -->\n\n        <div class=\"dropdown-toggle\" id=\"{{id}}\" [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"'false'\">\n\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                                    <ng-container *ngIf=\"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                                                <ng-container *ngFor=\"let item of listItems\">                                                    \n                                                    <tcloud-ui-data-list-option [value]=\"'' + item.value\" [disabled]=\"checkIsDisabled(item)\">{{ item?.description }}</tcloud-ui-data-list-option>\n                                                </ng-container>\n                                            </tcloud-ui-data-list>\n                                        </div>\n                                    </ng-container>\n            \n                                    <ng-container *ngIf=\"!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                                        \n                                        </div>\n                                    </ng-container>\n                                </td>\n                                <td class=\"count-list\" *ngIf=\"(items && items.length > 0)\">\n                                    <div class=\"input\">\n                                        <input type=\"text\" value=\"{{ items.length }} {{ (items.length > 1) ? 'registros' : 'registro' }}\" disabled readonly>                            \n                                    </div>\n                                </td>\n                                <td class=\"count-list\" *ngIf=\"!items || (items && items.length === 0)\">\n                                    <div class=\"input\"><input type=\"text\" class=\"info-no-value\" value=\"Vazio\" disabled readonly></div>                       \n                                </td>\n                                <td class=\"action-input-arrow  bc-r\">\n                                    <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\n                                        <i class=\"fas fa-angle-up\" *ngIf=\"show_itens\"></i>\n                                        <i class=\"fas fa-angle-down\" *ngIf=\"!show_itens\"></i>\n                                    </button>\n                                </td>\n                                \n                            </tr>\n                        </table> \n                    </td>\n                    <td style=\"width: 45px;\" *ngIf=\"useBtnAdd\">\n                        <table>\n                            <tr>\n                                <td class=\"action-input\" *ngIf=\"!disabled\">\n                                    <ng-container *ngIf=\"!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                                    </ng-container>\n                                    <ng-container *ngIf=\"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                                    </ng-container>\n                                </td>\n                            </tr>\n                        </table>\n                    </td>\n                </tr>\n            </table>\n\n        </div>\n        \n        <!-- <pre>\n            {{ items | json }}\n        </pre> -->\n\n    </form> \n\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        \n\n        <div class=\"line-search\">\n            <table class=\"box-search\" *ngIf=\"items && (items).length > 5\">\n              <tr>\n      \n                <td class=\"area-input\">\n                  <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" >            \n                </td>\n      \n                <td class=\"area-icon\">\n                  <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\n                  <button class=\"box-action\" type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\n                </td>\n                \n              </tr>\n            </table>\n        </div>\n\n        <div class=\"area-options\" id=\"{{ id }}-options\">\n            <ng-container *ngFor=\"let item of items; let i = index\">\n            \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            </ng-container>\n        </div>\n\n        <div class=\"mt-5\" *ngIf=\"items && (items).length > 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>", styles: ["table{border-collapse:collapse}td,th{padding:0;margin:0}::placeholder{font-style:italic;color:#999;text-transform:none!important}.box-input{border:none!important;border-radius:5px 0 0 5px}.box-input .input{background-color:#fff;border-radius:5px 0 0 5px}.box-input .ng-invalid{border-color:transparent!important}.bc-l{background-color:#fff;border-left:1px solid var(--tc-gray-300)}.bc-r{background-color:#fff;border-right:1px solid var(--tc-gray-300)}.box-input-data-list{background-color:#fff;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:#fff}.group-input-action input{height:40px;border:none}.group-input-action td{height:40px;border-top:1px solid var(--tc-gray-300);border-bottom:1px solid var(--tc-gray-300);background-color:transparent!important}.count-list{border:none!important;width:70px;text-align:center;background:#fff}.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:#666}.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(--tc-primary)!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:#ededed;border-radius:4px;width:100%}.box-itens-selected .box-label{position:relative;display:inline-block;height:35px;min-width:60px;color:var(--tc-primary);padding:8px 24px 10px 15px;border:1px solid var(--tc-primary);border-radius:5px;margin:2px;background-color:var(--white);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(--tc-primary);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(--red)}.to-hide{display:none}.dropdown-toggle:after{display:none!important}.tc-dropdown{min-width:300px;border-radius:.25rem;border:1px solid var(--tc-gray-300);padding:0 5px;position:relative}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid var(--tc-gray-300);position:absolute;z-index:1;background-color:#f9f9f9}.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:#666}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:#999;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.line-search .box-search td.area-input 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(--tc-gray-300);padding:10px}.btn-remove-all{text-align:right}.btn-remove-all button{background-color:transparent;border:none;color:#dd5353;cursor:pointer}.btn-remove-all button:hover{color:red!important}.info-no-value{color:#dd5353}.area-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"] }]
+            args: [{ selector: 'tcloud-ui-multiples-values', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, CUSTOM_INPUT_VALIDATORS], standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, TCloudUiDataListComponent, TCloudUiDataListOptionComponent, I18nTranslatePipe], template: "<div *ngIf=\"show_component\" class=\"tcloud-ui-multiples-values tc-dropdown\" id=\"area-{{ id }}\" [class.tc-parent-validation]=\"use_validation_required\">\n\n\n    <form #_formulario=\"ngForm\">\n\n        <!-- {{ input_items }} -->\n\n        <div class=\"dropdown-toggle\" id=\"{{id}}\" [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"'false'\">\n\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                                    <ng-container *ngIf=\"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                                                <ng-container *ngFor=\"let item of listItems\">                                                    \n                                                    <tcloud-ui-data-list-option [value]=\"'' + item.value\" [disabled]=\"checkIsDisabled(item)\">{{ item?.description }}</tcloud-ui-data-list-option>\n                                                </ng-container>\n                                            </tcloud-ui-data-list>\n                                        </div>\n                                    </ng-container>\n            \n                                    <ng-container *ngIf=\"!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                                        \n                                        </div>\n                                    </ng-container>\n                                </td>\n                                <td class=\"count-list\" *ngIf=\"(items && items.length > 0)\">\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                                <td class=\"count-list\" *ngIf=\"!items || (items && items.length === 0)\">\n                                    <div class=\"input\"><input type=\"text\" class=\"info-no-value\" value=\"Vazio\" disabled readonly></div>                       \n                                </td>\n                                <td class=\"action-input-arrow  bc-r\">\n                                    <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\n                                        <i class=\"fas fa-angle-up\" *ngIf=\"show_itens\"></i>\n                                        <i class=\"fas fa-angle-down\" *ngIf=\"!show_itens\"></i>\n                                    </button>\n                                </td>\n                                \n                            </tr>\n                        </table> \n                    </td>\n                    <td style=\"width: 45px;\" *ngIf=\"useBtnAdd\">\n                        <table>\n                            <tr>\n                                <td class=\"action-input\" *ngIf=\"!disabled\">\n                                    <ng-container *ngIf=\"!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                                    </ng-container>\n                                    <ng-container *ngIf=\"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                                    </ng-container>\n                                </td>\n                            </tr>\n                        </table>\n                    </td>\n                </tr>\n            </table>\n\n        </div>\n        \n        <!-- <pre>\n            {{ items | json }}\n        </pre> -->\n\n    </form> \n\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        \n\n        <div class=\"line-search\">\n            <table class=\"box-search\" *ngIf=\"items && (items).length > 5\">\n              <tr>\n      \n                <td class=\"area-input\">\n                  <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" >            \n                </td>\n      \n                <td class=\"area-icon\">\n                  <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\n                  <button class=\"box-action\" type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\n                </td>\n                \n              </tr>\n            </table>\n        </div>\n\n        <div class=\"area-options\" id=\"{{ id }}-options\">\n            <ng-container *ngFor=\"let item of items; let i = index\">\n            \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            </ng-container>\n        </div>\n\n        <div class=\"mt-5\" *ngIf=\"items && (items).length > 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>", styles: ["table{border-collapse:collapse}td,th{padding:0;margin:0}::placeholder{font-style:italic;color:#999;text-transform:none!important}.box-input{border:none!important;border-radius:5px 0 0 5px}.box-input .input{background-color:#fff;border-radius:5px 0 0 5px}.box-input .ng-invalid{border-color:transparent!important}.bc-l{background-color:#fff;border-left:1px solid var(--tc-gray-300)}.bc-r{background-color:#fff;border-right:1px solid var(--tc-gray-300)}.box-input-data-list{background-color:#fff;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:#fff}.group-input-action input{height:40px;border:none}.group-input-action td{height:40px;border-top:1px solid var(--tc-gray-300);border-bottom:1px solid var(--tc-gray-300);background-color:transparent!important}.count-list{border:none!important;width:70px;text-align:center;background:#fff}.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:#666}.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(--tc-primary)!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:#ededed;border-radius:4px;width:100%}.box-itens-selected .box-label{position:relative;display:inline-block;height:35px;min-width:60px;color:var(--tc-primary);padding:8px 24px 10px 15px;border:1px solid var(--tc-primary);border-radius:5px;margin:2px;background-color:var(--white);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(--tc-primary);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(--red)}.to-hide{display:none}.dropdown-toggle:after{display:none!important}.tc-dropdown{min-width:300px;border-radius:.25rem;border:1px solid var(--tc-gray-300);padding:0 5px;position:relative}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid var(--tc-gray-300);position:absolute;z-index:1;background-color:#f9f9f9}.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:#666}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:#999;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.line-search .box-search td.area-input 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(--tc-gray-300);padding:10px}.btn-remove-all{text-align:right}.btn-remove-all button{background-color:transparent;border:none;color:#dd5353;cursor:pointer}.btn-remove-all button:hover{color:red!important}.info-no-value{color:#dd5353}.area-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"] }]
         }], ctorParameters: () => [], propDecorators: { listItems: [{
                 type: Input
             }], openValuesInChange: [{
@@ -5763,6 +5982,8 @@ var AcceptedFileType;
 })(AcceptedFileType || (AcceptedFileType = {}));
 class TCloudUiUploadAreaComponent {
     constructor() {
+        this._MESSAGE = `Arraste e solte imagens aqui<br>ou clique para selecionar`;
+        this.message = this._MESSAGE;
         this.isHovering = false;
         this.draggedIndex = null;
         // Array de objetos com informações das imagens
@@ -5786,6 +6007,7 @@ class TCloudUiUploadAreaComponent {
         // Progresso atual (0-100)
         this.currentProgress = 0;
         this.isLoading = false;
+        this.i18nService = inject(I18nService);
         this.previews = [];
     }
     // Imagens pré-carregadas (para modo de edição/visualização)
@@ -5794,6 +6016,11 @@ class TCloudUiUploadAreaComponent {
             return;
         this.loadPreloadedImages(images);
     }
+    ngOnInit() {
+        if (this.message === this._MESSAGE) {
+            this.message = this.i18nService.i18nTranslate('uploadArea.message', this._MESSAGE);
+        }
+    }
     onDragOver(event) {
         event.preventDefault();
         this.isHovering = true;
@@ -6112,14 +6339,16 @@ class TCloudUiUploadAreaComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiUploadAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: TCloudUiUploadAreaComponent, isStandalone: true, selector: "tcloud-ui-upload-area", inputs: { maxFiles: "maxFiles", acceptedFileTypes: "acceptedFileTypes", imageDimensions: "imageDimensions", showProgress: "showProgress", preloadedImages: "preloadedImages" }, outputs: { onChange: "onChange", filesSelected: "filesSelected", imagesReordered: "imagesReordered", imagesRemoved: "imagesRemoved", onError: "onError", onProgress: "onProgress" }, ngImport: i0, template: "<div\n  class=\"dropzone\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n  [class.hover]=\"isHovering\"\n  (click)=\"fileInput.click()\"\n>\n  <p>Arraste e solte imagens aqui<br>ou clique para selecionar</p>\n</div>\n\n<div *ngIf=\"showProgress && isLoading\" class=\"progress-container\">\n  <div class=\"progress-bar\">\n    <div class=\"progress-fill\" [style.width.%]=\"currentProgress\"></div>\n  </div>\n  <div class=\"progress-text\">{{ currentProgress }}%</div>\n</div>\n\n<div *ngIf=\"messageOnError !== ''\">{{ messageOnError }}</div>\n\n<input\n  #fileInput\n  type=\"file\"\n  accept=\"image/*\"\n  multiple\n  hidden\n  (change)=\"onFilesSelected($event)\"\n>\n\n<div class=\"mt-3 mb-2\">\n  <div class=\"previews\" (click)=\"$event.stopPropagation()\">\n    <div class=\"row\">\n      <ng-container *ngFor=\"let img of previews; let i = index\">\n        <div \n          class=\"col-3 image-preview-container\"\n          draggable=\"true\"\n          (dragstart)=\"onDragStart($event, i)\"\n          (dragover)=\"onDragOverImage($event)\"\n          (drop)=\"onDropImage($event, i)\"\n          (dragend)=\"onDragEnd()\"\n          (click)=\"$event.stopPropagation()\"\n          [class.dragging]=\"draggedIndex === i\"\n          [class.image-error]=\"hasImageError(i)\"\n        >\n          <button \n            class=\"btn-remove\" \n            (click)=\"removeImage($event, i)\"\n            title=\"Remover imagem\"\n          >\n            \u00D7\n          </button>\n          <img \n            *ngIf=\"!hasImageError(i)\" \n            [src]=\"img\" \n            width=\"150\" \n            class=\"preview-image\"\n            (error)=\"onImageError(i, $event)\"\n            (load)=\"onImageLoad(i)\"\n          >\n          <div \n            *ngIf=\"hasImageError(i)\" \n            class=\"image-error-placeholder\"\n          >\n            <span>\u26A0\uFE0F</span>\n            <p>Erro ao carregar</p>\n          </div>\n        </div>\n      </ng-container>\n    </div>    \n  </div>\n</div>\n", styles: [".dropzone{border:2px dashed #777;border-radius:10px;padding:40px;text-align:center;cursor:pointer;transition:.3s ease;color:#555;-webkit-user-select:none;user-select:none}.dropzone.hover{border-color:#1e88e5;background:#e3f2fd;color:#1565c0}.progress-container{margin:20px 0;padding:10px;background-color:#f5f5f5;border-radius:8px}.progress-bar{position:relative;width:100%;height:30px;background-color:#e0e0e0;border-radius:15px;overflow:hidden;box-shadow:inset 0 2px 4px #0000001a}.progress-fill{height:100%;background:linear-gradient(90deg,#1e88e5,#42a5f5);border-radius:15px;transition:width .3s ease;display:flex;align-items:center;justify-content:center;min-width:30px;position:relative}.progress-fill:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 1.5s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:600;font-size:14px;color:#333;text-shadow:0 1px 2px rgba(255,255,255,.8);z-index:1}.image-preview-container{position:relative;cursor:move;transition:all .2s ease;padding:10px;border:2px solid transparent;border-radius:8px}.image-preview-container:hover{border-color:#1e88e5;background-color:#f5f5f5}.image-preview-container:hover .btn-remove{opacity:1}.image-preview-container.dragging{opacity:.5;border-color:#1e88e5}.image-preview-container.image-error{border-color:#f44336;background-color:#ffebee}.image-preview-container.image-error:hover{border-color:#d32f2f}.btn-remove{position:absolute;top:15px;right:15px;width:28px;height:28px;border-radius:50%;border:none;background-color:#f44336e6;color:#fff;font-size:20px;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .2s ease;z-index:10;padding:0}.btn-remove:hover{background-color:#d32f2f;transform:scale(1.1)}.btn-remove:active{transform:scale(.95)}.preview-image{width:100%;height:auto;border-radius:4px;pointer-events:none}.image-error-placeholder{width:150px;height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#ffcdd2;border-radius:4px;color:#c62828;text-align:center}.image-error-placeholder span{font-size:40px;margin-bottom:8px}.image-error-placeholder p{margin:0;font-size:12px;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: TCloudUiUploadAreaComponent, isStandalone: true, selector: "tcloud-ui-upload-area", inputs: { message: "message", maxFiles: "maxFiles", acceptedFileTypes: "acceptedFileTypes", imageDimensions: "imageDimensions", showProgress: "showProgress", preloadedImages: "preloadedImages" }, outputs: { onChange: "onChange", filesSelected: "filesSelected", imagesReordered: "imagesReordered", imagesRemoved: "imagesRemoved", onError: "onError", onProgress: "onProgress" }, ngImport: i0, template: "<div\n  class=\"dropzone\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n  [class.hover]=\"isHovering\"\n  (click)=\"fileInput.click()\"\n>\n  <p [innerHTML]=\"message\"></p>\n</div>\n\n<div *ngIf=\"showProgress && isLoading\" class=\"progress-container\">\n  <div class=\"progress-bar\">\n    <div class=\"progress-fill\" [style.width.%]=\"currentProgress\"></div>\n  </div>\n  <div class=\"progress-text\">{{ currentProgress }}%</div>\n</div>\n\n<div *ngIf=\"messageOnError !== ''\">{{ messageOnError }}</div>\n\n<input\n  #fileInput\n  type=\"file\"\n  accept=\"image/*\"\n  multiple\n  hidden\n  (change)=\"onFilesSelected($event)\"\n>\n\n<div class=\"mt-3 mb-2\">\n  <div class=\"previews\" (click)=\"$event.stopPropagation()\">\n    <div class=\"row\">\n      <ng-container *ngFor=\"let img of previews; let i = index\">\n        <div \n          class=\"col-3 image-preview-container\"\n          draggable=\"true\"\n          (dragstart)=\"onDragStart($event, i)\"\n          (dragover)=\"onDragOverImage($event)\"\n          (drop)=\"onDropImage($event, i)\"\n          (dragend)=\"onDragEnd()\"\n          (click)=\"$event.stopPropagation()\"\n          [class.dragging]=\"draggedIndex === i\"\n          [class.image-error]=\"hasImageError(i)\"\n        >\n          <button \n            class=\"btn-remove\" \n            (click)=\"removeImage($event, i)\"\n            title=\"Remover imagem\"\n          >\n            \u00D7\n          </button>\n          <img \n            *ngIf=\"!hasImageError(i)\" \n            [src]=\"img\" \n            width=\"150\" \n            class=\"preview-image\"\n            (error)=\"onImageError(i, $event)\"\n            (load)=\"onImageLoad(i)\"\n          >\n          <div \n            *ngIf=\"hasImageError(i)\" \n            class=\"image-error-placeholder\"\n          >\n            <span>\u26A0\uFE0F</span>\n            <p>Erro ao carregar</p>\n          </div>\n        </div>\n      </ng-container>\n    </div>    \n  </div>\n</div>\n", styles: [".dropzone{border:2px dashed #777;border-radius:10px;padding:40px;text-align:center;cursor:pointer;transition:.3s ease;color:#555;-webkit-user-select:none;user-select:none}.dropzone.hover{border-color:#1e88e5;background:#e3f2fd;color:#1565c0}.progress-container{margin:20px 0;padding:10px;background-color:#f5f5f5;border-radius:8px}.progress-bar{position:relative;width:100%;height:30px;background-color:#e0e0e0;border-radius:15px;overflow:hidden;box-shadow:inset 0 2px 4px #0000001a}.progress-fill{height:100%;background:linear-gradient(90deg,#1e88e5,#42a5f5);border-radius:15px;transition:width .3s ease;display:flex;align-items:center;justify-content:center;min-width:30px;position:relative}.progress-fill:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 1.5s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:600;font-size:14px;color:#333;text-shadow:0 1px 2px rgba(255,255,255,.8);z-index:1}.image-preview-container{position:relative;cursor:move;transition:all .2s ease;padding:10px;border:2px solid transparent;border-radius:8px}.image-preview-container:hover{border-color:#1e88e5;background-color:#f5f5f5}.image-preview-container:hover .btn-remove{opacity:1}.image-preview-container.dragging{opacity:.5;border-color:#1e88e5}.image-preview-container.image-error{border-color:#f44336;background-color:#ffebee}.image-preview-container.image-error:hover{border-color:#d32f2f}.btn-remove{position:absolute;top:15px;right:15px;width:28px;height:28px;border-radius:50%;border:none;background-color:#f44336e6;color:#fff;font-size:20px;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .2s ease;z-index:10;padding:0}.btn-remove:hover{background-color:#d32f2f;transform:scale(1.1)}.btn-remove:active{transform:scale(.95)}.preview-image{width:100%;height:auto;border-radius:4px;pointer-events:none}.image-error-placeholder{width:150px;height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#ffcdd2;border-radius:4px;color:#c62828;text-align:center}.image-error-placeholder span{font-size:40px;margin-bottom:8px}.image-error-placeholder p{margin:0;font-size:12px;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiUploadAreaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tcloud-ui-upload-area', imports: [
                         CommonModule
-                    ], template: "<div\n  class=\"dropzone\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n  [class.hover]=\"isHovering\"\n  (click)=\"fileInput.click()\"\n>\n  <p>Arraste e solte imagens aqui<br>ou clique para selecionar</p>\n</div>\n\n<div *ngIf=\"showProgress && isLoading\" class=\"progress-container\">\n  <div class=\"progress-bar\">\n    <div class=\"progress-fill\" [style.width.%]=\"currentProgress\"></div>\n  </div>\n  <div class=\"progress-text\">{{ currentProgress }}%</div>\n</div>\n\n<div *ngIf=\"messageOnError !== ''\">{{ messageOnError }}</div>\n\n<input\n  #fileInput\n  type=\"file\"\n  accept=\"image/*\"\n  multiple\n  hidden\n  (change)=\"onFilesSelected($event)\"\n>\n\n<div class=\"mt-3 mb-2\">\n  <div class=\"previews\" (click)=\"$event.stopPropagation()\">\n    <div class=\"row\">\n      <ng-container *ngFor=\"let img of previews; let i = index\">\n        <div \n          class=\"col-3 image-preview-container\"\n          draggable=\"true\"\n          (dragstart)=\"onDragStart($event, i)\"\n          (dragover)=\"onDragOverImage($event)\"\n          (drop)=\"onDropImage($event, i)\"\n          (dragend)=\"onDragEnd()\"\n          (click)=\"$event.stopPropagation()\"\n          [class.dragging]=\"draggedIndex === i\"\n          [class.image-error]=\"hasImageError(i)\"\n        >\n          <button \n            class=\"btn-remove\" \n            (click)=\"removeImage($event, i)\"\n            title=\"Remover imagem\"\n          >\n            \u00D7\n          </button>\n          <img \n            *ngIf=\"!hasImageError(i)\" \n            [src]=\"img\" \n            width=\"150\" \n            class=\"preview-image\"\n            (error)=\"onImageError(i, $event)\"\n            (load)=\"onImageLoad(i)\"\n          >\n          <div \n            *ngIf=\"hasImageError(i)\" \n            class=\"image-error-placeholder\"\n          >\n            <span>\u26A0\uFE0F</span>\n            <p>Erro ao carregar</p>\n          </div>\n        </div>\n      </ng-container>\n    </div>    \n  </div>\n</div>\n", styles: [".dropzone{border:2px dashed #777;border-radius:10px;padding:40px;text-align:center;cursor:pointer;transition:.3s ease;color:#555;-webkit-user-select:none;user-select:none}.dropzone.hover{border-color:#1e88e5;background:#e3f2fd;color:#1565c0}.progress-container{margin:20px 0;padding:10px;background-color:#f5f5f5;border-radius:8px}.progress-bar{position:relative;width:100%;height:30px;background-color:#e0e0e0;border-radius:15px;overflow:hidden;box-shadow:inset 0 2px 4px #0000001a}.progress-fill{height:100%;background:linear-gradient(90deg,#1e88e5,#42a5f5);border-radius:15px;transition:width .3s ease;display:flex;align-items:center;justify-content:center;min-width:30px;position:relative}.progress-fill:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 1.5s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:600;font-size:14px;color:#333;text-shadow:0 1px 2px rgba(255,255,255,.8);z-index:1}.image-preview-container{position:relative;cursor:move;transition:all .2s ease;padding:10px;border:2px solid transparent;border-radius:8px}.image-preview-container:hover{border-color:#1e88e5;background-color:#f5f5f5}.image-preview-container:hover .btn-remove{opacity:1}.image-preview-container.dragging{opacity:.5;border-color:#1e88e5}.image-preview-container.image-error{border-color:#f44336;background-color:#ffebee}.image-preview-container.image-error:hover{border-color:#d32f2f}.btn-remove{position:absolute;top:15px;right:15px;width:28px;height:28px;border-radius:50%;border:none;background-color:#f44336e6;color:#fff;font-size:20px;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .2s ease;z-index:10;padding:0}.btn-remove:hover{background-color:#d32f2f;transform:scale(1.1)}.btn-remove:active{transform:scale(.95)}.preview-image{width:100%;height:auto;border-radius:4px;pointer-events:none}.image-error-placeholder{width:150px;height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#ffcdd2;border-radius:4px;color:#c62828;text-align:center}.image-error-placeholder span{font-size:40px;margin-bottom:8px}.image-error-placeholder p{margin:0;font-size:12px;font-weight:500}\n"] }]
-        }], propDecorators: { onChange: [{
+                    ], template: "<div\n  class=\"dropzone\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n  [class.hover]=\"isHovering\"\n  (click)=\"fileInput.click()\"\n>\n  <p [innerHTML]=\"message\"></p>\n</div>\n\n<div *ngIf=\"showProgress && isLoading\" class=\"progress-container\">\n  <div class=\"progress-bar\">\n    <div class=\"progress-fill\" [style.width.%]=\"currentProgress\"></div>\n  </div>\n  <div class=\"progress-text\">{{ currentProgress }}%</div>\n</div>\n\n<div *ngIf=\"messageOnError !== ''\">{{ messageOnError }}</div>\n\n<input\n  #fileInput\n  type=\"file\"\n  accept=\"image/*\"\n  multiple\n  hidden\n  (change)=\"onFilesSelected($event)\"\n>\n\n<div class=\"mt-3 mb-2\">\n  <div class=\"previews\" (click)=\"$event.stopPropagation()\">\n    <div class=\"row\">\n      <ng-container *ngFor=\"let img of previews; let i = index\">\n        <div \n          class=\"col-3 image-preview-container\"\n          draggable=\"true\"\n          (dragstart)=\"onDragStart($event, i)\"\n          (dragover)=\"onDragOverImage($event)\"\n          (drop)=\"onDropImage($event, i)\"\n          (dragend)=\"onDragEnd()\"\n          (click)=\"$event.stopPropagation()\"\n          [class.dragging]=\"draggedIndex === i\"\n          [class.image-error]=\"hasImageError(i)\"\n        >\n          <button \n            class=\"btn-remove\" \n            (click)=\"removeImage($event, i)\"\n            title=\"Remover imagem\"\n          >\n            \u00D7\n          </button>\n          <img \n            *ngIf=\"!hasImageError(i)\" \n            [src]=\"img\" \n            width=\"150\" \n            class=\"preview-image\"\n            (error)=\"onImageError(i, $event)\"\n            (load)=\"onImageLoad(i)\"\n          >\n          <div \n            *ngIf=\"hasImageError(i)\" \n            class=\"image-error-placeholder\"\n          >\n            <span>\u26A0\uFE0F</span>\n            <p>Erro ao carregar</p>\n          </div>\n        </div>\n      </ng-container>\n    </div>    \n  </div>\n</div>\n", styles: [".dropzone{border:2px dashed #777;border-radius:10px;padding:40px;text-align:center;cursor:pointer;transition:.3s ease;color:#555;-webkit-user-select:none;user-select:none}.dropzone.hover{border-color:#1e88e5;background:#e3f2fd;color:#1565c0}.progress-container{margin:20px 0;padding:10px;background-color:#f5f5f5;border-radius:8px}.progress-bar{position:relative;width:100%;height:30px;background-color:#e0e0e0;border-radius:15px;overflow:hidden;box-shadow:inset 0 2px 4px #0000001a}.progress-fill{height:100%;background:linear-gradient(90deg,#1e88e5,#42a5f5);border-radius:15px;transition:width .3s ease;display:flex;align-items:center;justify-content:center;min-width:30px;position:relative}.progress-fill:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 1.5s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:600;font-size:14px;color:#333;text-shadow:0 1px 2px rgba(255,255,255,.8);z-index:1}.image-preview-container{position:relative;cursor:move;transition:all .2s ease;padding:10px;border:2px solid transparent;border-radius:8px}.image-preview-container:hover{border-color:#1e88e5;background-color:#f5f5f5}.image-preview-container:hover .btn-remove{opacity:1}.image-preview-container.dragging{opacity:.5;border-color:#1e88e5}.image-preview-container.image-error{border-color:#f44336;background-color:#ffebee}.image-preview-container.image-error:hover{border-color:#d32f2f}.btn-remove{position:absolute;top:15px;right:15px;width:28px;height:28px;border-radius:50%;border:none;background-color:#f44336e6;color:#fff;font-size:20px;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .2s ease;z-index:10;padding:0}.btn-remove:hover{background-color:#d32f2f;transform:scale(1.1)}.btn-remove:active{transform:scale(.95)}.preview-image{width:100%;height:auto;border-radius:4px;pointer-events:none}.image-error-placeholder{width:150px;height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#ffcdd2;border-radius:4px;color:#c62828;text-align:center}.image-error-placeholder span{font-size:40px;margin-bottom:8px}.image-error-placeholder p{margin:0;font-size:12px;font-weight:500}\n"] }]
+        }], propDecorators: { message: [{
+                type: Input
+            }], onChange: [{
                 type: Output
             }], filesSelected: [{
                 type: Output
@@ -8754,6 +8983,9 @@ class TCloudUiModule {
         if (config?.services?.layoutService) {
             providers.push({ provide: TCLOUD_UI_LAYOUT_SERVICE, useClass: config.services.layoutService });
         }
+        if (config?.services?.localeService) {
+            providers.push({ provide: TCLOUD_UI_LOCALE_SERVICE, useClass: config.services.localeService });
+        }
         if (config?.services?.viewportService) {
             providers.push({ provide: TCLOUD_UI_VIEWPORT_SERVICE, useClass: config.services.viewportService });
         }
@@ -9073,6 +9305,9 @@ function provideTCloudUi(config) {
     if (config?.services?.layoutService) {
         providers.push({ provide: TCLOUD_UI_LAYOUT_SERVICE, useClass: config.services.layoutService });
     }
+    if (config?.services?.localeService) {
+        providers.push({ provide: TCLOUD_UI_LOCALE_SERVICE, useClass: config.services.localeService });
+    }
     if (config?.services?.viewportService) {
         providers.push({ provide: TCLOUD_UI_VIEWPORT_SERVICE, useClass: config.services.viewportService });
     }
@@ -10958,5 +11193,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AcceptedFileType, BytesPipe, CNPJPipe, CPFPipe, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1 as CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, DateBRPipe, DropdownGroupedSize, DropdownMultiSize$1 as DropdownMultiSize, DropdownSize$1 as DropdownSize, MonthNamePipe, MultiLevelDropdownSize, ProductActionPipe, ProgressStatusBarGradientStatus, RespectivePipe, StatusInfoPipe, TCCondition, TCFiltersType, TCLOUD_UI_CONFIG, TCLOUD_UI_LAYOUT_SERVICE, TCLOUD_UI_USER_SERVICE, TCLOUD_UI_VIEWPORT_SERVICE, TCloudUiAccordionBodyComponent, TCloudUiAccordionComponent, TCloudUiAccordionTitleComponent, TCloudUiAlertBannerComponent, TCloudUiAlignDirective, TCloudUiBreadcrumbComponent, TCloudUiBreadcrumbService, TCloudUiButtonDirective, TCloudUiCalendarComponent, TCloudUiCardAccordionComponent, TCloudUiCardComponent, TCloudUiCardTitleComponent, TCloudUiCheckAccessDirective, TCloudUiCheckAccessService, TCloudUiCheckboxDirective, TCloudUiChoiceIssuesComponent, TCloudUiContainerColComponent, TCloudUiContainerComponent, TCloudUiContainerContentComponent, TCloudUiCubesComponent, TCloudUiCurrencyDirective, TCloudUiDataListComponent, TCloudUiDataListOptionComponent, TCloudUiDatepickerComponent, TCloudUiDatepickerTimeComponent, TCloudUiDigitOnlyDirective, TCloudUiDropdownComponent, TCloudUiDropdownMultiComponent, TCloudUiElCopyDirective, TCloudUiEmptyContentComponent, TCloudUiFaqComponent, TCloudUiFilterBarComponent, TCloudUiFiltersComponent, TCloudUiFormDirective, TCloudUiHighLightDirective, TCloudUiHoverParentDirective, TCloudUiIconButtonDirective, TCloudUiInputContainerComponent, TCloudUiInputPasswordComponent, TCloudUiInputSearchComponent, TCloudUiIpMaskDirective, TCloudUiLabelTokenComponent, TCloudUiLegendComponent, TCloudUiLineStepCircleComponent, TCloudUiLineStepTitleComponent, TCloudUiLinhaLogoComponent, TCloudUiLoadingComponent, TCloudUiLoadingTransitionsService, TCloudUiMessageComponent, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModule, TCloudUiMultiInputComponent, TCloudUiMultiSelectComponent, TCloudUiMultiplesValuesComponent, TCloudUiNgCheckAccessDirective, TCloudUiNgFeatureFlagsDirective, TCloudUiNotFoundComponent, TCloudUiNumberStepComponent, TCloudUiPaginationComponent, TCloudUiPaginationPipe, TCloudUiProgressBarComponent, TCloudUiRadioDirective, TCloudUiRangeDateComponent, TCloudUiReorderItemsComponent, TCloudUiScrollBoxComponent, TCloudUiSearchBarComponent, TCloudUiSearchInObjectService, TCloudUiSearchInputComponent, TCloudUiSkeletonLoadingComponent, TCloudUiSkeletonLoadingComponentStyle, TCloudUiSlideToggleDirective, TCloudUiSubNavbarComponent, TCloudUiSubNavbarGroupComponent, TCloudUiSubNavbarItemComponent, TCloudUiTabContentComponent, TCloudUiTabGroupComponent, TCloudUiTabHeadComponent, TCloudUiTabItemComponent, TCloudUiTabMenuComponent, TCloudUiTabSubtitleComponent, TCloudUiTabTitleComponent, TCloudUiTableComponent, TCloudUiTagComponent, TCloudUiToastComponent, TCloudUiTooltipDirective, TCloudUiUploadAreaComponent, TCloudUiWelcomeComponent, TCloudUiWizardStepsComponent, TagColorsEnum, TcRevButtonDirective, TcRevCalendarComponent, TcRevCardAccordionComponent, TcRevCardComponent, TcRevCardTitleComponent, TcRevCheckboxDirective, TcRevComponentsLibModule, TcRevDropdownComponent, TcRevDropdownGroupedComponent, TcRevDropdownMultiComponent, TcRevDropdownMultiLevelComponent, TcRevEmptyContentComponent, TcRevFaqComponent, TcRevIconButtonDirective, TcRevInputContainerComponent, TcRevInputDirective, TcRevLoadingComponent, TcRevMessageComponent, TcRevMultiInputComponent, TcRevPaginationComponent, TcRevProgressStatusBarComponent, TcRevRadioDirective, TcRevSearchInputComponent, TcRevSideDrawerComponent, TcRevSkeletonLoadingComponent, TcRevSkeletonLoadingComponentStyle, TcRevSlideToggleDirective, TcRevSmallLoadingComponent, TcRevSmallLoadingComponentStyle, TcRevSubNavbarComponent, TcRevSubNavbarItemComponent, TcRevTabGroupComponent, TcRevTabItemComponent, TcRevTagComponent, TcRevToastComponent, TcRevTooltipDirective, TcRevWizardStepsComponent, ToTextPipe, TopologyEnvironmentPipe, TopologyProductPipe, TopologyRegionPipe, TopologyStatusPipe, echartBarConfig, isTextEllipsed, provideTCloudUi };
+export { AcceptedFileType, BytesPipe, CNPJPipe, CPFPipe, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1 as CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, DateBRPipe, DropdownGroupedSize, DropdownMultiSize$1 as DropdownMultiSize, DropdownSize$1 as DropdownSize, MonthNamePipe, MultiLevelDropdownSize, ProductActionPipe, ProgressStatusBarGradientStatus, RespectivePipe, StatusInfoPipe, TCCondition, TCFiltersType, TCLOUD_UI_CONFIG, TCLOUD_UI_LAYOUT_SERVICE, TCLOUD_UI_LOCALE_SERVICE, TCLOUD_UI_USER_SERVICE, TCLOUD_UI_VIEWPORT_SERVICE, TCloudUiAccordionBodyComponent, TCloudUiAccordionComponent, TCloudUiAccordionTitleComponent, TCloudUiAlertBannerComponent, TCloudUiAlignDirective, TCloudUiBreadcrumbComponent, TCloudUiBreadcrumbService, TCloudUiButtonDirective, TCloudUiCalendarComponent, TCloudUiCardAccordionComponent, TCloudUiCardComponent, TCloudUiCardTitleComponent, TCloudUiCheckAccessDirective, TCloudUiCheckAccessService, TCloudUiCheckboxDirective, TCloudUiChoiceIssuesComponent, TCloudUiContainerColComponent, TCloudUiContainerComponent, TCloudUiContainerContentComponent, TCloudUiCubesComponent, TCloudUiCurrencyDirective, TCloudUiDataListComponent, TCloudUiDataListOptionComponent, TCloudUiDatepickerComponent, TCloudUiDatepickerTimeComponent, TCloudUiDigitOnlyDirective, TCloudUiDropdownComponent, TCloudUiDropdownMultiComponent, TCloudUiElCopyDirective, TCloudUiEmptyContentComponent, TCloudUiFaqComponent, TCloudUiFilterBarComponent, TCloudUiFiltersComponent, TCloudUiFormDirective, TCloudUiHighLightDirective, TCloudUiHoverParentDirective, TCloudUiIconButtonDirective, TCloudUiInputContainerComponent, TCloudUiInputPasswordComponent, TCloudUiInputSearchComponent, TCloudUiIpMaskDirective, TCloudUiLabelTokenComponent, TCloudUiLegendComponent, TCloudUiLineStepCircleComponent, TCloudUiLineStepTitleComponent, TCloudUiLinhaLogoComponent, TCloudUiLoadingComponent, TCloudUiLoadingTransitionsService, TCloudUiMessageComponent, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModule, TCloudUiMultiInputComponent, TCloudUiMultiSelectComponent, TCloudUiMultiplesValuesComponent, TCloudUiNgCheckAccessDirective, TCloudUiNgFeatureFlagsDirective, TCloudUiNotFoundComponent, TCloudUiNumberStepComponent, TCloudUiPaginationComponent, TCloudUiPaginationPipe, TCloudUiProgressBarComponent, TCloudUiRadioDirective, TCloudUiRangeDateComponent, TCloudUiReorderItemsComponent, TCloudUiScrollBoxComponent, TCloudUiSearchBarComponent, TCloudUiSearchInObjectService, TCloudUiSearchInputComponent, TCloudUiSkeletonLoadingComponent, TCloudUiSkeletonLoadingComponentStyle, TCloudUiSlideToggleDirective, TCloudUiSubNavbarComponent, TCloudUiSubNavbarGroupComponent, TCloudUiSubNavbarItemComponent, TCloudUiTabContentComponent, TCloudUiTabGroupComponent, TCloudUiTabHeadComponent, TCloudUiTabItemComponent, TCloudUiTabMenuComponent, TCloudUiTabSubtitleComponent, TCloudUiTabTitleComponent, TCloudUiTableComponent, TCloudUiTagComponent, TCloudUiToastComponent, TCloudUiTooltipDirective, TCloudUiUploadAreaComponent, TCloudUiWelcomeComponent, TCloudUiWizardStepsComponent, TagColorsEnum, TcRevButtonDirective, TcRevCalendarComponent, TcRevCardAccordionComponent, TcRevCardComponent, TcRevCardTitleComponent, TcRevCheckboxDirective, TcRevComponentsLibModule, TcRevDropdownComponent, TcRevDropdownGroupedComponent, TcRevDropdownMultiComponent, TcRevDropdownMultiLevelComponent, TcRevEmptyContentComponent, TcRevFaqComponent, TcRevIconButtonDirective, TcRevInputContainerComponent, TcRevInputDirective, TcRevLoadingComponent, TcRevMessageComponent, TcRevMultiInputComponent, TcRevPaginationComponent, TcRevProgressStatusBarComponent, TcRevRadioDirective, TcRevSearchInputComponent, TcRevSideDrawerComponent, TcRevSkeletonLoadingComponent, TcRevSkeletonLoadingComponentStyle, TcRevSlideToggleDirective, TcRevSmallLoadingComponent, TcRevSmallLoadingComponentStyle, TcRevSubNavbarComponent, TcRevSubNavbarItemComponent, TcRevTabGroupComponent, TcRevTabItemComponent, TcRevTagComponent, TcRevToastComponent, TcRevTooltipDirective, TcRevWizardStepsComponent, ToTextPipe, TopologyEnvironmentPipe, TopologyProductPipe, TopologyRegionPipe, TopologyStatusPipe, echartBarConfig, isTextEllipsed, provideTCloudUi };
 //# sourceMappingURL=dev-tcloud-tcloud-ui.mjs.map