@dev-tcloud/tcloud-ui 7.0.5 → 7.0.6

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

@@ -8,7 +8,8 @@ O componente `tcloud-ui-multiples-values` permite a entrada e gerenciamento de m
 - Suporte a delimitador configurável para inserção de múltiplos valores de uma vez
 - Conversão automática para uppercase ou lowercase
 - Remoção de valores duplicados automaticamente
-- Validação por padrão regex (`pattern`)
+- Validação por padrão regex (`pattern`), testado individualmente em cada valor após o split pelo `delimiter` — se algum valor for inválido, nenhum item é adicionado
+- Preset de validação `type="email"` (regex de e-mail embutido, sem precisar informar `pattern`)
 - Dropdown com lista dos valores adicionados e busca integrada (quando mais de 5 itens)
 - Contador de registros adicionados
 - Botão para limpar toda a lista (quando mais de 5 itens)
@@ -34,7 +35,8 @@ import { TCloudUiMultiplesValuesComponent } from 'tcloud-ui';
 | `listItems`          | `{ description: string, value: any, disabled?: boolean }[]` | —       | Lista de opções predefinidas exibidas em um data list para seleção                         |
 | `openValuesInChange` | `boolean`                                     | `true`  | Abre automaticamente o dropdown dos valores ao adicionar um novo item                      |
 | `useBtnAdd`          | `boolean`                                     | `true`  | Exibe o botão de adicionar (`+`) ao lado do input                                          |
-| `pattern`            | `RegExp`                                      | —       | Expressão regular para validação do valor antes de adicioná-lo à lista                     |
+| `pattern`            | `RegExp`                                      | —       | Expressão regular para validação de cada valor (após o split pelo `delimiter`) antes de adicioná-lo à lista. Se informado, tem prioridade sobre o preset de `type` |
+| `type`               | `'text' \| 'email'`                           | `'text'`| Preset de validação. `'email'` ativa um regex de e-mail interno quando `pattern` não é informado                |
 | `delimiter`          | `string`                                      | `','`   | Caractere delimitador para dividir a entrada em múltiplos valores de uma vez               |
 | `placeholder`        | `string`                                      | —       | Texto placeholder exibido no input                                                         |
 | `disabled`           | `boolean`                                     | `false` | Desabilita o input e os botões de ação                                                     |
@@ -111,6 +113,37 @@ export class ExemploAutocompleteComponent {
 }
 ```
 
+### Lista de e-mails — Com `type="email"`
+
+```html
+<tcloud-ui-multiples-values
+  [(ngModel)]="emails"
+  type="email"
+  delimiter=","
+  placeholder="Digite um ou mais e-mails separados por vírgula"
+  (tcChange)="onEmailsChange($event)">
+</tcloud-ui-multiples-values>
+```
+
+```typescript
+import { TCloudUiMultiplesValuesComponent } from 'tcloud-ui';
+
+@Component({
+  standalone: true,
+  imports: [TCloudUiMultiplesValuesComponent],
+  template: `...`
+})
+export class ExemploEmailComponent {
+  emails: string[] = [];
+
+  onEmailsChange(itens: string[]) {
+    console.log('E-mails atualizados:', itens);
+  }
+}
+```
+
+Cada valor digitado é validado individualmente pelo regex de e-mail embutido após o split pelo `delimiter`. Se algum valor não for um e-mail válido, nenhum item é adicionado e o input recebe a classe de erro (`tc-input-error`, borda vermelha) até a correção. Para um regex customizado, use `pattern` — quando informado, `pattern` tem prioridade sobre `type`.
+
 ### Avançado — Com lista predefinida, uppercase e validação por pattern
 
 ```html

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

@@ -5267,6 +5267,7 @@ const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1 = {
 };
 const noop$1 = () => {
 };
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 class TCloudUiMultiplesValuesComponent {
     set listItems(v) {
         if (v !== this._listItems) {
@@ -5289,6 +5290,7 @@ class TCloudUiMultiplesValuesComponent {
         this.openValuesInChange = true;
         this.useBtnAdd = true;
         this.pattern = null;
+        this.type = 'text';
         this.delimiter = ',';
         this.placeholder = '';
         this.disabled = false;
@@ -5299,6 +5301,7 @@ class TCloudUiMultiplesValuesComponent {
         this.autocompleteitems = [];
         this.tcChange = new EventEmitter();
         this.use_validation_required = false;
+        this.pattern_error = false;
         this.placeholder_list = '';
         //Placeholders for the callbacks which are later providesd
         //by the Control Value Accessor
@@ -5326,6 +5329,9 @@ class TCloudUiMultiplesValuesComponent {
     remove_duplicates(items) {
         return [...new Set(items)];
     }
+    get_effective_pattern() {
+        return this.pattern ? this.pattern : (this.type === 'email' ? EMAIL_PATTERN : null);
+    }
     add_items_by_data_list(e) {
         this.input_items = e;
         this.add_items();
@@ -5335,7 +5341,6 @@ class TCloudUiMultiplesValuesComponent {
             return;
         }
         const input_items = this.input_items;
-        this.input_items = '';
         let items = [];
         if (input_items && input_items !== '') {
             items = (input_items).split(this.delimiter);
@@ -5346,9 +5351,19 @@ class TCloudUiMultiplesValuesComponent {
                 items = [txt];
             }
         }
-        //items = [...new Set(items)];
-        for (let i = 0; i < (items).length; i++) {
-            let txt = `${(items[i]).trim()}`;
+        const tokens = items.map((txt) => `${txt}`.trim()).filter((txt) => txt !== '');
+        const effective_pattern = this.get_effective_pattern();
+        if (effective_pattern && tokens.length > 0) {
+            const all_valid = tokens.every((txt) => (effective_pattern).test(txt));
+            if (!all_valid) {
+                this.pattern_error = true;
+                return;
+            }
+        }
+        this.pattern_error = false;
+        this.input_items = '';
+        for (let i = 0; i < tokens.length; i++) {
+            let txt = tokens[i];
             if (this.uppercase) {
                 if (txt && txt !== '') {
                     txt = (txt).toLocaleUpperCase();
@@ -5485,17 +5500,14 @@ class TCloudUiMultiplesValuesComponent {
         if (!input_items) {
             return;
         }
-        let valid = true;
-        if (this.pattern) {
-            valid = (this.pattern).test(this.input_items);
-        }
-        if (valid) {
-            this.add_items();
-            if (this.openValuesInChange) {
-                this.toOpen();
-            }
+        this.add_items();
+        if (!this.pattern_error && this.openValuesInChange) {
+            this.toOpen();
         }
     }
+    onInputChange() {
+        this.pattern_error = false;
+    }
     checkIsDisabled(item) {
         if (item?.disabled) {
             return true;
@@ -5562,11 +5574,11 @@ class TCloudUiMultiplesValuesComponent {
     ngOnDestroy() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiMultiplesValuesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TCloudUiMultiplesValuesComponent, isStandalone: true, selector: "tcloud-ui-multiples-values", inputs: { listItems: "listItems", openValuesInChange: "openValuesInChange", useBtnAdd: "useBtnAdd", pattern: "pattern", delimiter: "delimiter", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required", search: "search", uppercase: "uppercase", lowercase: "lowercase", autocompleteitems: "autocompleteitems", maxWidthLabel: "maxWidthLabel" }, outputs: { tcChange: "tcChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1, CUSTOM_INPUT_VALIDATORS], ngImport: i0, template: "@if (show_component) {\n  <div class=\"tcloud-ui-multiples-values tc-dropdown\" id=\"area-{{ id }}\" [class.tc-parent-validation]=\"use_validation_required\">\n    <form #_formulario=\"ngForm\">\n      <!-- {{ input_items }} -->\n      <div class=\"dropdown-toggle\" id=\"{{id}}\" [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"'false'\">\n        <table style=\"width: 100%;\">\n          <tr>\n            <td>\n              <table class=\"group-input-action\">\n                <tr>\n                  <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\n                    @if (listItems && (listItems).length > 0) {\n                      <div class=\"input\" (click)=\"show_itens = false\">\n                        <tcloud-ui-data-list [placeholder]=\"placeholder_list\" [search]=\"search\" [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [(ngModel)]=\"input_items\" (onChange)=\"toEnterKey(input_items)\">\n                          @for (item of listItems; track item) {\n                            <tcloud-ui-data-list-option [value]=\"'' + item.value\" [disabled]=\"checkIsDisabled(item)\">{{ item?.description }}</tcloud-ui-data-list-option>\n                          }\n                        </tcloud-ui-data-list>\n                      </div>\n                    }\n                    @if (!listItems || !(listItems && (listItems).length > 0)) {\n                      <div class=\"input\">\n                        <input\n                          required\n                          [pattern]=\"pattern\"\n                          (keydown.enter)=\"toEnterKey(input_items)\"\n                          [disabled]=\"disabled\"\n                          [class.text-lowercase]=\"lowercase\"\n                          [class.text-uppercase]=\"uppercase\"\n                          [attr.list]=\"(autocompleteitems && autocompleteitems.length > 0) ? (id + '-autocomplete-list') : null\"\n                          type=\"text\" name=\"items\" class=\"tc-form-control area-text\" [(ngModel)]=\"input_items\" [placeholder]=\"placeholder_list\" required [title]=\"placeholder_list\">\n                        @if (autocompleteitems && autocompleteitems.length > 0) {\n                          <datalist id=\"{{ id }}-autocomplete-list\">\n                            @for (item of autocompleteitems; track item) {\n                              <option [value]=\"item\"></option>\n                            }\n                          </datalist>\n                        }\n                        </div>\n                      }\n                    </td>\n                    @if ((items && items.length > 0)) {\n                      <td class=\"count-list\">\n                        <div class=\"input\">\n                          <input type=\"text\" value=\"{{ items.length }} {{ (items.length > 1) ? ('multiplesValues.records' | i18nTranslate : 'Registros') : ('multiplesValues.record' | i18nTranslate : 'Registro') }}\" disabled readonly>\n                        </div>\n                      </td>\n                    }\n                    @if (!items || (items && items.length === 0)) {\n                      <td class=\"count-list\">\n                        <div class=\"input\"><input type=\"text\" class=\"info-no-value\" value=\"Vazio\" disabled readonly></div>\n                      </td>\n                    }\n                    <td class=\"action-input-arrow  bc-r\">\n                      <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\n                        @if (show_itens) {\n                          <i class=\"fas fa-angle-up\"></i>\n                        }\n                        @if (!show_itens) {\n                          <i class=\"fas fa-angle-down\"></i>\n                        }\n                      </button>\n                    </td>\n                  </tr>\n                </table>\n              </td>\n              @if (useBtnAdd) {\n                <td style=\"width: 45px;\">\n                  <table>\n                    <tr>\n                      @if (!disabled) {\n                        <td class=\"action-input\">\n                          @if (!listItems || !(listItems && (listItems).length > 0)) {\n                            <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-outline-primary\" (click)=\"add_items()\" title=\"Adicionar item\">\n                              <i class=\"fas fa-plus\"></i>\n                            </button>\n                          }\n                          @if (listItems && (listItems).length > 0) {\n                            <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-outline-primary\" (click)=\"add_items_by_data_list(input_items)\" title=\"Adicionar item\">\n                              <i class=\"fas fa-plus\"></i>\n                            </button>\n                          }\n                        </td>\n                      }\n                    </tr>\n                  </table>\n                </td>\n              }\n            </tr>\n          </table>\n        </div>\n        <!-- <pre>\n        {{ items | json }}\n      </pre> -->\n    </form>\n    <!-- box-itens-selected  -->\n    <div class=\"tc-dropdown-menu box-itens-selected  {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!show_itens\" [style]=\"box_style\">\n      <div class=\"line-search\">\n        @if (items && (items).length > 5) {\n          <table class=\"box-search\">\n            <tr>\n              <td class=\"area-input\">\n                <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" >\n              </td>\n              <td class=\"area-icon\">\n                @if (search_text === '') {\n                  <i class=\"fas fa-search icon-search\"></i>\n                }\n                @if (search_text !== '') {\n                  <button class=\"box-action\" type=\"button\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\n                }\n              </td>\n            </tr>\n          </table>\n        }\n      </div>\n      <div class=\"area-options\" id=\"{{ id }}-options\">\n        @for (item of items; track item; let i = $index) {\n          <label class=\"box-label\" [ngStyle]=\"(maxWidthLabel) ? {'max-width': maxWidthLabel} : null\">\n            <div class=\"box-value\" [title]=\"item\"  >\n              {{ item }}\n            </div>\n            <div class=\"box-action\">\n              <button\n                class=\"box-action\"\n                [disabled]=\"items === undefined || (items && items.length === 0) || disabled || loading\"\n                title=\"Remover\"\n                type=\"button\"\n                (click)=\"removeItem(item, i)\">\n                <i class=\"fas fa-times\"></i>\n              </button>\n            </div>\n          </label>\n        }\n      </div>\n      @if (items && (items).length > 5) {\n        <div class=\"mt-5\">\n          <div class=\"btn-remove-all\">\n            <button class=\"box-action\" type=\"button\" (click)=\"remove_all()\">\n              Limpar toda a lista\n            </button>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n}", styles: ["table{border-collapse:collapse}td,th{padding:0;margin:0}::placeholder{font-style:italic;color:var(--c-neutral-400);text-transform:none!important}.box-input{border:none!important;border-radius:5px 0 0 5px}.box-input .input{background-color:var(--c-neutral-50);border-radius:5px 0 0 5px}.box-input .ng-invalid{border-color:transparent!important}.bc-l{background-color:var(--c-neutral-50);border-left:1px solid var(--c-neutral-300)}.bc-r{background-color:var(--c-neutral-50);border-right:1px solid var(--c-neutral-300)}.box-input-data-list{background-color:var(--c-neutral-50);border:none!important;border-radius:5px 0 0 5px;height:42px;padding-left:5px;max-width:150px}@media(max-width:900px){.box-input-data-list{max-width:200px}}.group-input-action{width:100%;background-color:var(--c-neutral-50)}.group-input-action input{height:40px;border:none}.group-input-action td{height:40px;border-top:1px solid var(--c-neutral-300);border-bottom:1px solid var(--c-neutral-300);background-color:transparent!important}.count-list{border:none!important;width:70px;text-align:center;background:var(--c-neutral-50)}.count-list .input{width:76px;background-color:transparent}.count-list .input input{height:40px;border:none;text-align:center;width:100px;background-color:transparent}.action-input-arrow{border:none!important;width:30px;background:transparent;position:relative;z-index:0}.action-input-arrow button{cursor:pointer;background-color:transparent;text-align:center;font-size:15px;border-top:none;border-right:none;border-bottom:none;border-left:none;width:30px;border-radius:0 3px 3px 0;position:relative;bottom:1px;color:var(--c-neutral-500)}.action-input-arrow button i{position:relative;z-index:-1}.action-input{width:50px;padding-left:3px}.action-input .tc-btn{width:100%!important;padding:0;text-align:center;display:block;margin:0;height:40px;border:1px solid var(--c-primary-500)!important;border-radius:3px!important;position:relative;left:5px!important}.action-input .tc-btn i{width:100%;text-align:center;padding:0!important;margin:0!important;font-size:18px;position:relative;top:1px}.box-itens-selected{display:block;padding:9px;background-color:var(--c-neutral-200);border-radius:4px;width:100%}.box-itens-selected .box-label{position:relative;display:inline-block;height:35px;min-width:60px;color:var(--c-primary-500);padding:8px 24px 10px 15px;border:1px solid var(--c-primary-500);border-radius:5px;margin:2px;background-color:var(--c-neutral-50);width:auto;max-width:100%}.box-itens-selected .box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-itens-selected .box-label div.box-action{position:absolute;right:4px;top:7px}.box-itens-selected .box-label div.box-action button{color:var(--c-primary-500);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-itens-selected .box-label div.box-action button i{font-size:12px}.box-itens-selected .box-label div.box-action button:hover{color:var(--c-danger-500)}.to-hide{display:none}.dropdown-toggle:after{display:none!important}.tc-dropdown{min-width:300px;border-radius:.25rem;border:1px solid var(--c-neutral-300);padding:0 5px;position:relative}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid var(--c-neutral-300);position:absolute;z-index:10;background-color:var(--c-neutral-100)}.tc-dropdown .area-options{padding-right:8px;max-height:200px;overflow-y:scroll;overflow-x:hidden}.tc-dropdown .menu-on-top{position:absolute}.line-search{padding:3px}.line-search .box-search{width:100%;border-collapse:collapse}.line-search .box-search td.area-icon{padding:4px 0 2px 8px;width:35px}.line-search .box-search td.area-icon .icon-search{color:var(--c-neutral-500)}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:var(--c-neutral-400);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.line-search .box-search td.area-input input{width:100%}.line-search .box-search td.area-input{border:none}.line-search .box-search input{width:100%;font-size:13px;height:33px;border:1px solid var(--c-neutral-300);padding:10px}.btn-remove-all{text-align:right}.btn-remove-all button{background-color:transparent;border:none;color:var(--c-danger-500);cursor:pointer}.btn-remove-all button:hover{color:var(--c-danger-400)!important}.info-no-value{color:var(--c-danger-500)}.area-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}input:focus,input:focus-visible{outline:none!important;box-shadow:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: TCloudUiDataListComponent, selector: "tcloud-ui-data-list", inputs: ["placeholder", "disabled", "loading", "showInput", "search", "listItems", "open", "border", "ngModel"], outputs: ["onInputChange", "onChange", "onOpened", "onClosed", "ngModelChange"] }, { kind: "component", type: TCloudUiDataListOptionComponent, selector: "tcloud-ui-data-list-option", inputs: ["disabled", "value"], outputs: ["selected"] }, { kind: "pipe", type: I18nTranslatePipe, name: "i18nTranslate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TCloudUiMultiplesValuesComponent, isStandalone: true, selector: "tcloud-ui-multiples-values", inputs: { listItems: "listItems", openValuesInChange: "openValuesInChange", useBtnAdd: "useBtnAdd", pattern: "pattern", type: "type", delimiter: "delimiter", placeholder: "placeholder", disabled: "disabled", loading: "loading", required: "required", search: "search", uppercase: "uppercase", lowercase: "lowercase", autocompleteitems: "autocompleteitems", maxWidthLabel: "maxWidthLabel" }, outputs: { tcChange: "tcChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1, CUSTOM_INPUT_VALIDATORS], ngImport: i0, template: "@if (show_component) {\n  <div class=\"tcloud-ui-multiples-values tc-dropdown\" id=\"area-{{ id }}\" [class.tc-parent-validation]=\"use_validation_required\">\n    <form #_formulario=\"ngForm\">\n      <!-- {{ input_items }} -->\n      <div class=\"dropdown-toggle\" id=\"{{id}}\" [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"'false'\">\n        <table style=\"width: 100%;\">\n          <tr>\n            <td>\n              <table class=\"group-input-action\">\n                <tr>\n                  <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\n                    @if (listItems && (listItems).length > 0) {\n                      <div class=\"input\" (click)=\"show_itens = false\">\n                        <tcloud-ui-data-list [placeholder]=\"placeholder_list\" [search]=\"search\" [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [(ngModel)]=\"input_items\" (onChange)=\"toEnterKey(input_items)\">\n                          @for (item of listItems; track item) {\n                            <tcloud-ui-data-list-option [value]=\"'' + item.value\" [disabled]=\"checkIsDisabled(item)\">{{ item?.description }}</tcloud-ui-data-list-option>\n                          }\n                        </tcloud-ui-data-list>\n                      </div>\n                    }\n                    @if (!listItems || !(listItems && (listItems).length > 0)) {\n                      <div class=\"input\">\n                        <input\n                          required\n                          (keydown.enter)=\"toEnterKey(input_items)\"\n                          (input)=\"onInputChange()\"\n                          [disabled]=\"disabled\"\n                          [class.text-lowercase]=\"lowercase\"\n                          [class.text-uppercase]=\"uppercase\"\n                          [class.tc-input-error]=\"pattern_error\"\n                          [attr.list]=\"(autocompleteitems && autocompleteitems.length > 0) ? (id + '-autocomplete-list') : null\"\n                          type=\"text\" name=\"items\" class=\"tc-form-control area-text\" [(ngModel)]=\"input_items\" [placeholder]=\"placeholder_list\" required [title]=\"placeholder_list\">\n                        @if (autocompleteitems && autocompleteitems.length > 0) {\n                          <datalist id=\"{{ id }}-autocomplete-list\">\n                            @for (item of autocompleteitems; track item) {\n                              <option [value]=\"item\"></option>\n                            }\n                          </datalist>\n                        }\n                        </div>\n                      }\n                    </td>\n                    @if ((items && items.length > 0)) {\n                      <td class=\"count-list\">\n                        <div class=\"input\">\n                          <input type=\"text\" value=\"{{ items.length }} {{ (items.length > 1) ? ('multiplesValues.records' | i18nTranslate : 'Registros') : ('multiplesValues.record' | i18nTranslate : 'Registro') }}\" disabled readonly>\n                        </div>\n                      </td>\n                    }\n                    @if (!items || (items && items.length === 0)) {\n                      <td class=\"count-list\">\n                        <div class=\"input\"><input type=\"text\" class=\"info-no-value\" value=\"Vazio\" disabled readonly></div>\n                      </td>\n                    }\n                    <td class=\"action-input-arrow  bc-r\">\n                      <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\n                        @if (show_itens) {\n                          <i class=\"fas fa-angle-up\"></i>\n                        }\n                        @if (!show_itens) {\n                          <i class=\"fas fa-angle-down\"></i>\n                        }\n                      </button>\n                    </td>\n                  </tr>\n                </table>\n              </td>\n              @if (useBtnAdd) {\n                <td style=\"width: 45px;\">\n                  <table>\n                    <tr>\n                      @if (!disabled) {\n                        <td class=\"action-input\">\n                          @if (!listItems || !(listItems && (listItems).length > 0)) {\n                            <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-outline-primary\" (click)=\"add_items()\" title=\"Adicionar item\">\n                              <i class=\"fas fa-plus\"></i>\n                            </button>\n                          }\n                          @if (listItems && (listItems).length > 0) {\n                            <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-outline-primary\" (click)=\"add_items_by_data_list(input_items)\" title=\"Adicionar item\">\n                              <i class=\"fas fa-plus\"></i>\n                            </button>\n                          }\n                        </td>\n                      }\n                    </tr>\n                  </table>\n                </td>\n              }\n            </tr>\n          </table>\n        </div>\n        <!-- <pre>\n        {{ items | json }}\n      </pre> -->\n    </form>\n    <!-- box-itens-selected  -->\n    <div class=\"tc-dropdown-menu box-itens-selected  {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!show_itens\" [style]=\"box_style\">\n      <div class=\"line-search\">\n        @if (items && (items).length > 5) {\n          <table class=\"box-search\">\n            <tr>\n              <td class=\"area-input\">\n                <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" >\n              </td>\n              <td class=\"area-icon\">\n                @if (search_text === '') {\n                  <i class=\"fas fa-search icon-search\"></i>\n                }\n                @if (search_text !== '') {\n                  <button class=\"box-action\" type=\"button\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\n                }\n              </td>\n            </tr>\n          </table>\n        }\n      </div>\n      <div class=\"area-options\" id=\"{{ id }}-options\">\n        @for (item of items; track item; let i = $index) {\n          <label class=\"box-label\" [ngStyle]=\"(maxWidthLabel) ? {'max-width': maxWidthLabel} : null\">\n            <div class=\"box-value\" [title]=\"item\"  >\n              {{ item }}\n            </div>\n            <div class=\"box-action\">\n              <button\n                class=\"box-action\"\n                [disabled]=\"items === undefined || (items && items.length === 0) || disabled || loading\"\n                title=\"Remover\"\n                type=\"button\"\n                (click)=\"removeItem(item, i)\">\n                <i class=\"fas fa-times\"></i>\n              </button>\n            </div>\n          </label>\n        }\n      </div>\n      @if (items && (items).length > 5) {\n        <div class=\"mt-5\">\n          <div class=\"btn-remove-all\">\n            <button class=\"box-action\" type=\"button\" (click)=\"remove_all()\">\n              Limpar toda a lista\n            </button>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n}", styles: ["table{border-collapse:collapse}td,th{padding:0;margin:0}::placeholder{font-style:italic;color:var(--c-neutral-400);text-transform:none!important}input.tc-input-error{border-color:var(--danger)!important}.box-input{border:none!important;border-radius:5px 0 0 5px}.box-input .input{background-color:var(--c-neutral-50);border-radius:5px 0 0 5px}.box-input .ng-invalid{border-color:transparent!important}.bc-l{background-color:var(--c-neutral-50);border-left:1px solid var(--c-neutral-300)}.bc-r{background-color:var(--c-neutral-50);border-right:1px solid var(--c-neutral-300)}.box-input-data-list{background-color:var(--c-neutral-50);border:none!important;border-radius:5px 0 0 5px;height:42px;padding-left:5px;max-width:150px}@media(max-width:900px){.box-input-data-list{max-width:200px}}.group-input-action{width:100%;background-color:var(--c-neutral-50)}.group-input-action input{height:40px;border:none}.group-input-action td{height:40px;border-top:1px solid var(--c-neutral-300);border-bottom:1px solid var(--c-neutral-300);background-color:transparent!important}.count-list{border:none!important;width:70px;text-align:center;background:var(--c-neutral-50)}.count-list .input{width:76px;background-color:transparent}.count-list .input input{height:40px;border:none;text-align:center;width:100px;background-color:transparent}.action-input-arrow{border:none!important;width:30px;background:transparent;position:relative;z-index:0}.action-input-arrow button{cursor:pointer;background-color:transparent;text-align:center;font-size:15px;border-top:none;border-right:none;border-bottom:none;border-left:none;width:30px;border-radius:0 3px 3px 0;position:relative;bottom:1px;color:var(--c-neutral-500)}.action-input-arrow button i{position:relative;z-index:-1}.action-input{width:50px;padding-left:3px}.action-input .tc-btn{width:100%!important;padding:0;text-align:center;display:block;margin:0;height:40px;border:1px solid var(--c-primary-500)!important;border-radius:3px!important;position:relative;left:5px!important}.action-input .tc-btn i{width:100%;text-align:center;padding:0!important;margin:0!important;font-size:18px;position:relative;top:1px}.box-itens-selected{display:block;padding:9px;background-color:var(--c-neutral-200);border-radius:4px;width:100%}.box-itens-selected .box-label{position:relative;display:inline-block;height:35px;min-width:60px;color:var(--c-primary-500);padding:8px 24px 10px 15px;border:1px solid var(--c-primary-500);border-radius:5px;margin:2px;background-color:var(--c-neutral-50);width:auto;max-width:100%}.box-itens-selected .box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-itens-selected .box-label div.box-action{position:absolute;right:4px;top:7px}.box-itens-selected .box-label div.box-action button{color:var(--c-primary-500);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-itens-selected .box-label div.box-action button i{font-size:12px}.box-itens-selected .box-label div.box-action button:hover{color:var(--c-danger-500)}.to-hide{display:none}.dropdown-toggle:after{display:none!important}.tc-dropdown{min-width:300px;border-radius:.25rem;border:1px solid var(--c-neutral-300);padding:0 5px;position:relative}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid var(--c-neutral-300);position:absolute;z-index:10;background-color:var(--c-neutral-100)}.tc-dropdown .area-options{padding-right:8px;max-height:200px;overflow-y:scroll;overflow-x:hidden}.tc-dropdown .menu-on-top{position:absolute}.line-search{padding:3px}.line-search .box-search{width:100%;border-collapse:collapse}.line-search .box-search td.area-icon{padding:4px 0 2px 8px;width:35px}.line-search .box-search td.area-icon .icon-search{color:var(--c-neutral-500)}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:var(--c-neutral-400);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.line-search .box-search td.area-input input{width:100%}.line-search .box-search td.area-input{border:none}.line-search .box-search input{width:100%;font-size:13px;height:33px;border:1px solid var(--c-neutral-300);padding:10px}.btn-remove-all{text-align:right}.btn-remove-all button{background-color:transparent;border:none;color:var(--c-danger-500);cursor:pointer}.btn-remove-all button:hover{color:var(--c-danger-400)!important}.info-no-value{color:var(--c-danger-500)}.area-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}input:focus,input:focus-visible{outline:none!important;box-shadow:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: TCloudUiDataListComponent, selector: "tcloud-ui-data-list", inputs: ["placeholder", "disabled", "loading", "showInput", "search", "listItems", "open", "border", "ngModel"], outputs: ["onInputChange", "onChange", "onOpened", "onClosed", "ngModelChange"] }, { kind: "component", type: TCloudUiDataListOptionComponent, selector: "tcloud-ui-data-list-option", inputs: ["disabled", "value"], outputs: ["selected"] }, { kind: "pipe", type: I18nTranslatePipe, name: "i18nTranslate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiMultiplesValuesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-multiples-values', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1, CUSTOM_INPUT_VALIDATORS], standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, TCloudUiDataListComponent, TCloudUiDataListOptionComponent, I18nTranslatePipe], template: "@if (show_component) {\n  <div class=\"tcloud-ui-multiples-values tc-dropdown\" id=\"area-{{ id }}\" [class.tc-parent-validation]=\"use_validation_required\">\n    <form #_formulario=\"ngForm\">\n      <!-- {{ input_items }} -->\n      <div class=\"dropdown-toggle\" id=\"{{id}}\" [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"'false'\">\n        <table style=\"width: 100%;\">\n          <tr>\n            <td>\n              <table class=\"group-input-action\">\n                <tr>\n                  <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\n                    @if (listItems && (listItems).length > 0) {\n                      <div class=\"input\" (click)=\"show_itens = false\">\n                        <tcloud-ui-data-list [placeholder]=\"placeholder_list\" [search]=\"search\" [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [(ngModel)]=\"input_items\" (onChange)=\"toEnterKey(input_items)\">\n                          @for (item of listItems; track item) {\n                            <tcloud-ui-data-list-option [value]=\"'' + item.value\" [disabled]=\"checkIsDisabled(item)\">{{ item?.description }}</tcloud-ui-data-list-option>\n                          }\n                        </tcloud-ui-data-list>\n                      </div>\n                    }\n                    @if (!listItems || !(listItems && (listItems).length > 0)) {\n                      <div class=\"input\">\n                        <input\n                          required\n                          [pattern]=\"pattern\"\n                          (keydown.enter)=\"toEnterKey(input_items)\"\n                          [disabled]=\"disabled\"\n                          [class.text-lowercase]=\"lowercase\"\n                          [class.text-uppercase]=\"uppercase\"\n                          [attr.list]=\"(autocompleteitems && autocompleteitems.length > 0) ? (id + '-autocomplete-list') : null\"\n                          type=\"text\" name=\"items\" class=\"tc-form-control area-text\" [(ngModel)]=\"input_items\" [placeholder]=\"placeholder_list\" required [title]=\"placeholder_list\">\n                        @if (autocompleteitems && autocompleteitems.length > 0) {\n                          <datalist id=\"{{ id }}-autocomplete-list\">\n                            @for (item of autocompleteitems; track item) {\n                              <option [value]=\"item\"></option>\n                            }\n                          </datalist>\n                        }\n                        </div>\n                      }\n                    </td>\n                    @if ((items && items.length > 0)) {\n                      <td class=\"count-list\">\n                        <div class=\"input\">\n                          <input type=\"text\" value=\"{{ items.length }} {{ (items.length > 1) ? ('multiplesValues.records' | i18nTranslate : 'Registros') : ('multiplesValues.record' | i18nTranslate : 'Registro') }}\" disabled readonly>\n                        </div>\n                      </td>\n                    }\n                    @if (!items || (items && items.length === 0)) {\n                      <td class=\"count-list\">\n                        <div class=\"input\"><input type=\"text\" class=\"info-no-value\" value=\"Vazio\" disabled readonly></div>\n                      </td>\n                    }\n                    <td class=\"action-input-arrow  bc-r\">\n                      <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\n                        @if (show_itens) {\n                          <i class=\"fas fa-angle-up\"></i>\n                        }\n                        @if (!show_itens) {\n                          <i class=\"fas fa-angle-down\"></i>\n                        }\n                      </button>\n                    </td>\n                  </tr>\n                </table>\n              </td>\n              @if (useBtnAdd) {\n                <td style=\"width: 45px;\">\n                  <table>\n                    <tr>\n                      @if (!disabled) {\n                        <td class=\"action-input\">\n                          @if (!listItems || !(listItems && (listItems).length > 0)) {\n                            <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-outline-primary\" (click)=\"add_items()\" title=\"Adicionar item\">\n                              <i class=\"fas fa-plus\"></i>\n                            </button>\n                          }\n                          @if (listItems && (listItems).length > 0) {\n                            <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-outline-primary\" (click)=\"add_items_by_data_list(input_items)\" title=\"Adicionar item\">\n                              <i class=\"fas fa-plus\"></i>\n                            </button>\n                          }\n                        </td>\n                      }\n                    </tr>\n                  </table>\n                </td>\n              }\n            </tr>\n          </table>\n        </div>\n        <!-- <pre>\n        {{ items | json }}\n      </pre> -->\n    </form>\n    <!-- box-itens-selected  -->\n    <div class=\"tc-dropdown-menu box-itens-selected  {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!show_itens\" [style]=\"box_style\">\n      <div class=\"line-search\">\n        @if (items && (items).length > 5) {\n          <table class=\"box-search\">\n            <tr>\n              <td class=\"area-input\">\n                <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" >\n              </td>\n              <td class=\"area-icon\">\n                @if (search_text === '') {\n                  <i class=\"fas fa-search icon-search\"></i>\n                }\n                @if (search_text !== '') {\n                  <button class=\"box-action\" type=\"button\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\n                }\n              </td>\n            </tr>\n          </table>\n        }\n      </div>\n      <div class=\"area-options\" id=\"{{ id }}-options\">\n        @for (item of items; track item; let i = $index) {\n          <label class=\"box-label\" [ngStyle]=\"(maxWidthLabel) ? {'max-width': maxWidthLabel} : null\">\n            <div class=\"box-value\" [title]=\"item\"  >\n              {{ item }}\n            </div>\n            <div class=\"box-action\">\n              <button\n                class=\"box-action\"\n                [disabled]=\"items === undefined || (items && items.length === 0) || disabled || loading\"\n                title=\"Remover\"\n                type=\"button\"\n                (click)=\"removeItem(item, i)\">\n                <i class=\"fas fa-times\"></i>\n              </button>\n            </div>\n          </label>\n        }\n      </div>\n      @if (items && (items).length > 5) {\n        <div class=\"mt-5\">\n          <div class=\"btn-remove-all\">\n            <button class=\"box-action\" type=\"button\" (click)=\"remove_all()\">\n              Limpar toda a lista\n            </button>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n}", styles: ["table{border-collapse:collapse}td,th{padding:0;margin:0}::placeholder{font-style:italic;color:var(--c-neutral-400);text-transform:none!important}.box-input{border:none!important;border-radius:5px 0 0 5px}.box-input .input{background-color:var(--c-neutral-50);border-radius:5px 0 0 5px}.box-input .ng-invalid{border-color:transparent!important}.bc-l{background-color:var(--c-neutral-50);border-left:1px solid var(--c-neutral-300)}.bc-r{background-color:var(--c-neutral-50);border-right:1px solid var(--c-neutral-300)}.box-input-data-list{background-color:var(--c-neutral-50);border:none!important;border-radius:5px 0 0 5px;height:42px;padding-left:5px;max-width:150px}@media(max-width:900px){.box-input-data-list{max-width:200px}}.group-input-action{width:100%;background-color:var(--c-neutral-50)}.group-input-action input{height:40px;border:none}.group-input-action td{height:40px;border-top:1px solid var(--c-neutral-300);border-bottom:1px solid var(--c-neutral-300);background-color:transparent!important}.count-list{border:none!important;width:70px;text-align:center;background:var(--c-neutral-50)}.count-list .input{width:76px;background-color:transparent}.count-list .input input{height:40px;border:none;text-align:center;width:100px;background-color:transparent}.action-input-arrow{border:none!important;width:30px;background:transparent;position:relative;z-index:0}.action-input-arrow button{cursor:pointer;background-color:transparent;text-align:center;font-size:15px;border-top:none;border-right:none;border-bottom:none;border-left:none;width:30px;border-radius:0 3px 3px 0;position:relative;bottom:1px;color:var(--c-neutral-500)}.action-input-arrow button i{position:relative;z-index:-1}.action-input{width:50px;padding-left:3px}.action-input .tc-btn{width:100%!important;padding:0;text-align:center;display:block;margin:0;height:40px;border:1px solid var(--c-primary-500)!important;border-radius:3px!important;position:relative;left:5px!important}.action-input .tc-btn i{width:100%;text-align:center;padding:0!important;margin:0!important;font-size:18px;position:relative;top:1px}.box-itens-selected{display:block;padding:9px;background-color:var(--c-neutral-200);border-radius:4px;width:100%}.box-itens-selected .box-label{position:relative;display:inline-block;height:35px;min-width:60px;color:var(--c-primary-500);padding:8px 24px 10px 15px;border:1px solid var(--c-primary-500);border-radius:5px;margin:2px;background-color:var(--c-neutral-50);width:auto;max-width:100%}.box-itens-selected .box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-itens-selected .box-label div.box-action{position:absolute;right:4px;top:7px}.box-itens-selected .box-label div.box-action button{color:var(--c-primary-500);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-itens-selected .box-label div.box-action button i{font-size:12px}.box-itens-selected .box-label div.box-action button:hover{color:var(--c-danger-500)}.to-hide{display:none}.dropdown-toggle:after{display:none!important}.tc-dropdown{min-width:300px;border-radius:.25rem;border:1px solid var(--c-neutral-300);padding:0 5px;position:relative}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid var(--c-neutral-300);position:absolute;z-index:10;background-color:var(--c-neutral-100)}.tc-dropdown .area-options{padding-right:8px;max-height:200px;overflow-y:scroll;overflow-x:hidden}.tc-dropdown .menu-on-top{position:absolute}.line-search{padding:3px}.line-search .box-search{width:100%;border-collapse:collapse}.line-search .box-search td.area-icon{padding:4px 0 2px 8px;width:35px}.line-search .box-search td.area-icon .icon-search{color:var(--c-neutral-500)}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:var(--c-neutral-400);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.line-search .box-search td.area-input input{width:100%}.line-search .box-search td.area-input{border:none}.line-search .box-search input{width:100%;font-size:13px;height:33px;border:1px solid var(--c-neutral-300);padding:10px}.btn-remove-all{text-align:right}.btn-remove-all button{background-color:transparent;border:none;color:var(--c-danger-500);cursor:pointer}.btn-remove-all button:hover{color:var(--c-danger-400)!important}.info-no-value{color:var(--c-danger-500)}.area-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}input:focus,input:focus-visible{outline:none!important;box-shadow:none!important}\n"] }]
+            args: [{ selector: 'tcloud-ui-multiples-values', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1, CUSTOM_INPUT_VALIDATORS], standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, TCloudUiDataListComponent, TCloudUiDataListOptionComponent, I18nTranslatePipe], template: "@if (show_component) {\n  <div class=\"tcloud-ui-multiples-values tc-dropdown\" id=\"area-{{ id }}\" [class.tc-parent-validation]=\"use_validation_required\">\n    <form #_formulario=\"ngForm\">\n      <!-- {{ input_items }} -->\n      <div class=\"dropdown-toggle\" id=\"{{id}}\" [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"'false'\">\n        <table style=\"width: 100%;\">\n          <tr>\n            <td>\n              <table class=\"group-input-action\">\n                <tr>\n                  <td class=\"box-input{{ (listItems && (listItems).length > 0) ? '-data-list' : '' }} bc-l\">\n                    @if (listItems && (listItems).length > 0) {\n                      <div class=\"input\" (click)=\"show_itens = false\">\n                        <tcloud-ui-data-list [placeholder]=\"placeholder_list\" [search]=\"search\" [border]=\"false\" [loading]=\"loading\" [disabled]=\"disabled\" name=\"items\" [(ngModel)]=\"input_items\" (onChange)=\"toEnterKey(input_items)\">\n                          @for (item of listItems; track item) {\n                            <tcloud-ui-data-list-option [value]=\"'' + item.value\" [disabled]=\"checkIsDisabled(item)\">{{ item?.description }}</tcloud-ui-data-list-option>\n                          }\n                        </tcloud-ui-data-list>\n                      </div>\n                    }\n                    @if (!listItems || !(listItems && (listItems).length > 0)) {\n                      <div class=\"input\">\n                        <input\n                          required\n                          (keydown.enter)=\"toEnterKey(input_items)\"\n                          (input)=\"onInputChange()\"\n                          [disabled]=\"disabled\"\n                          [class.text-lowercase]=\"lowercase\"\n                          [class.text-uppercase]=\"uppercase\"\n                          [class.tc-input-error]=\"pattern_error\"\n                          [attr.list]=\"(autocompleteitems && autocompleteitems.length > 0) ? (id + '-autocomplete-list') : null\"\n                          type=\"text\" name=\"items\" class=\"tc-form-control area-text\" [(ngModel)]=\"input_items\" [placeholder]=\"placeholder_list\" required [title]=\"placeholder_list\">\n                        @if (autocompleteitems && autocompleteitems.length > 0) {\n                          <datalist id=\"{{ id }}-autocomplete-list\">\n                            @for (item of autocompleteitems; track item) {\n                              <option [value]=\"item\"></option>\n                            }\n                          </datalist>\n                        }\n                        </div>\n                      }\n                    </td>\n                    @if ((items && items.length > 0)) {\n                      <td class=\"count-list\">\n                        <div class=\"input\">\n                          <input type=\"text\" value=\"{{ items.length }} {{ (items.length > 1) ? ('multiplesValues.records' | i18nTranslate : 'Registros') : ('multiplesValues.record' | i18nTranslate : 'Registro') }}\" disabled readonly>\n                        </div>\n                      </td>\n                    }\n                    @if (!items || (items && items.length === 0)) {\n                      <td class=\"count-list\">\n                        <div class=\"input\"><input type=\"text\" class=\"info-no-value\" value=\"Vazio\" disabled readonly></div>\n                      </td>\n                    }\n                    <td class=\"action-input-arrow  bc-r\">\n                      <button (click)=\"toOpen()\" title=\"Lista de valores\" [disabled]=\"disabled\">\n                        @if (show_itens) {\n                          <i class=\"fas fa-angle-up\"></i>\n                        }\n                        @if (!show_itens) {\n                          <i class=\"fas fa-angle-down\"></i>\n                        }\n                      </button>\n                    </td>\n                  </tr>\n                </table>\n              </td>\n              @if (useBtnAdd) {\n                <td style=\"width: 45px;\">\n                  <table>\n                    <tr>\n                      @if (!disabled) {\n                        <td class=\"action-input\">\n                          @if (!listItems || !(listItems && (listItems).length > 0)) {\n                            <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-outline-primary\" (click)=\"add_items()\" title=\"Adicionar item\">\n                              <i class=\"fas fa-plus\"></i>\n                            </button>\n                          }\n                          @if (listItems && (listItems).length > 0) {\n                            <button [disabled]=\"!_formulario.valid\" class=\"tc-btn tc-btn-outline-primary\" (click)=\"add_items_by_data_list(input_items)\" title=\"Adicionar item\">\n                              <i class=\"fas fa-plus\"></i>\n                            </button>\n                          }\n                        </td>\n                      }\n                    </tr>\n                  </table>\n                </td>\n              }\n            </tr>\n          </table>\n        </div>\n        <!-- <pre>\n        {{ items | json }}\n      </pre> -->\n    </form>\n    <!-- box-itens-selected  -->\n    <div class=\"tc-dropdown-menu box-itens-selected  {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!show_itens\" [style]=\"box_style\">\n      <div class=\"line-search\">\n        @if (items && (items).length > 5) {\n          <table class=\"box-search\">\n            <tr>\n              <td class=\"area-input\">\n                <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" >\n              </td>\n              <td class=\"area-icon\">\n                @if (search_text === '') {\n                  <i class=\"fas fa-search icon-search\"></i>\n                }\n                @if (search_text !== '') {\n                  <button class=\"box-action\" type=\"button\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\n                }\n              </td>\n            </tr>\n          </table>\n        }\n      </div>\n      <div class=\"area-options\" id=\"{{ id }}-options\">\n        @for (item of items; track item; let i = $index) {\n          <label class=\"box-label\" [ngStyle]=\"(maxWidthLabel) ? {'max-width': maxWidthLabel} : null\">\n            <div class=\"box-value\" [title]=\"item\"  >\n              {{ item }}\n            </div>\n            <div class=\"box-action\">\n              <button\n                class=\"box-action\"\n                [disabled]=\"items === undefined || (items && items.length === 0) || disabled || loading\"\n                title=\"Remover\"\n                type=\"button\"\n                (click)=\"removeItem(item, i)\">\n                <i class=\"fas fa-times\"></i>\n              </button>\n            </div>\n          </label>\n        }\n      </div>\n      @if (items && (items).length > 5) {\n        <div class=\"mt-5\">\n          <div class=\"btn-remove-all\">\n            <button class=\"box-action\" type=\"button\" (click)=\"remove_all()\">\n              Limpar toda a lista\n            </button>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n}", styles: ["table{border-collapse:collapse}td,th{padding:0;margin:0}::placeholder{font-style:italic;color:var(--c-neutral-400);text-transform:none!important}input.tc-input-error{border-color:var(--danger)!important}.box-input{border:none!important;border-radius:5px 0 0 5px}.box-input .input{background-color:var(--c-neutral-50);border-radius:5px 0 0 5px}.box-input .ng-invalid{border-color:transparent!important}.bc-l{background-color:var(--c-neutral-50);border-left:1px solid var(--c-neutral-300)}.bc-r{background-color:var(--c-neutral-50);border-right:1px solid var(--c-neutral-300)}.box-input-data-list{background-color:var(--c-neutral-50);border:none!important;border-radius:5px 0 0 5px;height:42px;padding-left:5px;max-width:150px}@media(max-width:900px){.box-input-data-list{max-width:200px}}.group-input-action{width:100%;background-color:var(--c-neutral-50)}.group-input-action input{height:40px;border:none}.group-input-action td{height:40px;border-top:1px solid var(--c-neutral-300);border-bottom:1px solid var(--c-neutral-300);background-color:transparent!important}.count-list{border:none!important;width:70px;text-align:center;background:var(--c-neutral-50)}.count-list .input{width:76px;background-color:transparent}.count-list .input input{height:40px;border:none;text-align:center;width:100px;background-color:transparent}.action-input-arrow{border:none!important;width:30px;background:transparent;position:relative;z-index:0}.action-input-arrow button{cursor:pointer;background-color:transparent;text-align:center;font-size:15px;border-top:none;border-right:none;border-bottom:none;border-left:none;width:30px;border-radius:0 3px 3px 0;position:relative;bottom:1px;color:var(--c-neutral-500)}.action-input-arrow button i{position:relative;z-index:-1}.action-input{width:50px;padding-left:3px}.action-input .tc-btn{width:100%!important;padding:0;text-align:center;display:block;margin:0;height:40px;border:1px solid var(--c-primary-500)!important;border-radius:3px!important;position:relative;left:5px!important}.action-input .tc-btn i{width:100%;text-align:center;padding:0!important;margin:0!important;font-size:18px;position:relative;top:1px}.box-itens-selected{display:block;padding:9px;background-color:var(--c-neutral-200);border-radius:4px;width:100%}.box-itens-selected .box-label{position:relative;display:inline-block;height:35px;min-width:60px;color:var(--c-primary-500);padding:8px 24px 10px 15px;border:1px solid var(--c-primary-500);border-radius:5px;margin:2px;background-color:var(--c-neutral-50);width:auto;max-width:100%}.box-itens-selected .box-label .box-value{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.box-itens-selected .box-label div.box-action{position:absolute;right:4px;top:7px}.box-itens-selected .box-label div.box-action button{color:var(--c-primary-500);background-color:transparent;border:none;font-weight:700;cursor:pointer}.box-itens-selected .box-label div.box-action button i{font-size:12px}.box-itens-selected .box-label div.box-action button:hover{color:var(--c-danger-500)}.to-hide{display:none}.dropdown-toggle:after{display:none!important}.tc-dropdown{min-width:300px;border-radius:.25rem;border:1px solid var(--c-neutral-300);padding:0 5px;position:relative}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid var(--c-neutral-300);position:absolute;z-index:10;background-color:var(--c-neutral-100)}.tc-dropdown .area-options{padding-right:8px;max-height:200px;overflow-y:scroll;overflow-x:hidden}.tc-dropdown .menu-on-top{position:absolute}.line-search{padding:3px}.line-search .box-search{width:100%;border-collapse:collapse}.line-search .box-search td.area-icon{padding:4px 0 2px 8px;width:35px}.line-search .box-search td.area-icon .icon-search{color:var(--c-neutral-500)}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:var(--c-neutral-400);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.line-search .box-search td.area-input input{width:100%}.line-search .box-search td.area-input{border:none}.line-search .box-search input{width:100%;font-size:13px;height:33px;border:1px solid var(--c-neutral-300);padding:10px}.btn-remove-all{text-align:right}.btn-remove-all button{background-color:transparent;border:none;color:var(--c-danger-500);cursor:pointer}.btn-remove-all button:hover{color:var(--c-danger-400)!important}.info-no-value{color:var(--c-danger-500)}.area-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}input:focus,input:focus-visible{outline:none!important;box-shadow:none!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { listItems: [{
                 type: Input
             }], openValuesInChange: [{
@@ -5575,6 +5587,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 type: Input
             }], pattern: [{
                 type: Input
+            }], type: [{
+                type: Input
             }], delimiter: [{
                 type: Input
             }], placeholder: [{
@@ -8591,13 +8605,13 @@ class TCloudUiCalendarComponent {
         return this.appointments.find(appointment => appointment.appointmentDate === dateString);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TCloudUiCalendarComponent, isStandalone: true, selector: "tcloud-ui-calendar", inputs: { appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: false, isRequired: false, transformFunction: null }, activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectDate: "onSelectDate" }, ngImport: i0, template: "<div class=\"tcloud-ui-calendar\">\n  <div class=\"calendar-header\">\n    @if (viewMode === 'days') {\n      <button class=\"prev-btn mar-r-a\" (click)=\"changeMonth(-1)\"><i class=\"fa-light fa-chevron-left\"></i></button>\n    }\n    @if (viewMode === 'months' || viewMode === 'years') {\n      <button class=\"prev-btn mar-r-a\" (click)=\"changeYearOffset(-1)\"><i class=\"fa-light fa-chevron-left\"></i></button>\n    }\n    @if (viewMode === 'days')\n      {\n      <span class=\"calendar-title date\" (click)=\"toggleViewMode('months')\">{{ month }}&nbsp;-&nbsp;</span>\n      <span class=\"calendar-title date\" (click)=\"toggleViewMode('years')\">{{ year }}</span>\n    }\n    @else if (viewMode === 'months')\n    {\n    <span class=\"calendar-title\">Selecione o m\u00EAs</span>\n  }\n  @else if (viewMode === 'years')\n  {\n  <span class=\"calendar-title\">Selecione o ano</span>\n}\n@if (viewMode === 'months' || viewMode === 'years') {\n  <button class=\"next-btn mar-l-a\" (click)=\"changeYearOffset(1)\"><i class=\"fa-light fa-chevron-right\"></i></button>\n}\n@if (viewMode === 'days') {\n  <button class=\"next-btn mar-l-a\" (click)=\"changeMonth(1)\"><i class=\"fa-light fa-chevron-right\"></i></button>\n}\n</div>\n\n@if (viewMode === 'days') {\n  <div class=\"calendar-grid\">\n    @for (day of daysOfWeek; track day) {\n      <div class=\"day-header\">{{ day }}</div>\n    }\n    @for (day of calendarDays; track day) {\n      <button\n        class=\"day\"\n        [class.selected]=\"day.date.valueOf() === innerActiveDate().valueOf()\"\n        [class.current-month]=\"day.isCurrentMonth\"\n        [title]=\"isAppointment(day.date)?.description ? isAppointment(day.date)?.description : ''\"\n        (click)=\"onSelectDate.emit(day.date)\"\n        >\n        @if (isAppointment(day.date)) {\n          <span\n            class=\"appointment-dot\"\n            [ngClass]=\"'appointment-'+ isAppointment(day.date)?.type\"\n          ></span>\n        }\n        {{ day.date.getDate() }}\n      </button>\n    }\n  </div>\n}\n\n@if (viewMode === 'months') {\n  <div class=\"calendar-grid months\">\n    @for (month of calendarMonths; track month; let i = $index) {\n      <div\n        class=\"month\"\n        (click)=\"selectMonth(i)\"\n        >\n        {{ month }}\n      </div>\n    }\n  </div>\n}\n\n@if (viewMode === 'years') {\n  <div class=\"calendar-grid years\">\n    @for (year of calendarYears; track year) {\n      <div\n        class=\"year\"\n        (click)=\"selectYear(year)\"\n        >\n        {{ year }}\n      </div>\n    }\n  </div>\n}\n</div>\n", styles: [":host{display:block}.tcloud-ui-calendar{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-16);color:var(--c-neutral-700);font-family:var(--f-family);min-height:274px;min-width:16.125rem;padding:var(--size-16)}.tcloud-ui-calendar .calendar-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--size-16)}.tcloud-ui-calendar .calendar-header .prev-btn,.tcloud-ui-calendar .calendar-header .next-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-500);border-radius:var(--bor-radius-rounded);color:inherit;cursor:pointer;display:flex;justify-content:center;font-size:var(--f-size-14);height:var(--size-32);width:var(--size-32)}.tcloud-ui-calendar .calendar-header .calendar-title{cursor:default;font-size:var(--f-size-14);line-height:var(--l-height-20)}.tcloud-ui-calendar .calendar-header .calendar-title.date{cursor:pointer;text-transform:capitalize}.tcloud-ui-calendar .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);justify-items:center}.tcloud-ui-calendar .calendar-grid.months{grid-template-columns:repeat(3,1fr);row-gap:10px}.tcloud-ui-calendar .calendar-grid.years{grid-template-columns:repeat(4,1fr);row-gap:10px}.tcloud-ui-calendar .day-header{cursor:default;font-size:var(--f-size-12);font-weight:var(--f-weight-700);line-height:var(--l-height-16);text-align:center;align-content:center;height:var(--size-32);width:var(--size-32)}.tcloud-ui-calendar .day{align-content:center;border-radius:var(--bor-radius-rounded);background:transparent;border:none;color:inherit;padding:0;cursor:default;font-size:var(--f-size-12);line-height:var(--l-height-16);position:relative;height:var(--size-32);text-align:center;transition:.1s ease;width:var(--size-32)}.tcloud-ui-calendar .day:hover,.tcloud-ui-calendar .day:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tcloud-ui-calendar .day:active,.tcloud-ui-calendar .day.selected{background-color:var(--c-primary-300);color:var(--c-primary-500)}.tcloud-ui-calendar .day .appointment-dot{width:6px;height:6px;border-radius:50%;position:absolute;top:5px;right:5px}.tcloud-ui-calendar .day .appointment-dot.appointment-info{background-color:var(--c-info-500)}.tcloud-ui-calendar .day .appointment-dot.appointment-alert{background-color:var(--c-alert-500)}.tcloud-ui-calendar .day .appointment-dot.appointment-danger{background-color:var(--c-danger-500)}.tcloud-ui-calendar .day .appointment-dot.appointment-success{background-color:var(--c-success-500)}.tcloud-ui-calendar .month,.tcloud-ui-calendar .year{align-content:center;border:none;border-radius:var(--bor-radius-4);cursor:pointer;height:var(--size-32);text-align:center;text-transform:capitalize;transition:.1s ease;width:100%}.tcloud-ui-calendar .month:hover,.tcloud-ui-calendar .month:focus,.tcloud-ui-calendar .year:hover,.tcloud-ui-calendar .year:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tcloud-ui-calendar .month:active,.tcloud-ui-calendar .year:active{background-color:var(--c-primary-300);color:var(--c-primary-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TCloudUiCalendarComponent, isStandalone: true, selector: "tcloud-ui-calendar", inputs: { appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: false, isRequired: false, transformFunction: null }, activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectDate: "onSelectDate" }, ngImport: i0, template: "<div class=\"tcloud-ui-calendar\">\n  <div class=\"calendar-header\">\n    @if (viewMode === 'days') {\n      <button class=\"prev-btn mar-r-a\" (click)=\"changeMonth(-1)\"><i class=\"fa-light fa-chevron-left\"></i></button>\n    }\n    @if (viewMode === 'months' || viewMode === 'years') {\n      <button class=\"prev-btn mar-r-a\" (click)=\"changeYearOffset(-1)\"><i class=\"fa-light fa-chevron-left\"></i></button>\n    }\n    @if (viewMode === 'days')\n      {\n      <span class=\"calendar-title date\" (click)=\"toggleViewMode('months')\">{{ month }}&nbsp;-&nbsp;</span>\n      <span class=\"calendar-title date\" (click)=\"toggleViewMode('years')\">{{ year }}</span>\n    }\n    @else if (viewMode === 'months')\n    {\n    <span class=\"calendar-title\">Selecione o m\u00EAs</span>\n  }\n  @else if (viewMode === 'years')\n  {\n  <span class=\"calendar-title\">Selecione o ano</span>\n}\n@if (viewMode === 'months' || viewMode === 'years') {\n  <button class=\"next-btn mar-l-a\" (click)=\"changeYearOffset(1)\"><i class=\"fa-light fa-chevron-right\"></i></button>\n}\n@if (viewMode === 'days') {\n  <button class=\"next-btn mar-l-a\" (click)=\"changeMonth(1)\"><i class=\"fa-light fa-chevron-right\"></i></button>\n}\n</div>\n\n@if (viewMode === 'days') {\n  <div class=\"calendar-grid\">\n    @for (day of daysOfWeek; track $index) {\n      <div class=\"day-header\">{{ day }}</div>\n    }\n    @for (day of calendarDays; track day) {\n      <button\n        class=\"day\"\n        [class.selected]=\"day.date.valueOf() === innerActiveDate().valueOf()\"\n        [class.current-month]=\"day.isCurrentMonth\"\n        [title]=\"isAppointment(day.date)?.description ? isAppointment(day.date)?.description : ''\"\n        (click)=\"onSelectDate.emit(day.date)\"\n        >\n        @if (isAppointment(day.date)) {\n          <span\n            class=\"appointment-dot\"\n            [ngClass]=\"'appointment-'+ isAppointment(day.date)?.type\"\n          ></span>\n        }\n        {{ day.date.getDate() }}\n      </button>\n    }\n  </div>\n}\n\n@if (viewMode === 'months') {\n  <div class=\"calendar-grid months\">\n    @for (month of calendarMonths; track month; let i = $index) {\n      <div\n        class=\"month\"\n        (click)=\"selectMonth(i)\"\n        >\n        {{ month }}\n      </div>\n    }\n  </div>\n}\n\n@if (viewMode === 'years') {\n  <div class=\"calendar-grid years\">\n    @for (year of calendarYears; track year) {\n      <div\n        class=\"year\"\n        (click)=\"selectYear(year)\"\n        >\n        {{ year }}\n      </div>\n    }\n  </div>\n}\n</div>\n", styles: [":host{display:block}.tcloud-ui-calendar{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-16);color:var(--c-neutral-700);font-family:var(--f-family);min-height:274px;min-width:16.125rem;padding:var(--size-16)}.tcloud-ui-calendar .calendar-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--size-16)}.tcloud-ui-calendar .calendar-header .prev-btn,.tcloud-ui-calendar .calendar-header .next-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-500);border-radius:var(--bor-radius-rounded);color:inherit;cursor:pointer;display:flex;justify-content:center;font-size:var(--f-size-14);height:var(--size-32);width:var(--size-32)}.tcloud-ui-calendar .calendar-header .calendar-title{cursor:default;font-size:var(--f-size-14);line-height:var(--l-height-20)}.tcloud-ui-calendar .calendar-header .calendar-title.date{cursor:pointer;text-transform:capitalize}.tcloud-ui-calendar .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);justify-items:center}.tcloud-ui-calendar .calendar-grid.months{grid-template-columns:repeat(3,1fr);row-gap:10px}.tcloud-ui-calendar .calendar-grid.years{grid-template-columns:repeat(4,1fr);row-gap:10px}.tcloud-ui-calendar .day-header{cursor:default;font-size:var(--f-size-12);font-weight:var(--f-weight-700);line-height:var(--l-height-16);text-align:center;align-content:center;height:var(--size-32);width:var(--size-32)}.tcloud-ui-calendar .day{align-content:center;border-radius:var(--bor-radius-rounded);background:transparent;border:none;color:inherit;padding:0;cursor:default;font-size:var(--f-size-12);line-height:var(--l-height-16);position:relative;height:var(--size-32);text-align:center;transition:.1s ease;width:var(--size-32)}.tcloud-ui-calendar .day:hover,.tcloud-ui-calendar .day:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tcloud-ui-calendar .day:active,.tcloud-ui-calendar .day.selected{background-color:var(--c-primary-300);color:var(--c-primary-500)}.tcloud-ui-calendar .day .appointment-dot{width:6px;height:6px;border-radius:50%;position:absolute;top:5px;right:5px}.tcloud-ui-calendar .day .appointment-dot.appointment-info{background-color:var(--c-info-500)}.tcloud-ui-calendar .day .appointment-dot.appointment-alert{background-color:var(--c-alert-500)}.tcloud-ui-calendar .day .appointment-dot.appointment-danger{background-color:var(--c-danger-500)}.tcloud-ui-calendar .day .appointment-dot.appointment-success{background-color:var(--c-success-500)}.tcloud-ui-calendar .month,.tcloud-ui-calendar .year{align-content:center;border:none;border-radius:var(--bor-radius-4);cursor:pointer;height:var(--size-32);text-align:center;text-transform:capitalize;transition:.1s ease;width:100%}.tcloud-ui-calendar .month:hover,.tcloud-ui-calendar .month:focus,.tcloud-ui-calendar .year:hover,.tcloud-ui-calendar .year:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tcloud-ui-calendar .month:active,.tcloud-ui-calendar .year:active{background-color:var(--c-primary-300);color:var(--c-primary-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiCalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tcloud-ui-calendar', imports: [
                         CommonModule,
-                    ], template: "<div class=\"tcloud-ui-calendar\">\n  <div class=\"calendar-header\">\n    @if (viewMode === 'days') {\n      <button class=\"prev-btn mar-r-a\" (click)=\"changeMonth(-1)\"><i class=\"fa-light fa-chevron-left\"></i></button>\n    }\n    @if (viewMode === 'months' || viewMode === 'years') {\n      <button class=\"prev-btn mar-r-a\" (click)=\"changeYearOffset(-1)\"><i class=\"fa-light fa-chevron-left\"></i></button>\n    }\n    @if (viewMode === 'days')\n      {\n      <span class=\"calendar-title date\" (click)=\"toggleViewMode('months')\">{{ month }}&nbsp;-&nbsp;</span>\n      <span class=\"calendar-title date\" (click)=\"toggleViewMode('years')\">{{ year }}</span>\n    }\n    @else if (viewMode === 'months')\n    {\n    <span class=\"calendar-title\">Selecione o m\u00EAs</span>\n  }\n  @else if (viewMode === 'years')\n  {\n  <span class=\"calendar-title\">Selecione o ano</span>\n}\n@if (viewMode === 'months' || viewMode === 'years') {\n  <button class=\"next-btn mar-l-a\" (click)=\"changeYearOffset(1)\"><i class=\"fa-light fa-chevron-right\"></i></button>\n}\n@if (viewMode === 'days') {\n  <button class=\"next-btn mar-l-a\" (click)=\"changeMonth(1)\"><i class=\"fa-light fa-chevron-right\"></i></button>\n}\n</div>\n\n@if (viewMode === 'days') {\n  <div class=\"calendar-grid\">\n    @for (day of daysOfWeek; track day) {\n      <div class=\"day-header\">{{ day }}</div>\n    }\n    @for (day of calendarDays; track day) {\n      <button\n        class=\"day\"\n        [class.selected]=\"day.date.valueOf() === innerActiveDate().valueOf()\"\n        [class.current-month]=\"day.isCurrentMonth\"\n        [title]=\"isAppointment(day.date)?.description ? isAppointment(day.date)?.description : ''\"\n        (click)=\"onSelectDate.emit(day.date)\"\n        >\n        @if (isAppointment(day.date)) {\n          <span\n            class=\"appointment-dot\"\n            [ngClass]=\"'appointment-'+ isAppointment(day.date)?.type\"\n          ></span>\n        }\n        {{ day.date.getDate() }}\n      </button>\n    }\n  </div>\n}\n\n@if (viewMode === 'months') {\n  <div class=\"calendar-grid months\">\n    @for (month of calendarMonths; track month; let i = $index) {\n      <div\n        class=\"month\"\n        (click)=\"selectMonth(i)\"\n        >\n        {{ month }}\n      </div>\n    }\n  </div>\n}\n\n@if (viewMode === 'years') {\n  <div class=\"calendar-grid years\">\n    @for (year of calendarYears; track year) {\n      <div\n        class=\"year\"\n        (click)=\"selectYear(year)\"\n        >\n        {{ year }}\n      </div>\n    }\n  </div>\n}\n</div>\n", styles: [":host{display:block}.tcloud-ui-calendar{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-16);color:var(--c-neutral-700);font-family:var(--f-family);min-height:274px;min-width:16.125rem;padding:var(--size-16)}.tcloud-ui-calendar .calendar-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--size-16)}.tcloud-ui-calendar .calendar-header .prev-btn,.tcloud-ui-calendar .calendar-header .next-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-500);border-radius:var(--bor-radius-rounded);color:inherit;cursor:pointer;display:flex;justify-content:center;font-size:var(--f-size-14);height:var(--size-32);width:var(--size-32)}.tcloud-ui-calendar .calendar-header .calendar-title{cursor:default;font-size:var(--f-size-14);line-height:var(--l-height-20)}.tcloud-ui-calendar .calendar-header .calendar-title.date{cursor:pointer;text-transform:capitalize}.tcloud-ui-calendar .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);justify-items:center}.tcloud-ui-calendar .calendar-grid.months{grid-template-columns:repeat(3,1fr);row-gap:10px}.tcloud-ui-calendar .calendar-grid.years{grid-template-columns:repeat(4,1fr);row-gap:10px}.tcloud-ui-calendar .day-header{cursor:default;font-size:var(--f-size-12);font-weight:var(--f-weight-700);line-height:var(--l-height-16);text-align:center;align-content:center;height:var(--size-32);width:var(--size-32)}.tcloud-ui-calendar .day{align-content:center;border-radius:var(--bor-radius-rounded);background:transparent;border:none;color:inherit;padding:0;cursor:default;font-size:var(--f-size-12);line-height:var(--l-height-16);position:relative;height:var(--size-32);text-align:center;transition:.1s ease;width:var(--size-32)}.tcloud-ui-calendar .day:hover,.tcloud-ui-calendar .day:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tcloud-ui-calendar .day:active,.tcloud-ui-calendar .day.selected{background-color:var(--c-primary-300);color:var(--c-primary-500)}.tcloud-ui-calendar .day .appointment-dot{width:6px;height:6px;border-radius:50%;position:absolute;top:5px;right:5px}.tcloud-ui-calendar .day .appointment-dot.appointment-info{background-color:var(--c-info-500)}.tcloud-ui-calendar .day .appointment-dot.appointment-alert{background-color:var(--c-alert-500)}.tcloud-ui-calendar .day .appointment-dot.appointment-danger{background-color:var(--c-danger-500)}.tcloud-ui-calendar .day .appointment-dot.appointment-success{background-color:var(--c-success-500)}.tcloud-ui-calendar .month,.tcloud-ui-calendar .year{align-content:center;border:none;border-radius:var(--bor-radius-4);cursor:pointer;height:var(--size-32);text-align:center;text-transform:capitalize;transition:.1s ease;width:100%}.tcloud-ui-calendar .month:hover,.tcloud-ui-calendar .month:focus,.tcloud-ui-calendar .year:hover,.tcloud-ui-calendar .year:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tcloud-ui-calendar .month:active,.tcloud-ui-calendar .year:active{background-color:var(--c-primary-300);color:var(--c-primary-500)}\n"] }]
+                    ], template: "<div class=\"tcloud-ui-calendar\">\n  <div class=\"calendar-header\">\n    @if (viewMode === 'days') {\n      <button class=\"prev-btn mar-r-a\" (click)=\"changeMonth(-1)\"><i class=\"fa-light fa-chevron-left\"></i></button>\n    }\n    @if (viewMode === 'months' || viewMode === 'years') {\n      <button class=\"prev-btn mar-r-a\" (click)=\"changeYearOffset(-1)\"><i class=\"fa-light fa-chevron-left\"></i></button>\n    }\n    @if (viewMode === 'days')\n      {\n      <span class=\"calendar-title date\" (click)=\"toggleViewMode('months')\">{{ month }}&nbsp;-&nbsp;</span>\n      <span class=\"calendar-title date\" (click)=\"toggleViewMode('years')\">{{ year }}</span>\n    }\n    @else if (viewMode === 'months')\n    {\n    <span class=\"calendar-title\">Selecione o m\u00EAs</span>\n  }\n  @else if (viewMode === 'years')\n  {\n  <span class=\"calendar-title\">Selecione o ano</span>\n}\n@if (viewMode === 'months' || viewMode === 'years') {\n  <button class=\"next-btn mar-l-a\" (click)=\"changeYearOffset(1)\"><i class=\"fa-light fa-chevron-right\"></i></button>\n}\n@if (viewMode === 'days') {\n  <button class=\"next-btn mar-l-a\" (click)=\"changeMonth(1)\"><i class=\"fa-light fa-chevron-right\"></i></button>\n}\n</div>\n\n@if (viewMode === 'days') {\n  <div class=\"calendar-grid\">\n    @for (day of daysOfWeek; track $index) {\n      <div class=\"day-header\">{{ day }}</div>\n    }\n    @for (day of calendarDays; track day) {\n      <button\n        class=\"day\"\n        [class.selected]=\"day.date.valueOf() === innerActiveDate().valueOf()\"\n        [class.current-month]=\"day.isCurrentMonth\"\n        [title]=\"isAppointment(day.date)?.description ? isAppointment(day.date)?.description : ''\"\n        (click)=\"onSelectDate.emit(day.date)\"\n        >\n        @if (isAppointment(day.date)) {\n          <span\n            class=\"appointment-dot\"\n            [ngClass]=\"'appointment-'+ isAppointment(day.date)?.type\"\n          ></span>\n        }\n        {{ day.date.getDate() }}\n      </button>\n    }\n  </div>\n}\n\n@if (viewMode === 'months') {\n  <div class=\"calendar-grid months\">\n    @for (month of calendarMonths; track month; let i = $index) {\n      <div\n        class=\"month\"\n        (click)=\"selectMonth(i)\"\n        >\n        {{ month }}\n      </div>\n    }\n  </div>\n}\n\n@if (viewMode === 'years') {\n  <div class=\"calendar-grid years\">\n    @for (year of calendarYears; track year) {\n      <div\n        class=\"year\"\n        (click)=\"selectYear(year)\"\n        >\n        {{ year }}\n      </div>\n    }\n  </div>\n}\n</div>\n", styles: [":host{display:block}.tcloud-ui-calendar{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-16);color:var(--c-neutral-700);font-family:var(--f-family);min-height:274px;min-width:16.125rem;padding:var(--size-16)}.tcloud-ui-calendar .calendar-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--size-16)}.tcloud-ui-calendar .calendar-header .prev-btn,.tcloud-ui-calendar .calendar-header .next-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-500);border-radius:var(--bor-radius-rounded);color:inherit;cursor:pointer;display:flex;justify-content:center;font-size:var(--f-size-14);height:var(--size-32);width:var(--size-32)}.tcloud-ui-calendar .calendar-header .calendar-title{cursor:default;font-size:var(--f-size-14);line-height:var(--l-height-20)}.tcloud-ui-calendar .calendar-header .calendar-title.date{cursor:pointer;text-transform:capitalize}.tcloud-ui-calendar .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);justify-items:center}.tcloud-ui-calendar .calendar-grid.months{grid-template-columns:repeat(3,1fr);row-gap:10px}.tcloud-ui-calendar .calendar-grid.years{grid-template-columns:repeat(4,1fr);row-gap:10px}.tcloud-ui-calendar .day-header{cursor:default;font-size:var(--f-size-12);font-weight:var(--f-weight-700);line-height:var(--l-height-16);text-align:center;align-content:center;height:var(--size-32);width:var(--size-32)}.tcloud-ui-calendar .day{align-content:center;border-radius:var(--bor-radius-rounded);background:transparent;border:none;color:inherit;padding:0;cursor:default;font-size:var(--f-size-12);line-height:var(--l-height-16);position:relative;height:var(--size-32);text-align:center;transition:.1s ease;width:var(--size-32)}.tcloud-ui-calendar .day:hover,.tcloud-ui-calendar .day:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tcloud-ui-calendar .day:active,.tcloud-ui-calendar .day.selected{background-color:var(--c-primary-300);color:var(--c-primary-500)}.tcloud-ui-calendar .day .appointment-dot{width:6px;height:6px;border-radius:50%;position:absolute;top:5px;right:5px}.tcloud-ui-calendar .day .appointment-dot.appointment-info{background-color:var(--c-info-500)}.tcloud-ui-calendar .day .appointment-dot.appointment-alert{background-color:var(--c-alert-500)}.tcloud-ui-calendar .day .appointment-dot.appointment-danger{background-color:var(--c-danger-500)}.tcloud-ui-calendar .day .appointment-dot.appointment-success{background-color:var(--c-success-500)}.tcloud-ui-calendar .month,.tcloud-ui-calendar .year{align-content:center;border:none;border-radius:var(--bor-radius-4);cursor:pointer;height:var(--size-32);text-align:center;text-transform:capitalize;transition:.1s ease;width:100%}.tcloud-ui-calendar .month:hover,.tcloud-ui-calendar .month:focus,.tcloud-ui-calendar .year:hover,.tcloud-ui-calendar .year:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tcloud-ui-calendar .month:active,.tcloud-ui-calendar .year:active{background-color:var(--c-primary-300);color:var(--c-primary-500)}\n"] }]
         }], propDecorators: { appointments: [{
                 type: Input
             }], activeDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeDate", required: false }] }], onSelectDate: [{ type: i0.Output, args: ["onSelectDate"] }] } });
@@ -11058,13 +11072,13 @@ class TcRevCalendarComponent {
         return this.appointments.find(appointment => appointment.appointmentDate === dateString);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TcRevCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TcRevCalendarComponent, isStandalone: true, selector: "tc-rev-calendar", inputs: { appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: false, isRequired: false, transformFunction: null }, activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectDate: "onSelectDate" }, ngImport: i0, template: "<div class=\"tc-rev-calendar\">\n  <div class=\"calendar-header\">\n    @if (viewMode === 'days') {\n      <button class=\"prev-btn mar-r-a\" (click)=\"changeMonth(-1)\"><i class=\"fa-light fa-chevron-left\"></i></button>\n    }\n    @if (viewMode === 'months' || viewMode === 'years') {\n      <button class=\"prev-btn mar-r-a\" (click)=\"changeYearOffset(-1)\"><i class=\"fa-light fa-chevron-left\"></i></button>\n    }\n    @if (viewMode === 'days')\n      {\n      <span class=\"calendar-title date\" (click)=\"toggleViewMode('months')\">{{ month }}&nbsp;-&nbsp;</span>\n      <span class=\"calendar-title date\" (click)=\"toggleViewMode('years')\">{{ year }}</span>\n    }\n    @else if (viewMode === 'months')\n    {\n    <span class=\"calendar-title\">Selecione o m\u00EAs</span>\n  }\n  @else if (viewMode === 'years')\n  {\n  <span class=\"calendar-title\">Selecione o ano</span>\n}\n@if (viewMode === 'months' || viewMode === 'years') {\n  <button class=\"next-btn mar-l-a\" (click)=\"changeYearOffset(1)\"><i class=\"fa-light fa-chevron-right\"></i></button>\n}\n@if (viewMode === 'days') {\n  <button class=\"next-btn mar-l-a\" (click)=\"changeMonth(1)\"><i class=\"fa-light fa-chevron-right\"></i></button>\n}\n</div>\n\n@if (viewMode === 'days') {\n  <div class=\"calendar-grid\">\n    @for (day of daysOfWeek; track day) {\n      <div class=\"day-header\">{{ day }}</div>\n    }\n    @for (day of calendarDays; track day) {\n      <button\n        class=\"day\"\n        [class.selected]=\"day.date.valueOf() === innerActiveDate().valueOf()\"\n        [class.current-month]=\"day.isCurrentMonth\"\n        [title]=\"isAppointment(day.date)?.description ? isAppointment(day.date)?.description : ''\"\n        (click)=\"onSelectDate.emit(day.date)\"\n        >\n        @if (isAppointment(day.date)) {\n          <span\n            class=\"appointment-dot\"\n            [ngClass]=\"'appointment-'+ isAppointment(day.date)?.type\"\n          ></span>\n        }\n        {{ day.date.getDate() }}\n      </button>\n    }\n  </div>\n}\n\n@if (viewMode === 'months') {\n  <div class=\"calendar-grid months\">\n    @for (month of calendarMonths; track month; let i = $index) {\n      <div\n        class=\"month\"\n        (click)=\"selectMonth(i)\"\n        >\n        {{ month }}\n      </div>\n    }\n  </div>\n}\n\n@if (viewMode === 'years') {\n  <div class=\"calendar-grid years\">\n    @for (year of calendarYears; track year) {\n      <div\n        class=\"year\"\n        (click)=\"selectYear(year)\"\n        >\n        {{ year }}\n      </div>\n    }\n  </div>\n}\n</div>", styles: [":host{display:block}.tc-rev-calendar{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-16);color:var(--c-neutral-700);font-family:var(--f-family);min-height:274px;min-width:16.125rem;padding:var(--size-16)}.tc-rev-calendar .calendar-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--size-16)}.tc-rev-calendar .calendar-header .prev-btn,.tc-rev-calendar .calendar-header .next-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-500);border-radius:var(--bor-radius-rounded);color:inherit;cursor:pointer;display:flex;justify-content:center;font-size:var(--f-size-14);height:var(--size-32);width:var(--size-32)}.tc-rev-calendar .calendar-header .calendar-title{cursor:default;font-size:var(--f-size-14);line-height:var(--l-height-20)}.tc-rev-calendar .calendar-header .calendar-title.date{cursor:pointer;text-transform:capitalize}.tc-rev-calendar .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);justify-items:center}.tc-rev-calendar .calendar-grid.months{grid-template-columns:repeat(3,1fr);row-gap:10px}.tc-rev-calendar .calendar-grid.years{grid-template-columns:repeat(4,1fr);row-gap:10px}.tc-rev-calendar .day-header{cursor:default;font-size:var(--f-size-12);font-weight:var(--f-weight-700);line-height:var(--l-height-16);text-align:center;align-content:center;height:var(--size-32);width:var(--size-32)}.tc-rev-calendar .day{align-content:center;border-radius:var(--bor-radius-rounded);background:transparent;border:none;color:inherit;padding:0;cursor:default;font-size:var(--f-size-12);line-height:var(--l-height-16);position:relative;height:var(--size-32);text-align:center;transition:.1s ease;width:var(--size-32)}.tc-rev-calendar .day:hover,.tc-rev-calendar .day:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tc-rev-calendar .day:active,.tc-rev-calendar .day.selected{background-color:var(--c-primary-300);color:var(--c-primary-500)}.tc-rev-calendar .day .appointment-dot{width:6px;height:6px;border-radius:50%;position:absolute;top:5px;right:5px}.tc-rev-calendar .day .appointment-dot.appointment-info{background-color:var(--c-info-500)}.tc-rev-calendar .day .appointment-dot.appointment-alert{background-color:var(--c-alert-500)}.tc-rev-calendar .day .appointment-dot.appointment-danger{background-color:var(--c-danger-500)}.tc-rev-calendar .day .appointment-dot.appointment-success{background-color:var(--c-success-500)}.tc-rev-calendar .month,.tc-rev-calendar .year{align-content:center;border:none;border-radius:var(--bor-radius-4);cursor:pointer;height:var(--size-32);text-align:center;text-transform:capitalize;transition:.1s ease;width:100%}.tc-rev-calendar .month:hover,.tc-rev-calendar .month:focus,.tc-rev-calendar .year:hover,.tc-rev-calendar .year:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tc-rev-calendar .month:active,.tc-rev-calendar .year:active{background-color:var(--c-primary-300);color:var(--c-primary-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TcRevCalendarComponent, isStandalone: true, selector: "tc-rev-calendar", inputs: { appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: false, isRequired: false, transformFunction: null }, activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectDate: "onSelectDate" }, ngImport: i0, template: "<div class=\"tc-rev-calendar\">\n  <div class=\"calendar-header\">\n    @if (viewMode === 'days') {\n      <button class=\"prev-btn mar-r-a\" (click)=\"changeMonth(-1)\"><i class=\"fa-light fa-chevron-left\"></i></button>\n    }\n    @if (viewMode === 'months' || viewMode === 'years') {\n      <button class=\"prev-btn mar-r-a\" (click)=\"changeYearOffset(-1)\"><i class=\"fa-light fa-chevron-left\"></i></button>\n    }\n    @if (viewMode === 'days')\n      {\n      <span class=\"calendar-title date\" (click)=\"toggleViewMode('months')\">{{ month }}&nbsp;-&nbsp;</span>\n      <span class=\"calendar-title date\" (click)=\"toggleViewMode('years')\">{{ year }}</span>\n    }\n    @else if (viewMode === 'months')\n    {\n    <span class=\"calendar-title\">Selecione o m\u00EAs</span>\n  }\n  @else if (viewMode === 'years')\n  {\n  <span class=\"calendar-title\">Selecione o ano</span>\n}\n@if (viewMode === 'months' || viewMode === 'years') {\n  <button class=\"next-btn mar-l-a\" (click)=\"changeYearOffset(1)\"><i class=\"fa-light fa-chevron-right\"></i></button>\n}\n@if (viewMode === 'days') {\n  <button class=\"next-btn mar-l-a\" (click)=\"changeMonth(1)\"><i class=\"fa-light fa-chevron-right\"></i></button>\n}\n</div>\n\n@if (viewMode === 'days') {\n  <div class=\"calendar-grid\">\n    @for (day of daysOfWeek; track $index) {\n      <div class=\"day-header\">{{ day }}</div>\n    }\n    @for (day of calendarDays; track day) {\n      <button\n        class=\"day\"\n        [class.selected]=\"day.date.valueOf() === innerActiveDate().valueOf()\"\n        [class.current-month]=\"day.isCurrentMonth\"\n        [title]=\"isAppointment(day.date)?.description ? isAppointment(day.date)?.description : ''\"\n        (click)=\"onSelectDate.emit(day.date)\"\n        >\n        @if (isAppointment(day.date)) {\n          <span\n            class=\"appointment-dot\"\n            [ngClass]=\"'appointment-'+ isAppointment(day.date)?.type\"\n          ></span>\n        }\n        {{ day.date.getDate() }}\n      </button>\n    }\n  </div>\n}\n\n@if (viewMode === 'months') {\n  <div class=\"calendar-grid months\">\n    @for (month of calendarMonths; track month; let i = $index) {\n      <div\n        class=\"month\"\n        (click)=\"selectMonth(i)\"\n        >\n        {{ month }}\n      </div>\n    }\n  </div>\n}\n\n@if (viewMode === 'years') {\n  <div class=\"calendar-grid years\">\n    @for (year of calendarYears; track year) {\n      <div\n        class=\"year\"\n        (click)=\"selectYear(year)\"\n        >\n        {{ year }}\n      </div>\n    }\n  </div>\n}\n</div>", styles: [":host{display:block}.tc-rev-calendar{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-16);color:var(--c-neutral-700);font-family:var(--f-family);min-height:274px;min-width:16.125rem;padding:var(--size-16)}.tc-rev-calendar .calendar-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--size-16)}.tc-rev-calendar .calendar-header .prev-btn,.tc-rev-calendar .calendar-header .next-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-500);border-radius:var(--bor-radius-rounded);color:inherit;cursor:pointer;display:flex;justify-content:center;font-size:var(--f-size-14);height:var(--size-32);width:var(--size-32)}.tc-rev-calendar .calendar-header .calendar-title{cursor:default;font-size:var(--f-size-14);line-height:var(--l-height-20)}.tc-rev-calendar .calendar-header .calendar-title.date{cursor:pointer;text-transform:capitalize}.tc-rev-calendar .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);justify-items:center}.tc-rev-calendar .calendar-grid.months{grid-template-columns:repeat(3,1fr);row-gap:10px}.tc-rev-calendar .calendar-grid.years{grid-template-columns:repeat(4,1fr);row-gap:10px}.tc-rev-calendar .day-header{cursor:default;font-size:var(--f-size-12);font-weight:var(--f-weight-700);line-height:var(--l-height-16);text-align:center;align-content:center;height:var(--size-32);width:var(--size-32)}.tc-rev-calendar .day{align-content:center;border-radius:var(--bor-radius-rounded);background:transparent;border:none;color:inherit;padding:0;cursor:default;font-size:var(--f-size-12);line-height:var(--l-height-16);position:relative;height:var(--size-32);text-align:center;transition:.1s ease;width:var(--size-32)}.tc-rev-calendar .day:hover,.tc-rev-calendar .day:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tc-rev-calendar .day:active,.tc-rev-calendar .day.selected{background-color:var(--c-primary-300);color:var(--c-primary-500)}.tc-rev-calendar .day .appointment-dot{width:6px;height:6px;border-radius:50%;position:absolute;top:5px;right:5px}.tc-rev-calendar .day .appointment-dot.appointment-info{background-color:var(--c-info-500)}.tc-rev-calendar .day .appointment-dot.appointment-alert{background-color:var(--c-alert-500)}.tc-rev-calendar .day .appointment-dot.appointment-danger{background-color:var(--c-danger-500)}.tc-rev-calendar .day .appointment-dot.appointment-success{background-color:var(--c-success-500)}.tc-rev-calendar .month,.tc-rev-calendar .year{align-content:center;border:none;border-radius:var(--bor-radius-4);cursor:pointer;height:var(--size-32);text-align:center;text-transform:capitalize;transition:.1s ease;width:100%}.tc-rev-calendar .month:hover,.tc-rev-calendar .month:focus,.tc-rev-calendar .year:hover,.tc-rev-calendar .year:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tc-rev-calendar .month:active,.tc-rev-calendar .year:active{background-color:var(--c-primary-300);color:var(--c-primary-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TcRevCalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tc-rev-calendar', imports: [
                         CommonModule,
-                    ], template: "<div class=\"tc-rev-calendar\">\n  <div class=\"calendar-header\">\n    @if (viewMode === 'days') {\n      <button class=\"prev-btn mar-r-a\" (click)=\"changeMonth(-1)\"><i class=\"fa-light fa-chevron-left\"></i></button>\n    }\n    @if (viewMode === 'months' || viewMode === 'years') {\n      <button class=\"prev-btn mar-r-a\" (click)=\"changeYearOffset(-1)\"><i class=\"fa-light fa-chevron-left\"></i></button>\n    }\n    @if (viewMode === 'days')\n      {\n      <span class=\"calendar-title date\" (click)=\"toggleViewMode('months')\">{{ month }}&nbsp;-&nbsp;</span>\n      <span class=\"calendar-title date\" (click)=\"toggleViewMode('years')\">{{ year }}</span>\n    }\n    @else if (viewMode === 'months')\n    {\n    <span class=\"calendar-title\">Selecione o m\u00EAs</span>\n  }\n  @else if (viewMode === 'years')\n  {\n  <span class=\"calendar-title\">Selecione o ano</span>\n}\n@if (viewMode === 'months' || viewMode === 'years') {\n  <button class=\"next-btn mar-l-a\" (click)=\"changeYearOffset(1)\"><i class=\"fa-light fa-chevron-right\"></i></button>\n}\n@if (viewMode === 'days') {\n  <button class=\"next-btn mar-l-a\" (click)=\"changeMonth(1)\"><i class=\"fa-light fa-chevron-right\"></i></button>\n}\n</div>\n\n@if (viewMode === 'days') {\n  <div class=\"calendar-grid\">\n    @for (day of daysOfWeek; track day) {\n      <div class=\"day-header\">{{ day }}</div>\n    }\n    @for (day of calendarDays; track day) {\n      <button\n        class=\"day\"\n        [class.selected]=\"day.date.valueOf() === innerActiveDate().valueOf()\"\n        [class.current-month]=\"day.isCurrentMonth\"\n        [title]=\"isAppointment(day.date)?.description ? isAppointment(day.date)?.description : ''\"\n        (click)=\"onSelectDate.emit(day.date)\"\n        >\n        @if (isAppointment(day.date)) {\n          <span\n            class=\"appointment-dot\"\n            [ngClass]=\"'appointment-'+ isAppointment(day.date)?.type\"\n          ></span>\n        }\n        {{ day.date.getDate() }}\n      </button>\n    }\n  </div>\n}\n\n@if (viewMode === 'months') {\n  <div class=\"calendar-grid months\">\n    @for (month of calendarMonths; track month; let i = $index) {\n      <div\n        class=\"month\"\n        (click)=\"selectMonth(i)\"\n        >\n        {{ month }}\n      </div>\n    }\n  </div>\n}\n\n@if (viewMode === 'years') {\n  <div class=\"calendar-grid years\">\n    @for (year of calendarYears; track year) {\n      <div\n        class=\"year\"\n        (click)=\"selectYear(year)\"\n        >\n        {{ year }}\n      </div>\n    }\n  </div>\n}\n</div>", styles: [":host{display:block}.tc-rev-calendar{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-16);color:var(--c-neutral-700);font-family:var(--f-family);min-height:274px;min-width:16.125rem;padding:var(--size-16)}.tc-rev-calendar .calendar-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--size-16)}.tc-rev-calendar .calendar-header .prev-btn,.tc-rev-calendar .calendar-header .next-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-500);border-radius:var(--bor-radius-rounded);color:inherit;cursor:pointer;display:flex;justify-content:center;font-size:var(--f-size-14);height:var(--size-32);width:var(--size-32)}.tc-rev-calendar .calendar-header .calendar-title{cursor:default;font-size:var(--f-size-14);line-height:var(--l-height-20)}.tc-rev-calendar .calendar-header .calendar-title.date{cursor:pointer;text-transform:capitalize}.tc-rev-calendar .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);justify-items:center}.tc-rev-calendar .calendar-grid.months{grid-template-columns:repeat(3,1fr);row-gap:10px}.tc-rev-calendar .calendar-grid.years{grid-template-columns:repeat(4,1fr);row-gap:10px}.tc-rev-calendar .day-header{cursor:default;font-size:var(--f-size-12);font-weight:var(--f-weight-700);line-height:var(--l-height-16);text-align:center;align-content:center;height:var(--size-32);width:var(--size-32)}.tc-rev-calendar .day{align-content:center;border-radius:var(--bor-radius-rounded);background:transparent;border:none;color:inherit;padding:0;cursor:default;font-size:var(--f-size-12);line-height:var(--l-height-16);position:relative;height:var(--size-32);text-align:center;transition:.1s ease;width:var(--size-32)}.tc-rev-calendar .day:hover,.tc-rev-calendar .day:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tc-rev-calendar .day:active,.tc-rev-calendar .day.selected{background-color:var(--c-primary-300);color:var(--c-primary-500)}.tc-rev-calendar .day .appointment-dot{width:6px;height:6px;border-radius:50%;position:absolute;top:5px;right:5px}.tc-rev-calendar .day .appointment-dot.appointment-info{background-color:var(--c-info-500)}.tc-rev-calendar .day .appointment-dot.appointment-alert{background-color:var(--c-alert-500)}.tc-rev-calendar .day .appointment-dot.appointment-danger{background-color:var(--c-danger-500)}.tc-rev-calendar .day .appointment-dot.appointment-success{background-color:var(--c-success-500)}.tc-rev-calendar .month,.tc-rev-calendar .year{align-content:center;border:none;border-radius:var(--bor-radius-4);cursor:pointer;height:var(--size-32);text-align:center;text-transform:capitalize;transition:.1s ease;width:100%}.tc-rev-calendar .month:hover,.tc-rev-calendar .month:focus,.tc-rev-calendar .year:hover,.tc-rev-calendar .year:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tc-rev-calendar .month:active,.tc-rev-calendar .year:active{background-color:var(--c-primary-300);color:var(--c-primary-500)}\n"] }]
+                    ], template: "<div class=\"tc-rev-calendar\">\n  <div class=\"calendar-header\">\n    @if (viewMode === 'days') {\n      <button class=\"prev-btn mar-r-a\" (click)=\"changeMonth(-1)\"><i class=\"fa-light fa-chevron-left\"></i></button>\n    }\n    @if (viewMode === 'months' || viewMode === 'years') {\n      <button class=\"prev-btn mar-r-a\" (click)=\"changeYearOffset(-1)\"><i class=\"fa-light fa-chevron-left\"></i></button>\n    }\n    @if (viewMode === 'days')\n      {\n      <span class=\"calendar-title date\" (click)=\"toggleViewMode('months')\">{{ month }}&nbsp;-&nbsp;</span>\n      <span class=\"calendar-title date\" (click)=\"toggleViewMode('years')\">{{ year }}</span>\n    }\n    @else if (viewMode === 'months')\n    {\n    <span class=\"calendar-title\">Selecione o m\u00EAs</span>\n  }\n  @else if (viewMode === 'years')\n  {\n  <span class=\"calendar-title\">Selecione o ano</span>\n}\n@if (viewMode === 'months' || viewMode === 'years') {\n  <button class=\"next-btn mar-l-a\" (click)=\"changeYearOffset(1)\"><i class=\"fa-light fa-chevron-right\"></i></button>\n}\n@if (viewMode === 'days') {\n  <button class=\"next-btn mar-l-a\" (click)=\"changeMonth(1)\"><i class=\"fa-light fa-chevron-right\"></i></button>\n}\n</div>\n\n@if (viewMode === 'days') {\n  <div class=\"calendar-grid\">\n    @for (day of daysOfWeek; track $index) {\n      <div class=\"day-header\">{{ day }}</div>\n    }\n    @for (day of calendarDays; track day) {\n      <button\n        class=\"day\"\n        [class.selected]=\"day.date.valueOf() === innerActiveDate().valueOf()\"\n        [class.current-month]=\"day.isCurrentMonth\"\n        [title]=\"isAppointment(day.date)?.description ? isAppointment(day.date)?.description : ''\"\n        (click)=\"onSelectDate.emit(day.date)\"\n        >\n        @if (isAppointment(day.date)) {\n          <span\n            class=\"appointment-dot\"\n            [ngClass]=\"'appointment-'+ isAppointment(day.date)?.type\"\n          ></span>\n        }\n        {{ day.date.getDate() }}\n      </button>\n    }\n  </div>\n}\n\n@if (viewMode === 'months') {\n  <div class=\"calendar-grid months\">\n    @for (month of calendarMonths; track month; let i = $index) {\n      <div\n        class=\"month\"\n        (click)=\"selectMonth(i)\"\n        >\n        {{ month }}\n      </div>\n    }\n  </div>\n}\n\n@if (viewMode === 'years') {\n  <div class=\"calendar-grid years\">\n    @for (year of calendarYears; track year) {\n      <div\n        class=\"year\"\n        (click)=\"selectYear(year)\"\n        >\n        {{ year }}\n      </div>\n    }\n  </div>\n}\n</div>", styles: [":host{display:block}.tc-rev-calendar{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-16);color:var(--c-neutral-700);font-family:var(--f-family);min-height:274px;min-width:16.125rem;padding:var(--size-16)}.tc-rev-calendar .calendar-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--size-16)}.tc-rev-calendar .calendar-header .prev-btn,.tc-rev-calendar .calendar-header .next-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-500);border-radius:var(--bor-radius-rounded);color:inherit;cursor:pointer;display:flex;justify-content:center;font-size:var(--f-size-14);height:var(--size-32);width:var(--size-32)}.tc-rev-calendar .calendar-header .calendar-title{cursor:default;font-size:var(--f-size-14);line-height:var(--l-height-20)}.tc-rev-calendar .calendar-header .calendar-title.date{cursor:pointer;text-transform:capitalize}.tc-rev-calendar .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);justify-items:center}.tc-rev-calendar .calendar-grid.months{grid-template-columns:repeat(3,1fr);row-gap:10px}.tc-rev-calendar .calendar-grid.years{grid-template-columns:repeat(4,1fr);row-gap:10px}.tc-rev-calendar .day-header{cursor:default;font-size:var(--f-size-12);font-weight:var(--f-weight-700);line-height:var(--l-height-16);text-align:center;align-content:center;height:var(--size-32);width:var(--size-32)}.tc-rev-calendar .day{align-content:center;border-radius:var(--bor-radius-rounded);background:transparent;border:none;color:inherit;padding:0;cursor:default;font-size:var(--f-size-12);line-height:var(--l-height-16);position:relative;height:var(--size-32);text-align:center;transition:.1s ease;width:var(--size-32)}.tc-rev-calendar .day:hover,.tc-rev-calendar .day:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tc-rev-calendar .day:active,.tc-rev-calendar .day.selected{background-color:var(--c-primary-300);color:var(--c-primary-500)}.tc-rev-calendar .day .appointment-dot{width:6px;height:6px;border-radius:50%;position:absolute;top:5px;right:5px}.tc-rev-calendar .day .appointment-dot.appointment-info{background-color:var(--c-info-500)}.tc-rev-calendar .day .appointment-dot.appointment-alert{background-color:var(--c-alert-500)}.tc-rev-calendar .day .appointment-dot.appointment-danger{background-color:var(--c-danger-500)}.tc-rev-calendar .day .appointment-dot.appointment-success{background-color:var(--c-success-500)}.tc-rev-calendar .month,.tc-rev-calendar .year{align-content:center;border:none;border-radius:var(--bor-radius-4);cursor:pointer;height:var(--size-32);text-align:center;text-transform:capitalize;transition:.1s ease;width:100%}.tc-rev-calendar .month:hover,.tc-rev-calendar .month:focus,.tc-rev-calendar .year:hover,.tc-rev-calendar .year:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tc-rev-calendar .month:active,.tc-rev-calendar .year:active{background-color:var(--c-primary-300);color:var(--c-primary-500)}\n"] }]
         }], propDecorators: { appointments: [{
                 type: Input
             }], activeDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeDate", required: false }] }], onSelectDate: [{ type: i0.Output, args: ["onSelectDate"] }] } });