ngx-vector-components 4.8.0 → 4.9.0

package/fesm2015/ngx-vector-components.mjs

@@ -102,6 +102,7 @@ var TableColumnType;
     TableColumnType["ACTIVE_BOOLEAN_BADGE"] = "ACTIVE_BOOLEAN_BADGE";
     TableColumnType["BUTTON"] = "BUTTON";
     TableColumnType["CUSTOM_STYLE"] = "CUSTOM_STYLE";
+    TableColumnType["MASK"] = "MASK";
 })(TableColumnType || (TableColumnType = {}));
 
 var DocumentType;
@@ -363,6 +364,10 @@ class MaskUtil {
         return stringValue;
     }
     static doMaskString(str, pattern) {
+        if (!pattern || !pattern.includes('#')) {
+            console.warn('Utilize uma máscara válida. Ex.: (##) #####-####');
+            return str;
+        }
         let i = 0;
         return pattern.replace(/#/g, () => str[i++]);
     }
@@ -661,6 +666,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
                 }]
         }] });
 
+class MaskPipe {
+    transform(value = '', mask) {
+        if (!mask || !mask.includes('#')) {
+            console.warn('Uma máscara válida deve ser passada para o MaskPipe. Ex.: (##) #####-####');
+            return value;
+        }
+        return MaskUtil.doMaskString(value, mask);
+    }
+}
+MaskPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MaskPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+MaskPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MaskPipe, name: "mask" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MaskPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'mask',
+                }]
+        }] });
+
 class NotHiddenPipe {
     transform(value) {
         return (value === null || value === void 0 ? void 0 : value.filter((item) => !item.hidden)) || [];
@@ -708,13 +731,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
 class PipesModule {
 }
 PipesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: PipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PipesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: PipesModule, declarations: [RemoveLastChildPipe, CurrencyBrlPipe, NotHiddenPipe, OnlyActivePipe, FormatDocumentPipe], exports: [RemoveLastChildPipe, CurrencyBrlPipe, NotHiddenPipe, OnlyActivePipe, FormatDocumentPipe] });
+PipesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: PipesModule, declarations: [RemoveLastChildPipe, CurrencyBrlPipe, NotHiddenPipe, OnlyActivePipe, FormatDocumentPipe, MaskPipe], exports: [RemoveLastChildPipe, CurrencyBrlPipe, NotHiddenPipe, OnlyActivePipe, FormatDocumentPipe, MaskPipe] });
 PipesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: PipesModule });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: PipesModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [RemoveLastChildPipe, CurrencyBrlPipe, NotHiddenPipe, OnlyActivePipe, FormatDocumentPipe],
-                    exports: [RemoveLastChildPipe, CurrencyBrlPipe, NotHiddenPipe, OnlyActivePipe, FormatDocumentPipe],
+                    declarations: [RemoveLastChildPipe, CurrencyBrlPipe, NotHiddenPipe, OnlyActivePipe, FormatDocumentPipe, MaskPipe],
+                    exports: [RemoveLastChildPipe, CurrencyBrlPipe, NotHiddenPipe, OnlyActivePipe, FormatDocumentPipe, MaskPipe],
                 }]
         }] });
 
@@ -1527,7 +1550,7 @@ class CalendarComponent {
     }
 }
 CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: CalendarComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
-CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: CalendarComponent, selector: "vector-calendar-field", inputs: { isRequired: "isRequired", control: "control", label: "label", showCalendarOnFocus: "showCalendarOnFocus", min: "min", max: "max", disabledDates: "disabledDates", disabled: "disabled", defaultDate: "defaultDate", hiddenErrorMessage: "hiddenErrorMessage" }, ngImport: i0, template: "<div class=\"relative\">\n  <div class=\"input-container\">\n    <p-calendar\n      appendTo=\"body\"\n      [formControl]=\"control\"\n      [showOnFocus]=\"showCalendarOnFocus\"\n      [minDate]=\"min\"\n      [maxDate]=\"max\"\n      icon=\"fas fa-calendar-day\"\n      [showIcon]=\"true\"\n      [disabledDates]=\"disabledDates\"\n      [readonlyInput]=\"false\"\n      (onShow)=\"onShowCalendar()\"\n      (onClose)=\"onHideCalendar()\"\n      [disabled]=\"disabled\"\n      [defaultDate]=\"defaultDate\"\n    ></p-calendar>\n  </div>\n  <vector-field-error-message *ngIf=\"!hiddenErrorMessage\" [control]=\"control\"></vector-field-error-message>\n</div>\n", styles: [".input-container input{transition:border-width ease-in-out .08s;border:1px solid rgba(0,0,0,.6);width:100%;padding:6px 30px 6px 12px;font-size:14px;line-height:1.5em;border-radius:var(--border-radius);height:40px}.input-container input:disabled{cursor:not-allowed;background-color:var(--disabled-background);opacity:1}.input-container input:focus{outline:0;box-shadow:none;border-width:2px}.input-container input::placeholder{color:var(--placeholder-color);font-size:12px}.input-container input.ng-touched.ng-invalid{border-color:var(--error-color)!important}.input-container .input-error{font-size:.7em;color:var(--error-color)}\n"], components: [{ type: i2$3.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "view", "defaultDate", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { type: FieldErrorMessageComponent, selector: "vector-field-error-message", inputs: ["control"] }], directives: [{ type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: CalendarComponent, selector: "vector-calendar-field", inputs: { isRequired: "isRequired", control: "control", label: "label", showCalendarOnFocus: "showCalendarOnFocus", min: "min", max: "max", disabledDates: "disabledDates", disabled: "disabled", defaultDate: "defaultDate", hiddenErrorMessage: "hiddenErrorMessage" }, ngImport: i0, template: "<div class=\"relative\">\n  <div class=\"input-container\">\n    <p-calendar\n      appendTo=\"body\"\n      [formControl]=\"control\"\n      [showOnFocus]=\"showCalendarOnFocus\"\n      [minDate]=\"min\"\n      [maxDate]=\"max\"\n      icon=\"fas fa-calendar-day\"\n      [showIcon]=\"true\"\n      [disabledDates]=\"disabledDates\"\n      [readonlyInput]=\"false\"\n      (onShow)=\"onShowCalendar()\"\n      (onClose)=\"onHideCalendar()\"\n      [disabled]=\"disabled\"\n      [defaultDate]=\"defaultDate\"\n    ></p-calendar>\n  </div>\n  <vector-field-error-message *ngIf=\"!hiddenErrorMessage\" [control]=\"control\"></vector-field-error-message>\n</div>\n", styles: [".input-container input{transition:border-width ease-in-out .08s;border:1px solid rgba(0,0,0,.6);width:100%;padding:6px 30px 6px 12px;font-size:14px;line-height:1.5em;border-radius:var(--border-radius);height:40px}.input-container input:disabled{cursor:not-allowed;background-color:var(--disabled-background);opacity:1}.input-container input:focus{outline:0;box-shadow:none;border-width:2px}.input-container input::placeholder{color:var(--placeholder-color);font-size:12px}.input-container input.ng-touched.ng-invalid{border-color:var(--error-color)!important}.input-container .input-error{font-size:.7em;color:var(--error-color)}\n"], components: [{ type: i2$3.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "view", "defaultDate", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { type: FieldErrorMessageComponent, selector: "vector-field-error-message", inputs: ["control"] }], directives: [{ type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vector-calendar-field', template: "<div class=\"relative\">\n  <div class=\"input-container\">\n    <p-calendar\n      appendTo=\"body\"\n      [formControl]=\"control\"\n      [showOnFocus]=\"showCalendarOnFocus\"\n      [minDate]=\"min\"\n      [maxDate]=\"max\"\n      icon=\"fas fa-calendar-day\"\n      [showIcon]=\"true\"\n      [disabledDates]=\"disabledDates\"\n      [readonlyInput]=\"false\"\n      (onShow)=\"onShowCalendar()\"\n      (onClose)=\"onHideCalendar()\"\n      [disabled]=\"disabled\"\n      [defaultDate]=\"defaultDate\"\n    ></p-calendar>\n  </div>\n  <vector-field-error-message *ngIf=\"!hiddenErrorMessage\" [control]=\"control\"></vector-field-error-message>\n</div>\n", styles: [".input-container input{transition:border-width ease-in-out .08s;border:1px solid rgba(0,0,0,.6);width:100%;padding:6px 30px 6px 12px;font-size:14px;line-height:1.5em;border-radius:var(--border-radius);height:40px}.input-container input:disabled{cursor:not-allowed;background-color:var(--disabled-background);opacity:1}.input-container input:focus{outline:0;box-shadow:none;border-width:2px}.input-container input::placeholder{color:var(--placeholder-color);font-size:12px}.input-container input.ng-touched.ng-invalid{border-color:var(--error-color)!important}.input-container .input-error{font-size:.7em;color:var(--error-color)}\n"] }]
@@ -1637,7 +1660,7 @@ class CurrencyFieldComponent {
     }
 }
 CurrencyFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: CurrencyFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CurrencyFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: CurrencyFieldComponent, selector: "vector-currency-field", inputs: { minValue: "minValue", maxValue: "maxValue", placeholder: "placeholder", control: "control", outlined: "outlined", rounded: "rounded", label: "label", isBankingField: "isBankingField", inputClassName: "inputClassName" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: InputNumber, descendants: true }], ngImport: i0, template: "<div [ngClass]=\"{ 'input-container': outlined, 'value-input-container': !outlined, rounded: rounded }\">\n  <div class=\"inner-container\">\n    <label *ngIf=\"label\">{{ label }}</label>\n    <div class=\"input\">\n      <span *ngIf=\"!outlined\">R$ </span>\n      <div class=\"value-input\">\n        <p-inputNumber\n          class=\"currency-input\"\n          [ngClass]=\"getInputNgClass()\"\n          [formControl]=\"control\"\n          mode=\"decimal\"\n          [minFractionDigits]=\"2\"\n          [maxFractionDigits]=\"2\"\n          [min]=\"minValue\"\n          [max]=\"maxValue\"\n          [prefix]=\"outlined ? 'R$ ' : ''\"\n          (click)=\"isBankingField ? focusLastIndex($event) : null\"\n          (onKeyDown)=\"isBankingField ? inputNextChar($event) : null\"\n        ></p-inputNumber>\n      </div>\n    </div>\n  </div>\n  <span *ngIf=\"rounded\" class=\"clear-value\" (click)=\"clearValue()\"><i class=\"pi pi-times\"></i></span>\n</div>\n", styles: [".value-input-container{padding:5px 20px;display:flex;align-items:center;justify-content:space-between}.value-input-container:focus-within{border:2px solid var(--theme-dark)}.value-input-container:not(.rounded) span{font-size:2em}.value-input-container label{color:var(--gray-dark);font-size:13px}.value-input-container span{font-weight:700;color:var(--theme-dark)}.value-input-container .input{display:flex;align-items:center}.value-input-container .input .value-input{margin:0 4px;flex:1}.rounded:not(.currency-input){padding:0 25px;background-color:#fff;border-radius:16px}.rounded span{font-size:1em}.rounded input{font-size:1rem}.rounded .clear-value{padding:5px 5px 0;border-radius:20px}.rounded .clear-value:hover{background-color:var(--gray-medium)}\n"], components: [{ type: i1$5.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+CurrencyFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: CurrencyFieldComponent, selector: "vector-currency-field", inputs: { minValue: "minValue", maxValue: "maxValue", placeholder: "placeholder", control: "control", outlined: "outlined", rounded: "rounded", label: "label", isBankingField: "isBankingField", inputClassName: "inputClassName" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: InputNumber, descendants: true }], ngImport: i0, template: "<div [ngClass]=\"{ 'input-container': outlined, 'value-input-container': !outlined, rounded: rounded }\">\n  <div class=\"inner-container\">\n    <label *ngIf=\"label\">{{ label }}</label>\n    <div class=\"input\">\n      <span *ngIf=\"!outlined\">R$ </span>\n      <div class=\"value-input\">\n        <p-inputNumber\n          class=\"currency-input\"\n          [ngClass]=\"getInputNgClass()\"\n          [formControl]=\"control\"\n          mode=\"decimal\"\n          [minFractionDigits]=\"2\"\n          [maxFractionDigits]=\"2\"\n          [min]=\"minValue\"\n          [max]=\"maxValue\"\n          [prefix]=\"outlined ? 'R$ ' : ''\"\n          (click)=\"isBankingField ? focusLastIndex($event) : null\"\n          (onKeyDown)=\"isBankingField ? inputNextChar($event) : null\"\n        ></p-inputNumber>\n      </div>\n    </div>\n  </div>\n  <span *ngIf=\"rounded\" class=\"clear-value\" (click)=\"clearValue()\"><i class=\"pi pi-times\"></i></span>\n</div>\n", styles: [".value-input-container{padding:5px 20px;display:flex;align-items:center;justify-content:space-between}.value-input-container:focus-within{border:2px solid var(--theme-dark)}.value-input-container:not(.rounded) span{font-size:2em}.value-input-container label{color:var(--gray-dark);font-size:13px}.value-input-container span{font-weight:700;color:var(--theme-dark)}.value-input-container .input{display:flex;align-items:center}.value-input-container .input .value-input{margin:0 4px;flex:1}.rounded:not(.currency-input){padding:0 25px;background-color:#fff;border-radius:16px}.rounded span{font-size:1em}.rounded input{font-size:1rem}.rounded .clear-value{padding:5px 5px 0;border-radius:20px}.rounded .clear-value:hover{background-color:var(--gray-medium)}\n"], components: [{ type: i1$5.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: CurrencyFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vector-currency-field', template: "<div [ngClass]=\"{ 'input-container': outlined, 'value-input-container': !outlined, rounded: rounded }\">\n  <div class=\"inner-container\">\n    <label *ngIf=\"label\">{{ label }}</label>\n    <div class=\"input\">\n      <span *ngIf=\"!outlined\">R$ </span>\n      <div class=\"value-input\">\n        <p-inputNumber\n          class=\"currency-input\"\n          [ngClass]=\"getInputNgClass()\"\n          [formControl]=\"control\"\n          mode=\"decimal\"\n          [minFractionDigits]=\"2\"\n          [maxFractionDigits]=\"2\"\n          [min]=\"minValue\"\n          [max]=\"maxValue\"\n          [prefix]=\"outlined ? 'R$ ' : ''\"\n          (click)=\"isBankingField ? focusLastIndex($event) : null\"\n          (onKeyDown)=\"isBankingField ? inputNextChar($event) : null\"\n        ></p-inputNumber>\n      </div>\n    </div>\n  </div>\n  <span *ngIf=\"rounded\" class=\"clear-value\" (click)=\"clearValue()\"><i class=\"pi pi-times\"></i></span>\n</div>\n", styles: [".value-input-container{padding:5px 20px;display:flex;align-items:center;justify-content:space-between}.value-input-container:focus-within{border:2px solid var(--theme-dark)}.value-input-container:not(.rounded) span{font-size:2em}.value-input-container label{color:var(--gray-dark);font-size:13px}.value-input-container span{font-weight:700;color:var(--theme-dark)}.value-input-container .input{display:flex;align-items:center}.value-input-container .input .value-input{margin:0 4px;flex:1}.rounded:not(.currency-input){padding:0 25px;background-color:#fff;border-radius:16px}.rounded span{font-size:1em}.rounded input{font-size:1rem}.rounded .clear-value{padding:5px 5px 0;border-radius:20px}.rounded .clear-value:hover{background-color:var(--gray-medium)}\n"] }]
@@ -1833,7 +1856,7 @@ class TextFieldComponent {
     }
 }
 TextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: TextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: TextFieldComponent, selector: "vector-text-field", inputs: { isRequired: "isRequired", label: "label", maxlength: "maxlength", isPassword: "isPassword", numeric: "numeric", decimal: "decimal", onlyText: "onlyText", alphaNumeric: "alphaNumeric", mask: "mask", autoClear: "autoClear", rightIcon: "rightIcon", centered: "centered", enableDocumentTypeChoice: "enableDocumentTypeChoice", hiddenErrorMessage: "hiddenErrorMessage", control: "control" }, outputs: { blurEvent: "blurEvent", enterKeyPress: "enterKeyPress", focusEvent: "focusEvent", onDocumentTypeChange: "onDocumentTypeChange" }, ngImport: i0, template: "<form class=\"input-container p-input-icon-right\">\n  <i *ngIf=\"rightIcon\" [class]=\"rightIcon\"></i>\n  <i *ngIf=\"isPassword\" class=\"show-password-icon {{ showPasswordIcon }}\" (click)=\"toggleShowPassword()\"></i>\n  <div class=\"p-inputgroup\">\n    <vector-button\n      *ngIf=\"enableDocumentTypeChoice\"\n      leftIcon=\"fas fa-exchange-alt\"\n      type=\"success\"\n      [label]=\"selectedDocumentType.name\"\n      [disabled]=\"control.disabled\"\n      [noShadow]=\"true\"\n      (onClick)=\"handleDocumentTypeChange()\"\n    ></vector-button>\n\n    <input\n      *ngIf=\"!mask\"\n      pInputText\n      type=\"text\"\n      [formControl]=\"control\"\n      [attr.maxlength]=\"maxlength\"\n      [placeholder]=\"placeholder\"\n      [pValidateOnly]=\"validateOnly\"\n      [pKeyFilter]=\"keyfilter\"\n      [ngClass]=\"{ 'password-field': isPassword && !isPasswordVisible, 'text-centered': centered }\"\n      (onBlur)=\"onBlur()\"\n      (keydown.enter)=\"onEnterPress()\"\n      (click)=\"onFocus($event)\"\n    />\n    <p-inputMask\n      *ngIf=\"mask\"\n      type=\"text\"\n      [formControl]=\"control\"\n      [mask]=\"mask\"\n      [placeholder]=\"placeholder\"\n      (onBlur)=\"onBlur()\"\n      (keydown.enter)=\"onEnterPress()\"\n      [autoClear]=\"autoClear\"\n      [unmask]=\"true\"\n      [styleClass]=\"centered ? 'text-centered' : ''\"\n      slotChar=\"_\"\n      (click)=\"onFocus($event)\"\n    ></p-inputMask>\n  </div>\n  <vector-field-error-message *ngIf=\"!hiddenErrorMessage\" [control]=\"control\"></vector-field-error-message>\n  <!-- <span class=\"input-error\">{{ fieldErrorLabel() }}</span> -->\n</form>\n", styles: [".input-container{width:100%}.input-container .password-field{-webkit-text-security:disc}.input-container .input-error{font-size:.7em;color:var(--error-color);position:absolute;width:max-content}.input-container .show-password-icon{font-size:1.4em;margin-right:5px;cursor:pointer}.input-container .text-centered{text-align:center}\n"], components: [{ type: ButtonComponent, selector: "vector-button", inputs: ["disabled", "label", "type", "leftIcon", "rightIcon", "noShadow", "style"], outputs: ["onClick"] }, { type: i2$5.InputMask, selector: "p-inputMask", inputs: ["type", "slotChar", "autoClear", "style", "inputId", "styleClass", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "disabled", "readonly", "unmask", "name", "required", "characterPattern", "autoFocus", "autocomplete", "mask"], outputs: ["onComplete", "onFocus", "onBlur", "onInput", "onKeydown"] }, { type: FieldErrorMessageComponent, selector: "vector-field-error-message", inputs: ["control"] }], directives: [{ type: i2$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.InputText, selector: "[pInputText]" }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2$4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i7.KeyFilter, selector: "[pKeyFilter]", inputs: ["pValidateOnly", "pKeyFilter"], outputs: ["ngModelChange"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+TextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: TextFieldComponent, selector: "vector-text-field", inputs: { isRequired: "isRequired", label: "label", maxlength: "maxlength", isPassword: "isPassword", numeric: "numeric", decimal: "decimal", onlyText: "onlyText", alphaNumeric: "alphaNumeric", mask: "mask", autoClear: "autoClear", rightIcon: "rightIcon", centered: "centered", enableDocumentTypeChoice: "enableDocumentTypeChoice", hiddenErrorMessage: "hiddenErrorMessage", control: "control" }, outputs: { blurEvent: "blurEvent", enterKeyPress: "enterKeyPress", focusEvent: "focusEvent", onDocumentTypeChange: "onDocumentTypeChange" }, ngImport: i0, template: "<form class=\"input-container p-input-icon-right\">\n  <i *ngIf=\"rightIcon\" [class]=\"rightIcon\"></i>\n  <i *ngIf=\"isPassword\" class=\"show-password-icon {{ showPasswordIcon }}\" (click)=\"toggleShowPassword()\"></i>\n  <div class=\"p-inputgroup\">\n    <vector-button\n      *ngIf=\"enableDocumentTypeChoice\"\n      leftIcon=\"fas fa-exchange-alt\"\n      type=\"success\"\n      [label]=\"selectedDocumentType.name\"\n      [disabled]=\"control.disabled\"\n      [noShadow]=\"true\"\n      (onClick)=\"handleDocumentTypeChange()\"\n    ></vector-button>\n\n    <input\n      *ngIf=\"!mask\"\n      pInputText\n      type=\"text\"\n      [formControl]=\"control\"\n      [attr.maxlength]=\"maxlength\"\n      [placeholder]=\"placeholder\"\n      [pValidateOnly]=\"validateOnly\"\n      [pKeyFilter]=\"keyfilter\"\n      [ngClass]=\"{ 'password-field': isPassword && !isPasswordVisible, 'text-centered': centered }\"\n      (onBlur)=\"onBlur()\"\n      (keydown.enter)=\"onEnterPress()\"\n      (click)=\"onFocus($event)\"\n    />\n    <p-inputMask\n      *ngIf=\"mask\"\n      type=\"text\"\n      [formControl]=\"control\"\n      [mask]=\"mask\"\n      [placeholder]=\"placeholder\"\n      (onBlur)=\"onBlur()\"\n      (keydown.enter)=\"onEnterPress()\"\n      [autoClear]=\"autoClear\"\n      [unmask]=\"true\"\n      [styleClass]=\"centered ? 'text-centered' : ''\"\n      slotChar=\"_\"\n      (click)=\"onFocus($event)\"\n    ></p-inputMask>\n  </div>\n  <vector-field-error-message *ngIf=\"!hiddenErrorMessage\" [control]=\"control\"></vector-field-error-message>\n  <!-- <span class=\"input-error\">{{ fieldErrorLabel() }}</span> -->\n</form>\n", styles: [".input-container{width:100%}.input-container .password-field{-webkit-text-security:disc}.input-container .input-error{font-size:.7em;color:var(--error-color);position:absolute;width:max-content}.input-container .show-password-icon{font-size:1.4em;margin-right:5px;cursor:pointer}.input-container .text-centered{text-align:center}\n"], components: [{ type: ButtonComponent, selector: "vector-button", inputs: ["disabled", "label", "type", "leftIcon", "rightIcon", "noShadow", "style"], outputs: ["onClick"] }, { type: i2$5.InputMask, selector: "p-inputMask", inputs: ["type", "slotChar", "autoClear", "showClear", "style", "inputId", "styleClass", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "disabled", "readonly", "unmask", "name", "required", "characterPattern", "autoFocus", "autocomplete", "mask"], outputs: ["onComplete", "onFocus", "onBlur", "onInput", "onKeydown", "onClear"] }, { type: FieldErrorMessageComponent, selector: "vector-field-error-message", inputs: ["control"] }], directives: [{ type: i2$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.InputText, selector: "[pInputText]" }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2$4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i7.KeyFilter, selector: "[pKeyFilter]", inputs: ["pValidateOnly", "pKeyFilter"], outputs: ["ngModelChange"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: TextFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vector-text-field', template: "<form class=\"input-container p-input-icon-right\">\n  <i *ngIf=\"rightIcon\" [class]=\"rightIcon\"></i>\n  <i *ngIf=\"isPassword\" class=\"show-password-icon {{ showPasswordIcon }}\" (click)=\"toggleShowPassword()\"></i>\n  <div class=\"p-inputgroup\">\n    <vector-button\n      *ngIf=\"enableDocumentTypeChoice\"\n      leftIcon=\"fas fa-exchange-alt\"\n      type=\"success\"\n      [label]=\"selectedDocumentType.name\"\n      [disabled]=\"control.disabled\"\n      [noShadow]=\"true\"\n      (onClick)=\"handleDocumentTypeChange()\"\n    ></vector-button>\n\n    <input\n      *ngIf=\"!mask\"\n      pInputText\n      type=\"text\"\n      [formControl]=\"control\"\n      [attr.maxlength]=\"maxlength\"\n      [placeholder]=\"placeholder\"\n      [pValidateOnly]=\"validateOnly\"\n      [pKeyFilter]=\"keyfilter\"\n      [ngClass]=\"{ 'password-field': isPassword && !isPasswordVisible, 'text-centered': centered }\"\n      (onBlur)=\"onBlur()\"\n      (keydown.enter)=\"onEnterPress()\"\n      (click)=\"onFocus($event)\"\n    />\n    <p-inputMask\n      *ngIf=\"mask\"\n      type=\"text\"\n      [formControl]=\"control\"\n      [mask]=\"mask\"\n      [placeholder]=\"placeholder\"\n      (onBlur)=\"onBlur()\"\n      (keydown.enter)=\"onEnterPress()\"\n      [autoClear]=\"autoClear\"\n      [unmask]=\"true\"\n      [styleClass]=\"centered ? 'text-centered' : ''\"\n      slotChar=\"_\"\n      (click)=\"onFocus($event)\"\n    ></p-inputMask>\n  </div>\n  <vector-field-error-message *ngIf=\"!hiddenErrorMessage\" [control]=\"control\"></vector-field-error-message>\n  <!-- <span class=\"input-error\">{{ fieldErrorLabel() }}</span> -->\n</form>\n", styles: [".input-container{width:100%}.input-container .password-field{-webkit-text-security:disc}.input-container .input-error{font-size:.7em;color:var(--error-color);position:absolute;width:max-content}.input-container .show-password-icon{font-size:1.4em;margin-right:5px;cursor:pointer}.input-container .text-centered{text-align:center}\n"] }]
@@ -2031,7 +2054,7 @@ class DropdownFieldComponent {
     }
 }
 DropdownFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: DropdownFieldComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-DropdownFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: DropdownFieldComponent, selector: "vector-dropdown-field", inputs: { options: "options", isRequired: "isRequired", control: "control", label: "label", service: "service", paged: "paged", buttonAction: "buttonAction", dependencies: "dependencies", hiddenErrorMessage: "hiddenErrorMessage", dynamicFilters: "dynamicFilters", minLengthToService: "minLengthToService", initialLoad: "initialLoad" }, outputs: { onFocus: "onFocus" }, ngImport: i0, template: "<div class=\"relative\">\n  <div class=\"input-container\">\n    <div class=\"input-inner-container\">\n      <p-dropdown\n        *ngIf=\"dynamicFilters\"\n        appendTo=\"body\"\n        optionLabel=\"name\"\n        optionValue=\"code\"\n        [(ngModel)]=\"selectedDynamicFilter\"\n        [options]=\"dynamicFilters\"\n      >\n      </p-dropdown>\n      <p-autoComplete\n        appendTo=\"body\"\n        field=\"name\"\n        dataKey=\"code\"\n        [forceSelection]=\"true\"\n        [dropdown]=\"true\"\n        [formControl]=\"control\"\n        [placeholder]=\"placeholder\"\n        [suggestions]=\"pagedSuggestions\"\n        [dropdownIcon]=\"dynamicFilters ? 'pi pi-search' : 'pi pi-chevron-down'\"\n        (completeMethod)=\"search($event)\"\n        (onShow)=\"onOpenAutocompletePanel()\"\n        (onHide)=\"onHideAutocompletePanel()\"\n        (onFocus)=\"onFocus.emit($event)\"\n      >\n      </p-autoComplete>\n    </div>\n    <vector-button\n      *ngIf=\"buttonAction\"\n      [label]=\"buttonAction.label\"\n      [disabled]=\"!control.value\"\n      (onClick)=\"buttonAction.onClick(control.value)\"\n    ></vector-button>\n  </div>\n  <vector-field-error-message *ngIf=\"!hiddenErrorMessage\" [control]=\"control\"></vector-field-error-message>\n</div>\n", styles: [".input-container{display:flex;align-items:flex-end;width:100%}@media (max-width: 575px){.input-container{align-items:flex-start;flex-direction:column}}.input-container p-autoComplete{flex:1}@media (max-width: 575px){.input-container p-autoComplete{width:100%}}.input-container vector-button{margin-left:15px}@media (max-width: 575px){.input-container vector-button{margin-left:0;margin-top:10px;width:100%}}.input-container p-dropdown{margin-right:-5px;width:150px}@media (max-width: 575px){.input-container p-dropdown{width:100px}}.input-container .input-inner-container{display:flex;width:100%}\n"], components: [{ type: i1$6.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "virtualScroll", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "disabled", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear"] }, { type: i2$6.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "virtualScroll", "itemSize", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "field", "scrollHeight", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "suggestions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide"] }, { type: ButtonComponent, selector: "vector-button", inputs: ["disabled", "label", "type", "leftIcon", "rightIcon", "noShadow", "style"], outputs: ["onClick"] }, { type: FieldErrorMessageComponent, selector: "vector-field-error-message", inputs: ["control"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+DropdownFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: DropdownFieldComponent, selector: "vector-dropdown-field", inputs: { options: "options", isRequired: "isRequired", control: "control", label: "label", service: "service", paged: "paged", buttonAction: "buttonAction", dependencies: "dependencies", hiddenErrorMessage: "hiddenErrorMessage", dynamicFilters: "dynamicFilters", minLengthToService: "minLengthToService", initialLoad: "initialLoad" }, outputs: { onFocus: "onFocus" }, ngImport: i0, template: "<div class=\"relative\">\n  <div class=\"input-container\">\n    <div class=\"input-inner-container\">\n      <p-dropdown\n        *ngIf=\"dynamicFilters\"\n        appendTo=\"body\"\n        optionLabel=\"name\"\n        optionValue=\"code\"\n        [(ngModel)]=\"selectedDynamicFilter\"\n        [options]=\"dynamicFilters\"\n      >\n      </p-dropdown>\n      <p-autoComplete\n        appendTo=\"body\"\n        field=\"name\"\n        dataKey=\"code\"\n        [forceSelection]=\"true\"\n        [dropdown]=\"true\"\n        [formControl]=\"control\"\n        [placeholder]=\"placeholder\"\n        [suggestions]=\"pagedSuggestions\"\n        [dropdownIcon]=\"dynamicFilters ? 'pi pi-search' : 'pi pi-chevron-down'\"\n        (completeMethod)=\"search($event)\"\n        (onShow)=\"onOpenAutocompletePanel()\"\n        (onHide)=\"onHideAutocompletePanel()\"\n        (onFocus)=\"onFocus.emit($event)\"\n      >\n      </p-autoComplete>\n    </div>\n    <vector-button\n      *ngIf=\"buttonAction\"\n      [label]=\"buttonAction.label\"\n      [disabled]=\"!control.value\"\n      (onClick)=\"buttonAction.onClick(control.value)\"\n    ></vector-button>\n  </div>\n  <vector-field-error-message *ngIf=\"!hiddenErrorMessage\" [control]=\"control\"></vector-field-error-message>\n</div>\n", styles: [".input-container{display:flex;align-items:flex-end;width:100%}@media (max-width: 575px){.input-container{align-items:flex-start;flex-direction:column}}.input-container p-autoComplete{flex:1}@media (max-width: 575px){.input-container p-autoComplete{width:100%}}.input-container vector-button{margin-left:15px}@media (max-width: 575px){.input-container vector-button{margin-left:0;margin-top:10px;width:100%}}.input-container p-dropdown{margin-right:-5px;width:150px}@media (max-width: 575px){.input-container p-dropdown{width:100px}}.input-container .input-inner-container{display:flex;width:100%}\n"], components: [{ type: i1$6.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "virtualScroll", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "disabled", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear"] }, { type: i2$6.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "virtualScroll", "itemSize", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "scrollHeight", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "suggestions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide"] }, { type: ButtonComponent, selector: "vector-button", inputs: ["disabled", "label", "type", "leftIcon", "rightIcon", "noShadow", "style"], outputs: ["onClick"] }, { type: FieldErrorMessageComponent, selector: "vector-field-error-message", inputs: ["control"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: DropdownFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vector-dropdown-field', template: "<div class=\"relative\">\n  <div class=\"input-container\">\n    <div class=\"input-inner-container\">\n      <p-dropdown\n        *ngIf=\"dynamicFilters\"\n        appendTo=\"body\"\n        optionLabel=\"name\"\n        optionValue=\"code\"\n        [(ngModel)]=\"selectedDynamicFilter\"\n        [options]=\"dynamicFilters\"\n      >\n      </p-dropdown>\n      <p-autoComplete\n        appendTo=\"body\"\n        field=\"name\"\n        dataKey=\"code\"\n        [forceSelection]=\"true\"\n        [dropdown]=\"true\"\n        [formControl]=\"control\"\n        [placeholder]=\"placeholder\"\n        [suggestions]=\"pagedSuggestions\"\n        [dropdownIcon]=\"dynamicFilters ? 'pi pi-search' : 'pi pi-chevron-down'\"\n        (completeMethod)=\"search($event)\"\n        (onShow)=\"onOpenAutocompletePanel()\"\n        (onHide)=\"onHideAutocompletePanel()\"\n        (onFocus)=\"onFocus.emit($event)\"\n      >\n      </p-autoComplete>\n    </div>\n    <vector-button\n      *ngIf=\"buttonAction\"\n      [label]=\"buttonAction.label\"\n      [disabled]=\"!control.value\"\n      (onClick)=\"buttonAction.onClick(control.value)\"\n    ></vector-button>\n  </div>\n  <vector-field-error-message *ngIf=\"!hiddenErrorMessage\" [control]=\"control\"></vector-field-error-message>\n</div>\n", styles: [".input-container{display:flex;align-items:flex-end;width:100%}@media (max-width: 575px){.input-container{align-items:flex-start;flex-direction:column}}.input-container p-autoComplete{flex:1}@media (max-width: 575px){.input-container p-autoComplete{width:100%}}.input-container vector-button{margin-left:15px}@media (max-width: 575px){.input-container vector-button{margin-left:0;margin-top:10px;width:100%}}.input-container p-dropdown{margin-right:-5px;width:150px}@media (max-width: 575px){.input-container p-dropdown{width:100px}}.input-container .input-inner-container{display:flex;width:100%}\n"] }]
@@ -2088,6 +2111,7 @@ var FieldType;
     FieldType[FieldType["CURRENCY"] = 4] = "CURRENCY";
     FieldType[FieldType["DYNAMIC_DROPDOWN"] = 5] = "DYNAMIC_DROPDOWN";
     FieldType[FieldType["SELECT_BUTTON"] = 6] = "SELECT_BUTTON";
+    FieldType[FieldType["DATE_RANGE"] = 7] = "DATE_RANGE";
 })(FieldType || (FieldType = {}));
 class FiltersComponent {
     constructor(activatedRoute) {
@@ -2106,7 +2130,22 @@ class FiltersComponent {
         this.fieldsSubscription.unsubscribe();
         this.fieldsSubscription = new Subscription();
         (_a = this.fields) === null || _a === void 0 ? void 0 : _a.forEach((field) => {
-            this.formGroup.addControl(field.name, new FormControl({ value: field.defaultValue, disabled: field.readonly }, this.buildValidators(field)));
+            var _a, _b;
+            if (field.type === FieldType.DATE_RANGE) {
+                this.formGroup.addControl(field.name, new FormGroup({
+                    startDate: new FormControl({ value: (_a = field.defaultValue) === null || _a === void 0 ? void 0 : _a.startDate, disabled: field.readonly }, [
+                        ...this.buildValidators(field),
+                        ValidationUtil.lowerThanOrEqualTo('endDate'),
+                    ]),
+                    endDate: new FormControl({ value: (_b = field.defaultValue) === null || _b === void 0 ? void 0 : _b.endDate, disabled: field.readonly }, [
+                        ...this.buildValidators(field),
+                        ValidationUtil.greaterThanOrEqualTo('startDate'),
+                    ]),
+                }));
+            }
+            else {
+                this.formGroup.addControl(field.name, new FormControl({ value: field.defaultValue, disabled: field.readonly }, this.buildValidators(field)));
+            }
         });
         const queryParams = this.activatedRoute.snapshot.queryParams;
         if (Object.keys(queryParams).length) {
@@ -2144,18 +2183,21 @@ class FiltersComponent {
         this.fieldsSubscription.unsubscribe();
     }
     search() {
-        const filterValue = this.formGroup.getRawValue();
-        Object.keys(filterValue).forEach((key) => {
-            var _a, _b;
-            if ((_a = filterValue[key]) === null || _a === void 0 ? void 0 : _a.hasOwnProperty('code')) {
-                filterValue[key] = filterValue[key].code;
-            }
-            if (!ObjectUtil.isValid(filterValue[key])) {
-                const fieldType = ((_b = this.fields.find((field) => field.name === key)) === null || _b === void 0 ? void 0 : _b.type) || FieldType.TEXT;
-                filterValue[key] = [FieldType.DROPDOWN, FieldType.NUMBER].includes(fieldType) ? -1 : '';
-            }
-        });
-        this.onSearch.emit(filterValue);
+        this.formGroup.markAllAsTouched();
+        if (this.formGroup.valid) {
+            const filterValue = this.formGroup.getRawValue();
+            Object.keys(filterValue).forEach((key) => {
+                var _a, _b;
+                if ((_a = filterValue[key]) === null || _a === void 0 ? void 0 : _a.hasOwnProperty('code')) {
+                    filterValue[key] = filterValue[key].code;
+                }
+                if (!ObjectUtil.isValid(filterValue[key])) {
+                    const fieldType = ((_b = this.fields.find((field) => field.name === key)) === null || _b === void 0 ? void 0 : _b.type) || FieldType.TEXT;
+                    filterValue[key] = [FieldType.DROPDOWN, FieldType.NUMBER].includes(fieldType) ? -1 : '';
+                }
+            });
+            this.onSearch.emit(filterValue);
+        }
     }
     isTextFieldType(field) {
         return [FieldType.TEXT, FieldType.NUMBER].includes(field.type);
@@ -2210,10 +2252,10 @@ class FiltersComponent {
     }
 }
 FiltersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: FiltersComponent, deps: [{ token: i2$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-FiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: FiltersComponent, selector: "vector-filters", inputs: { fields: "fields" }, outputs: { onSearch: "onSearch", formBuilded: "formBuilded" }, ngImport: i0, template: "<div class=\"grid filter-container\" [ngClass]=\"{ 'display-none': hideFilters }\" [formGroup]=\"formGroup\">\n  <div *ngFor=\"let field of fields | notHidden\" class=\"field col-12 sm:col-8 {{ getGridClass(field) }}\">\n    <label>{{ field.label }}</label>\n    <vector-text-field\n      *ngIf=\"isTextFieldType(field)\"\n      [control]=\"formGroup.get(field.name)\"\n      [mask]=\"field.mask\"\n      [label]=\"field.placeholder\"\n      [isRequired]=\"field.required\"\n      [numeric]=\"field.type === fieldTypes.NUMBER\"\n    ></vector-text-field>\n    <vector-dropdown-field\n      *ngIf=\"field.type === fieldTypes.DROPDOWN || field.type === fieldTypes.DYNAMIC_DROPDOWN\"\n      [dynamicFilters]=\"field.filterTypes\"\n      [options]=\"field.options || []\"\n      [service]=\"field.service\"\n      [isRequired]=\"field.required\"\n      [minLengthToService]=\"field.minLengthToService || 0\"\n      [control]=\"formGroup.get(field.name)\"\n      [paged]=\"false\"\n      [dependencies]=\"getFieldDependencies(field)\"\n      [initialLoad]=\"!!field.defaultValue\"\n    ></vector-dropdown-field>\n    <vector-currency-field\n      *ngIf=\"field.type === fieldTypes.CURRENCY\"\n      [control]=\"formGroup.get(field.name)\"\n      [outlined]=\"true\"\n    ></vector-currency-field>\n    <vector-calendar-field\n      *ngIf=\"field.type === fieldTypes.DATE\"\n      [control]=\"formGroup.get(field.name)\"\n      [isRequired]=\"field.required\"\n      [label]=\"field.placeholder || ''\"\n    ></vector-calendar-field>\n    <vector-select-button-field\n      *ngIf=\"field.type === fieldTypes.SELECT_BUTTON\"\n      [control]=\"formGroup.get(field.name)\"\n      [options]=\"field.options\"\n    >\n    </vector-select-button-field>\n  </div>\n  <div class=\"search-button sm:col-4\">\n    <vector-button\n      label=\"Pesquisar\"\n      (click)=\"search()\"\n      [disabled]=\"!formGroup.valid\"\n      style=\"float: right; width: 150px\"\n    ></vector-button>\n  </div>\n</div>\n", styles: [".filter-container{align-items:center}.filter-container .field{display:flex;flex-direction:column}.filter-container .search-button{flex:1;padding-right:7px}@media (min-width: 768px){.filter-container .search-button{padding-top:36px}}.display-none{display:none!important}\n"], components: [{ type: TextFieldComponent, selector: "vector-text-field", inputs: ["isRequired", "label", "maxlength", "isPassword", "numeric", "decimal", "onlyText", "alphaNumeric", "mask", "autoClear", "rightIcon", "centered", "enableDocumentTypeChoice", "hiddenErrorMessage", "control"], outputs: ["blurEvent", "enterKeyPress", "focusEvent", "onDocumentTypeChange"] }, { type: DropdownFieldComponent, selector: "vector-dropdown-field", inputs: ["options", "isRequired", "control", "label", "service", "paged", "buttonAction", "dependencies", "hiddenErrorMessage", "dynamicFilters", "minLengthToService", "initialLoad"], outputs: ["onFocus"] }, { type: CurrencyFieldComponent, selector: "vector-currency-field", inputs: ["minValue", "maxValue", "placeholder", "control", "outlined", "rounded", "label", "isBankingField", "inputClassName"] }, { type: CalendarComponent, selector: "vector-calendar-field", inputs: ["isRequired", "control", "label", "showCalendarOnFocus", "min", "max", "disabledDates", "disabled", "defaultDate", "hiddenErrorMessage"] }, { type: SelectButtonFieldComponent, selector: "vector-select-button-field", inputs: ["options", "control"] }, { type: ButtonComponent, selector: "vector-button", inputs: ["disabled", "label", "type", "leftIcon", "rightIcon", "noShadow", "style"], outputs: ["onClick"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "notHidden": NotHiddenPipe } });
+FiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: FiltersComponent, selector: "vector-filters", inputs: { fields: "fields" }, outputs: { onSearch: "onSearch", formBuilded: "formBuilded" }, ngImport: i0, template: "<div class=\"grid filter-container\" [ngClass]=\"{ 'display-none': hideFilters }\" [formGroup]=\"formGroup\">\n  <div *ngFor=\"let field of fields | notHidden\" class=\"field col-12 sm:col-8 {{ getGridClass(field) }}\">\n    <label>{{ field.label }}</label>\n    <vector-text-field\n      *ngIf=\"isTextFieldType(field)\"\n      [control]=\"formGroup.get(field.name)\"\n      [mask]=\"field.mask\"\n      [label]=\"field.placeholder\"\n      [isRequired]=\"field.required\"\n      [numeric]=\"field.type === fieldTypes.NUMBER\"\n    ></vector-text-field>\n    <vector-dropdown-field\n      *ngIf=\"field.type === fieldTypes.DROPDOWN || field.type === fieldTypes.DYNAMIC_DROPDOWN\"\n      [dynamicFilters]=\"field.filterTypes\"\n      [options]=\"field.options || []\"\n      [service]=\"field.service\"\n      [isRequired]=\"field.required\"\n      [minLengthToService]=\"field.minLengthToService || 0\"\n      [control]=\"formGroup.get(field.name)\"\n      [paged]=\"false\"\n      [dependencies]=\"getFieldDependencies(field)\"\n      [initialLoad]=\"!!field.defaultValue\"\n    ></vector-dropdown-field>\n    <vector-currency-field\n      *ngIf=\"field.type === fieldTypes.CURRENCY\"\n      [control]=\"formGroup.get(field.name)\"\n      [outlined]=\"true\"\n    ></vector-currency-field>\n    <vector-calendar-field\n      *ngIf=\"field.type === fieldTypes.DATE\"\n      [control]=\"formGroup.get(field.name)\"\n      [isRequired]=\"field.required\"\n      [label]=\"field.placeholder || ''\"\n    ></vector-calendar-field>\n    <vector-select-button-field\n      *ngIf=\"field.type === fieldTypes.SELECT_BUTTON\"\n      [control]=\"formGroup.get(field.name)\"\n      [options]=\"field.options\"\n    >\n    </vector-select-button-field>\n    <div *ngIf=\"field.type === fieldTypes.DATE_RANGE\" class=\"range-date-container\">\n      <vector-calendar-field\n        [control]=\"formGroup.get(field.name + '.startDate')\"\n        [isRequired]=\"field.required\"\n        [label]=\"field.placeholder || ''\"\n      ></vector-calendar-field>\n      At\u00E9\n      <vector-calendar-field\n        [control]=\"formGroup.get(field.name + '.endDate')\"\n        [isRequired]=\"field.required\"\n        [label]=\"field.placeholder || ''\"\n      ></vector-calendar-field>\n    </div>\n  </div>\n  <div class=\"search-button sm:col-4\">\n    <vector-button\n      label=\"Pesquisar\"\n      (click)=\"search()\"\n      [disabled]=\"!formGroup.valid\"\n      style=\"float: right; width: 150px\"\n    ></vector-button>\n  </div>\n</div>\n", styles: [".filter-container{align-items:center}.filter-container .field{display:flex;flex-direction:column}.filter-container .search-button{flex:1;padding-right:7px}@media (min-width: 768px){.filter-container .search-button{padding-top:36px}}.filter-container .range-date-container{display:flex;align-items:center;gap:10px}.display-none{display:none!important}\n"], components: [{ type: TextFieldComponent, selector: "vector-text-field", inputs: ["isRequired", "label", "maxlength", "isPassword", "numeric", "decimal", "onlyText", "alphaNumeric", "mask", "autoClear", "rightIcon", "centered", "enableDocumentTypeChoice", "hiddenErrorMessage", "control"], outputs: ["blurEvent", "enterKeyPress", "focusEvent", "onDocumentTypeChange"] }, { type: DropdownFieldComponent, selector: "vector-dropdown-field", inputs: ["options", "isRequired", "control", "label", "service", "paged", "buttonAction", "dependencies", "hiddenErrorMessage", "dynamicFilters", "minLengthToService", "initialLoad"], outputs: ["onFocus"] }, { type: CurrencyFieldComponent, selector: "vector-currency-field", inputs: ["minValue", "maxValue", "placeholder", "control", "outlined", "rounded", "label", "isBankingField", "inputClassName"] }, { type: CalendarComponent, selector: "vector-calendar-field", inputs: ["isRequired", "control", "label", "showCalendarOnFocus", "min", "max", "disabledDates", "disabled", "defaultDate", "hiddenErrorMessage"] }, { type: SelectButtonFieldComponent, selector: "vector-select-button-field", inputs: ["options", "control"] }, { type: ButtonComponent, selector: "vector-button", inputs: ["disabled", "label", "type", "leftIcon", "rightIcon", "noShadow", "style"], outputs: ["onClick"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "notHidden": NotHiddenPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: FiltersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vector-filters', template: "<div class=\"grid filter-container\" [ngClass]=\"{ 'display-none': hideFilters }\" [formGroup]=\"formGroup\">\n  <div *ngFor=\"let field of fields | notHidden\" class=\"field col-12 sm:col-8 {{ getGridClass(field) }}\">\n    <label>{{ field.label }}</label>\n    <vector-text-field\n      *ngIf=\"isTextFieldType(field)\"\n      [control]=\"formGroup.get(field.name)\"\n      [mask]=\"field.mask\"\n      [label]=\"field.placeholder\"\n      [isRequired]=\"field.required\"\n      [numeric]=\"field.type === fieldTypes.NUMBER\"\n    ></vector-text-field>\n    <vector-dropdown-field\n      *ngIf=\"field.type === fieldTypes.DROPDOWN || field.type === fieldTypes.DYNAMIC_DROPDOWN\"\n      [dynamicFilters]=\"field.filterTypes\"\n      [options]=\"field.options || []\"\n      [service]=\"field.service\"\n      [isRequired]=\"field.required\"\n      [minLengthToService]=\"field.minLengthToService || 0\"\n      [control]=\"formGroup.get(field.name)\"\n      [paged]=\"false\"\n      [dependencies]=\"getFieldDependencies(field)\"\n      [initialLoad]=\"!!field.defaultValue\"\n    ></vector-dropdown-field>\n    <vector-currency-field\n      *ngIf=\"field.type === fieldTypes.CURRENCY\"\n      [control]=\"formGroup.get(field.name)\"\n      [outlined]=\"true\"\n    ></vector-currency-field>\n    <vector-calendar-field\n      *ngIf=\"field.type === fieldTypes.DATE\"\n      [control]=\"formGroup.get(field.name)\"\n      [isRequired]=\"field.required\"\n      [label]=\"field.placeholder || ''\"\n    ></vector-calendar-field>\n    <vector-select-button-field\n      *ngIf=\"field.type === fieldTypes.SELECT_BUTTON\"\n      [control]=\"formGroup.get(field.name)\"\n      [options]=\"field.options\"\n    >\n    </vector-select-button-field>\n  </div>\n  <div class=\"search-button sm:col-4\">\n    <vector-button\n      label=\"Pesquisar\"\n      (click)=\"search()\"\n      [disabled]=\"!formGroup.valid\"\n      style=\"float: right; width: 150px\"\n    ></vector-button>\n  </div>\n</div>\n", styles: [".filter-container{align-items:center}.filter-container .field{display:flex;flex-direction:column}.filter-container .search-button{flex:1;padding-right:7px}@media (min-width: 768px){.filter-container .search-button{padding-top:36px}}.display-none{display:none!important}\n"] }]
+            args: [{ selector: 'vector-filters', template: "<div class=\"grid filter-container\" [ngClass]=\"{ 'display-none': hideFilters }\" [formGroup]=\"formGroup\">\n  <div *ngFor=\"let field of fields | notHidden\" class=\"field col-12 sm:col-8 {{ getGridClass(field) }}\">\n    <label>{{ field.label }}</label>\n    <vector-text-field\n      *ngIf=\"isTextFieldType(field)\"\n      [control]=\"formGroup.get(field.name)\"\n      [mask]=\"field.mask\"\n      [label]=\"field.placeholder\"\n      [isRequired]=\"field.required\"\n      [numeric]=\"field.type === fieldTypes.NUMBER\"\n    ></vector-text-field>\n    <vector-dropdown-field\n      *ngIf=\"field.type === fieldTypes.DROPDOWN || field.type === fieldTypes.DYNAMIC_DROPDOWN\"\n      [dynamicFilters]=\"field.filterTypes\"\n      [options]=\"field.options || []\"\n      [service]=\"field.service\"\n      [isRequired]=\"field.required\"\n      [minLengthToService]=\"field.minLengthToService || 0\"\n      [control]=\"formGroup.get(field.name)\"\n      [paged]=\"false\"\n      [dependencies]=\"getFieldDependencies(field)\"\n      [initialLoad]=\"!!field.defaultValue\"\n    ></vector-dropdown-field>\n    <vector-currency-field\n      *ngIf=\"field.type === fieldTypes.CURRENCY\"\n      [control]=\"formGroup.get(field.name)\"\n      [outlined]=\"true\"\n    ></vector-currency-field>\n    <vector-calendar-field\n      *ngIf=\"field.type === fieldTypes.DATE\"\n      [control]=\"formGroup.get(field.name)\"\n      [isRequired]=\"field.required\"\n      [label]=\"field.placeholder || ''\"\n    ></vector-calendar-field>\n    <vector-select-button-field\n      *ngIf=\"field.type === fieldTypes.SELECT_BUTTON\"\n      [control]=\"formGroup.get(field.name)\"\n      [options]=\"field.options\"\n    >\n    </vector-select-button-field>\n    <div *ngIf=\"field.type === fieldTypes.DATE_RANGE\" class=\"range-date-container\">\n      <vector-calendar-field\n        [control]=\"formGroup.get(field.name + '.startDate')\"\n        [isRequired]=\"field.required\"\n        [label]=\"field.placeholder || ''\"\n      ></vector-calendar-field>\n      At\u00E9\n      <vector-calendar-field\n        [control]=\"formGroup.get(field.name + '.endDate')\"\n        [isRequired]=\"field.required\"\n        [label]=\"field.placeholder || ''\"\n      ></vector-calendar-field>\n    </div>\n  </div>\n  <div class=\"search-button sm:col-4\">\n    <vector-button\n      label=\"Pesquisar\"\n      (click)=\"search()\"\n      [disabled]=\"!formGroup.valid\"\n      style=\"float: right; width: 150px\"\n    ></vector-button>\n  </div>\n</div>\n", styles: [".filter-container{align-items:center}.filter-container .field{display:flex;flex-direction:column}.filter-container .search-button{flex:1;padding-right:7px}@media (min-width: 768px){.filter-container .search-button{padding-top:36px}}.filter-container .range-date-container{display:flex;align-items:center;gap:10px}.display-none{display:none!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i2$1.ActivatedRoute }]; }, propDecorators: { fields: [{
                 type: Input
             }], onSearch: [{
@@ -2243,16 +2285,16 @@ class DataTableComponent {
         this.onExportPDF = new EventEmitter();
         this.onSelectedRows = new EventEmitter();
         this.onFilterChanged = new EventEmitter();
+        this.selectedItems = [];
         this._height = 'small';
         this._tabs = [];
-        this.draw = 1;
-        this.firstLazyLoadedDone = false;
-        this.filterSubscription = new Subscription();
-        this.selectedItems = [];
+        this._draw = 1;
+        this._firstLazyLoadedDone = false;
+        this._filterSubscription = new Subscription();
     }
     set tabs(_tabs) {
         this._tabs = _tabs;
-        this.tabSelected = _tabs[0];
+        this._tabSelected = _tabs[0];
     }
     set height(_height) {
         switch (_height) {
@@ -2288,7 +2330,7 @@ class DataTableComponent {
         }
     }
     ngOnDestroy() {
-        this.filterSubscription.unsubscribe();
+        this._filterSubscription.unsubscribe();
     }
     getColStyle(col) {
         return { 'min-width': col.width };
@@ -2313,7 +2355,7 @@ class DataTableComponent {
                     searchable: true,
                 });
             }
-            this.lastLazyLoadEvent = Object.assign(Object.assign({}, (this.lastLazyLoadEvent || {})), { start: params.data.first, length: params.data.rows, draw: this.draw++, order: params.data.sortField
+            this._lastLazyLoadEvent = Object.assign(Object.assign({}, (this._lastLazyLoadEvent || {})), { start: params.data.first, length: params.data.rows, draw: this._draw++, order: params.data.sortField
                     ? [
                         {
                             column: this.columns.findIndex((col) => col.field === params.data.sortField) + 1,
@@ -2323,15 +2365,15 @@ class DataTableComponent {
                     : [{ column: 0, dir: 'desc' }], columns: columns });
         }
         else {
-            this.lastLazyLoadEvent = Object.assign(Object.assign({}, this.lastLazyLoadEvent), params.data);
-            if (this.tabSelected) {
-                this.lastLazyLoadEvent = Object.assign(Object.assign({}, (this.lastLazyLoadEvent || {})), { Status: this.tabSelected.code });
+            this._lastLazyLoadEvent = Object.assign(Object.assign({}, this._lastLazyLoadEvent), params.data);
+            if (this._tabSelected) {
+                this._lastLazyLoadEvent = Object.assign(Object.assign({}, (this._lastLazyLoadEvent || {})), { Status: this._tabSelected.code });
             }
         }
-        if (this.firstLazyLoadedDone) {
-            this.onLazyLoad.emit(this.lastLazyLoadEvent);
+        if (this._firstLazyLoadedDone) {
+            this.onLazyLoad.emit(this._lastLazyLoadEvent);
         }
-        this.firstLazyLoadedDone = true;
+        this._firstLazyLoadedDone = true;
     }
     getCellContent(item, col) {
         let content = `<span class="p-column-title">${col.header}</span><span class="w-100">`;
@@ -2360,20 +2402,23 @@ class DataTableComponent {
         if (col.type === TableColumnType.BUTTON) {
             content += `<div class="text-centered"><i class="fas ${col.icon || 'fa-circle'} status-table-field table-button"></i></div>`;
         }
+        if (col.type === TableColumnType.MASK) {
+            content += MaskUtil.doMaskString(item[col.field] || '', col.mask);
+        }
         content += `</span>`;
         return content;
     }
     onTabChange($event) {
-        this.tabSelected = this.tabs[$event.index];
+        this._tabSelected = this.tabs[$event.index];
         this.lazyLoaded({ filter: true, data: {} });
     }
     subscribeToFilterChanges() {
         var _a;
-        this.filterSubscription.unsubscribe();
-        this.filterSubscription = new Subscription();
+        this._filterSubscription.unsubscribe();
+        this._filterSubscription = new Subscription();
         Object.keys(((_a = this.filtersComponent) === null || _a === void 0 ? void 0 : _a.formGroup.controls) || {}).forEach((key) => {
             var _a, _b, _c, _d;
-            this.filterSubscription.add((_b = (_a = this.filtersComponent) === null || _a === void 0 ? void 0 : _a.formGroup.get(key)) === null || _b === void 0 ? void 0 : _b.valueChanges.pipe(debounceTime(300)).subscribe((value) => {
+            this._filterSubscription.add((_b = (_a = this.filtersComponent) === null || _a === void 0 ? void 0 : _a.formGroup.get(key)) === null || _b === void 0 ? void 0 : _b.valueChanges.pipe(debounceTime(300)).subscribe((value) => {
                 this.onFilterChanged.emit({ field: key, value });
             }));
             this.onFilterChanged.emit({ field: key, value: (_d = (_c = this.filtersComponent) === null || _c === void 0 ? void 0 : _c.formGroup.get(key)) === null || _d === void 0 ? void 0 : _d.value });
@@ -2476,7 +2521,7 @@ class MultiselectFieldComponent {
     }
 }
 MultiselectFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MultiselectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MultiselectFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MultiselectFieldComponent, selector: "vector-multiselect-field", inputs: { isRequired: "isRequired", control: "control", label: "label", options: "options" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"input-container\">\n  <p-multiSelect\n    #multiselect\n    [options]=\"options\"\n    [formControl]=\"control\"\n    [placeholder]=\"placeholder\"\n    [filter]=\"false\"\n    [maxSelectedLabels]=\"options.length - 1\"\n    optionLabel=\"name\"\n    optionValue=\"code\"\n    dropdownIcon=\"fas fa-sort-down\"\n    selectedItemsLabel=\"Mostrar todos\"\n    [showHeader]=\"true\"\n    [showToggleAll]=\"true\"\n    (onChange)=\"onChange.emit($event)\"\n  >\n  </p-multiSelect>\n  <span class=\"input-error\">{{ fieldErrorLabel() }}</span>\n</div>\n", styles: [".input-container{height:62px}.input-container .input-error{font-size:.7em;color:var(--error-color)}\n"], components: [{ type: i1$8.MultiSelect, selector: "p-multiSelect", inputs: ["style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "label", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "autoZIndex", "baseZIndex", "filterBy", "virtualScroll", "itemSize", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "scrollHeight", "defaultLabel", "placeholder", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onPanelShow", "onPanelHide"] }], directives: [{ type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+MultiselectFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: MultiselectFieldComponent, selector: "vector-multiselect-field", inputs: { isRequired: "isRequired", control: "control", label: "label", options: "options" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"input-container\">\n  <p-multiSelect\n    #multiselect\n    [options]=\"options\"\n    [formControl]=\"control\"\n    [placeholder]=\"placeholder\"\n    [filter]=\"false\"\n    [maxSelectedLabels]=\"options.length - 1\"\n    optionLabel=\"name\"\n    optionValue=\"code\"\n    dropdownIcon=\"fas fa-sort-down\"\n    selectedItemsLabel=\"Mostrar todos\"\n    [showHeader]=\"true\"\n    [showToggleAll]=\"true\"\n    (onChange)=\"onChange.emit($event)\"\n  >\n  </p-multiSelect>\n  <span class=\"input-error\">{{ fieldErrorLabel() }}</span>\n</div>\n", styles: [".input-container{height:62px}.input-container .input-error{font-size:.7em;color:var(--error-color)}\n"], components: [{ type: i1$8.MultiSelect, selector: "p-multiSelect", inputs: ["style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "label", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "autoZIndex", "baseZIndex", "filterBy", "virtualScroll", "itemSize", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "scrollHeight", "defaultLabel", "placeholder", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide"] }], directives: [{ type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: MultiselectFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vector-multiselect-field', template: "<div class=\"input-container\">\n  <p-multiSelect\n    #multiselect\n    [options]=\"options\"\n    [formControl]=\"control\"\n    [placeholder]=\"placeholder\"\n    [filter]=\"false\"\n    [maxSelectedLabels]=\"options.length - 1\"\n    optionLabel=\"name\"\n    optionValue=\"code\"\n    dropdownIcon=\"fas fa-sort-down\"\n    selectedItemsLabel=\"Mostrar todos\"\n    [showHeader]=\"true\"\n    [showToggleAll]=\"true\"\n    (onChange)=\"onChange.emit($event)\"\n  >\n  </p-multiSelect>\n  <span class=\"input-error\">{{ fieldErrorLabel() }}</span>\n</div>\n", styles: [".input-container{height:62px}.input-container .input-error{font-size:.7em;color:var(--error-color)}\n"] }]
@@ -2505,7 +2550,7 @@ class PercentageFieldComponent {
     }
 }
 PercentageFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: PercentageFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PercentageFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: PercentageFieldComponent, selector: "vector-percentage-field", inputs: { control: "control", min: "min", max: "max", minFractionDigits: "minFractionDigits", maxFractionDigits: "maxFractionDigits" }, outputs: { blurEvent: "blurEvent", enterKeyPress: "enterKeyPress", focusEvent: "focusEvent" }, ngImport: i0, template: "<form class=\"input-container\">\n  <p-inputNumber\n    [formControl]=\"control\"\n    suffix=\"%\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [minFractionDigits]=\"minFractionDigits\"\n    [maxFractionDigits]=\"maxFractionDigits\"\n  ></p-inputNumber>\n</form>\n", styles: [".input-container{width:100%}\n"], components: [{ type: i1$5.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown"] }], directives: [{ type: i2$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+PercentageFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: PercentageFieldComponent, selector: "vector-percentage-field", inputs: { control: "control", min: "min", max: "max", minFractionDigits: "minFractionDigits", maxFractionDigits: "maxFractionDigits" }, outputs: { blurEvent: "blurEvent", enterKeyPress: "enterKeyPress", focusEvent: "focusEvent" }, ngImport: i0, template: "<form class=\"input-container\">\n  <p-inputNumber\n    [formControl]=\"control\"\n    suffix=\"%\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [minFractionDigits]=\"minFractionDigits\"\n    [maxFractionDigits]=\"maxFractionDigits\"\n  ></p-inputNumber>\n</form>\n", styles: [".input-container{width:100%}\n"], components: [{ type: i1$5.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }], directives: [{ type: i2$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: PercentageFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vector-percentage-field', template: "<form class=\"input-container\">\n  <p-inputNumber\n    [formControl]=\"control\"\n    suffix=\"%\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [minFractionDigits]=\"minFractionDigits\"\n    [maxFractionDigits]=\"maxFractionDigits\"\n  ></p-inputNumber>\n</form>\n", styles: [".input-container{width:100%}\n"] }]
@@ -3883,5 +3928,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AppName, AuthService, BadgeComponent, BadgeModule, BooleanType, BreadcrumbComponent, BreadcrumbModule, ButtonComponent, CalendarComponent, CheckboxFieldComponent, CrudBaseComponent, CrudBaseService, CrudFooterComponent, CrudHeaderComponent, CrudHeaderModule, CrudHistory, CrudHistoryComponent, CrudHistoryEventType, CrudHistoryModule, CrudListHasItemsGuard, CrudMode, CurrencyBrlPipe, CurrencyFieldComponent, DataTableComponent, DocumentType, DropdownFieldComponent, EnumService, ErrorMessageService, FieldErrorMessageComponent, FieldType, FieldsModule, FileUtil, FiltersComponent, FooterModule, FormatDocumentPipe, GenericErrorModalComponent, GenericErrorModalModule, GenericModalComponent, GenericModalModule, GeolocationService, GetCrudHistoryResolver, GetSelectedCrudItemResolver, GetTokenByGuidGuard, HasPermissionGuard, HttpInterceptorProvider, LoadingService, MaskUtil, MenuComponent, MenuModule, MenuService, MessageStatus, ModalService, MultiselectFieldComponent, NotHiddenPipe, ObjectUtil, OnlyActivePipe, PanelComponent, PanelModule, PercentageFieldComponent, PipesModule, ProfileModuleActionType, ProfileModuleType, ProfileService, RadioButtonFieldComponent, RangeValueComponent, RemoveLastChildPipe, Role, RoleGuard, SearchFieldComponent, SelectButtonFieldComponent, Status, StorageService, StringUtil, SubMenusListComponent, TableColumnType, TextFieldComponent, TextareaFieldComponent, TokenIsPresentGuard, TopBarComponent, TopBarModule, ValidationUtil, View, WindowUtil };
+export { AppName, AuthService, BadgeComponent, BadgeModule, BooleanType, BreadcrumbComponent, BreadcrumbModule, ButtonComponent, CalendarComponent, CheckboxFieldComponent, CrudBaseComponent, CrudBaseService, CrudFooterComponent, CrudHeaderComponent, CrudHeaderModule, CrudHistory, CrudHistoryComponent, CrudHistoryEventType, CrudHistoryModule, CrudListHasItemsGuard, CrudMode, CurrencyBrlPipe, CurrencyFieldComponent, DataTableComponent, DocumentType, DropdownFieldComponent, EnumService, ErrorMessageService, FieldErrorMessageComponent, FieldType, FieldsModule, FileUtil, FiltersComponent, FooterModule, FormatDocumentPipe, GenericErrorModalComponent, GenericErrorModalModule, GenericModalComponent, GenericModalModule, GeolocationService, GetCrudHistoryResolver, GetSelectedCrudItemResolver, GetTokenByGuidGuard, HasPermissionGuard, HttpInterceptorProvider, LoadingService, MaskPipe, MaskUtil, MenuComponent, MenuModule, MenuService, MessageStatus, ModalService, MultiselectFieldComponent, NotHiddenPipe, ObjectUtil, OnlyActivePipe, PanelComponent, PanelModule, PercentageFieldComponent, PipesModule, ProfileModuleActionType, ProfileModuleType, ProfileService, RadioButtonFieldComponent, RangeValueComponent, RemoveLastChildPipe, Role, RoleGuard, SearchFieldComponent, SelectButtonFieldComponent, Status, StorageService, StringUtil, SubMenusListComponent, TableColumnType, TextFieldComponent, TextareaFieldComponent, TokenIsPresentGuard, TopBarComponent, TopBarModule, ValidationUtil, View, WindowUtil };
 //# sourceMappingURL=ngx-vector-components.mjs.map