@maplander/components 0.20.8 → 0.21.1

package/fesm2015/maplander-components.js

@@ -1,4 +1,4 @@
-import { Pipe, NgModule, Directive, ElementRef, Input, Component, Inject, Injectable, InjectionToken, Optional, Renderer2, ViewChild, EventEmitter, Output, ContentChild, TemplateRef, ChangeDetectorRef, forwardRef, Injector } from '@angular/core';
+import { Pipe, NgModule, Directive, ElementRef, Input, Component, Inject, Injectable, InjectionToken, Optional, EventEmitter, Renderer2, Output, ViewChild, ContentChild, TemplateRef, ChangeDetectorRef, forwardRef, Injector } from '@angular/core';
 import { CommonModule, CurrencyPipe } from '@angular/common';
 import { LandUseEnum, PFileTypeEnum, PropertyTypeEnum, OfferingTypeEnum, StatusTypeEnum, Currency, PFile, DialogResponseType, LeadInfo, NewCompleteProperty, NewProperty, PropertyInfo, AreaUnitEnum, Features, Address, Amenities, Owner, NewPropertyLite } from '@maplander/types';
 import { Validators, FormBuilder, ReactiveFormsModule, FormsModule, NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -2446,9 +2446,23 @@ class FiltersComponent {
         this._formBuilder = _formBuilder;
         this._converter = _converter;
         this.METERS_TO_SQ = 10.76391042;
+        this.changeFilter = new EventEmitter();
         this.isOPI = this._config || false;
         this._subscription = new Subscription();
-        this.propertyTypeList = ConstantsComponents.PropertyTypeList.map((/**
+        /** @type {?} */
+        const items = [];
+        ConstantsComponents.PropertyTypeList.forEach((/**
+         * @param {?} item
+         * @return {?}
+         */
+        (item) => {
+            if (this.newFilters) {
+                if (item.value !== PropertyTypeEnum.ROOM && item.value !== PropertyTypeEnum.RESIDENTIAL) {
+                    items.push(item);
+                }
+            }
+        }));
+        this.propertyTypeList = items.map((/**
          * @param {?} item
          * @return {?}
          */
@@ -2524,6 +2538,7 @@ class FiltersComponent {
                 this.filtersForm.controls['offering'].setValue(OfferingTypeEnum.SALE);
                 break;
         }
+        this.changeFilter.emit({ type: 'propertyType', payload: { filter: this.filter, value: this.filtersForm.value } });
     }
     /**
      * @param {?} ev
@@ -2531,6 +2546,7 @@ class FiltersComponent {
      */
     changeOffering(ev) {
         this.filter.offering = (/** @type {?} */ (ev));
+        this.changeFilter.emit({ type: 'filter', payload: { filter: this.filter, value: this.filtersForm.value } });
     }
     /**
      * @param {?} ev
@@ -2538,6 +2554,7 @@ class FiltersComponent {
      */
     changeCurrency(ev) {
         this.filter.currency = ev;
+        this.changeFilter.emit({ type: 'filter', payload: { filter: this.filter, value: this.filtersForm.value } });
     }
     /**
      * @param {?} amenity
@@ -2555,6 +2572,7 @@ class FiltersComponent {
             this.filter.extras.push(amenity.value);
         }
         amenity.checked = !amenity.checked;
+        this.changeFilter.emit({ type: 'filter', payload: { filter: this.filter, value: this.filtersForm.value } });
     }
     /**
      * @return {?}
@@ -2587,11 +2605,13 @@ class FiltersComponent {
      * @return {?}
      */
     resetFilters(propertyTypeItemIndex) {
+        this.filter.currency = !propertyTypeItemIndex ? 'MXN' : this.filter.currency;
         this.initComponentByPropertyType(propertyTypeItemIndex);
         this.surfaceUnitSelected = 0;
         this.filter = propertyTypeItemIndex ? Utils.getFilterByPropertyType(this.filter) : Utils.getInitialFilter(this.isOPI, this.filter);
         this.updateFormByFilters();
         this.setPrices();
+        this.changeFilter.emit({ type: 'filter', payload: { filter: this.filter, value: this.filtersForm.value } });
     }
     /**
      * @private
@@ -2599,6 +2619,7 @@ class FiltersComponent {
      */
     buildForm() {
         this.filtersForm = this._formBuilder.group({
+            state: [],
             offering: [],
             currency: [],
             minPrice: ['', [Validators.required, Validators.pattern(new RegExp('(^[0-9]+)'))]],
@@ -2612,6 +2633,12 @@ class FiltersComponent {
         }, {
             validator: CurrencyFilterValidator('minPrice', 'maxPrice')
         });
+        this.filtersForm.valueChanges.subscribe((/**
+         * @return {?}
+         */
+        () => {
+            this.changeFilter.emit({ type: 'filter', payload: { filter: this.filter, value: this.filtersForm.value } });
+        }));
     }
     /**
      * @private
@@ -2619,6 +2646,7 @@ class FiltersComponent {
      */
     updateFormByFilters() {
         this.filtersForm.patchValue({
+            state: null,
             offering: this.filter.offering,
             currency: this.filter.currency,
             minPrice: this.filter.downLimitPrice,
@@ -2638,6 +2666,7 @@ class FiltersComponent {
     getFilterByForm() {
         /** @type {?} */
         const data = this.filtersForm.value;
+        this.filter.state = data.state;
         this.filter.offering = data.offering;
         this.filter.currency = data.currency;
         this.filter.downLimitPrice = Number(data.minPrice);
@@ -2864,7 +2893,7 @@ class FiltersComponent {
 FiltersComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-filters',
-                template: "<!-- Todo: [FiltersComponent] Refactor code -->\r\n<form class=\"filters\" [formGroup]=\"filtersForm\" [ngClass]=\"{'filters--opened': propertyTypeSelected.value !== 'NONE'}\">\r\n  <ng-template [ngIf]=\"!isOPI\">\r\n    <div class=\"float-button-close\">\r\n      <button mat-icon-button type=\"button\" class=\"float-button-close__button\" (click)=\"close()\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n  <div class=\"body\">\r\n    <div class=\"--padding\">\r\n      <div class=\"header\">\r\n        <mat-form-field class=\"currency\" appearance=\"outline\">\r\n          <mat-label>Divisa</mat-label>\r\n          <mat-select formControlName=\"currency\">\r\n            <ng-container *ngFor=\"let currency of currencyList\">\r\n              <mat-option [value]=\"currency.type\" (click)=\"changeCurrency(currency.type)\">\r\n                {{currency.type}}\r\n              </mat-option>\r\n            </ng-container>\r\n          </mat-select>\r\n        </mat-form-field>\r\n        <mat-button-toggle-group class=\"offering-type-list\" name=\"offering-type\" formControlName=\"offering\"\r\n                                 aria-label=\"Offering type\">\r\n          <mat-button-toggle (click)=\"changeOffering('SALE')\" [value]=\"'SALE'\"\r\n                             [disabled]=\"propertyTypeSelected.value === 'NONE' || propertyTypeSelected.value === 'ROOM'\">\r\n            Venta\r\n          </mat-button-toggle>\r\n          <mat-button-toggle (click)=\"changeOffering('RENT')\" [value]=\"'RENT'\"\r\n                             [disabled]=\"propertyTypeSelected.value === 'NONE' || propertyTypeSelected.value === 'INVESTMENT'\">\r\n            Renta\r\n          </mat-button-toggle>\r\n        </mat-button-toggle-group>\r\n      </div>\r\n      <div class=\"property-type-list mat-elevation-z2\">\r\n        <ng-container *ngFor=\"let type of propertyTypeList; let i = index\">\r\n          <ng-template [ngIf]=\"type.value !== 'NONE'\">\r\n            <div class=\"property-type-list__button\">\r\n              <div\r\n                class=\"property-type-list__border\"\r\n                [ngClass]=\"{'property-type-list__border--active': (type.value === propertyTypeSelected.value) || (propertyTypeSelected.value === 'NONE') || ((type.value === 'HOUSE' || type.value === 'APARTMENT') && propertyTypeSelected.value === 'RESIDENTIAL')}\"\r\n                [ngStyle]=\"{'border-color': 'var(--' + type.iconName + ')'}\">\r\n                <button mat-mini-fab=\"\" type=\"button\" (click)=\"changePropertyType(i)\"\r\n                        [ngStyle]=\"{'background-color': 'var(--' + type.iconName + ')'}\">\r\n                  <span class=\"property-type-list__icon ic-property-{{type.iconName}}\"></span>\r\n                </button>\r\n              </div>\r\n              <span class=\"property-type-list__label\">{{type.shortName}}</span>\r\n              <ng-template [ngIf]=\"type.value === 'RESIDENTIAL' && propertyTypeSelected.value === 'RESIDENTIAL'\">\r\n                <div class=\"property-type-list__divider property-type-list__divider--left\"></div>\r\n                <div class=\"property-type-list__divider property-type-list__divider--right\"></div>\r\n              </ng-template>\r\n            </div>\r\n          </ng-template>\r\n        </ng-container>\r\n      </div>\r\n      <ng-template [ngIf]=\"isOPI\">\r\n        <div class=\"all\">\r\n          <button mat-raised-button=\"\" type=\"button\" class=\"all__button\"\r\n                  [ngClass]=\"{'all__button--active': propertyTypeSelected.value === 'NONE'}\"\r\n                  (click)=\"changePropertyType(9)\">Todo\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n    <ng-template [ngIf]=\"propertyTypeSelected.value !== 'NONE'\">\r\n      <mat-divider></mat-divider>\r\n      <div class=\"--padding\">\r\n        <h4 class=\"--title\">\r\n          <span class=\"ic-features-price\"></span>\r\n          Presupuesto\r\n        </h4>\r\n        <div class=\"budget\">\r\n          <!-- Min price [START] -->\r\n          <mat-form-field appearance=\"outline\">\r\n            <mat-label>M\u00EDnimo</mat-label>\r\n            <input autocomplete=\"off\" matInput=\"\" type=\"number\" title=\"Min price\" formControlName=\"minPrice\" min=\"1\" >\r\n            <mat-error *ngIf=\"filtersForm.controls['minPrice'].hasError('pattern')\">\r\n              Debe ingresar solo numeros\r\n            </mat-error>\r\n            <mat-error *ngIf=\"filtersForm.controls['minPrice'].hasError('required')\">\r\n              Este campo es requerido\r\n            </mat-error>\r\n          </mat-form-field>\r\n          <!-- Min price [END] -->\r\n          <!-- Max price [START] -->\r\n          <mat-form-field appearance=\"outline\">\r\n            <mat-label>M\u00E1ximo</mat-label>\r\n            <input autocomplete=\"off\" matInput=\"\" type=\"number\" title=\"max price\" formControlName=\"maxPrice\">\r\n            <mat-error *ngIf=\"filtersForm.controls['maxPrice'].hasError('pattern')\">\r\n              Debe ingresar solo numeros\r\n            </mat-error>\r\n            <mat-error *ngIf=\"filtersForm.controls['maxPrice'].hasError('required')\">\r\n              Este campo es requerido\r\n            </mat-error>\r\n            <mat-error *ngIf=\"filtersForm.controls['maxPrice'].hasError('currency')\">\r\n              Valor minimo excedido\r\n            </mat-error>\r\n          </mat-form-field>\r\n          <!-- Max price [END] -->\r\n        </div>\r\n        <div class=\"features\">\r\n          <ng-template\r\n            [ngIf]=\"propertyTypeSelected.value === 'RESIDENTIAL' || propertyTypeSelected.value ===  'HOUSE' || propertyTypeSelected.value === 'APARTMENT'\">\r\n            <div class=\"features__bedrooms\">\r\n              <h4 class=\"--title\">\r\n                <span class=\"ic-features-bedroom\"></span>\r\n                Habitaciones\r\n              </h4>\r\n              <mat-button-toggle-group name=\"bedrooms\" aria-label=\"Bedrooms\" formControlName=\"bedrooms\">\r\n                <ng-container *ngFor=\"let bedroom of bedroomsList\">\r\n                  <ng-template [ngIf]=\"bedroom === 0\" [ngIfElse]=\"bedroomNumber\">\r\n                    <mat-button-toggle [value]=\"bedroom\" class=\"features__bedrooms--unlimited\">\r\n                      Sin <br> l\u00EDmite\r\n                    </mat-button-toggle>\r\n                  </ng-template>\r\n                  <ng-template #bedroomNumber>\r\n                    <mat-button-toggle [value]=\"bedroom\">{{bedroom}}+\r\n                    </mat-button-toggle>\r\n                  </ng-template>\r\n                </ng-container>\r\n              </mat-button-toggle-group>\r\n            </div>\r\n            <div class=\"features__bathrooms\">\r\n              <h4 class=\"--title\">\r\n                <span class=\"ic-features-bathroom\"></span>\r\n                Ba\u00F1os\r\n              </h4>\r\n              <mat-button-toggle-group name=\"bathrooms\" aria-label=\"Bathrooms\" formControlName=\"bathrooms\">\r\n                <ng-container *ngFor=\"let bathroom of bathroomsList\">\r\n                  <ng-template [ngIf]=\"bathroom === 0\" [ngIfElse]=\"bathroomNumber\">\r\n                    <mat-button-toggle [value]=\"bathroom\"\r\n                                       class=\"features__bathrooms--unlimited\">\r\n                      Sin <br> l\u00EDmite\r\n                    </mat-button-toggle>\r\n                  </ng-template>\r\n                  <ng-template #bathroomNumber>\r\n                    <mat-button-toggle [value]=\"bathroom\">{{bathroom}}+\r\n                    </mat-button-toggle>\r\n                  </ng-template>\r\n                </ng-container>\r\n              </mat-button-toggle-group>\r\n            </div>\r\n          </ng-template>\r\n          <ng-template [ngIf]=\"propertyTypeSelected.value !== 'LAND' && propertyTypeSelected.value !== 'INVESTMENT'\">\r\n            <div class=\"features__parking-places\">\r\n              <h4 class=\"--title\">\r\n                <span class=\"ic-features-parking\"></span>\r\n                Estacionamientos\r\n              </h4>\r\n              <mat-button-toggle-group name=\"parking_places\" aria-label=\"Parking Places\"\r\n                                       formControlName=\"parkingPlaces\">\r\n                <ng-container *ngFor=\"let parking of parkingPlacesList\">\r\n                  <ng-template [ngIf]=\"parking === 0\" [ngIfElse]=\"parkingNumber\">\r\n                    <mat-button-toggle [value]=\"parking\"\r\n                                       class=\"features__parking-places--unlimited\">\r\n                      Sin <br> l\u00EDmite\r\n                    </mat-button-toggle>\r\n                  </ng-template>\r\n                  <ng-template #parkingNumber>\r\n                    <mat-button-toggle [value]=\"parking\">{{parking}}+\r\n                    </mat-button-toggle>\r\n                  </ng-template>\r\n                </ng-container>\r\n              </mat-button-toggle-group>\r\n            </div>\r\n          </ng-template>\r\n          <ng-template [ngIf]=\"propertyTypeSelected.value !== 'INVESTMENT'\">\r\n            <div class=\"features__surface\">\r\n              <h4 class=\"--title\">\r\n                <span class=\"ic-features-surface\"></span>\r\n                Superficie\r\n              </h4>\r\n              <div class=\"--row\">\r\n                <mat-form-field appearance=\"outline\" class=\"--col\">\r\n                  <mat-label>\u00C1rea</mat-label>\r\n                  <mat-select formControlName=\"surface\">\r\n                    <mat-option [value]=\"0\">\r\n                      Sin l\u00EDmite\r\n                    </mat-option>\r\n                    <ng-container *ngFor=\"let surface of surfaceList\">\r\n                      <mat-option [value]=\"surface\">\r\n                        {{surface}}\r\n                      </mat-option>\r\n                    </ng-container>\r\n                  </mat-select>\r\n                </mat-form-field>\r\n                <mat-button-toggle-group name=\"unit_surface\" aria-label=\"Unit surface\" formControlName=\"surfaceUnit\">\r\n                  <mat-button-toggle [value]=\"0\">m2</mat-button-toggle>\r\n                  <mat-button-toggle [value]=\"1\">sq ft</mat-button-toggle>\r\n                </mat-button-toggle-group>\r\n              </div>\r\n            </div>\r\n          </ng-template>\r\n          <ng-template [ngIf]=\"propertyTypeSelected.value === 'INVESTMENT'\">\r\n            <div class=\"feature investment\">\r\n              <h4 class=\"--title\">Retorno de inversi\u00F3n</h4>\r\n              <mat-form-field appearance=\"outline\" class=\"--col\">\r\n                <mat-label>Porcentaje</mat-label>\r\n                <mat-select formControlName=\"roi\">\r\n                  <mat-option [value]=\"0\">\r\n                    Sin l\u00EDmite\r\n                  </mat-option>\r\n                  <ng-container *ngFor=\"let roi of roiList\">\r\n                    <mat-option [value]=\"roi\">\r\n                      {{roi}}%\r\n                    </mat-option>\r\n                  </ng-container>\r\n                </mat-select>\r\n              </mat-form-field>\r\n            </div>\r\n          </ng-template>\r\n          <div class=\"amenities-container\">\r\n            <ng-template [ngIf]=\"propertyTypeSelected.amenities.length > 0\">\r\n              <div class=\"amenities\">\r\n                <h4 class=\"--title\">\r\n                  Amenidades\r\n                </h4>\r\n                <div class=\"amenities__list\">\r\n                  <ng-container *ngFor=\"let amenity of propertyTypeSelected.amenities\">\r\n                    <div class=\"amenities__amenity\" matRipple (click)=\"updateAmenity(amenity)\">\r\n                  <span class=\"amenity__icon ic-amenities-{{amenity.iconName}}\"\r\n                        [ngClass]=\"{'amenity--active': amenity.checked}\"></span>\r\n                      <span class=\"amenity__label\">{{amenity.name}}</span>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </ng-template>\r\n            <ng-template [ngIf]=\"propertyTypeSelected.features.length > 0\">\r\n              <div class=\"amenities\">\r\n                <h4 class=\"--title\">\r\n                  Caracteristicas de la ubicaci\u00F3n\r\n                </h4>\r\n                <div class=\"amenities__list\">\r\n                  <ng-container *ngFor=\"let feature of propertyTypeSelected.features\">\r\n                    <div class=\"amenities__amenity\" matRipple (click)=\"updateAmenity(feature)\">\r\n                <span class=\"amenity__icon ic-amenities-{{feature.iconName}}\"\r\n                      [ngClass]=\"{'amenity--active': feature.checked}\"></span>\r\n                      <span class=\"amenity__label\">{{feature.name}}</span>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </ng-template>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </div>\r\n  <div class=\"actions\">\r\n    <ng-template [ngIf]=\"!isOPI\" [ngIfElse]=\"closeButtonTemplate\">\r\n      <button mat-flat-button=\"\" type=\"button\" class=\"action__button\" color=\"primary\" (click)=\"saveSearchByFilters()\">\r\n        GUARDAR\r\n      </button>\r\n    </ng-template>\r\n    <ng-template #closeButtonTemplate>\r\n      <button mat-flat-button=\"\" type=\"button\" class=\"action__button\" color=\"primary\" (click)=\"close()\">CERRAR</button>\r\n    </ng-template>\r\n    <button mat-flat-button=\"\" type=\"button\" class=\"action__button\" color=\"primary\"\r\n            (click)=\"resetFilters()\">LIMPIAR\r\n    </button>\r\n    <button mat-flat-button=\"\" type=\"submit\" class=\"action__button\" color=\"primary\"\r\n            (click)=\"applyFilters()\">APLICAR\r\n    </button>\r\n  </div>\r\n</form>\r\n",
+                template: "<!-- Todo: [FiltersComponent] Refactor code -->\r\n<form class=\"filters\" [formGroup]=\"filtersForm\" [ngClass]=\"{'filters--opened': propertyTypeSelected.value !== 'NONE'}\">\r\n  <ng-template [ngIf]=\"!isOPI\">\r\n    <div class=\"float-button-close\">\r\n      <button mat-icon-button type=\"button\" class=\"float-button-close__button\" (click)=\"close()\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n  <div class=\"body\">\r\n    <div class=\"--padding\">\r\n      <div class=\"header\">\r\n        <mat-form-field class=\"currency\" appearance=\"outline\">\r\n          <mat-label>Divisa</mat-label>\r\n          <mat-select formControlName=\"currency\">\r\n            <ng-container *ngFor=\"let currency of currencyList\">\r\n              <mat-option [value]=\"currency.type\" (click)=\"changeCurrency(currency.type)\">\r\n                {{currency.type}}\r\n              </mat-option>\r\n            </ng-container>\r\n          </mat-select>\r\n        </mat-form-field>\r\n        <mat-button-toggle-group class=\"offering-type-list\" name=\"offering-type\" formControlName=\"offering\"\r\n                                 aria-label=\"Offering type\">\r\n          <mat-button-toggle (click)=\"changeOffering('SALE')\" [value]=\"'SALE'\"\r\n                             [disabled]=\"propertyTypeSelected.value === 'NONE' || propertyTypeSelected.value === 'ROOM'\">\r\n            Venta\r\n          </mat-button-toggle>\r\n          <mat-button-toggle (click)=\"changeOffering('RENT')\" [value]=\"'RENT'\"\r\n                             [disabled]=\"propertyTypeSelected.value === 'NONE' || propertyTypeSelected.value === 'INVESTMENT'\">\r\n            Renta\r\n          </mat-button-toggle>\r\n        </mat-button-toggle-group>\r\n      </div>\r\n      <div class=\"property-type-list mat-elevation-z2\">\r\n        <ng-container *ngFor=\"let type of propertyTypeList; let i = index\">\r\n          <ng-template [ngIf]=\"type.value !== 'NONE'\">\r\n            <div class=\"property-type-list__button\">\r\n              <div\r\n                class=\"property-type-list__border\"\r\n                [ngClass]=\"{'property-type-list__border--active': (type.value === propertyTypeSelected.value) || (propertyTypeSelected.value === 'NONE') || ((type.value === 'HOUSE' || type.value === 'APARTMENT') && propertyTypeSelected.value === 'RESIDENTIAL')}\"\r\n                [ngStyle]=\"{'border-color': 'var(--' + type.iconName + ')'}\">\r\n                <button mat-mini-fab=\"\" type=\"button\" (click)=\"changePropertyType(i)\"\r\n                        [ngStyle]=\"{'background-color': 'var(--' + type.iconName + ')'}\">\r\n                  <span class=\"property-type-list__icon ic-property-{{type.iconName}}\"></span>\r\n                </button>\r\n              </div>\r\n              <span class=\"property-type-list__label\">{{type.shortName}}</span>\r\n              <ng-template [ngIf]=\"type.value === 'RESIDENTIAL' && propertyTypeSelected.value === 'RESIDENTIAL'\">\r\n                <div class=\"property-type-list__divider property-type-list__divider--left\"></div>\r\n                <div class=\"property-type-list__divider property-type-list__divider--right\"></div>\r\n              </ng-template>\r\n            </div>\r\n          </ng-template>\r\n        </ng-container>\r\n      </div>\r\n      <ng-template [ngIf]=\"isOPI\">\r\n        <div class=\"all\">\r\n          <button mat-raised-button=\"\" type=\"button\" class=\"all__button\"\r\n                  [ngClass]=\"{'all__button--active': propertyTypeSelected.value === 'NONE'}\"\r\n                  (click)=\"changePropertyType(9)\">Todo\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n    <ng-template [ngIf]=\"propertyTypeSelected.value !== 'NONE'\">\r\n      <mat-divider></mat-divider>\r\n      <div class=\"--padding\">\r\n        <h4 class=\"--title\">\r\n          <span class=\"ic-features-price\"></span>\r\n          Presupuesto\r\n        </h4>\r\n        <div class=\"budget\">\r\n          <!-- Min price [START] -->\r\n          <mat-form-field appearance=\"outline\">\r\n            <mat-label>M\u00EDnimo</mat-label>\r\n            <input autocomplete=\"off\" matInput=\"\" type=\"number\" title=\"Min price\" formControlName=\"minPrice\" min=\"1\" >\r\n            <mat-error *ngIf=\"filtersForm.controls['minPrice'].hasError('pattern')\">\r\n              Debe ingresar solo numeros\r\n            </mat-error>\r\n            <mat-error *ngIf=\"filtersForm.controls['minPrice'].hasError('required')\">\r\n              Este campo es requerido\r\n            </mat-error>\r\n          </mat-form-field>\r\n          <!-- Min price [END] -->\r\n          <!-- Max price [START] -->\r\n          <mat-form-field appearance=\"outline\">\r\n            <mat-label>M\u00E1ximo</mat-label>\r\n            <input autocomplete=\"off\" matInput=\"\" type=\"number\" title=\"max price\" formControlName=\"maxPrice\">\r\n            <mat-error *ngIf=\"filtersForm.controls['maxPrice'].hasError('pattern')\">\r\n              Debe ingresar solo numeros\r\n            </mat-error>\r\n            <mat-error *ngIf=\"filtersForm.controls['maxPrice'].hasError('required')\">\r\n              Este campo es requerido\r\n            </mat-error>\r\n            <mat-error *ngIf=\"filtersForm.controls['maxPrice'].hasError('currency')\">\r\n              Valor minimo excedido\r\n            </mat-error>\r\n          </mat-form-field>\r\n          <!-- Max price [END] -->\r\n        </div>\r\n        <div class=\"features\">\r\n          <ng-template\r\n            [ngIf]=\"propertyTypeSelected.value === 'RESIDENTIAL' || propertyTypeSelected.value ===  'HOUSE' || propertyTypeSelected.value === 'APARTMENT'\">\r\n            <div class=\"features__bedrooms\">\r\n              <h4 class=\"--title\">\r\n                <span class=\"ic-features-bedroom\"></span>\r\n                Habitaciones\r\n              </h4>\r\n              <mat-button-toggle-group name=\"bedrooms\" aria-label=\"Bedrooms\" formControlName=\"bedrooms\">\r\n                <ng-container *ngFor=\"let bedroom of bedroomsList\">\r\n                  <ng-template [ngIf]=\"bedroom === 0\" [ngIfElse]=\"bedroomNumber\">\r\n                    <mat-button-toggle [value]=\"bedroom\" class=\"features__bedrooms--unlimited\">\r\n                      Sin <br> l\u00EDmite\r\n                    </mat-button-toggle>\r\n                  </ng-template>\r\n                  <ng-template #bedroomNumber>\r\n                    <mat-button-toggle [value]=\"bedroom\">{{bedroom}}+\r\n                    </mat-button-toggle>\r\n                  </ng-template>\r\n                </ng-container>\r\n              </mat-button-toggle-group>\r\n            </div>\r\n            <div class=\"features__bathrooms\">\r\n              <h4 class=\"--title\">\r\n                <span class=\"ic-features-bathroom\"></span>\r\n                Ba\u00F1os\r\n              </h4>\r\n              <mat-button-toggle-group name=\"bathrooms\" aria-label=\"Bathrooms\" formControlName=\"bathrooms\">\r\n                <ng-container *ngFor=\"let bathroom of bathroomsList\">\r\n                  <ng-template [ngIf]=\"bathroom === 0\" [ngIfElse]=\"bathroomNumber\">\r\n                    <mat-button-toggle [value]=\"bathroom\"\r\n                                       class=\"features__bathrooms--unlimited\">\r\n                      Sin <br> l\u00EDmite\r\n                    </mat-button-toggle>\r\n                  </ng-template>\r\n                  <ng-template #bathroomNumber>\r\n                    <mat-button-toggle [value]=\"bathroom\">{{bathroom}}+\r\n                    </mat-button-toggle>\r\n                  </ng-template>\r\n                </ng-container>\r\n              </mat-button-toggle-group>\r\n            </div>\r\n          </ng-template>\r\n          <ng-template [ngIf]=\"propertyTypeSelected.value !== 'LAND' && propertyTypeSelected.value !== 'INVESTMENT'\">\r\n            <div class=\"features__parking-places\">\r\n              <h4 class=\"--title\">\r\n                <span class=\"ic-features-parking\"></span>\r\n                Estacionamientos\r\n              </h4>\r\n              <mat-button-toggle-group name=\"parking_places\" aria-label=\"Parking Places\"\r\n                                       formControlName=\"parkingPlaces\">\r\n                <ng-container *ngFor=\"let parking of parkingPlacesList\">\r\n                  <ng-template [ngIf]=\"parking === 0\" [ngIfElse]=\"parkingNumber\">\r\n                    <mat-button-toggle [value]=\"parking\"\r\n                                       class=\"features__parking-places--unlimited\">\r\n                      Sin <br> l\u00EDmite\r\n                    </mat-button-toggle>\r\n                  </ng-template>\r\n                  <ng-template #parkingNumber>\r\n                    <mat-button-toggle [value]=\"parking\">{{parking}}+\r\n                    </mat-button-toggle>\r\n                  </ng-template>\r\n                </ng-container>\r\n              </mat-button-toggle-group>\r\n            </div>\r\n          </ng-template>\r\n          <ng-template [ngIf]=\"propertyTypeSelected.value !== 'INVESTMENT'\">\r\n            <div class=\"features__surface\">\r\n              <h4 class=\"--title\">\r\n                <span class=\"ic-features-surface\"></span>\r\n                Superficie\r\n              </h4>\r\n              <div class=\"--row\">\r\n                <mat-form-field appearance=\"outline\" class=\"--col\">\r\n                  <mat-label>\u00C1rea</mat-label>\r\n                  <mat-select formControlName=\"surface\">\r\n                    <mat-option [value]=\"0\">\r\n                      Sin l\u00EDmite\r\n                    </mat-option>\r\n                    <ng-container *ngFor=\"let surface of surfaceList\">\r\n                      <mat-option [value]=\"surface\">\r\n                        {{surface}}\r\n                      </mat-option>\r\n                    </ng-container>\r\n                  </mat-select>\r\n                </mat-form-field>\r\n                <mat-button-toggle-group name=\"unit_surface\" aria-label=\"Unit surface\" formControlName=\"surfaceUnit\">\r\n                  <mat-button-toggle [value]=\"0\">m2</mat-button-toggle>\r\n                  <mat-button-toggle [value]=\"1\">sq ft</mat-button-toggle>\r\n                </mat-button-toggle-group>\r\n              </div>\r\n            </div>\r\n          </ng-template>\r\n          <ng-template [ngIf]=\"propertyTypeSelected.value === 'INVESTMENT'\">\r\n            <div class=\"feature investment\">\r\n              <h4 class=\"--title\">Retorno de inversi\u00F3n</h4>\r\n              <mat-form-field appearance=\"outline\" class=\"--col\">\r\n                <mat-label>Porcentaje</mat-label>\r\n                <mat-select formControlName=\"roi\">\r\n                  <mat-option [value]=\"0\">\r\n                    Sin l\u00EDmite\r\n                  </mat-option>\r\n                  <ng-container *ngFor=\"let roi of roiList\">\r\n                    <mat-option [value]=\"roi\">\r\n                      {{roi}}%\r\n                    </mat-option>\r\n                  </ng-container>\r\n                </mat-select>\r\n              </mat-form-field>\r\n            </div>\r\n          </ng-template>\r\n          <div class=\"amenities-container\">\r\n            <ng-template [ngIf]=\"propertyTypeSelected.amenities.length > 0\">\r\n              <div class=\"amenities\">\r\n                <h4 class=\"--title\">\r\n                  Amenidades\r\n                </h4>\r\n                <div class=\"amenities__list\">\r\n                  <ng-container *ngFor=\"let amenity of propertyTypeSelected.amenities\">\r\n                    <div class=\"amenities__amenity\" matRipple (click)=\"updateAmenity(amenity)\">\r\n                  <span class=\"amenity__icon ic-amenities-{{amenity.iconName}}\"\r\n                        [ngClass]=\"{'amenity--active': amenity.checked}\"></span>\r\n                      <span class=\"amenity__label\">{{amenity.name}}</span>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </ng-template>\r\n            <ng-template [ngIf]=\"propertyTypeSelected.features.length > 0\">\r\n              <div class=\"amenities\">\r\n                <h4 class=\"--title\">\r\n                  Caracteristicas de la ubicaci\u00F3n\r\n                </h4>\r\n                <div class=\"amenities__list\">\r\n                  <ng-container *ngFor=\"let feature of propertyTypeSelected.features\">\r\n                    <div class=\"amenities__amenity\" matRipple (click)=\"updateAmenity(feature)\">\r\n                <span class=\"amenity__icon ic-amenities-{{feature.iconName}}\"\r\n                      [ngClass]=\"{'amenity--active': feature.checked}\"></span>\r\n                      <span class=\"amenity__label\">{{feature.name}}</span>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </ng-template>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </div>\r\n  <div class=\"actions\">\r\n    <!--ng-template [ngIf]=\"!isOPI\" [ngIfElse]=\"closeButtonTemplate\">\r\n      <button mat-flat-button=\"\" type=\"button\" class=\"action__button\" color=\"primary\" (click)=\"saveSearchByFilters()\">\r\n        GUARDAR\r\n      </button>\r\n    </ng-template-->\r\n    <ng-template #closeButtonTemplate>\r\n      <button mat-flat-button=\"\" type=\"button\" class=\"action__button\" color=\"primary\" (click)=\"close()\">CERRAR</button>\r\n    </ng-template>\r\n    <button mat-flat-button=\"\" type=\"button\" class=\"action__button\" color=\"primary\"\r\n            (click)=\"resetFilters()\">LIMPIAR\r\n    </button>\r\n    <button mat-flat-button=\"\" type=\"submit\" class=\"action__button\" color=\"primary\"\r\n            (click)=\"applyFilters()\">APLICAR\r\n    </button>\r\n  </div>\r\n</form>\r\n",
                 styles: [":host{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;display:flex;background:var(--overlay);transition:250ms}.filters--opened{height:90%!important}@media screen and (max-width:600px){.filters--opened{width:100%!important;height:100%!important;top:0!important}}.filters{width:700px;height:auto;margin:auto;border-radius:16px;position:relative;overflow:hidden;transition:150ms}.filters .--padding{padding:16px 48px;box-sizing:border-box}.filters .--row{display:flex;justify-content:space-between;align-items:flex-start}.filters .--col{width:45%}.filters .--title{margin:16px 0;color:#707070}.filters .float-button-close{position:absolute;top:16px;right:16px;height:16px;border-radius:50%}.filters .body{height:calc(100% - 36px);overflow-x:hidden;overflow-y:auto}.filters .header{display:flex;align-items:center;justify-content:space-around;margin-bottom:8px}.filters .listing-types{width:100%;border-radius:16px}.filters .listing-types mat-button-toggle{width:50%;height:36px}.filters ::ng-deep .listing-types mat-button-toggle button{height:36px}.filters ::ng-deep .listing-types mat-button-toggle button .mat-button-toggle-label-content{line-height:36px}.filters .currency ::ng-deep .mat-form-field-wrapper{padding:0}@media screen and (max-width:600px){.filters{width:100%;position:absolute;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;top:initial;bottom:0;left:0}.filters .--padding{padding:16px 24px}.filters .header{flex-direction:column}.filters .currency{width:70%;margin-bottom:8px}}.filters .offering-type-list{width:40%;border-radius:16px}.filters .offering-type-list mat-button-toggle{width:50%;height:36px}.filters ::ng-deep .offering-type-list mat-button-toggle button{height:36px}.filters ::ng-deep .offering-type-list mat-button-toggle button .mat-button-toggle-label-content{line-height:36px}.filters .property-type-list{display:-ms-grid;display:grid;-ms-grid-columns:(calc(100% / 9))[9];grid-template-columns:repeat(9,calc(100% / 9));-ms-grid-rows:(80px)[1];grid-template-rows:repeat(1,80px);border-radius:40px;padding:8px;box-sizing:border-box}.filters .property-type-list .property-type-list__button{margin:auto;position:relative}.filters .property-type-list .property-type-list__button button{box-shadow:none}.filters .property-type-list .property-type-list__icon{width:24px;height:24px;font-size:24px}.filters .property-type-list .property-type-list__border{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:auto;opacity:.7;border-radius:50%;box-sizing:border-box}.filters .property-type-list .property-type-list__border--active{padding:4px;border:2px solid;opacity:1!important}.filters .property-type-list .property-type-list__label{font-size:12px;display:block;margin:8px 0;text-align:center}.filters .property-type-list .property-type-list__divider{width:14%;height:2px;background:#707070;top:30%;position:absolute}.filters .property-type-list .property-type-list__divider--left{left:-9px}.filters .property-type-list .property-type-list__divider--right{right:-9px}@media screen and (max-width:600px){.filters .offering-type-list{width:70%}.filters .property-type-list{-ms-grid-columns:(calc(100% / 3))[3];grid-template-columns:repeat(3,calc(100% / 3));-ms-grid-rows:(80px)[3];grid-template-rows:repeat(3,80px)}.filters .property-type-list .property-type-list__divider{width:60%}.filters .property-type-list .property-type-list__divider--left{left:-38px}.filters .property-type-list .property-type-list__divider--right{right:-38px}}.filters .all{width:100%;margin:8px 0}.filters .all .all__button{margin:0 40%;width:20%;border-radius:16px;background:0 0}.filters .budget{display:flex}.filters .budget mat-form-field{margin-right:8px;width:calc(100% / 2 - 8px)}.filters .features{display:-ms-grid;display:grid;-ms-grid-columns:(50%)[2];grid-template-columns:repeat(2,50%);-ms-grid-rows:(auto)[2];grid-template-rows:repeat(2,auto)}@media screen and (max-width:600px){.filters .all .all__button{width:50%;margin:0 25%}.filters .features{display:block}.filters .amenities-container{flex-direction:column}}.filters .features .features__bathrooms mat-button-toggle-group,.filters .features .features__bedrooms mat-button-toggle-group,.filters .features .features__parking-places mat-button-toggle-group{width:calc(100% - 16px)}.filters .features .features__bathrooms mat-button-toggle-group mat-button-toggle,.filters .features .features__bedrooms mat-button-toggle-group mat-button-toggle,.filters .features .features__parking-places mat-button-toggle-group mat-button-toggle{width:calc(100% / 5)}.filters .features .features__bedrooms--unlimited ::ng-deep .mat-button-toggle-label-content{line-height:16px;padding:8px;font-size:12px}.filters .features .features__bathrooms--unlimited ::ng-deep .mat-button-toggle-label-content{line-height:16px;padding:8px;font-size:12px}.filters .features .features__parking-places--unlimited ::ng-deep .mat-button-toggle-label-content{line-height:16px;padding:8px;font-size:12px}.filters .features .features__surface mat-button-toggle-group{margin-top:6px;margin-right:16px}.filters .amenities-container{width:100%;-ms-grid-column:1;grid-column-start:1;-ms-grid-column-span:2;grid-column-end:3;display:flex}.filters .amenities{width:50%}@media screen and (max-width:600px){.filters .amenities{width:100%}}.filters .amenities__amenity{width:calc(100% / 3 - 24px);height:120px;border-radius:8px;padding:8px;display:inline-flex;flex-direction:column;align-items:center;box-sizing:border-box;margin:0 8px 8px 0;cursor:pointer}.filters .amenity__icon{display:block;width:24px;height:24px;margin:8px auto;font-size:24px;padding:8px;border-radius:50%}.filters .amenity__label{width:100%;display:block;text-align:center;font-size:12px;margin:auto}.filters .actions{display:flex}.filters .actions .action__button{width:50%;border-radius:0}"]
             }] }
 ];
@@ -2878,7 +2907,11 @@ FiltersComponent.ctorParameters = () => [
     { type: CurrencyConverterService }
 ];
 FiltersComponent.propDecorators = {
-    utils: [{ type: Input }]
+    utils: [{ type: Input }],
+    newFilters: [{ type: Input }],
+    stateOptions: [{ type: Input }],
+    propertyTotal: [{ type: Input }],
+    changeFilter: [{ type: Output }]
 };
 
 /**