ngx-vector-components 4.69.3 → 4.70.0

package/fesm2020/ngx-vector-components.mjs

@@ -2138,6 +2138,7 @@ class TextFieldComponent {
         this.decimal = false;
         this.onlyText = false;
         this.alphaNumeric = false;
+        this.alphaNumericAndWhitespace = false;
         this.autoClear = true;
         this.rightIcon = '';
         this.centered = false;
@@ -2203,6 +2204,9 @@ class TextFieldComponent {
         if (this.alphaNumeric) {
             return 'alphanum';
         }
+        if (this.alphaNumericAndWhitespace) {
+            return /^[A-Za-zÀ-ú0-9 ]*$/gm;
+        }
         return /[\s\S]*/;
     }
     get control() {
@@ -2281,7 +2285,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", leftLabel: "leftLabel", control: "control" }, outputs: { blurEvent: "blurEvent", enterKeyPress: "enterKeyPress", focusEvent: "focusEvent", onDocumentTypeChange: "onDocumentTypeChange" }, ngImport: i0, template: "<form class=\"input-container p-input-icon-right\">\r\n  <i *ngIf=\"rightIcon\" [class]=\"rightIcon\"></i>\r\n  <i *ngIf=\"isPassword\" class=\"show-password-icon {{ showPasswordIcon }}\" (click)=\"toggleShowPassword()\"></i>\r\n  <div class=\"p-inputgroup\">\r\n    <vector-button\r\n      *ngIf=\"enableDocumentTypeChoice\"\r\n      leftIcon=\"fas fa-exchange-alt\"\r\n      type=\"success\"\r\n      [label]=\"selectedDocumentType.name\"\r\n      [disabled]=\"control.disabled\"\r\n      [noShadow]=\"true\"\r\n      (onClick)=\"handleDocumentTypeChange()\"\r\n    ></vector-button>\r\n\r\n    <span *ngIf=\"leftLabel\" class=\"left-label\">\r\n      {{ leftLabel }}\r\n    </span>\r\n\r\n    <input\r\n      *ngIf=\"!mask\"\r\n      pInputText\r\n      type=\"text\"\r\n      [formControl]=\"control\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [placeholder]=\"placeholder\"\r\n      [pValidateOnly]=\"validateOnly\"\r\n      [pKeyFilter]=\"keyfilter\"\r\n      [ngClass]=\"{ 'password-field': isPassword && !isPasswordVisible, 'text-centered': centered }\"\r\n      (onBlur)=\"onBlur()\"\r\n      (keydown.enter)=\"onEnterPress()\"\r\n      (click)=\"onFocus($event)\"\r\n    />\r\n    <p-inputMask\r\n      *ngIf=\"mask\"\r\n      type=\"text\"\r\n      [formControl]=\"control\"\r\n      [mask]=\"mask\"\r\n      [placeholder]=\"placeholder\"\r\n      (onBlur)=\"onBlur()\"\r\n      (keydown.enter)=\"onEnterPress()\"\r\n      [autoClear]=\"autoClear\"\r\n      [unmask]=\"true\"\r\n      [styleClass]=\"centered ? 'text-centered' : ''\"\r\n      slotChar=\"_\"\r\n      (click)=\"onFocus($event)\"\r\n    ></p-inputMask>\r\n  </div>\r\n  <vector-field-error-message *ngIf=\"!hiddenErrorMessage\" [control]=\"control\"></vector-field-error-message>\r\n</form>\r\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}.input-container .left-label{min-height:100%;display:flex;align-items:center;justify-content:center;padding:0 10px;white-space:nowrap;font-size:13px;background-color:var(--gray-light);color:var(--theme-primary)}\n"], components: [{ type: ButtonComponent, selector: "vector-button", inputs: ["disabled", "label", "type", "leftIcon", "rightIcon", "noShadow", "style"], outputs: ["onClick"] }, { type: i2$6.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$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$5.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$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2$5.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", alphaNumericAndWhitespace: "alphaNumericAndWhitespace", mask: "mask", autoClear: "autoClear", rightIcon: "rightIcon", centered: "centered", enableDocumentTypeChoice: "enableDocumentTypeChoice", hiddenErrorMessage: "hiddenErrorMessage", leftLabel: "leftLabel", control: "control" }, outputs: { blurEvent: "blurEvent", enterKeyPress: "enterKeyPress", focusEvent: "focusEvent", onDocumentTypeChange: "onDocumentTypeChange" }, ngImport: i0, template: "<form class=\"input-container p-input-icon-right\">\r\n  <i *ngIf=\"rightIcon\" [class]=\"rightIcon\"></i>\r\n  <i *ngIf=\"isPassword\" class=\"show-password-icon {{ showPasswordIcon }}\" (click)=\"toggleShowPassword()\"></i>\r\n  <div class=\"p-inputgroup\">\r\n    <vector-button\r\n      *ngIf=\"enableDocumentTypeChoice\"\r\n      leftIcon=\"fas fa-exchange-alt\"\r\n      type=\"success\"\r\n      [label]=\"selectedDocumentType.name\"\r\n      [disabled]=\"control.disabled\"\r\n      [noShadow]=\"true\"\r\n      (onClick)=\"handleDocumentTypeChange()\"\r\n    ></vector-button>\r\n\r\n    <span *ngIf=\"leftLabel\" class=\"left-label\">\r\n      {{ leftLabel }}\r\n    </span>\r\n\r\n    <input\r\n      *ngIf=\"!mask\"\r\n      pInputText\r\n      type=\"text\"\r\n      [formControl]=\"control\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [placeholder]=\"placeholder\"\r\n      [pValidateOnly]=\"validateOnly\"\r\n      [pKeyFilter]=\"keyfilter\"\r\n      [ngClass]=\"{ 'password-field': isPassword && !isPasswordVisible, 'text-centered': centered }\"\r\n      (onBlur)=\"onBlur()\"\r\n      (keydown.enter)=\"onEnterPress()\"\r\n      (click)=\"onFocus($event)\"\r\n    />\r\n    <p-inputMask\r\n      *ngIf=\"mask\"\r\n      type=\"text\"\r\n      [formControl]=\"control\"\r\n      [mask]=\"mask\"\r\n      [placeholder]=\"placeholder\"\r\n      (onBlur)=\"onBlur()\"\r\n      (keydown.enter)=\"onEnterPress()\"\r\n      [autoClear]=\"autoClear\"\r\n      [unmask]=\"true\"\r\n      [styleClass]=\"centered ? 'text-centered' : ''\"\r\n      slotChar=\"_\"\r\n      (click)=\"onFocus($event)\"\r\n    ></p-inputMask>\r\n  </div>\r\n  <vector-field-error-message *ngIf=\"!hiddenErrorMessage\" [control]=\"control\"></vector-field-error-message>\r\n</form>\r\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}.input-container .left-label{min-height:100%;display:flex;align-items:center;justify-content:center;padding:0 10px;white-space:nowrap;font-size:13px;background-color:var(--gray-light);color:var(--theme-primary)}\n"], components: [{ type: ButtonComponent, selector: "vector-button", inputs: ["disabled", "label", "type", "leftIcon", "rightIcon", "noShadow", "style"], outputs: ["onClick"] }, { type: i2$6.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$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$5.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$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2$5.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\">\r\n  <i *ngIf=\"rightIcon\" [class]=\"rightIcon\"></i>\r\n  <i *ngIf=\"isPassword\" class=\"show-password-icon {{ showPasswordIcon }}\" (click)=\"toggleShowPassword()\"></i>\r\n  <div class=\"p-inputgroup\">\r\n    <vector-button\r\n      *ngIf=\"enableDocumentTypeChoice\"\r\n      leftIcon=\"fas fa-exchange-alt\"\r\n      type=\"success\"\r\n      [label]=\"selectedDocumentType.name\"\r\n      [disabled]=\"control.disabled\"\r\n      [noShadow]=\"true\"\r\n      (onClick)=\"handleDocumentTypeChange()\"\r\n    ></vector-button>\r\n\r\n    <span *ngIf=\"leftLabel\" class=\"left-label\">\r\n      {{ leftLabel }}\r\n    </span>\r\n\r\n    <input\r\n      *ngIf=\"!mask\"\r\n      pInputText\r\n      type=\"text\"\r\n      [formControl]=\"control\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [placeholder]=\"placeholder\"\r\n      [pValidateOnly]=\"validateOnly\"\r\n      [pKeyFilter]=\"keyfilter\"\r\n      [ngClass]=\"{ 'password-field': isPassword && !isPasswordVisible, 'text-centered': centered }\"\r\n      (onBlur)=\"onBlur()\"\r\n      (keydown.enter)=\"onEnterPress()\"\r\n      (click)=\"onFocus($event)\"\r\n    />\r\n    <p-inputMask\r\n      *ngIf=\"mask\"\r\n      type=\"text\"\r\n      [formControl]=\"control\"\r\n      [mask]=\"mask\"\r\n      [placeholder]=\"placeholder\"\r\n      (onBlur)=\"onBlur()\"\r\n      (keydown.enter)=\"onEnterPress()\"\r\n      [autoClear]=\"autoClear\"\r\n      [unmask]=\"true\"\r\n      [styleClass]=\"centered ? 'text-centered' : ''\"\r\n      slotChar=\"_\"\r\n      (click)=\"onFocus($event)\"\r\n    ></p-inputMask>\r\n  </div>\r\n  <vector-field-error-message *ngIf=\"!hiddenErrorMessage\" [control]=\"control\"></vector-field-error-message>\r\n</form>\r\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}.input-container .left-label{min-height:100%;display:flex;align-items:center;justify-content:center;padding:0 10px;white-space:nowrap;font-size:13px;background-color:var(--gray-light);color:var(--theme-primary)}\n"] }]
@@ -2301,6 +2305,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
                 type: Input
             }], alphaNumeric: [{
                 type: Input
+            }], alphaNumericAndWhitespace: [{
+                type: Input
             }], mask: [{
                 type: Input
             }], autoClear: [{
@@ -2747,7 +2753,7 @@ class FiltersComponent {
     }
 }
 FiltersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: FiltersComponent, deps: [{ token: i2$2.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\">\r\n  <div *ngFor=\"let field of fields | notHidden\" class=\"field col-12 sm:col-8 {{ getGridClass(field) }}\">\r\n    <label>{{ field.label }}</label>\r\n    <vector-text-field\r\n      *ngIf=\"isTextFieldType(field)\"\r\n      [control]=\"formGroup.get(field.name)\"\r\n      [mask]=\"field.mask\"\r\n      [label]=\"field.placeholder\"\r\n      [isRequired]=\"field.required\"\r\n      [numeric]=\"field.type === fieldTypes.NUMBER\"\r\n    ></vector-text-field>\r\n    <vector-dropdown-field\r\n      *ngIf=\"[fieldTypes.DYNAMIC_DROPDOWN, fieldTypes.DROPDOWN].includes(field.type)\"\r\n      [dynamicFilters]=\"field.filterTypes\"\r\n      [options]=\"field.options || []\"\r\n      [service]=\"field.service\"\r\n      [isRequired]=\"field.required\"\r\n      [minLengthToService]=\"field.minLengthToService || 0\"\r\n      [control]=\"formGroup.get(field.name)\"\r\n      [paged]=\"false\"\r\n      [dependencies]=\"getFieldDependencies(field)\"\r\n      [initialLoad]=\"field.initiateValue\"\r\n    ></vector-dropdown-field>\r\n    <vector-currency-field\r\n      *ngIf=\"field.type === fieldTypes.CURRENCY\"\r\n      [control]=\"formGroup.get(field.name)\"\r\n      [outlined]=\"true\"\r\n    ></vector-currency-field>\r\n    <vector-calendar-field\r\n      *ngIf=\"field.type === fieldTypes.DATE\"\r\n      [control]=\"formGroup.get(field.name)\"\r\n      [isRequired]=\"field.required\"\r\n      [label]=\"field.placeholder || ''\"\r\n    ></vector-calendar-field>\r\n    <vector-select-button-field\r\n      *ngIf=\"field.type === fieldTypes.SELECT_BUTTON\"\r\n      [control]=\"formGroup.get(field.name)\"\r\n      [options]=\"field.options\"\r\n      (click)=\"search()\"\r\n    >\r\n    </vector-select-button-field>\r\n    <div *ngIf=\"field.type === fieldTypes.DATE_RANGE\" class=\"range-date-container\">\r\n      <vector-calendar-field\r\n        [control]=\"formGroup.get(field.name + '.startDate')\"\r\n        [isRequired]=\"field.required\"\r\n        [label]=\"field.placeholder || ''\"\r\n      ></vector-calendar-field>\r\n      At\u00E9\r\n      <vector-calendar-field\r\n        [control]=\"formGroup.get(field.name + '.endDate')\"\r\n        [isRequired]=\"field.required\"\r\n        [label]=\"field.placeholder || ''\"\r\n      ></vector-calendar-field>\r\n    </div>\r\n    <vector-multiselect-field\r\n      *ngIf=\"field.type === fieldTypes.MULTISELECT\"\r\n      [control]=\"formGroup.get(field.name)\"\r\n      [options]=\"field.options || []\"\r\n    >\r\n    </vector-multiselect-field>\r\n  </div>\r\n  <div class=\"search-button sm:col-4\">\r\n    <vector-button\r\n      [label]=\"'app.label.search' | translate\"\r\n      (click)=\"search()\"\r\n      [disabled]=\"!formGroup.valid\"\r\n    ></vector-button>\r\n  </div>\r\n</div>\r\n", styles: [".filter-container{align-items:center}.filter-container .field{display:flex;flex-direction:column}.filter-container .search-button{flex:1;padding-right:7px;display:flex;justify-content:flex-end}@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", "leftLabel", "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", "onChange"] }, { type: CurrencyFieldComponent, selector: "vector-currency-field", inputs: ["minValue", "maxValue", "placeholder", "numberOfDecimals", "control", "outlined", "rounded", "label", "isBankingField", "inputClassName", "localePrefix", "currencyPrefix", "disabled"] }, { 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: MultiselectFieldComponent, selector: "vector-multiselect-field", inputs: ["isRequired", "control", "label", "options", "filter"], outputs: ["onChange"] }, { 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$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$5.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, "translate": i1$1.TranslatePipe } });
+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\">\r\n  <div *ngFor=\"let field of fields | notHidden\" class=\"field col-12 sm:col-8 {{ getGridClass(field) }}\">\r\n    <label>{{ field.label }}</label>\r\n    <vector-text-field\r\n      *ngIf=\"isTextFieldType(field)\"\r\n      [control]=\"formGroup.get(field.name)\"\r\n      [mask]=\"field.mask\"\r\n      [label]=\"field.placeholder\"\r\n      [isRequired]=\"field.required\"\r\n      [numeric]=\"field.type === fieldTypes.NUMBER\"\r\n    ></vector-text-field>\r\n    <vector-dropdown-field\r\n      *ngIf=\"[fieldTypes.DYNAMIC_DROPDOWN, fieldTypes.DROPDOWN].includes(field.type)\"\r\n      [dynamicFilters]=\"field.filterTypes\"\r\n      [options]=\"field.options || []\"\r\n      [service]=\"field.service\"\r\n      [isRequired]=\"field.required\"\r\n      [minLengthToService]=\"field.minLengthToService || 0\"\r\n      [control]=\"formGroup.get(field.name)\"\r\n      [paged]=\"false\"\r\n      [dependencies]=\"getFieldDependencies(field)\"\r\n      [initialLoad]=\"field.initiateValue\"\r\n    ></vector-dropdown-field>\r\n    <vector-currency-field\r\n      *ngIf=\"field.type === fieldTypes.CURRENCY\"\r\n      [control]=\"formGroup.get(field.name)\"\r\n      [outlined]=\"true\"\r\n    ></vector-currency-field>\r\n    <vector-calendar-field\r\n      *ngIf=\"field.type === fieldTypes.DATE\"\r\n      [control]=\"formGroup.get(field.name)\"\r\n      [isRequired]=\"field.required\"\r\n      [label]=\"field.placeholder || ''\"\r\n    ></vector-calendar-field>\r\n    <vector-select-button-field\r\n      *ngIf=\"field.type === fieldTypes.SELECT_BUTTON\"\r\n      [control]=\"formGroup.get(field.name)\"\r\n      [options]=\"field.options\"\r\n      (click)=\"search()\"\r\n    >\r\n    </vector-select-button-field>\r\n    <div *ngIf=\"field.type === fieldTypes.DATE_RANGE\" class=\"range-date-container\">\r\n      <vector-calendar-field\r\n        [control]=\"formGroup.get(field.name + '.startDate')\"\r\n        [isRequired]=\"field.required\"\r\n        [label]=\"field.placeholder || ''\"\r\n      ></vector-calendar-field>\r\n      At\u00E9\r\n      <vector-calendar-field\r\n        [control]=\"formGroup.get(field.name + '.endDate')\"\r\n        [isRequired]=\"field.required\"\r\n        [label]=\"field.placeholder || ''\"\r\n      ></vector-calendar-field>\r\n    </div>\r\n    <vector-multiselect-field\r\n      *ngIf=\"field.type === fieldTypes.MULTISELECT\"\r\n      [control]=\"formGroup.get(field.name)\"\r\n      [options]=\"field.options || []\"\r\n    >\r\n    </vector-multiselect-field>\r\n  </div>\r\n  <div class=\"search-button sm:col-4\">\r\n    <vector-button\r\n      [label]=\"'app.label.search' | translate\"\r\n      (click)=\"search()\"\r\n      [disabled]=\"!formGroup.valid\"\r\n    ></vector-button>\r\n  </div>\r\n</div>\r\n", styles: [".filter-container{align-items:center}.filter-container .field{display:flex;flex-direction:column}.filter-container .search-button{flex:1;padding-right:7px;display:flex;justify-content:flex-end}@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", "alphaNumericAndWhitespace", "mask", "autoClear", "rightIcon", "centered", "enableDocumentTypeChoice", "hiddenErrorMessage", "leftLabel", "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", "onChange"] }, { type: CurrencyFieldComponent, selector: "vector-currency-field", inputs: ["minValue", "maxValue", "placeholder", "numberOfDecimals", "control", "outlined", "rounded", "label", "isBankingField", "inputClassName", "localePrefix", "currencyPrefix", "disabled"] }, { 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: MultiselectFieldComponent, selector: "vector-multiselect-field", inputs: ["isRequired", "control", "label", "options", "filter"], outputs: ["onChange"] }, { 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$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$5.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, "translate": i1$1.TranslatePipe } });
 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\">\r\n  <div *ngFor=\"let field of fields | notHidden\" class=\"field col-12 sm:col-8 {{ getGridClass(field) }}\">\r\n    <label>{{ field.label }}</label>\r\n    <vector-text-field\r\n      *ngIf=\"isTextFieldType(field)\"\r\n      [control]=\"formGroup.get(field.name)\"\r\n      [mask]=\"field.mask\"\r\n      [label]=\"field.placeholder\"\r\n      [isRequired]=\"field.required\"\r\n      [numeric]=\"field.type === fieldTypes.NUMBER\"\r\n    ></vector-text-field>\r\n    <vector-dropdown-field\r\n      *ngIf=\"[fieldTypes.DYNAMIC_DROPDOWN, fieldTypes.DROPDOWN].includes(field.type)\"\r\n      [dynamicFilters]=\"field.filterTypes\"\r\n      [options]=\"field.options || []\"\r\n      [service]=\"field.service\"\r\n      [isRequired]=\"field.required\"\r\n      [minLengthToService]=\"field.minLengthToService || 0\"\r\n      [control]=\"formGroup.get(field.name)\"\r\n      [paged]=\"false\"\r\n      [dependencies]=\"getFieldDependencies(field)\"\r\n      [initialLoad]=\"field.initiateValue\"\r\n    ></vector-dropdown-field>\r\n    <vector-currency-field\r\n      *ngIf=\"field.type === fieldTypes.CURRENCY\"\r\n      [control]=\"formGroup.get(field.name)\"\r\n      [outlined]=\"true\"\r\n    ></vector-currency-field>\r\n    <vector-calendar-field\r\n      *ngIf=\"field.type === fieldTypes.DATE\"\r\n      [control]=\"formGroup.get(field.name)\"\r\n      [isRequired]=\"field.required\"\r\n      [label]=\"field.placeholder || ''\"\r\n    ></vector-calendar-field>\r\n    <vector-select-button-field\r\n      *ngIf=\"field.type === fieldTypes.SELECT_BUTTON\"\r\n      [control]=\"formGroup.get(field.name)\"\r\n      [options]=\"field.options\"\r\n      (click)=\"search()\"\r\n    >\r\n    </vector-select-button-field>\r\n    <div *ngIf=\"field.type === fieldTypes.DATE_RANGE\" class=\"range-date-container\">\r\n      <vector-calendar-field\r\n        [control]=\"formGroup.get(field.name + '.startDate')\"\r\n        [isRequired]=\"field.required\"\r\n        [label]=\"field.placeholder || ''\"\r\n      ></vector-calendar-field>\r\n      At\u00E9\r\n      <vector-calendar-field\r\n        [control]=\"formGroup.get(field.name + '.endDate')\"\r\n        [isRequired]=\"field.required\"\r\n        [label]=\"field.placeholder || ''\"\r\n      ></vector-calendar-field>\r\n    </div>\r\n    <vector-multiselect-field\r\n      *ngIf=\"field.type === fieldTypes.MULTISELECT\"\r\n      [control]=\"formGroup.get(field.name)\"\r\n      [options]=\"field.options || []\"\r\n    >\r\n    </vector-multiselect-field>\r\n  </div>\r\n  <div class=\"search-button sm:col-4\">\r\n    <vector-button\r\n      [label]=\"'app.label.search' | translate\"\r\n      (click)=\"search()\"\r\n      [disabled]=\"!formGroup.valid\"\r\n    ></vector-button>\r\n  </div>\r\n</div>\r\n", styles: [".filter-container{align-items:center}.filter-container .field{display:flex;flex-direction:column}.filter-container .search-button{flex:1;padding-right:7px;display:flex;justify-content:flex-end}@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"] }]
@@ -3366,7 +3372,7 @@ class SearchFieldComponent {
     }
 }
 SearchFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: SearchFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SearchFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: SearchFieldComponent, selector: "vector-search-field", inputs: { placeholder: "placeholder" }, outputs: { onSearch: "onSearch" }, ngImport: i0, template: "<vector-text-field [control]=\"formControl\" rightIcon=\"fas fa-search\" [label]=\"placeholder\"></vector-text-field>\r\n", styles: [""], components: [{ type: TextFieldComponent, selector: "vector-text-field", inputs: ["isRequired", "label", "maxlength", "isPassword", "numeric", "decimal", "onlyText", "alphaNumeric", "mask", "autoClear", "rightIcon", "centered", "enableDocumentTypeChoice", "hiddenErrorMessage", "leftLabel", "control"], outputs: ["blurEvent", "enterKeyPress", "focusEvent", "onDocumentTypeChange"] }] });
+SearchFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: SearchFieldComponent, selector: "vector-search-field", inputs: { placeholder: "placeholder" }, outputs: { onSearch: "onSearch" }, ngImport: i0, template: "<vector-text-field [control]=\"formControl\" rightIcon=\"fas fa-search\" [label]=\"placeholder\"></vector-text-field>\r\n", styles: [""], components: [{ type: TextFieldComponent, selector: "vector-text-field", inputs: ["isRequired", "label", "maxlength", "isPassword", "numeric", "decimal", "onlyText", "alphaNumeric", "alphaNumericAndWhitespace", "mask", "autoClear", "rightIcon", "centered", "enableDocumentTypeChoice", "hiddenErrorMessage", "leftLabel", "control"], outputs: ["blurEvent", "enterKeyPress", "focusEvent", "onDocumentTypeChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: SearchFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vector-search-field', template: "<vector-text-field [control]=\"formControl\" rightIcon=\"fas fa-search\" [label]=\"placeholder\"></vector-text-field>\r\n", styles: [""] }]