@maplander/components 0.21.43 → 0.21.45

package/fesm2015/maplander-components.js

@@ -2227,7 +2227,7 @@ class FabFiltersComponent {
 FabFiltersComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-fab-filters',
-                template: "<div class=\"fab-filters\">\r\n  <button mat-flat-button=\"\" color=\"primary\" class=\"btn_filters\" (click)=\"openFilters()\">\r\n    Filtros\r\n  </button>\r\n  <!--div class=\"filters-container\">\r\n    <ng-template [ngIf]=\"chips.length > 0\">\r\n      <mat-chip-list aria-orientation=\"horizontal\">\r\n        <ng-container *ngFor=\"let chip of chips\">\r\n          <mat-chip (click)=\"onClickChip(chip.type)\">\r\n            <ng-container [ngSwitch]=\"chip.type\">\r\n              <ng-container *ngSwitchCase=\"'PROPERTY_TYPE'\">\r\n                <span class=\"icon property-icon ic-property-{{chip.icon}}\"\r\n                      [ngStyle]=\"{'background': 'var(--' + chip.icon + ')'}\"></span>\r\n              </ng-container>\r\n              <ng-container *ngSwitchCase=\"'LISTING'\">\r\n                <ng-template [ngIf]=\"chip.icon[0] !== 'mlm'\" [ngIfElse]=\"mlm\">\r\n                  <mat-icon class=\"listing-icon\">\r\n                    list\r\n                  </mat-icon>\r\n                </ng-template>\r\n                <ng-template #mlm>\r\n                  <mat-icon  class=\"listing-icon\" svgIcon=\"opi:mlm\"></mat-icon>\r\n                </ng-template>\r\n              </ng-container>\r\n              <ng-container *ngSwitchCase=\"'AMENITIES'\">\r\n                <span class=\"icon ic-amenities-{{chip.icon[0]}}\"></span>\r\n              </ng-container>\r\n              <ng-container *ngSwitchDefault>\r\n                <ng-container *ngFor=\"let i of chip.icon\">\r\n                  <span class=\"icon ic-features-{{i}}\"></span>\r\n                </ng-container>\r\n              </ng-container>\r\n            </ng-container>\r\n            {{chip.text}}\r\n          </mat-chip>\r\n        </ng-container>\r\n      </mat-chip-list>\r\n    </ng-template>\r\n  </div -->\r\n</div>\r\n",
+                template: "<div class=\"fab-filters\">\r\n  <button mat-flat-button=\"\" color=\"primary\" class=\"btn_filters\" (click)=\"openFilters()\">\r\n    Filtros\r\n  </button>\r\n  <div class=\"filters-container\">\r\n    <ng-template [ngIf]=\"chips.length > 0\">\r\n      <mat-chip-list aria-orientation=\"horizontal\">\r\n        <ng-container *ngFor=\"let chip of chips\">\r\n          <mat-chip (click)=\"onClickChip(chip.type)\">\r\n            <ng-container [ngSwitch]=\"chip.type\">\r\n              <ng-container *ngSwitchCase=\"'PROPERTY_TYPE'\">\r\n                <span class=\"icon property-icon ic-property-{{chip.icon}}\"\r\n                      [ngStyle]=\"{'background': 'var(--' + chip.icon + ')'}\"></span>\r\n              </ng-container>\r\n              <ng-container *ngSwitchCase=\"'LISTING'\">\r\n                <ng-template [ngIf]=\"chip.icon[0] !== 'mlm'\" [ngIfElse]=\"mlm\">\r\n                  <mat-icon class=\"listing-icon\">\r\n                    list\r\n                  </mat-icon>\r\n                </ng-template>\r\n                <ng-template #mlm>\r\n                  <mat-icon  class=\"listing-icon\" svgIcon=\"opi:mlm\"></mat-icon>\r\n                </ng-template>\r\n              </ng-container>\r\n              <ng-container *ngSwitchCase=\"'AMENITIES'\">\r\n                <span class=\"icon ic-amenities-{{chip.icon[0]}}\"></span>\r\n              </ng-container>\r\n              <ng-container *ngSwitchDefault>\r\n                <ng-container *ngFor=\"let i of chip.icon\">\r\n                  <span class=\"icon ic-features-{{i}}\"></span>\r\n                </ng-container>\r\n              </ng-container>\r\n            </ng-container>\r\n            {{chip.text}}\r\n          </mat-chip>\r\n        </ng-container>\r\n      </mat-chip-list>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n",
                 styles: [":host{display:block;position:inherit;top:inherit;bottom:inherit;left:inherit;right:inherit;z-index:inherit;width:inherit}.fab-filters{display:flex;width:100%;border-radius:8px 0 0 8px}.fab-filters .filters-container{width:calc(100% - 64px);height:40px;padding-right:8px;box-sizing:border-box;border-radius:4px 4px 4px 0;display:flex;align-items:center;transition:150ms}.fab-filters .filters-container mat-chip-list{width:100%;height:100%;overflow:hidden}.fab-filters .filters-container mat-chip-list mat-chip{min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content}.fab-filters ::ng-deep .filters-container mat-chip-list .mat-chip-list-wrapper{width:100%;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding-bottom:16px;margin:0}.fab-filters .filters-container mat-chip-list mat-chip .icon{width:24px;height:24px;font-size:16px;border-radius:50%;margin-right:8px;display:flex;align-items:center;justify-content:center}"]
             }] }
 ];
@@ -2446,7 +2446,7 @@ class FiltersComponent {
         this._formBuilder = _formBuilder;
         this._converter = _converter;
         this.METERS_TO_SQ = 10.76391042;
-        this.changeFilter = new EventEmitter();
+        this.filterChange = new EventEmitter();
         this.isOPI = this._config || false;
         this._subscription = new Subscription();
         this.propertyTypeList = ConstantsComponents.PropertyTypeList.map((/**
@@ -2525,23 +2525,22 @@ class FiltersComponent {
                 this.filtersForm.controls['offering'].setValue(OfferingTypeEnum.SALE);
                 break;
         }
-        this.filter.locationType = null;
-        this.filter.state = null;
-        this.filter.municipality = null;
-        this.filter.colony = null;
-        this.changeFilter.emit({ type: 'propertyType', payload: { filter: this.filter, value: this.filtersForm.value } });
+        this.changeFilter();
+    }
+    /**
+     * @return {?}
+     */
+    changeFilter() {
+        this.getFilterByForm();
+        this.filterChange.emit(this.filter);
     }
     /**
      * @param {?} ev
      * @return {?}
      */
     changeOffering(ev) {
-        this.filter.locationType = null;
-        this.filter.state = null;
-        this.filter.municipality = null;
-        this.filter.colony = null;
         this.filter.offering = (/** @type {?} */ (ev));
-        this.changeFilter.emit({ type: 'offer', payload: { filter: this.filter, value: this.filtersForm.value } });
+        this.changeFilter();
     }
     /**
      * @param {?} ev
@@ -2549,7 +2548,7 @@ class FiltersComponent {
      */
     changeCurrency(ev) {
         this.filter.currency = ev;
-        this.changeFilterStatus();
+        this.changeFilter();
     }
     /**
      * @param {?} amenity
@@ -2567,7 +2566,7 @@ class FiltersComponent {
             this.filter.extras.push(amenity.value);
         }
         amenity.checked = !amenity.checked;
-        this.changeFilterStatus();
+        this.changeFilter();
     }
     /**
      * @return {?}
@@ -2606,7 +2605,6 @@ class FiltersComponent {
         this.filter = propertyTypeItemIndex ? Utils.getFilterByPropertyType(this.filter) : Utils.getInitialFilter(this.isOPI, this.filter);
         this.updateFormByFilters();
         this.setPrices();
-        this.propertyTotal = 0;
     }
     /**
      * @private
@@ -2628,30 +2626,6 @@ class FiltersComponent {
             validator: CurrencyFilterValidator('minPrice', 'maxPrice')
         });
     }
-    /**
-     * @return {?}
-     */
-    changeFilterStatus() {
-        this.getFilterByForm();
-        /** @type {?} */
-        const filterToSearch = Object.assign({}, this.filter);
-        if (this.surfaceUnitSelected === 1) {
-            filterToSearch.mainArea = filterToSearch.mainArea * this.METERS_TO_SQ;
-        }
-        if (!this.filtersForm.controls['minPrice'].value) {
-            this.filtersForm.controls['minPrice'].reset(0);
-            this.filtersForm.patchValue({
-                minPrice: 0
-            });
-        }
-        if (!this.filtersForm.controls['minPrice'].value) {
-            this.filtersForm.controls['minPrice'].reset(0);
-            this.filtersForm.patchValue({
-                maxPrice: 0
-            });
-        }
-        this.changeFilter.emit({ type: 'filter', payload: { filter: this.filter, value: filterToSearch } });
-    }
     /**
      * @private
      * @return {?}
@@ -2837,7 +2811,6 @@ class FiltersComponent {
      */
     openComponent(open) {
         if (open) {
-            this.changeFilter.emit({ type: 'init', payload: { filter: null, value: null } });
             this._render.setStyle(this._ref.nativeElement, 'visibility', 'visible');
             this._render.setStyle(this._ref.nativeElement, 'opacity', '1');
         }
@@ -2904,7 +2877,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=\"mat-elevation-z2\" [ngClass]=\"{'property-type-list': !newFilters, 'new-property-type-list': newFilters}\">\r\n        <ng-container *ngFor=\"let type of propertyTypeList; let i = index\">\r\n          <ng-template [ngIf]=\"type.value !== 'NONE' && (type.value !== 'ROOM' && newFilters)\">\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\" (focusout)=\"changeFilterStatus()\">\r\n            <mat-error *ngIf=\"filtersForm.controls['minPrice'].hasError('pattern')\">\r\n              Debe ingresar solo n\u00FAmeros\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\" (focusout)=\"changeFilterStatus()\">\r\n            <mat-error *ngIf=\"filtersForm.controls['maxPrice'].hasError('pattern')\">\r\n              Debe ingresar solo n\u00FAmeros\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 m\u00EDnimo 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\" (click)=\"changeFilterStatus()\" 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\" (click)=\"changeFilterStatus()\">{{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\" (click)=\"changeFilterStatus()\"\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\" (click)=\"changeFilterStatus()\">{{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\" (click)=\"changeFilterStatus()\"\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\" (click)=\"changeFilterStatus()\">{{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\" (selectionChange)=\"changeFilterStatus()\">\r\n                    <mat-option [value]=\"0\" (click)=\"changeFilterStatus()\">\r\n                      Sin l\u00EDmite\r\n                    </mat-option>\r\n                    <ng-container *ngFor=\"let surface of surfaceList\">\r\n                      <mat-option [value]=\"surface\" (click)=\"changeFilterStatus()\">\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 (click)=\"changeFilterStatus()\" [value]=\"0\">m2</mat-button-toggle>\r\n                  <mat-button-toggle (click)=\"changeFilterStatus()\" [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\" (click)=\"changeFilterStatus()\">\r\n                    Sin l\u00EDmite\r\n                  </mat-option>\r\n                  <ng-container *ngFor=\"let roi of roiList\">\r\n                    <mat-option [value]=\"roi\" (click)=\"changeFilterStatus()\">\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    <button mat-flat-button type=\"submit\" class=\"apply-button\" color=\"primary\" [disabled]=\"(propertyTotal === 0 || filtersForm.invalid) && newFilters\"\r\n            (click)=\"applyFilters()\">\r\n      VER <span *ngIf=\"propertyTotal > 0 && newFilters\">{{propertyTotal}}</span> {{(propertyTotal === 1 ? 'PROPIEDAD' : 'PROPIEDADES')}}\r\n    </button>\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  </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=\"mat-elevation-z2\" [ngClass]=\"{'property-type-list': !newFilters, 'new-property-type-list': newFilters}\">\r\n        <ng-container *ngFor=\"let type of propertyTypeList; let i = index\">\r\n          <ng-template [ngIf]=\"type.value !== 'NONE' && (type.value !== 'ROOM' && newFilters)\">\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\" (blur)=\"changeFilter()\">\r\n            <mat-error *ngIf=\"filtersForm.controls['minPrice'].hasError('pattern')\">\r\n              Debe ingresar solo n\u00FAmeros\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\" (blur)=\"changeFilter()\">\r\n            <mat-error *ngIf=\"filtersForm.controls['maxPrice'].hasError('pattern')\">\r\n              Debe ingresar solo n\u00FAmeros\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 m\u00EDnimo 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\" (click)=\"changeFilter()\" 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\" (click)=\"changeFilter()\">{{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\" (click)=\"changeFilter()\"\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\" (click)=\"changeFilter()\">{{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\" (click)=\"changeFilter()\"\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\" (click)=\"changeFilter()\">{{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\" (click)=\"changeFilter()\">\r\n                      Sin l\u00EDmite\r\n                    </mat-option>\r\n                    <ng-container *ngFor=\"let surface of surfaceList\">\r\n                      <mat-option [value]=\"surface\" (click)=\"changeFilter()\">\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\" (click)=\"changeFilter()\">m2</mat-button-toggle>\r\n                  <mat-button-toggle [value]=\"1\" (click)=\"changeFilter()\">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\" (click)=\"changeFilter()\">\r\n                    Sin l\u00EDmite\r\n                  </mat-option>\r\n                  <ng-container *ngFor=\"let roi of roiList\">\r\n                    <mat-option [value]=\"roi\" (click)=\"changeFilter()\">\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    <button mat-flat-button type=\"submit\" class=\"apply-button\" color=\"primary\" (click)=\"applyFilters()\" [disabled]=\"totalProperties === 0\">\r\n      VER {{totalProperties}} {{totalProperties === 1 ? 'PROPIEDAD' : 'PROPIEDADES'}}\r\n    </button>\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  </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 .apply-button{width:100%;position:absolute;bottom:0}.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}@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 .new-property-type-list{display:-ms-grid;display:grid;-ms-grid-columns:(calc(100% / 8))[8];grid-template-columns:repeat(8,calc(100% / 8));-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 .new-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 .new-property-type-list .property-type-list__button{margin:auto;position:relative}.filters .new-property-type-list .property-type-list__button button{box-shadow:none}.filters .new-property-type-list .property-type-list__icon{width:24px;height:24px;font-size:24px}.filters .new-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 .new-property-type-list .property-type-list__border--active{padding:4px;border:2px solid;opacity:1!important}.filters .new-property-type-list .property-type-list__label{font-size:12px;display:block;margin:8px 0;text-align:center}.filters .new-property-type-list .property-type-list__divider{width:14%;height:2px;background:#707070;top:30%;position:absolute}.filters .new-property-type-list .property-type-list__divider--left{left:-9px}.filters .new-property-type-list .property-type-list__divider--right{right:-9px}@media screen and (max-width:600px){.filters .new-property-type-list .property-type-list__divider{width:60%}.filters .new-property-type-list .property-type-list__divider--left{left:-38px}.filters .new-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}"]
             }] }
 ];
@@ -2920,8 +2893,8 @@ FiltersComponent.ctorParameters = () => [
 FiltersComponent.propDecorators = {
     utils: [{ type: Input }],
     newFilters: [{ type: Input }],
-    propertyTotal: [{ type: Input }],
-    changeFilter: [{ type: Output }]
+    totalProperties: [{ type: Input }],
+    filterChange: [{ type: Output }]
 };
 
 /**