@maplander/components 0.21.43 → 0.21.44

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- import { Pipe, NgModule, Directive, ElementRef, Input, Component, Inject, Injectable, InjectionToken, Optional, Renderer2, Output, EventEmitter, ViewChild, ContentChild, TemplateRef, ChangeDetectorRef, forwardRef, Injector } from '@angular/core';
1
+ import { Pipe, NgModule, Directive, ElementRef, Input, Component, Inject, Injectable, InjectionToken, Optional, Renderer2, ViewChild, Output, EventEmitter, ContentChild, TemplateRef, ChangeDetectorRef, forwardRef, Injector } from '@angular/core';
2
2
  import { CommonModule, CurrencyPipe } from '@angular/common';
3
3
  import { LandUseEnum, PFileTypeEnum, PropertyTypeEnum, OfferingTypeEnum, StatusTypeEnum, Currency, PFile, DialogResponseType, LeadInfo, NewCompleteProperty, NewProperty, PropertyInfo, Features, Address, Amenities, AreaUnitEnum, Owner, NewPropertyLite } from '@maplander/types';
4
4
  import { __values, __assign, __extends } from 'tslib';
@@ -2578,7 +2578,7 @@ var FabFiltersComponent = /** @class */ (function () {
2578
2578
  FabFiltersComponent.decorators = [
2579
2579
  { type: Component, args: [{
2580
2580
  selector: 'lib-fab-filters',
2581
- 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",
2581
+ 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",
2582
2582
  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}"]
2583
2583
  }] }
2584
2584
  ];
@@ -2826,7 +2826,6 @@ var FiltersComponent = /** @class */ (function () {
2826
2826
  this._formBuilder = _formBuilder;
2827
2827
  this._converter = _converter;
2828
2828
  this.METERS_TO_SQ = 10.76391042;
2829
- this.changeFilter = new EventEmitter();
2830
2829
  this.isOPI = this._config || false;
2831
2830
  this._subscription = new Subscription();
2832
2831
  this.propertyTypeList = ConstantsComponents.PropertyTypeList.map((/**
@@ -2928,11 +2927,6 @@ var FiltersComponent = /** @class */ (function () {
2928
2927
  this.filtersForm.controls['offering'].setValue(OfferingTypeEnum.SALE);
2929
2928
  break;
2930
2929
  }
2931
- this.filter.locationType = null;
2932
- this.filter.state = null;
2933
- this.filter.municipality = null;
2934
- this.filter.colony = null;
2935
- this.changeFilter.emit({ type: 'propertyType', payload: { filter: this.filter, value: this.filtersForm.value } });
2936
2930
  };
2937
2931
  /**
2938
2932
  * @param {?} ev
@@ -2943,12 +2937,7 @@ var FiltersComponent = /** @class */ (function () {
2943
2937
  * @return {?}
2944
2938
  */
2945
2939
  function (ev) {
2946
- this.filter.locationType = null;
2947
- this.filter.state = null;
2948
- this.filter.municipality = null;
2949
- this.filter.colony = null;
2950
2940
  this.filter.offering = (/** @type {?} */ (ev));
2951
- this.changeFilter.emit({ type: 'offer', payload: { filter: this.filter, value: this.filtersForm.value } });
2952
2941
  };
2953
2942
  /**
2954
2943
  * @param {?} ev
@@ -2960,7 +2949,6 @@ var FiltersComponent = /** @class */ (function () {
2960
2949
  */
2961
2950
  function (ev) {
2962
2951
  this.filter.currency = ev;
2963
- this.changeFilterStatus();
2964
2952
  };
2965
2953
  /**
2966
2954
  * @param {?} amenity
@@ -2982,7 +2970,6 @@ var FiltersComponent = /** @class */ (function () {
2982
2970
  this.filter.extras.push(amenity.value);
2983
2971
  }
2984
2972
  amenity.checked = !amenity.checked;
2985
- this.changeFilterStatus();
2986
2973
  };
2987
2974
  /**
2988
2975
  * @return {?}
@@ -3032,7 +3019,6 @@ var FiltersComponent = /** @class */ (function () {
3032
3019
  this.filter = propertyTypeItemIndex ? Utils.getFilterByPropertyType(this.filter) : Utils.getInitialFilter(this.isOPI, this.filter);
3033
3020
  this.updateFormByFilters();
3034
3021
  this.setPrices();
3035
- this.propertyTotal = 0;
3036
3022
  };
3037
3023
  /**
3038
3024
  * @private
@@ -3058,33 +3044,6 @@ var FiltersComponent = /** @class */ (function () {
3058
3044
  validator: CurrencyFilterValidator('minPrice', 'maxPrice')
3059
3045
  });
3060
3046
  };
3061
- /**
3062
- * @return {?}
3063
- */
3064
- FiltersComponent.prototype.changeFilterStatus = /**
3065
- * @return {?}
3066
- */
3067
- function () {
3068
- this.getFilterByForm();
3069
- /** @type {?} */
3070
- var filterToSearch = Object.assign({}, this.filter);
3071
- if (this.surfaceUnitSelected === 1) {
3072
- filterToSearch.mainArea = filterToSearch.mainArea * this.METERS_TO_SQ;
3073
- }
3074
- if (!this.filtersForm.controls['minPrice'].value) {
3075
- this.filtersForm.controls['minPrice'].reset(0);
3076
- this.filtersForm.patchValue({
3077
- minPrice: 0
3078
- });
3079
- }
3080
- if (!this.filtersForm.controls['minPrice'].value) {
3081
- this.filtersForm.controls['minPrice'].reset(0);
3082
- this.filtersForm.patchValue({
3083
- maxPrice: 0
3084
- });
3085
- }
3086
- this.changeFilter.emit({ type: 'filter', payload: { filter: this.filter, value: filterToSearch } });
3087
- };
3088
3047
  /**
3089
3048
  * @private
3090
3049
  * @return {?}
@@ -3326,7 +3285,6 @@ var FiltersComponent = /** @class */ (function () {
3326
3285
  */
3327
3286
  function (open) {
3328
3287
  if (open) {
3329
- this.changeFilter.emit({ type: 'init', payload: { filter: null, value: null } });
3330
3288
  this._render.setStyle(this._ref.nativeElement, 'visibility', 'visible');
3331
3289
  this._render.setStyle(this._ref.nativeElement, 'opacity', '1');
3332
3290
  }
@@ -3397,7 +3355,7 @@ var FiltersComponent = /** @class */ (function () {
3397
3355
  FiltersComponent.decorators = [
3398
3356
  { type: Component, args: [{
3399
3357
  selector: 'lib-filters',
3400
- 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",
3358
+ 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\" >\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\">\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\" 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 <button mat-flat-button type=\"submit\" class=\"apply-button\" color=\"primary\" (click)=\"applyFilters()\">\r\n VER 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",
3401
3359
  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}"]
3402
3360
  }] }
3403
3361
  ];
@@ -3412,9 +3370,7 @@ var FiltersComponent = /** @class */ (function () {
3412
3370
  ]; };
3413
3371
  FiltersComponent.propDecorators = {
3414
3372
  utils: [{ type: Input }],
3415
- newFilters: [{ type: Input }],
3416
- propertyTotal: [{ type: Input }],
3417
- changeFilter: [{ type: Output }]
3373
+ newFilters: [{ type: Input }]
3418
3374
  };
3419
3375
  return FiltersComponent;
3420
3376
  }());