ngx-vector-components 6.45.0 → 6.47.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [6.47.0] (28/10/2026)
+
+### Feat
+
+- `DATE_RANGE` filter: the end date calendar now only enables dates equal to or after the selected start date (falls back to `dateMin` while the start date is empty) (`filters.component.html`)
+- `DATE_RANGE` filter: start and end dates are compared by day, ignoring the time; the same day no longer fails when the start date carries a time (e.g. a `defaultValue` built with `DateTime.now()`) (`filters.component.ts`)
+- `DATE_RANGE` filter: changing one date revalidates the other, so a stale error does not stay on the untouched field (`filters.component.ts`)
+- Added `ValidationUtil.dateLowerThanOrEqualTo` and `ValidationUtil.dateGreaterThanOrEqualTo`, day-only date range validators (`validation.util.ts`)
+
+## [6.46.0] (27/10/2026)
+
+### Feat
+
+- Added permission 'CONSULT_CIOT' ('Consulta CIOT') in `ProfileModuleActionType` (`profile.model.ts`)
+
 ## [6.45.0] (26/10/2026)
 
 ### Fix

package/fesm2022/ngx-vector-components.mjs

@@ -921,6 +921,7 @@ var ProfileModuleActionType;
     ProfileModuleActionType["CANCEL_LOT"] = "Cancel Lot";
     ProfileModuleActionType["ENABLED_BLOCK_LOT_COFCO_CBSA"] = "Enabled Block Lot Cofco Cbsa";
     ProfileModuleActionType["ENABLED_SUSPEND_LOT_COFCO_CBSA"] = "Enabled Suspend Lot Cofco Cbsa";
+    ProfileModuleActionType["CONSULT_CIOT"] = "Consulta CIOT";
 })(ProfileModuleActionType || (ProfileModuleActionType = {}));
 
 var Role;
@@ -1485,6 +1486,33 @@ class ValidationUtil {
         };
         return validator;
     }
+    static dateLowerThanOrEqualTo(greaterControlName) {
+        return (control) => {
+            const lowerDay = ValidationUtil.dayOf(control.value);
+            const greaterDay = ValidationUtil.dayOf(control.parent?.get(greaterControlName)?.value);
+            if (lowerDay !== null && greaterDay !== null && lowerDay > greaterDay) {
+                return { invalid: 'Data inicial deve ser menor ou igual à data final' };
+            }
+            return null;
+        };
+    }
+    static dateGreaterThanOrEqualTo(lowerControlName) {
+        return (control) => {
+            const greaterDay = ValidationUtil.dayOf(control.value);
+            const lowerDay = ValidationUtil.dayOf(control.parent?.get(lowerControlName)?.value);
+            if (lowerDay !== null && greaterDay !== null && lowerDay > greaterDay) {
+                return { invalid: 'Data final deve ser maior ou igual à data inicial' };
+            }
+            return null;
+        };
+    }
+    static dayOf(value) {
+        if (!ObjectUtil.isValid(value) || value === '') {
+            return null;
+        }
+        const date = new Date(value);
+        return isNaN(date.getTime()) ? null : new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+    }
     static notSequentialNumbers(length) {
         const validator = (control) => {
             const controlValue = control.value;
@@ -2202,7 +2230,7 @@ class AnalyticsService {
     }
     /**
      * NAO INTERATIVO -- o sistema respondeu ou exibiu algo: resultado carregado,
-     * lista vazia, erro de negocio, modal automatico.
+      * lista vazia, erro de negocio, modal automatico.
      *
      * @example this.analyticsService.appEvent('heat_map_empty', { context: { points: 0 } });
      */
@@ -4095,16 +4123,17 @@ class FiltersComponent {
                 field.initiateValue = !!field.defaultValue;
             }
             if (field.type === FieldType.DATE_RANGE) {
-                this.formGroup.addControl(field.name, new UntypedFormGroup({
-                    startDate: new UntypedFormControl({ value: field.defaultValue?.startDate, disabled: field.readonly }, [
-                        ...this.buildValidators(field),
-                        ValidationUtil.lowerThanOrEqualTo('endDate'),
-                    ]),
-                    endDate: new UntypedFormControl({ value: field.defaultValue?.endDate, disabled: field.readonly }, [
-                        ...this.buildValidators(field),
-                        ValidationUtil.greaterThanOrEqualTo('startDate'),
-                    ]),
-                }));
+                const startDate = new UntypedFormControl({ value: field.defaultValue?.startDate, disabled: field.readonly }, [
+                    ...this.buildValidators(field),
+                    ValidationUtil.dateLowerThanOrEqualTo('endDate'),
+                ]);
+                const endDate = new UntypedFormControl({ value: field.defaultValue?.endDate, disabled: field.readonly }, [
+                    ...this.buildValidators(field),
+                    ValidationUtil.dateGreaterThanOrEqualTo('startDate'),
+                ]);
+                this.formGroup.addControl(field.name, new UntypedFormGroup({ startDate, endDate }));
+                this.fieldsSubscription.add(startDate.valueChanges.subscribe(() => endDate.updateValueAndValidity({ emitEvent: false })));
+                this.fieldsSubscription.add(endDate.valueChanges.subscribe(() => startDate.updateValueAndValidity({ emitEvent: false })));
             }
             else {
                 if (field.controler) {
@@ -4249,11 +4278,11 @@ class FiltersComponent {
         return validators;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FiltersComponent, deps: [{ token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: FiltersComponent, isStandalone: false, 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\n      >{{ field.label }}\n      <i\n        *ngIf=\"field.tooltip\"\n        class=\"fas fa-info-circle mt-1 pl-2 ch\"\n        pTooltip=\"{{ field.tooltip }}\"\n        tooltipPosition=\"bottom\"\n      ></i\n    ></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      [class]=\"field.class\"\n    ></vector-text-field>\n    <vector-dropdown-field\n      *ngIf=\"[fieldTypes.DYNAMIC_DROPDOWN, fieldTypes.DROPDOWN].includes(field.type)\"\n      [dynamicFilters]=\"field.filterTypes\"\n      [disabled]=\"field.disabled\"\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.initiateValue\"\n      [limitScrollPage]=\"field.limitScrollPage\"\n    ></vector-dropdown-field>\n    <vector-currency-field\n      *ngIf=\"field.type === fieldTypes.CURRENCY\"\n      [control]=\"formGroup.get(field.name)\"\n      [outlined]=\"true\"\n      [disabled]=\"field.disabled\"\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      [disabled]=\"field.disabled\"\n      [min]=\"field.dateMin\"\n      [max]=\"field.dateMax\"\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      (click)=\"search()\"\n      [disabled]=\"field.disabled\"\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        [disabled]=\"field.disabled\"\n        [min]=\"field.dateMin\"\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        [disabled]=\"field.disabled\"\n        [max]=\"field.dateMax\"\n      ></vector-calendar-field>\n    </div>\n    <vector-multiselect-field\n      *ngIf=\"field.type === fieldTypes.MULTISELECT\"\n      [control]=\"formGroup.get(field.name)\"\n      [options]=\"field.options || []\"\n      [disabled]=\"field.disabled\"\n    >\n    </vector-multiselect-field>\n  </div>\n  <div class=\"search-button sm:col-4\">\n    <vector-button\n      [label]=\"'app.label.search' | translate\"\n      (click)=\"search()\"\n      [disabled]=\"!formGroup.valid\"\n      type=\"default-filled\"\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;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"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: TextFieldComponent, selector: "vector-text-field", inputs: ["isRequired", "label", "maxlength", "isPassword", "numeric", "numericPositive", "numericDotComma", "decimal", "onlyText", "noSpecialCharacters", "alphaNumeric", "alphaNumericAndWhitespace", "mask", "autoClear", "readonly", "rightIcon", "centered", "_enableDocumentTypeChoice", "enableDocumentTypeChoice", "hiddenErrorMessage", "leftLabel", "control", "inputId", "slotChar", "disabled", "pattern"], outputs: ["blurEvent", "inputEvent", "enterKeyPress", "backSpaceKeyPress", "focusEvent", "onDocumentTypeChange"] }, { kind: "component", type: ButtonComponent, selector: "vector-button", inputs: ["disabled", "label", "type", "width", "leftIcon", "rightIcon", "shadow", "rounded", "cursor", "style", "loading"], outputs: ["onClick"] }, { kind: "component", type: CalendarComponent, selector: "vector-calendar-field", inputs: ["isRequired", "control", "label", "showCalendarOnFocus", "min", "max", "disabledDates", "disabled", "defaultDate", "hiddenErrorMessage", "showTime", "showSeconds", "stepMinute", "stepHour", "stepSecond", "timeOnly", "hourFormat"], outputs: ["onFocus", "onBlur", "onInput", "onSelect"] }, { kind: "component", type: MultiselectFieldComponent, selector: "vector-multiselect-field", inputs: ["pagedSugestion", "isRequired", "control", "label", "options", "filter", "showSelectAllOption", "display", "paged", "disabled", "minLengthToService", "initialLoad", "service", "filterVirtualScrool", "showHeader", "showFlags", "dependencies", "limitScrollPage", "forceSelection", "showFlagsOptions"], outputs: ["onChange", "onClosePanel"] }, { kind: "component", type: DropdownFieldComponent, selector: "vector-dropdown-field", inputs: ["options", "isNgContent", "forceSelection", "isRequired", "control", "label", "service", "paged", "buttonAction", "dependencies", "hiddenErrorMessage", "dynamicFilters", "minLengthToService", "initialLoad", "disabled", "limitScrollPage", "inputId"], outputs: ["onFocus", "onChange"] }, { kind: "component", type: CurrencyFieldComponent, selector: "vector-currency-field", inputs: ["minValue", "maxValue", "placeholder", "numberOfDecimals", "control", "outlined", "rounded", "label", "isBankingField", "inputClassName", "localePrefix", "currencyPrefix", "disabled", "centered", "inputId"], outputs: ["onBlur"] }, { kind: "component", type: SelectButtonFieldComponent, selector: "vector-select-button-field", inputs: ["options", "control", "disabled", "variant"] }, { kind: "pipe", type: NotHiddenPipe, name: "notHidden" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: FiltersComponent, isStandalone: false, 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\n      >{{ field.label }}\n      <i\n        *ngIf=\"field.tooltip\"\n        class=\"fas fa-info-circle mt-1 pl-2 ch\"\n        pTooltip=\"{{ field.tooltip }}\"\n        tooltipPosition=\"bottom\"\n      ></i\n    ></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      [class]=\"field.class\"\n    ></vector-text-field>\n    <vector-dropdown-field\n      *ngIf=\"[fieldTypes.DYNAMIC_DROPDOWN, fieldTypes.DROPDOWN].includes(field.type)\"\n      [dynamicFilters]=\"field.filterTypes\"\n      [disabled]=\"field.disabled\"\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.initiateValue\"\n      [limitScrollPage]=\"field.limitScrollPage\"\n    ></vector-dropdown-field>\n    <vector-currency-field\n      *ngIf=\"field.type === fieldTypes.CURRENCY\"\n      [control]=\"formGroup.get(field.name)\"\n      [outlined]=\"true\"\n      [disabled]=\"field.disabled\"\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      [disabled]=\"field.disabled\"\n      [min]=\"field.dateMin\"\n      [max]=\"field.dateMax\"\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      (click)=\"search()\"\n      [disabled]=\"field.disabled\"\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        [disabled]=\"field.disabled\"\n        [min]=\"field.dateMin\"\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        [disabled]=\"field.disabled\"\n        [min]=\"formGroup.get(field.name + '.startDate')?.value || field.dateMin\"\n        [max]=\"field.dateMax\"\n      ></vector-calendar-field>\n    </div>\n    <vector-multiselect-field\n      *ngIf=\"field.type === fieldTypes.MULTISELECT\"\n      [control]=\"formGroup.get(field.name)\"\n      [options]=\"field.options || []\"\n      [disabled]=\"field.disabled\"\n    >\n    </vector-multiselect-field>\n  </div>\n  <div class=\"search-button sm:col-4\">\n    <vector-button\n      [label]=\"'app.label.search' | translate\"\n      (click)=\"search()\"\n      [disabled]=\"!formGroup.valid\"\n      type=\"default-filled\"\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;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"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: TextFieldComponent, selector: "vector-text-field", inputs: ["isRequired", "label", "maxlength", "isPassword", "numeric", "numericPositive", "numericDotComma", "decimal", "onlyText", "noSpecialCharacters", "alphaNumeric", "alphaNumericAndWhitespace", "mask", "autoClear", "readonly", "rightIcon", "centered", "_enableDocumentTypeChoice", "enableDocumentTypeChoice", "hiddenErrorMessage", "leftLabel", "control", "inputId", "slotChar", "disabled", "pattern"], outputs: ["blurEvent", "inputEvent", "enterKeyPress", "backSpaceKeyPress", "focusEvent", "onDocumentTypeChange"] }, { kind: "component", type: ButtonComponent, selector: "vector-button", inputs: ["disabled", "label", "type", "width", "leftIcon", "rightIcon", "shadow", "rounded", "cursor", "style", "loading"], outputs: ["onClick"] }, { kind: "component", type: CalendarComponent, selector: "vector-calendar-field", inputs: ["isRequired", "control", "label", "showCalendarOnFocus", "min", "max", "disabledDates", "disabled", "defaultDate", "hiddenErrorMessage", "showTime", "showSeconds", "stepMinute", "stepHour", "stepSecond", "timeOnly", "hourFormat"], outputs: ["onFocus", "onBlur", "onInput", "onSelect"] }, { kind: "component", type: MultiselectFieldComponent, selector: "vector-multiselect-field", inputs: ["pagedSugestion", "isRequired", "control", "label", "options", "filter", "showSelectAllOption", "display", "paged", "disabled", "minLengthToService", "initialLoad", "service", "filterVirtualScrool", "showHeader", "showFlags", "dependencies", "limitScrollPage", "forceSelection", "showFlagsOptions"], outputs: ["onChange", "onClosePanel"] }, { kind: "component", type: DropdownFieldComponent, selector: "vector-dropdown-field", inputs: ["options", "isNgContent", "forceSelection", "isRequired", "control", "label", "service", "paged", "buttonAction", "dependencies", "hiddenErrorMessage", "dynamicFilters", "minLengthToService", "initialLoad", "disabled", "limitScrollPage", "inputId"], outputs: ["onFocus", "onChange"] }, { kind: "component", type: CurrencyFieldComponent, selector: "vector-currency-field", inputs: ["minValue", "maxValue", "placeholder", "numberOfDecimals", "control", "outlined", "rounded", "label", "isBankingField", "inputClassName", "localePrefix", "currencyPrefix", "disabled", "centered", "inputId"], outputs: ["onBlur"] }, { kind: "component", type: SelectButtonFieldComponent, selector: "vector-select-button-field", inputs: ["options", "control", "disabled", "variant"] }, { kind: "pipe", type: NotHiddenPipe, name: "notHidden" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FiltersComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, 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\n      >{{ field.label }}\n      <i\n        *ngIf=\"field.tooltip\"\n        class=\"fas fa-info-circle mt-1 pl-2 ch\"\n        pTooltip=\"{{ field.tooltip }}\"\n        tooltipPosition=\"bottom\"\n      ></i\n    ></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      [class]=\"field.class\"\n    ></vector-text-field>\n    <vector-dropdown-field\n      *ngIf=\"[fieldTypes.DYNAMIC_DROPDOWN, fieldTypes.DROPDOWN].includes(field.type)\"\n      [dynamicFilters]=\"field.filterTypes\"\n      [disabled]=\"field.disabled\"\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.initiateValue\"\n      [limitScrollPage]=\"field.limitScrollPage\"\n    ></vector-dropdown-field>\n    <vector-currency-field\n      *ngIf=\"field.type === fieldTypes.CURRENCY\"\n      [control]=\"formGroup.get(field.name)\"\n      [outlined]=\"true\"\n      [disabled]=\"field.disabled\"\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      [disabled]=\"field.disabled\"\n      [min]=\"field.dateMin\"\n      [max]=\"field.dateMax\"\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      (click)=\"search()\"\n      [disabled]=\"field.disabled\"\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        [disabled]=\"field.disabled\"\n        [min]=\"field.dateMin\"\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        [disabled]=\"field.disabled\"\n        [max]=\"field.dateMax\"\n      ></vector-calendar-field>\n    </div>\n    <vector-multiselect-field\n      *ngIf=\"field.type === fieldTypes.MULTISELECT\"\n      [control]=\"formGroup.get(field.name)\"\n      [options]=\"field.options || []\"\n      [disabled]=\"field.disabled\"\n    >\n    </vector-multiselect-field>\n  </div>\n  <div class=\"search-button sm:col-4\">\n    <vector-button\n      [label]=\"'app.label.search' | translate\"\n      (click)=\"search()\"\n      [disabled]=\"!formGroup.valid\"\n      type=\"default-filled\"\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;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"] }]
+            args: [{ standalone: false, 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\n      >{{ field.label }}\n      <i\n        *ngIf=\"field.tooltip\"\n        class=\"fas fa-info-circle mt-1 pl-2 ch\"\n        pTooltip=\"{{ field.tooltip }}\"\n        tooltipPosition=\"bottom\"\n      ></i\n    ></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      [class]=\"field.class\"\n    ></vector-text-field>\n    <vector-dropdown-field\n      *ngIf=\"[fieldTypes.DYNAMIC_DROPDOWN, fieldTypes.DROPDOWN].includes(field.type)\"\n      [dynamicFilters]=\"field.filterTypes\"\n      [disabled]=\"field.disabled\"\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.initiateValue\"\n      [limitScrollPage]=\"field.limitScrollPage\"\n    ></vector-dropdown-field>\n    <vector-currency-field\n      *ngIf=\"field.type === fieldTypes.CURRENCY\"\n      [control]=\"formGroup.get(field.name)\"\n      [outlined]=\"true\"\n      [disabled]=\"field.disabled\"\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      [disabled]=\"field.disabled\"\n      [min]=\"field.dateMin\"\n      [max]=\"field.dateMax\"\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      (click)=\"search()\"\n      [disabled]=\"field.disabled\"\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        [disabled]=\"field.disabled\"\n        [min]=\"field.dateMin\"\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        [disabled]=\"field.disabled\"\n        [min]=\"formGroup.get(field.name + '.startDate')?.value || field.dateMin\"\n        [max]=\"field.dateMax\"\n      ></vector-calendar-field>\n    </div>\n    <vector-multiselect-field\n      *ngIf=\"field.type === fieldTypes.MULTISELECT\"\n      [control]=\"formGroup.get(field.name)\"\n      [options]=\"field.options || []\"\n      [disabled]=\"field.disabled\"\n    >\n    </vector-multiselect-field>\n  </div>\n  <div class=\"search-button sm:col-4\">\n    <vector-button\n      [label]=\"'app.label.search' | translate\"\n      (click)=\"search()\"\n      [disabled]=\"!formGroup.valid\"\n      type=\"default-filled\"\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;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"] }]
         }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }], propDecorators: { fields: [{
                 type: Input
             }], onSearch: [{