npm - @maplander/components - Versions diffs - 0.20.9 → 0.21.2 - Mend

@maplander/components 0.20.9 → 0.21.2

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.

Files changed (31) hide show

package/fesm2015/maplander-components.js CHANGED Viewed

@@ -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,6 +2446,7 @@ 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((/**
@@ -2453,6 +2454,13 @@ class FiltersComponent {
          * @return {?}
          */
         item => (Object.assign({}, item))));
+        if (this.newFilters) {
+            for (let i = 0; i < this.propertyTypeList.length; i++) {
+                if (this.propertyTypeList[i].value === PropertyTypeEnum.ROOM || this.propertyTypeList[i].value === PropertyTypeEnum.RESIDENTIAL) {
+                    this.propertyTypeList.splice(i, 1);
+                }
+            }
+        }
         this.bedroomsList = Object.assign([], ConstantsComponents.BedroomList);
         this.bathroomsList = Object.assign([], ConstantsComponents.BathroomList);
         this.parkingPlacesList = Object.assign([], ConstantsComponents.ParkingSpacesList);
@@ -2524,6 +2532,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 +2540,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 +2548,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 +2566,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 {?}
@@ -2593,6 +2605,7 @@ class FiltersComponent {
         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
@@ -2600,6 +2613,7 @@ class FiltersComponent {
      */
     buildForm() {
         this.filtersForm = this._formBuilder.group({
+            state: [],
             offering: [],
             currency: [],
             minPrice: ['', [Validators.required, Validators.pattern(new RegExp('(^[0-9]+)'))]],
@@ -2613,6 +2627,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
@@ -2620,6 +2640,7 @@ class FiltersComponent {
      */
     updateFormByFilters() {
         this.filtersForm.patchValue({
+            state: null,
             offering: this.filter.offering,
             currency: this.filter.currency,
             minPrice: this.filter.downLimitPrice,
@@ -2639,6 +2660,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);
@@ -2865,8 +2887,8 @@ 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",
-                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:(11.1111111111%)[9];grid-template-columns:repeat(9,11.1111111111%);-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:(33.3333333333%)[3];grid-template-columns:repeat(3,33.3333333333%);-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(50% - 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:20%}.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(33.3333333333% - 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}"]
+                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}"]
             }] }
 ];
 /** @nocollapse */
@@ -2879,7 +2901,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 }]
 };
 /**
@@ -3158,7 +3184,7 @@ PanoramaVisorComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-panorama-visor',
                 template: "<div class=\"panorama-visor\">\r\n  <ng-template [ngIf]=\"!showPanorama\">\r\n    <div class=\"panorama-visor__loading\">\r\n      <img class=\"loading__image\" src=\"https://storage.googleapis.com/maplander-develop/public/file/front-end/cdn/360-animation.gif\" alt=\"360 icon\">\r\n      <p class=\"loading__label\">Cargando...</p>\r\n    </div>\r\n  </ng-template>\r\n  <div #container class=\"panorama-visor__container\" [ngStyle]=\"{'opacity': showPanorama ? '1' : '0'}\">\r\n    <div class=\"panorama-visor__actions\">\r\n      <a mat-icon-button class=\"actions__menu-item\">\r\n        <mat-icon>settings</mat-icon>\r\n        <ul class=\"menu-item__hidden-list mat-elevation-z2\">\r\n          <li mat-menu-item class=\"hidden-list__item\">\r\n            Control\r\n            <ul class=\"hidden-list__nested-list mat-elevation-z2\">\r\n              <li mat-menu-item class=\"nested-list__item\" *ngIf=\"!isTouch\" (click)=\"changeControl('MOUSE')\">\r\n                Mouse\r\n              </li>\r\n              <li mat-menu-item class=\"nested-list__item\" *ngIf=\"isTouch\" (click)=\"changeControl('TOUCH')\">\r\n                Touch\r\n              </li>\r\n              <li mat-menu-item class=\"nested-list__item\" (click)=\"changeControl('SENSOR')\">\r\n                Sensor\r\n              </li>\r\n            </ul>\r\n          </li>\r\n          <li mat-menu-item class=\"hidden-list__item\">\r\n            Mode\r\n            <ul class=\"hidden-list__nested-list mat-elevation-z2\">\r\n              <li mat-menu-item class=\"nested-list__item\" (click)=\"changeMode('NORMAL')\">\r\n                Normal\r\n              </li>\r\n              <li mat-menu-item class=\"nested-list__item\" (click)=\"changeMode('CARDBOARD')\">\r\n                Cardboard\r\n              </li>\r\n              <li mat-menu-item class=\"nested-list__item\" (click)=\"changeMode('STEREOSCOPIC')\">\r\n                Stereoscopic\r\n              </li>\r\n            </ul>\r\n          </li>\r\n        </ul>\r\n      </a>\r\n      <button mat-icon-button (click)=\"fullscreen()\">\r\n        <mat-icon *ngIf=\"!isFullScreen\">fullscreen</mat-icon>\r\n        <mat-icon *ngIf=\"isFullScreen\">fullscreen_exit</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                styles: [":host{display:block;width:inherit;height:inherit}.panorama-visor{width:100%;padding-bottom:75%;position:relative;border-radius:8px;transition:.2s;cursor:move}.panorama-visor__loading{position:absolute;width:100%;height:100%;font-size:12px;display:flex;flex-direction:column;align-items:center;justify-content:center}.loading__image{width:200px}.loading__label{color:#fff;font-weight:700}.panorama-visor__actions{position:absolute;border-radius:0 8px 8px 0;background:rgba(0,0,0,.4);z-index:100;color:#fff}.panorama-visor__actions button{display:block}.actions__menu-item{position:relative}.actions__menu-item:hover .menu-item__hidden-list,.hidden-list__item:hover .hidden-list__nested-list{display:block}.hidden-list__nested-list,.menu-item__hidden-list{display:none;list-style:none;position:absolute;background:#fff;margin:0;padding:0;left:calc(100% - 8px);top:0;z-index:1;border-radius:4px}.hidden-list__item,.nested-list__item{min-width:80px;padding:0 16px;text-align:left;cursor:pointer}.panorama-visor__container{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:8px;transition:250ms}::ng-deep .panorama-visor__container canvas{width:100%!important;height:100%!important}"]
+                styles: [":host{display:block;width:inherit;height:inherit}.panorama-visor{width:100%;padding-bottom:calc(100% / 4 * 3);position:relative;border-radius:8px;transition:.2s;cursor:move}.panorama-visor__loading{position:absolute;width:100%;height:100%;font-size:12px;display:flex;flex-direction:column;align-items:center;justify-content:center}.loading__image{width:200px}.loading__label{color:#fff;font-weight:700}.panorama-visor__actions{position:absolute;border-radius:0 8px 8px 0;background:rgba(0,0,0,.4);z-index:100;color:#fff}.panorama-visor__actions button{display:block}.actions__menu-item{position:relative}.actions__menu-item:hover .menu-item__hidden-list,.hidden-list__item:hover .hidden-list__nested-list{display:block}.hidden-list__nested-list,.menu-item__hidden-list{display:none;list-style:none;position:absolute;background:#fff;margin:0;padding:0;left:calc(100% - 8px);top:0;z-index:1;border-radius:4px}.hidden-list__item,.nested-list__item{min-width:80px;padding:0 16px;text-align:left;cursor:pointer}.panorama-visor__container{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:8px;transition:250ms}::ng-deep .panorama-visor__container canvas{width:100%!important;height:100%!important}"]
             }] }
 ];
 /** @nocollapse */
@@ -3540,7 +3566,7 @@ MultimediaUploaderComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-property-multimedia-uploader',
                 template: "<div class=\"multimedia-uploader\">\r\n  <p class=\"title\">\r\n    Multimedia\r\n    <ng-template [ngIf]=\"currentIndex !== 2\">\r\n      <lib-upload-file [content]=\"buttonUploadTemplate\" [noCrop]=\"true\" [fab]=\"true\" [fileType]=\"fileType\" [aspectRatio]=\"4 / 3\"\r\n                       [multiple]=\"true\"\r\n                       (loadImage)=\"onUploadImage($event)\">\r\n        <ng-template #buttonUploadTemplate>\r\n          <button mat-icon-button color=\"primary\">\r\n            <mat-icon>add</mat-icon>\r\n          </button>\r\n        </ng-template>\r\n      </lib-upload-file>\r\n    </ng-template>\r\n  </p>\r\n  <mat-tab-group class=\"multimedia-uploader__tab-group\" [selectedIndex]=\"currentIndex\"\r\n                 (selectedIndexChange)=\"onTabChanged($event)\">\r\n    <mat-tab label=\"Fotografias\">\r\n      <lib-custom-drag-and-drop [items]=\"images\" [content]=\"imageTemplate\" (itemsChanged)=\"onListChanged($event)\">\r\n        <ng-template #imageTemplate let-image=\"image\" let-index=\"index\">\r\n          <div class=\"list__item\" [ngClass]=\"{'first-photo': index === 0}\">\r\n            <img alt=\"Property image\" [src]=\"image.fileCS.thumbnail\" class=\"list__item-img\">\r\n            <button mat-icon-button class=\"list__item-button mat-elevation-z2\" (click)=\"removeMedia(image)\">\r\n              <mat-icon class=\"list__item-icon\">close</mat-icon>\r\n            </button>\r\n          </div>\r\n        </ng-template>\r\n      </lib-custom-drag-and-drop>\r\n    </mat-tab>\r\n    <mat-tab label=\"Esfericas\">\r\n      <lib-custom-drag-and-drop [items]=\"images360\" [content]=\"image360Template\" (itemsChanged)=\"onListChanged($event)\">\r\n        <ng-template #image360Template let-image=\"image\">\r\n          <div class=\"list__item\">\r\n            <img alt=\"Property image\" [src]=\"image.fileCS.thumbnail\" class=\"list__item-img\">\r\n            <button mat-icon-button class=\"list__item-button mat-elevation-z2\" (click)=\"removeMedia(image)\">\r\n              <mat-icon class=\"list__item-icon\">close</mat-icon>\r\n            </button>\r\n          </div>\r\n        </ng-template>\r\n      </lib-custom-drag-and-drop>\r\n    </mat-tab>\r\n    <mat-tab label=\"Videos\">\r\n      <div class=\"you-tube-container\">\r\n        <span class=\"you-tube-container__searchbox\">\r\n          <button *ngIf=\"inputYouTube.value !== ''\" mat-icon-button class=\"you-tube-container__close-btn\"\r\n                  (click)=\"inputYouTube.value = ''\"><mat-icon>close</mat-icon></button>\r\n          <input class=\"you-tube-container__input\" #inputYouTube (input)=\"onYouTubeInputTextChanged(inputYouTube)\"\r\n                 title=\"YouTube URL\" placeholder=\"YouTube URL o YouTube Video ID\">\r\n        </span>\r\n        <a href=\"https://www.youtube.com\" target=\"_blank\" mat-button color=\"primary\">\r\n          Ir a Youtube\r\n        </a>\r\n      </div>\r\n      <lib-custom-drag-and-drop [items]=\"videos\" [content]=\"videosTemplate\" (itemsChanged)=\"onListChanged($event)\">\r\n        <ng-template #videosTemplate let-image=\"image\">\r\n          <div class=\"list__item\">\r\n            <img alt=\"Property image\" [src]=\"'https://i3.ytimg.com/vi/'+image.fileCS.thumbnail+'/hqdefault.jpg'\"\r\n                 class=\"list__item-img\">\r\n            <button mat-icon-button class=\"list__item-button mat-elevation-z2\" (click)=\"removeMedia(image)\">\r\n              <mat-icon class=\"list__item-icon\">close</mat-icon>\r\n            </button>\r\n          </div>\r\n        </ng-template>\r\n      </lib-custom-drag-and-drop>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n  <div class=\"multimedia-uploader__actions\">\r\n    <button mat-flat-button color=\"primary\" class=\"actions__button\" (click)=\"close()\">\r\n      CERRAR\r\n    </button>\r\n    <button mat-flat-button color=\"primary\" class=\"actions__button\" (click)=\"accept()\">\r\n      ACEPTAR\r\n    </button>\r\n  </div>\r\n</div>\r\n",
-                styles: [":host{display:block;width:100%;height:100%}::ng-deep .multimedia-uploader-panel-class{width:50%;height:70%}::ng-deep .multimedia-uploader-panel-class mat-dialog-container{width:100%;height:100%;padding:16px;overflow:hidden;position:relative}.multimedia-uploader{width:100%;height:100%}.multimedia-uploader__actions{position:absolute;left:0;bottom:0;width:100%;background:#fff;z-index:1}.actions__button{width:50%}.actions__button:first-child{border-radius:8px 0 0}.actions__button:last-child{border-radius:0 8px 0 0}.title{font-weight:700;display:flex;align-items:center;justify-content:space-between;padding:0 16px;margin:0}.multimedia-uploader__tab-group{width:100%;height:calc(100% - 36px)}.multimedia-uploader__list{width:100%;height:100%;overflow-x:hidden;overflow-y:auto;display:-ms-grid;display:grid;-ms-grid-columns:(33.3333333333%)[3];grid-template-columns:repeat(3,33.3333333333%)}@media screen and (max-width:600px){::ng-deep .multimedia-uploader-panel-class{width:100%!important;max-width:100%!important;height:100%!important}.multimedia-uploader__list{-ms-grid-columns:100%;grid-template-columns:100%}}.list__item{width:200px;height:150px;border-radius:8px;margin:16px auto;position:relative}.first-photo:after{content:\"Imagen principal del anuncio\";position:absolute;top:0;padding:8px;box-sizing:border-box;font-size:12px;width:100%;color:#fff;background:rgba(0,0,0,.3)}.list__item-img{position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:8px}.list__item-button{position:absolute;width:24px;height:24px;top:-12px;right:-12px;background:#000;color:#fff}.list__item-icon{width:24px;height:24px;font-size:16px;line-height:8px}.you-tube-container{display:flex;padding:8px 0;box-sizing:border-box;justify-content:space-between;position:-webkit-sticky;position:sticky;top:0;z-index:5;background:#fff}.you-tube-container__searchbox{position:relative;width:calc(100% - 120px);box-sizing:border-box;display:flex;align-items:center}.you-tube-container__close-btn{position:absolute;right:0}.you-tube-container__input{width:100%;border:1px solid #d3d3d3;padding:8px 32px 8px 8px;border-radius:8px;outline:0}"]
+                styles: [":host{display:block;width:100%;height:100%}::ng-deep .multimedia-uploader-panel-class{width:50%;height:70%}::ng-deep .multimedia-uploader-panel-class mat-dialog-container{width:100%;height:100%;padding:16px;overflow:hidden;position:relative}.multimedia-uploader{width:100%;height:100%}.multimedia-uploader__actions{position:absolute;left:0;bottom:0;width:100%;background:#fff;z-index:1}.actions__button{width:50%}.actions__button:first-child{border-radius:8px 0 0}.actions__button:last-child{border-radius:0 8px 0 0}.title{font-weight:700;display:flex;align-items:center;justify-content:space-between;padding:0 16px;margin:0}.multimedia-uploader__tab-group{width:100%;height:calc(100% - 36px)}.multimedia-uploader__list{width:100%;height:100%;overflow-x:hidden;overflow-y:auto;display:-ms-grid;display:grid;-ms-grid-columns:(calc(100% / 3))[3];grid-template-columns:repeat(3,calc(100% / 3))}@media screen and (max-width:600px){::ng-deep .multimedia-uploader-panel-class{width:100%!important;max-width:100%!important;height:100%!important}.multimedia-uploader__list{-ms-grid-columns:100%;grid-template-columns:100%}}.list__item{width:200px;height:150px;border-radius:8px;margin:16px auto;position:relative}.first-photo:after{content:\"Imagen principal del anuncio\";position:absolute;top:0;padding:8px;box-sizing:border-box;font-size:12px;width:100%;color:#fff;background:rgba(0,0,0,.3)}.list__item-img{position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:8px}.list__item-button{position:absolute;width:24px;height:24px;top:-12px;right:-12px;background:#000;color:#fff}.list__item-icon{width:24px;height:24px;font-size:16px;line-height:8px}.you-tube-container{display:flex;padding:8px 0;box-sizing:border-box;justify-content:space-between;position:-webkit-sticky;position:sticky;top:0;z-index:5;background:#fff}.you-tube-container__searchbox{position:relative;width:calc(100% - 120px);box-sizing:border-box;display:flex;align-items:center}.you-tube-container__close-btn{position:absolute;right:0}.you-tube-container__input{width:100%;border:1px solid #d3d3d3;padding:8px 32px 8px 8px;border-radius:8px;outline:0}"]
             }] }
 ];
 /** @nocollapse */
@@ -3789,7 +3815,7 @@ GalleryComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-gallery',
                 template: "<div class=\"gallery\">\r\n  <mat-sidenav-container class=\"gallery__sidenav-container\">\r\n    <mat-sidenav mode=\"side\" [opened]=\"sideOpened\" class=\"sidenav-container__sidenav\">\r\n      <mat-toolbar class=\"sidenav__toolbar\" color=\"primary\">\r\n        <span>Galeria</span>\r\n        <button mat-icon-button (click)=\"close()\">\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </mat-toolbar>\r\n      <mat-toolbar class=\"sidenav__thumbnails-types\">\r\n        <button class=\"thumbnails-types__item-type\" mat-button\r\n                [ngClass]=\"{'item-type--selected': typeSelected === 'IMAGE'}\" (click)=\"changePFileType('IMAGE')\">\r\n          <span class=\"item-type__icon ic-component-property-file-image\"></span>\r\n          <span class=\"item-type__label\">{{count.image}}</span>\r\n        </button>\r\n        <button class=\"thumbnails-types__item-type\" mat-button\r\n                [ngClass]=\"{'item-type--selected': typeSelected === 'SPHERIC'}\" (click)=\"changePFileType('SPHERIC')\">\r\n          <span class=\"item-type__icon ic-component-property-sphere\"></span>\r\n          <span class=\"item-type__label\">{{count.sphere}}</span>\r\n        </button>\r\n        <button class=\"thumbnails-types__item-type\" mat-button\r\n                [ngClass]=\"{'item-type--selected': typeSelected === 'VIDEO'}\" (click)=\"changePFileType('VIDEO')\">\r\n          <span class=\"item-type__icon ic-component-property-video\"></span>\r\n          <span class=\"item-type__label\">{{count.video}}</span>\r\n        </button>\r\n      </mat-toolbar>\r\n      <div class=\"sidenav__thumbnail-list\">\r\n        <ng-container *ngFor=\"let image of multimedia; let i = index\">\r\n          <div class=\"thumbnail-list__item\" (click)=\"selectPFile(i)\"\r\n               [ngClass]=\"{'thumbnail-list__item--selected': indexSelected === i}\">\r\n            <ng-template [ngIf]=\"image.type !== 'VIDEO'\" [ngIfElse]=\"youTubeVideo\">\r\n              <img class=\"item__img\" [src]=\"image.fileCS.thumbnail\" alt=\"Property image\">\r\n            </ng-template>\r\n            <ng-template #youTubeVideo>\r\n              <img class=\"item__img\" [src]=\"'https://i3.ytimg.com/vi/'+image.fileCS.thumbnail+'/hqdefault.jpg'\"\r\n                   alt=\"Property image\">\r\n            </ng-template>\r\n          </div>\r\n        </ng-container>\r\n        <ng-template [ngIf]=\"multimedia.length === 0\">\r\n          <div class=\"thumbnail-list__empty-list\">\r\n            <p class=\"empty-list__label\">\r\n              Por el momento no hay\r\n              <span *ngIf=\"typeSelected === 'IMAGE'\">fotos</span>\r\n              <span *ngIf=\"typeSelected === 'VIDEO'\">videos</span>\r\n              <span *ngIf=\"typeSelected === 'SPHERIC'\">fotos esf\u00E9ricas</span>\r\n            </p>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n    </mat-sidenav>\r\n    <mat-sidenav-content class=\"sidenav-container__content\" [ngStyle]=\"{'width': sideOpened ? '80%' : '100%'}\">\r\n      <button class=\"sidenav-container__button-sidenav\" mat-flat-button color=\"primary\" (click)=\"updateSideNav()\">\r\n        <mat-icon *ngIf=\"sideOpened\">chevron_left</mat-icon>\r\n        <mat-icon *ngIf=\"!sideOpened\">chevron_right</mat-icon>\r\n      </button>\r\n      <button class=\"sidenav-container__button-close\" mat-mini-fab color=\"primary\" (click)=\"close()\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n      <div class=\"content__list-container\">\r\n        <lib-property-slide-show class=\"list-container__slide-show\" [multimedia]=\"multimedia\" [selectIndex]=\"indexSelected\"\r\n                                 [initialIndex]=\"indexSelected\"\r\n                                 (currentIndex)=\"onIndexSelectedChange($event)\"></lib-property-slide-show>\r\n      </div>\r\n    </mat-sidenav-content>\r\n  </mat-sidenav-container>\r\n</div>\r\n",
-                styles: ["::ng-deep .gallery_dialog{max-width:100%!important;width:100%;height:100%}::ng-deep .gallery_dialog mat-dialog-container{width:100%;height:100%;padding:0}:host{display:block;width:100%;height:100%}.gallery,.gallery__sidenav-container{width:100%;height:100%}.sidenav__toolbar{display:flex;justify-content:space-between}.sidenav__thumbnail-list{width:100%;height:calc(100% - 128px);padding:16px;box-sizing:border-box;overflow-x:hidden;overflow-y:auto}.thumbnail-list__empty-list{width:100%;height:100%;display:flex}.empty-list__label{margin:auto;text-align:center}.thumbnail-list__item{width:100%;cursor:pointer;padding-bottom:75%;border-radius:8px;margin-bottom:16px;position:relative}.item__img{position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:8px}.sidenav-container__sidenav{width:20%}@media screen and (max-width:1024px){.sidenav-container__sidenav{width:100%}}.sidenav__thumbnails-types{display:flex;align-items:center;justify-content:space-around}.item-type{padding:0}.item-type__label{padding:0 4px;display:inline-block}.item-type__icon{display:inline-block;width:24px;height:24px;font-size:24px;margin:auto}.sidenav-container__content{width:80%;display:flex;position:relative}@media screen and (max-width:1024px){.sidenav-container__content{width:100%}}.sidenav-container__button-sidenav{position:absolute;top:0;left:0;height:64px;padding:0;min-width:36px;border-radius:0 8px 8px 0;z-index:1}.sidenav-container__button-close{position:absolute;top:16px;right:16px;z-index:1}.content__list-container{width:100%;height:100%;margin:auto;overflow:hidden;position:relative;border-radius:8px}.list-container__slide-show{width:100%;height:100%;padding:initial}::ng-deep .list-container__slide-show .panorama-visor{height:100%!important;padding:initial!important}::ng-deep .list-container__slide-show lib-panorama-visor .panorama-visor__actions{top:72px!important}"]
+                styles: ["::ng-deep .gallery_dialog{max-width:100%!important;width:100%;height:100%}::ng-deep .gallery_dialog mat-dialog-container{width:100%;height:100%;padding:0}:host{display:block;width:100%;height:100%}.gallery,.gallery__sidenav-container{width:100%;height:100%}.sidenav__toolbar{display:flex;justify-content:space-between}.sidenav__thumbnail-list{width:100%;height:calc(100% - 128px);padding:16px;box-sizing:border-box;overflow-x:hidden;overflow-y:auto}.thumbnail-list__empty-list{width:100%;height:100%;display:flex}.empty-list__label{margin:auto;text-align:center}.thumbnail-list__item{width:100%;cursor:pointer;padding-bottom:calc(100% / 4 * 3);border-radius:8px;margin-bottom:16px;position:relative}.item__img{position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:8px}.sidenav-container__sidenav{width:20%}@media screen and (max-width:1024px){.sidenav-container__sidenav{width:100%}}.sidenav__thumbnails-types{display:flex;align-items:center;justify-content:space-around}.item-type{padding:0}.item-type__label{padding:0 4px;display:inline-block}.item-type__icon{display:inline-block;width:24px;height:24px;font-size:24px;margin:auto}.sidenav-container__content{width:80%;display:flex;position:relative}@media screen and (max-width:1024px){.sidenav-container__content{width:100%}}.sidenav-container__button-sidenav{position:absolute;top:0;left:0;height:64px;padding:0;min-width:36px;border-radius:0 8px 8px 0;z-index:1}.sidenav-container__button-close{position:absolute;top:16px;right:16px;z-index:1}.content__list-container{width:100%;height:100%;margin:auto;overflow:hidden;position:relative;border-radius:8px}.list-container__slide-show{width:100%;height:100%;padding:initial}::ng-deep .list-container__slide-show .panorama-visor{height:100%!important;padding:initial!important}::ng-deep .list-container__slide-show lib-panorama-visor .panorama-visor__actions{top:72px!important}"]
             }] }
 ];
 /** @nocollapse */
@@ -3873,7 +3899,7 @@ StatsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-stats',
                 template: "<div class=\"stats\">\r\n  <mat-toolbar class=\"stats__toolbar\" color=\"primary\">\r\n    Estad\u00EDsticas\r\n    <button mat-icon-button (click)=\"close()\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </mat-toolbar>\r\n  <div class=\"stats__content\">\r\n    <div class=\"content__stat\">\r\n      <div class=\"stat__icon-container\">\r\n        <mat-icon>visibility</mat-icon>\r\n      </div>\r\n      <p class=\"stat__count\">\r\n        {{data.views ? data.views['RV']  || 0 : 0}}\r\n      </p>\r\n      <p class=\"stat__label\">\r\n        Vistas en Renta o Venta\r\n      </p>\r\n      <div class=\"stat__app-icon\">\r\n        <img alt=\"Renta o Venta logo\" class=\"app-icon__img\" src=\"https://storage.googleapis.com/maplander-develop/public/file/front-end/email/rentaoventa.png\">\r\n      </div>\r\n    </div>\r\n    <div class=\"content__stat\">\r\n      <div class=\"stat__icon-container\">\r\n        <mat-icon>visibility</mat-icon>\r\n      </div>\r\n      <p class=\"stat__count\">\r\n        {{data.views ? data.views['FIABCI'] || 0 : 0}}\r\n      </p>\r\n      <p class=\"stat__label\">\r\n        Vistas en GlobalMLS\r\n      </p>\r\n      <div class=\"stat__app-icon\">\r\n        <img alt=\"GlobalMLS logo\" class=\"app-icon__img\" src=\"https://storage.googleapis.com/maplander-develop/public/file/front-end/email/globalmls.png\">\r\n      </div>\r\n    </div>\r\n    <div class=\"content__stat\">\r\n      <div class=\"stat__icon-container\">\r\n        <mat-icon>favorite</mat-icon>\r\n      </div>\r\n      <p class=\"stat__count\">\r\n        {{data.favorites || 0}}\r\n      </p>\r\n      <p class=\"stat__label\">\r\n        Veces a\u00F1adida a favoritos\r\n      </p>\r\n    </div>\r\n    <div class=\"content__stat\">\r\n      <div class=\"stat__icon-container\">\r\n        <mat-icon>share</mat-icon>\r\n      </div>\r\n      <p class=\"stat__count\">\r\n        {{data.shared || 0}}\r\n      </p>\r\n      <p class=\"stat__label\">\r\n        Veces compartida\r\n      </p>\r\n    </div>\r\n    <div class=\"content__stat\">\r\n      <div class=\"stat__icon-container\">\r\n        <mat-icon>assignment</mat-icon>\r\n      </div>\r\n      <p class=\"stat__count\">\r\n        {{data.requests || 0}}\r\n      </p>\r\n      <p class=\"stat__label\">\r\n        Solicitudes de informaci\u00F3n\r\n      </p>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                styles: ["::ng-deep .stats-panel-class{width:30%;height:80%}::ng-deep .stats-panel-class mat-dialog-container{padding:0;overflow:hidden}@media screen and (max-width:600px){::ng-deep .stats-panel-class{min-width:90%!important}}:host{display:block;width:100%;height:100%}.stats{width:100%;height:100%;overflow:auto}.stats__toolbar{width:100%;height:64px;display:flex;position:-webkit-sticky;position:sticky;top:0;z-index:2;justify-content:space-between}.stats__content{padding:16px;box-sizing:content-box;display:-ms-grid;display:grid;-ms-grid-columns:(50%)[2];grid-template-columns:repeat(2,50%)}.content__stat{border:1px solid #000;border-radius:8px;padding:16px;box-sizing:content-box;position:relative;margin:0 16px 16px 0}.stat__icon-container{position:absolute;top:16px;right:16px}.stat__app-icon{position:absolute;bottom:16px;right:16px}.app-icon__img{width:24px;height:24px;border-radius:4px}.stat__count{font-size:32px;font-weight:700;margin:0 0 16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stat__label{width:80%;margin:0}"]
+                styles: ["::ng-deep .stats-panel-class{width:30%;height:80%}::ng-deep .stats-panel-class mat-dialog-container{padding:0;overflow:hidden}@media screen and (max-width:600px){::ng-deep .stats-panel-class{min-width:90%!important}}:host{display:block;width:100%;height:100%}.stats{width:100%;height:100%;overflow:auto}.stats__toolbar{width:100%;height:64px;display:flex;position:-webkit-sticky;position:sticky;top:0;z-index:2;justify-content:space-between}.stats__content{padding:16px;box-sizing:content-box;display:-ms-grid;display:grid;-ms-grid-columns:(calc(50%))[2];grid-template-columns:repeat(2,calc(50%))}.content__stat{border:1px solid #000;border-radius:8px;padding:16px;box-sizing:content-box;position:relative;margin:0 16px 16px 0}.stat__icon-container{position:absolute;top:16px;right:16px}.stat__app-icon{position:absolute;bottom:16px;right:16px}.app-icon__img{width:24px;height:24px;border-radius:4px}.stat__count{font-size:32px;font-weight:700;margin:0 0 16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stat__label{width:80%;margin:0}"]
             }] }
 ];
 /** @nocollapse */
@@ -4342,7 +4368,7 @@ PropertyComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-property',
                 template: "<div class=\"property\">\r\n  <div class=\"header\">\r\n    <ng-container [ngSwitch]=\"mode\">\r\n      <ng-container *ngSwitchCase=\"'add'\">\r\n        <h1 class=\"title\">\r\n          <span *ngIf=\"!completeProperty.property.id\">Cargar </span>\r\n          <span *ngIf=\"completeProperty.property.id\">Editar </span>\r\n          expediente de {{ propertyType | propertyType }}\r\n        </h1>\r\n      </ng-container>\r\n      <ng-container *ngSwitchCase=\"'record'\">\r\n        <h1 class=\"title\">Expediente de {{propertyType | propertyType}}</h1>\r\n      </ng-container>\r\n      <ng-container *ngSwitchCase=\"'detail'\">\r\n        <div class=\"breadcrumb-list\">\r\n          <p class=\"breadcrumb-content\">\r\n            <span class=\"breadcrumb-item\">\r\n              {{completeProperty.property.type | propertyType}}\r\n            </span>\r\n            <span class=\"breadcrumb-item\">\r\n              {{completeProperty.property.offering | offeringType : ' ' | stringManipulation : 'capitalize'}}\r\n            </span>\r\n            <span *ngIf=\"completeProperty.property.address.city\" class=\"breadcrumb-item\">\r\n              {{completeProperty.property.address.city}}\r\n            </span>\r\n            <span *ngIf=\"completeProperty.property.address.postalCode\" class=\"breadcrumb-item\">\r\n              {{completeProperty.property.address.postalCode}}\r\n            </span>\r\n            <span *ngIf=\"completeProperty.property.address.colony\" class=\"breadcrumb-item\">\r\n              {{completeProperty.property.address.colony}}\r\n            </span>\r\n          </p>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n    <div class=\"header__actions\">\r\n      <!-- Button Publish [START] -->\r\n      <ng-template\r\n        [ngIf]=\"(mode === 'record' || mode === 'add') && (completeProperty.property.status !== 'ANNOUNCED' && completeProperty.property.status !== 'HIDDEN')\">\r\n        <button mat-icon-button color=\"primary\" matTooltip=\"Publicar\" matTooltipPosition=\"left\"\r\n                class=\"header__actions-button-publish\" (click)=\"goToPublish()\">\r\n          <span class=\"header__actions-button-publish-icon ic-property-status-announce\"></span>\r\n        </button>\r\n      </ng-template>\r\n      <!-- Button Publish [END] -->\r\n      <ng-container [ngSwitch]=\"mode\">\r\n        <ng-container *ngSwitchCase=\"'add'\">\r\n          <ng-template [ngIf]=\"multimedia.length > 0\">\r\n            <button mat-icon-button color=\"primary\" (click)=\"openUploaderMultimedia()\">\r\n              <mat-icon>photo_library</mat-icon>\r\n            </button>\r\n          </ng-template>\r\n          <ng-template [ngIf]=\"completeProperty?.property?.id\">\r\n            <button mat-icon-button color=\"primary\" matTooltip=\"Guardar\" matTooltipPosition=\"left\" (click)=\"saveData()\">\r\n              <mat-icon>save</mat-icon>\r\n            </button>\r\n          </ng-template>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'record'\">\r\n          <ng-template\r\n            [ngIf]=\"!sharedProperty.isShared && (completeProperty.property.status !== 'DRAFT' && completeProperty.property.status !== 'NONE')\">\r\n            <button mat-icon-button color=\"primary\" matTooltip=\"Estad\u00EDsticas\" matTooltipPosition=\"left\"\r\n                    (click)=\"goToStats()\">\r\n              <mat-icon>bar_chart</mat-icon>\r\n            </button>\r\n          </ng-template>\r\n          <ng-template\r\n            [ngIf]=\"(completeProperty.property.status === 'ANNOUNCED' || completeProperty.property.status === 'HIDDEN') && !sharedProperty.isShared\">\r\n            <button mat-icon-button color=\"primary\"\r\n                    matTooltip=\"{{completeProperty.property.status === 'ANNOUNCED' ? 'Ocultar' : 'Mostrar'}}\"\r\n                    matTooltipPosition=\"left\" (click)=\"goToUpdateVisibility()\">\r\n              <mat-icon *ngIf=\"completeProperty.property.status === 'HIDDEN'\">visibility</mat-icon>\r\n              <mat-icon *ngIf=\"completeProperty.property.status === 'ANNOUNCED'\">visibility_off</mat-icon>\r\n            </button>\r\n          </ng-template>\r\n          <ng-template [ngIf]=\"!sharedProperty.isShared\">\r\n            <button mat-icon-button color=\"primary\" matTooltip=\"Editar\" matTooltipPosition=\"left\"\r\n                    (click)=\"goToEditProperty()\">\r\n              <mat-icon>edit</mat-icon>\r\n            </button>\r\n          </ng-template>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'detail'\">\r\n          <ng-template [ngIf]=\"isOPI\" [ngIfElse]=\"maplanderActions\">\r\n            <button mat-flat-button color=\"primary\" class=\"header__actions-button-commission\"\r\n                    [disabled]=\"disableShareCommission\"\r\n                    (click)=\"agentActions('SHARE_COMMISSION')\">\r\n              <span *ngIf=\"!disableShareCommission\">Solicitar comisi\u00F3n compartida</span>\r\n              <span *ngIf=\"disableShareCommission\">Solicitud pendiente</span>\r\n            </button>\r\n          </ng-template>\r\n          <ng-template #maplanderActions>\r\n            <button mat-flat-button color=\"primary\" class=\"header__actions-button-commission\"\r\n                    (click)=\"agentActions('SHOW_AGENTS')\">\r\n              Mostrar Asesor\r\n            </button>\r\n            <button mat-icon-button color=\"primary\" class=\"header__actions-button-commission\"\r\n                    (click)=\"agentActions('FAVORITE')\">\r\n              <mat-icon *ngIf=\"isFavorite\">favorite</mat-icon>\r\n              <mat-icon *ngIf=\"!isFavorite\">favorite_border</mat-icon>\r\n            </button>\r\n          </ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n      <!-- Button Share [START] -->\r\n      <ng-template\r\n        [ngIf]=\"mode === 'detail' || (mode === 'record' && (completeProperty.property.status === 'READY' || completeProperty.property.status === 'ANNOUNCED'))\"  [ngIfElse]=\"noShare\">\r\n        <button mat-icon-button color=\"primary\" (click)=\"shareProperty()\">\r\n          <mat-icon>share</mat-icon>\r\n        </button>\r\n      </ng-template>\r\n      <!-- Button Share [END] -->\r\n      <ng-template #noShare>\r\n        <ng-template [ngIf]=\"sharedProperty.isShared\">\r\n          <h1 class=\"title\">\r\n            Propiedad oculta</h1>\r\n        </ng-template>\r\n      </ng-template>\r\n      <!-- Button Back [START] -->\r\n      <button mat-icon-button color=\"primary\" (click)=\"goToBack()\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n      <!-- Button Back [END] -->\r\n    </div>\r\n  </div>\r\n  <div class=\"body\">\r\n    <div class=\"body__multimedia-wrapper\">\r\n      <div class=\"multimedia-wrapper__list-thumbnails\">\r\n        <div class=\"list-thumbnails__wrapper-thumbnails\">\r\n          <div class=\"wrapper-thumbnails__header-types\">\r\n            <button mat-button class=\"header-types__button-type\"\r\n                    [ngClass]=\"{'header-types__button-type--active': currentType === 'IMAGE'}\"\r\n                    (click)=\"changeMultimediaType('IMAGE')\">\r\n              <span class=\"button-type__icon ic-component-property-file-image\"></span>\r\n              <span class=\"button-type__label\">{{multimediaCount.images}}</span>\r\n            </button>\r\n            <button mat-button class=\"header-types__button-type\"\r\n                    [ngClass]=\"{'header-types__button-type--active': currentType === 'SPHERIC'}\"\r\n                    (click)=\"changeMultimediaType('SPHERIC')\">\r\n              <span class=\"button-type__icon ic-component-property-sphere\"></span>\r\n              <span class=\"button-type__label\">{{multimediaCount.images360}}</span>\r\n            </button>\r\n            <button mat-button class=\"header-types__button-type\"\r\n                    [ngClass]=\"{'header-types__button-type--active': currentType === 'VIDEO'}\"\r\n                    (click)=\"changeMultimediaType('VIDEO')\">\r\n              <span class=\"button-type__icon ic-component-property-video\"></span>\r\n              <span class=\"button-type__label\">{{multimediaCount.videos}}</span>\r\n            </button>\r\n          </div>\r\n          <ng-template [ngIf]=\"multimedia && multimedia.length === 0\">\r\n            <div class=\"wrapper-thumbnails__item-thumbnail\"></div>\r\n            <div class=\"wrapper-thumbnails__item-thumbnail\"></div>\r\n            <div class=\"wrapper-thumbnails__item-thumbnail\"></div>\r\n          </ng-template>\r\n          <ng-container *ngFor=\"let image of multimedia; let i = index;\">\r\n            <div class=\"wrapper-thumbnails__item-thumbnail\"\r\n                 [ngClass]=\"{'wrapper-thumbnails__item-thumbnail--selected': i === currentIndex}\"\r\n                 (click)=\"onMultimediaIndexChanged(i)\">\r\n              <ng-container [ngSwitch]=\"image.type\">\r\n                <ng-container *ngSwitchCase=\"'VIDEO'\">\r\n                  <img class=\"item-thumbnail__img\" alt=\"Property image\"\r\n                       [src]=\"'https://i3.ytimg.com/vi/'+image.fileCS.thumbnail+'/hqdefault.jpg'\">\r\n                </ng-container>\r\n                <ng-container *ngSwitchDefault>\r\n                  <img class=\"item-thumbnail__img\" alt=\"Property image\" [src]=\"image.fileCS.thumbnail\">\r\n                </ng-container>\r\n              </ng-container>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <div class=\"multimedia-wrapper__front-image\">\r\n        <lib-property-slide-show [multimedia]=\"multimedia\"\r\n                                 [selectIndex]=\"currentIndex\"\r\n                                 (currentIndex)=\"onMultimediaIndexChanged($event)\"\r\n                                 [customActions]=\"customSlideShowActions\"\r\n        ></lib-property-slide-show>\r\n        <ng-template [ngIf]=\"mode === 'add' && multimedia.length === 0\">\r\n          <div class=\"front-image__upload-multimedia\">\r\n            <div class=\"upload-multimedia__container-add-multimedia\">\r\n              <button class=\"container-add-multimedia__button\" mat-button color=\"primary\"\r\n                      (click)=\"openUploaderMultimedia()\">\r\n                AGREGAR\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n        <ng-template #customSlideShowActions>\r\n          <button *ngIf=\"multimedia.length > 0\" mat-icon-button (click)=\"openGallery()\" matTooltip=\"Fullscreen\">\r\n            <mat-icon>fullscreen</mat-icon>\r\n          </button>\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n    <div class=\"body__additional-content\">\r\n      <ng-template\r\n        [ngIf]=\"mode === 'record' && property.property.status === 'ANNOUNCED' && property.property.propertyInfo.mls\">\r\n        <div class=\"additional-content__mls\">\r\n          <p class=\"mls__title\">\r\n            Bolsa inmobiliaria\r\n          </p>\r\n          <button mat-flat-button color=\"primary\" class=\"mls__button\"\r\n                  (click)=\"agentActions('REAL_ESTATE_EXCHANGE')\">\r\n            Mesa de comercializaci\u00F3n\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n    <div class=\"body__content\">\r\n      <ng-container [ngSwitch]=\"mode\">\r\n        <ng-container *ngSwitchCase=\"'detail'\">\r\n          <lib-property-details [property]=\"completeProperty.property\" [mlsLabel]=\"mlsLabel\"\r\n                                [currencyConverted]=\"currencyConverted\" [visibleTour]=\"!isOPI\"></lib-property-details>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'record'\">\r\n          <lib-property-details [property]=\"completeProperty.property\" [mlsLabel]=\"mlsLabel\"\r\n                                [record]=\"true\"></lib-property-details>\r\n          <ng-template [ngIf]=\"sharedProperty.ownerAvailable\">\r\n            <div class=\"content__private-info\">\r\n              <p class=\"private-info__title\">INFORMACI\u00D3N PRIVADA</p>\r\n              <lib-property-owner-info [owner]=\"completeProperty.property.propertyInfo.owner\"\r\n                                       [disabled]=\"true\"></lib-property-owner-info>\r\n              <ng-template [ngIf]=\"!sharedProperty.isShared\">\r\n                <lib-property-documents [files]=\"completeProperty.files\" [disabled]=\"true\"></lib-property-documents>\r\n              </ng-template>\r\n            </div>\r\n          </ng-template>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'add'\">\r\n          <ng-template [ngIf]=\"frontImageError\">\r\n            <p class=\"content__error-front-image\">\r\n              * Debe subir al menos una imagen\r\n            </p>\r\n          </ng-template>\r\n          <lib-property-editor [utils]=\"utils\" [propertyType]=\"propertyType\" [address]=\"address\"\r\n                               [mlsLabel]=\"mlsLabel\"\r\n                               [property]=\"completeProperty.property\"\r\n                               (editorInstance)=\"onEditorInstance($event)\"\r\n                               (selectAddress)=\"onSelectAddress()\"></lib-property-editor>\r\n          <div class=\"content__private-info\">\r\n            <p class=\"private-info__title\">INFORMACI\u00D3N PRIVADA</p>\r\n            <lib-property-owner-info (ownerInstance)=\"onOwnerInstance($event)\"\r\n                                     [owner]=\"completeProperty.property.propertyInfo.owner\"></lib-property-owner-info>\r\n            <lib-property-documents (documentsInstance)=\"onDocumentsInstance($event)\"\r\n                                    [files]=\"completeProperty.files\"></lib-property-documents>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n  <div class=\"footer mat-elevation-z2\" [ngClass]=\"{'footer--primary': mode === 'record'}\"\r\n       [ngStyle]=\"{'display': (mode === 'detail' && isOPI) ? 'none' : 'block'}\">\r\n    <ng-container [ngSwitch]=\"mode\">\r\n      <ng-container *ngSwitchCase=\"'detail'\">\r\n        <div class=\"footer__footer-content\">\r\n          <ng-template [ngIf]=\"!isOPI\">\r\n            <button mat-raised-button color=\"primary\" class=\"footer-content__button-request-info mat-elevation-z2\"\r\n                    (click)=\"agentActions('REQUEST_INFO')\">\r\n              Solicitar informaci\u00F3n\r\n            </button>\r\n          </ng-template>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngSwitchCase=\"'record'\">\r\n        <div class=\"footer__footer-content\">\r\n          <p class=\"footer-content__status-label\">\r\n            <ng-container [ngSwitch]=\"completeProperty.property.status\">\r\n              <ng-container *ngSwitchCase=\"'HIDDEN'\">\r\n                Propiedad oculta\r\n              </ng-container>\r\n              <ng-container *ngSwitchCase=\"'READY'\">\r\n                Propiedad lista <br> para publicar\r\n              </ng-container>\r\n              <ng-container *ngSwitchCase=\"'EXPIRED'\">\r\n                Propiedad expirada desde el <br>\r\n                {{completeProperty.property.propertyInfo.endPublishDate | libFormatDate : true : 'dd MMMMM yyyy'}}\r\n              </ng-container>\r\n              <ng-container *ngSwitchCase=\"'ANNOUNCED'\">\r\n                Anunciada\r\n                <br> Anuncio valido hasta el\r\n                {{completeProperty.property.propertyInfo.endPublishDate | libFormatDate : true : 'dd MMMMM yyyy'}}\r\n              </ng-container>\r\n              <ng-container *ngSwitchDefault>\r\n                Propiedad en borrador\r\n              </ng-container>\r\n            </ng-container>\r\n          </p>\r\n          <div class=\"footer-content__fab\">\r\n            <eco-fab-speed-dial>\r\n              <eco-fab-speed-dial-trigger>\r\n                <button mat-fab color=\"primary\">\r\n                  <mat-icon>add</mat-icon>\r\n                </button>\r\n              </eco-fab-speed-dial-trigger>\r\n              <eco-fab-speed-dial-actions>\r\n                <button *ngIf=\"completeProperty.property.status !== 'NONE' && completeProperty.property.status !== 'DRAFT'\"\r\n                        mat-mini-fab color=\"primary\" matTooltip=\"Clientes\" matTooltipPosition=\"left\" (click)=\"goToClients()\">\r\n                  <mat-icon class=\"fab-button__icon\">people</mat-icon>\r\n                </button>\r\n                <button *ngIf=\"!sharedProperty.isShared\" mat-mini-fab color=\"primary\" matTooltip=\"Archivar propiedad\"\r\n                        matTooltipPosition=\"left\"\r\n                        (click)=\"agentActions('ARCHIVE')\">\r\n                  <mat-icon class=\"fab-button__icon\">archive</mat-icon>\r\n                </button>\r\n                <button mat-mini-fab color=\"primary\" matTooltip=\"Generar letrero\" matTooltipPosition=\"left\"\r\n                        (click)=\"agentActions('POSTER')\">\r\n                  <span class=\"fab-button__icon ic-component-property-poster\"></span>\r\n                </button>\r\n                <button mat-mini-fab color=\"primary\" matTooltip=\"Generar folleto\" matTooltipPosition=\"left\"\r\n                        (click)=\"agentActions('BROCHURE')\">\r\n                  <span class=\"fab-button__icon ic-component-property-brochure\"></span>\r\n                </button>\r\n                <button mat-mini-fab color=\"primary\" matTooltip=\"Generar lona\" matTooltipPosition=\"left\"\r\n                        (click)=\"agentActions('TARPS')\">\r\n                  <span class=\"fab-button__icon ic-component-property-canvas\"></span>\r\n                </button>\r\n              </eco-fab-speed-dial-actions>\r\n            </eco-fab-speed-dial>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngSwitchCase=\"'add'\">\r\n        <div class=\"footer__footer-content\">\r\n          <button class=\"footer-content__button-save\" mat-flat-button color=\"primary\" (click)=\"saveData()\">Guardar\r\n          </button>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n",
-                styles: [":host{width:100%;height:100%;display:block}.property{position:relative;width:100%;height:100%;z-index:5;border-radius:4px}.title{margin:0 16px;font-size:24px}.breadcrumb-list{width:50%;padding:4px 16px;box-sizing:border-box;border-radius:0 24px 24px 0}.breadcrumb-content{color:#fff;margin:4px 0;width:100%;line-height:21px}.breadcrumb-item{position:relative;display:inline-flex;padding:0 18px 0 4px}.breadcrumb-item:last-child:before{content:none}.divider{border-width:1px}.divider-vertical{display:block;border:.5px inset}.header{width:100%;position:-webkit-sticky;position:sticky;top:0;z-index:10;padding:8px 0;display:flex;align-items:center;justify-content:space-between}@media screen and (max-width:600px){.breadcrumb-list{width:100%;order:1}.header{flex-direction:column}}.header__actions{padding:8px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between}@media screen and (max-width:600px){.header__actions{order:0;width:100%;padding:4px 8px;justify-content:flex-end}}.header__actions button{margin-right:8px}.header__actions-button-commission{border-radius:16px}.actions-button-commission__icon{display:inline-block;width:24px;height:24px;font-size:24px;margin-left:8px}.header__actions-button-publish-icon{font-size:24px;width:24px;height:24px}.body{width:100%;height:calc(100% - 80px);overflow-x:hidden;overflow-y:auto;background:0 0;box-sizing:border-box;padding-bottom:56px}@media screen and (max-width:600px){.body{display:flex;flex-direction:column;padding:0 8px 56px}}.body__additional-content{width:25%;display:inline-block;padding:16px;box-sizing:border-box;background:#fff}@media screen and (max-width:600px){.body__additional-content{width:100%;order:2}}.mls__title{font-size:12px}.mls__button{width:100%;display:block;margin-bottom:8px;border-radius:16px}.body__content{width:75%;display:inline-block;padding:16px;box-sizing:border-box;float:right;background:#fff}.body__multimedia-wrapper{width:100%;background:#fff;display:flex}@media screen and (max-width:600px){.body__content{width:100%;order:1}.body__multimedia-wrapper{width:100%;order:0;flex-direction:column}}.multimedia-wrapper__list-thumbnails{width:25%;height:0;padding-bottom:56.25%;overflow:hidden;position:relative}@media screen and (max-width:600px){.multimedia-wrapper__list-thumbnails{width:100%;height:56px;padding:0}}.list-thumbnails__wrapper-thumbnails{position:absolute;width:100%;height:100%;background:#fff;overflow-x:hidden;overflow-y:scroll;padding:0 18px 8px;box-sizing:border-box}.wrapper-thumbnails__header-types{width:100%;height:40px;background:#fff;padding-top:8px;position:-webkit-sticky;position:sticky;top:0;z-index:1}.header-types__button-type{min-width:33.3333333333%;width:33.3333333333%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0;height:100%;font-size:12px;line-height:16px}.button-type__icon{font-size:24px;width:24px;height:24px;display:inline-block}.button-type__label{display:inline-block;margin:0 4px}.wrapper-thumbnails__item-thumbnail{width:100%;padding-bottom:75%;margin-top:8px;border-radius:8px;position:relative;cursor:pointer}.item-thumbnail__img{position:absolute;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:inherit}.multimedia-wrapper__front-image{width:calc(75% - 16px);height:0;padding-bottom:calc((75% - 16px)/ 4 * 3);margin:auto;border-radius:8px;position:relative}@media screen and (max-width:600px){.wrapper-thumbnails__item-thumbnail{display:none}.multimedia-wrapper__front-image{width:100%;padding-bottom:75%}}.front-image__upload-multimedia{position:absolute;top:0;left:25%;width:50%;height:100%;z-index:1;display:flex}@media screen{.front-image__upload-multimedia{width:80%;left:10%}}.upload-multimedia__container-add-multimedia{margin:auto;width:200px;height:200px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;background:url(https://storage.googleapis.com/maplander-develop/public/file/front-end/cdn/360-image.svg) center/80% no-repeat}.container-add-multimedia__button{position:absolute;bottom:8px}.content__error-front-image{font-size:12px;margin:8px 0 8px 8px}.content__private-info{border-radius:8px}.private-info__title{font-weight:700;margin:0;padding:16px;border-radius:8px 8px 0 0}.footer{width:100%;height:43px;border-radius:16px 16px 0 0;padding:8px 16px;box-sizing:border-box;background:#fff;position:-webkit-sticky;position:sticky;z-index:2;bottom:0}.footer__footer-content{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.footer-content__status-label{margin:6px 0;font-size:14px;text-align:center}.footer-content__button-request-info{width:30%;border-radius:16px}@media screen and (max-width:600px){.footer-content__button-request-info{width:90%}}.footer-content__button-save{width:120px;border-radius:16px}.footer-content__fab{position:absolute;right:0;bottom:12px;padding:8px;border-radius:50%;background:linear-gradient(transparent 50%,#fff 50%)}.fab-button__icon{width:24px;height:24px;font-size:24px}"]
+                styles: [":host{width:100%;height:100%;display:block}.property{position:relative;width:100%;height:100%;z-index:5;border-radius:4px}.title{margin:0 16px;font-size:24px}.breadcrumb-list{width:50%;padding:4px 16px;box-sizing:border-box;border-radius:0 24px 24px 0}.breadcrumb-content{color:#fff;margin:4px 0;width:100%;line-height:21px}.breadcrumb-item{position:relative;display:inline-flex;padding:0 18px 0 4px}.breadcrumb-item:last-child:before{content:none}.divider{border-width:1px}.divider-vertical{display:block;border:.5px inset}.header{width:100%;position:-webkit-sticky;position:sticky;top:0;z-index:10;padding:8px 0;display:flex;align-items:center;justify-content:space-between}@media screen and (max-width:600px){.breadcrumb-list{width:100%;order:1}.header{flex-direction:column}}.header__actions{padding:8px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between}@media screen and (max-width:600px){.header__actions{order:0;width:100%;padding:4px 8px;justify-content:flex-end}}.header__actions button{margin-right:8px}.header__actions-button-commission{border-radius:16px}.actions-button-commission__icon{display:inline-block;width:24px;height:24px;font-size:24px;margin-left:8px}.header__actions-button-publish-icon{font-size:24px;width:24px;height:24px}.body{width:100%;height:calc(100% - 80px);overflow-x:hidden;overflow-y:auto;background:0 0;box-sizing:border-box;padding-bottom:56px}@media screen and (max-width:600px){.body{display:flex;flex-direction:column;padding:0 8px 56px}}.body__additional-content{width:25%;display:inline-block;padding:16px;box-sizing:border-box;background:#fff}@media screen and (max-width:600px){.body__additional-content{width:100%;order:2}}.mls__title{font-size:12px}.mls__button{width:100%;display:block;margin-bottom:8px;border-radius:16px}.body__content{width:75%;display:inline-block;padding:16px;box-sizing:border-box;float:right;background:#fff}.body__multimedia-wrapper{width:100%;background:#fff;display:flex}@media screen and (max-width:600px){.body__content{width:100%;order:1}.body__multimedia-wrapper{width:100%;order:0;flex-direction:column}}.multimedia-wrapper__list-thumbnails{width:25%;height:0;padding-bottom:calc((100% - 25%)/ 4 * 3);overflow:hidden;position:relative}@media screen and (max-width:600px){.multimedia-wrapper__list-thumbnails{width:100%;height:56px;padding:0}}.list-thumbnails__wrapper-thumbnails{position:absolute;width:100%;height:100%;background:#fff;overflow-x:hidden;overflow-y:scroll;padding:0 18px 8px;box-sizing:border-box}.wrapper-thumbnails__header-types{width:100%;height:40px;background:#fff;padding-top:8px;position:-webkit-sticky;position:sticky;top:0;z-index:1}.header-types__button-type{min-width:calc(100% / 3);width:calc(100% / 3);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0;height:100%;font-size:12px;line-height:16px}.button-type__icon{font-size:24px;width:24px;height:24px;display:inline-block}.button-type__label{display:inline-block;margin:0 4px}.wrapper-thumbnails__item-thumbnail{width:100%;padding-bottom:calc(100% / 4 * 3);margin-top:8px;border-radius:8px;position:relative;cursor:pointer}.item-thumbnail__img{position:absolute;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:inherit}.multimedia-wrapper__front-image{width:calc(75% - 16px);height:0;padding-bottom:calc((75% - 16px)/ 4 * 3);margin:auto;border-radius:8px;position:relative}@media screen and (max-width:600px){.wrapper-thumbnails__item-thumbnail{display:none}.multimedia-wrapper__front-image{width:100%;padding-bottom:calc(100% / 4 * 3)}}.front-image__upload-multimedia{position:absolute;top:0;left:25%;width:50%;height:100%;z-index:1;display:flex}@media screen{.front-image__upload-multimedia{width:80%;left:10%}}.upload-multimedia__container-add-multimedia{margin:auto;width:200px;height:200px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;background:url(https://storage.googleapis.com/maplander-develop/public/file/front-end/cdn/360-image.svg) center/80% no-repeat}.container-add-multimedia__button{position:absolute;bottom:8px}.content__error-front-image{font-size:12px;margin:8px 0 8px 8px}.content__private-info{border-radius:8px}.private-info__title{font-weight:700;margin:0;padding:16px;border-radius:8px 8px 0 0}.footer{width:100%;height:43px;border-radius:16px 16px 0 0;padding:8px 16px;box-sizing:border-box;background:#fff;position:-webkit-sticky;position:sticky;z-index:2;bottom:0}.footer__footer-content{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.footer-content__status-label{margin:6px 0;font-size:14px;text-align:center}.footer-content__button-request-info{width:30%;border-radius:16px}@media screen and (max-width:600px){.footer-content__button-request-info{width:90%}}.footer-content__button-save{width:120px;border-radius:16px}.footer-content__fab{position:absolute;right:0;bottom:12px;padding:8px;border-radius:50%;background:linear-gradient(transparent 50%,#fff 50%)}.fab-button__icon{width:24px;height:24px;font-size:24px}"]
             }] }
 ];
 /** @nocollapse */
@@ -5004,7 +5030,7 @@ EditorComponent.decorators = [
                     { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS] },
                     { provide: MAT_DATE_FORMATS, useValue: ɵ0 }
                 ],
-                styles: [":host{display:block;width:100%}.section_label{font-weight:700;display:flex;justify-content:space-between}.address__label-button{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.offering{margin-bottom:8px}.direct-debit{margin:16px 0;display:flex}.direct-debit__check-box{margin-top:4px}.direct-debit__radio-group{display:inline-block;margin:0 0 0 32px}@media screen and (max-width:600px){.section_label{flex-direction:column}.section_label :last-child{margin-top:16px}.direct-debit{flex-direction:column;align-items:flex-start}.direct-debit__radio-group{margin:16px 0 0}}.direct-debit__radio-button{margin-right:16px}.pricing{display:-ms-grid;display:grid;-ms-grid-columns:(33.3333333333%)[3];grid-template-columns:repeat(3,33.3333333333%)}@media screen and (max-width:600px){.pricing{-ms-grid-columns:100%;grid-template-columns:100%}}@media screen and (min-width:1800px){.pricing{-ms-grid-columns:(25%)[4];grid-template-columns:repeat(4,25%)}}.agreement__body{display:-ms-grid;display:grid;-ms-grid-columns:(33.3333333333%)[2];grid-template-columns:repeat(2,33.3333333333%)}@media screen and (max-width:600px){.agreement__body{-ms-grid-columns:100%;grid-template-columns:100%}}@media screen and (min-width:1800px){.agreement__body{-ms-grid-columns:(25%)[4];grid-template-columns:repeat(4,25%)}}.agreement__body-check-box{margin-bottom:16px;-ms-grid-column:1;grid-column-start:1;-ms-grid-column-span:2;grid-column-end:3}.address__body{display:-ms-grid;display:grid;-ms-grid-columns:(25%)[4];grid-template-columns:repeat(4,25%)}@media screen and (max-width:600px){.agreement__body-check-box{-ms-grid-column-span:auto;grid-column-end:auto}.address__body{-ms-grid-columns:100%;grid-template-columns:100%}}@media screen and (min-width:1800px){.address__body{-ms-grid-columns:(20%)[4];grid-template-columns:repeat(4,20%)}}.features__body{display:-ms-grid;display:grid;-ms-grid-columns:(50%)[2];grid-template-columns:repeat(2,50%)}.features-item__label{display:flex;align-items:center;margin:0;padding:8px 0}.features-item__radio-group{display:block;margin:8px 0}.features-item__radio-button{margin-right:16px}.features-item-bathrooms,.features-item-parking-spaces{-ms-grid-column:1;grid-column-start:1}.features-item-surface{-ms-grid-column:2;grid-column-start:2;-ms-grid-row:1;grid-row-start:1;-ms-grid-row-span:2;grid-row-end:3}.address__form-field,.agreement__form-field,.description__form-field,.external-link__form-field,.notes__form-field,.pricing__form-field{width:95%;margin:0 auto 0 0}@media screen and (max-width:600px){.features__body{-ms-grid-columns:100%;grid-template-columns:100%}.features-item-surface{-ms-grid-column:auto;grid-column-start:auto;-ms-grid-row:auto;grid-row-start:auto;-ms-grid-row-span:NaN;grid-row-end:auto}.address__form-field,.agreement__form-field,.description__form-field,.external-link__form-field,.notes__form-field,.pricing__form-field{width:100%;margin:0}}.pricing__maintenance-fee{display:flex;align-items:center;-ms-grid-column:1;grid-column-start:1;-ms-grid-column-span:2;grid-column-end:3}.pricing__maintenance-fee :first-child{margin:0 16px 0 0}@media screen and (max-width:600px){.pricing__maintenance-fee{flex-direction:column;align-items:start;-ms-grid-column:1;grid-column-start:1;-ms-grid-column-span:NaN;grid-column-end:auto}.pricing__maintenance-fee :first-child{margin:0 0 16px}}.address__visibility{-ms-grid-row:4;grid-row-start:4;-ms-grid-column:1;grid-column-start:1;-ms-grid-column-span:4;grid-column-end:5}.address__visibility-body{display:flex}.address__visibility-radio-group{display:block;margin-right:16px}.visibility-radio-group__button{margin-bottom:16px;display:block}.visibility__about{margin:0}.visibility__about-label{display:block;padding:0 8px 8px;font-size:14px}.label__icon{width:24px;height:24px;font-size:24px;color:#707070;margin-right:8px}.amenities,.attributes{width:50%;display:inline-block}@media screen and (max-width:600px){.address__visibility{-ms-grid-row:auto;grid-row-start:auto;-ms-grid-column:auto;grid-column-start:auto;-ms-grid-column-span:NaN;grid-column-end:auto}.address__visibility-body{flex-direction:column}.amenities,.attributes{width:100%;display:block}}.amenities__list-amenities{display:-ms-grid;display:grid;-ms-grid-columns:(33.3333333333%)[3];grid-template-columns:repeat(3,33.3333333333%)}.list-amenities__amenity{display:flex;flex-direction:column;justify-content:space-between;align-items:center;cursor:pointer;width:100px;padding:4px;box-sizing:border-box;border-radius:8px;margin:8px auto 0;text-align:center}.amenity__icon{width:24px;height:24px;font-size:24px;background:#707070;border-radius:50%;padding:8px;color:#fff;display:block;margin:0 auto}.amenity__text{padding:8px;box-sizing:border-box;display:block;font-size:12px}.button-submit{display:none}"]
+                styles: [":host{display:block;width:100%}.section_label{font-weight:700;display:flex;justify-content:space-between}.address__label-button{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.offering{margin-bottom:8px}.direct-debit{margin:16px 0;display:flex}.direct-debit__check-box{margin-top:4px}.direct-debit__radio-group{display:inline-block;margin:0 0 0 32px}@media screen and (max-width:600px){.section_label{flex-direction:column}.section_label :last-child{margin-top:16px}.direct-debit{flex-direction:column;align-items:flex-start}.direct-debit__radio-group{margin:16px 0 0}}.direct-debit__radio-button{margin-right:16px}.pricing{display:-ms-grid;display:grid;-ms-grid-columns:(calc(100% / 3))[3];grid-template-columns:repeat(3,calc(100% / 3))}@media screen and (max-width:600px){.pricing{-ms-grid-columns:100%;grid-template-columns:100%}}@media screen and (min-width:1800px){.pricing{-ms-grid-columns:(calc(100% / 4))[4];grid-template-columns:repeat(4,calc(100% / 4))}}.agreement__body{display:-ms-grid;display:grid;-ms-grid-columns:(calc(100% / 3))[2];grid-template-columns:repeat(2,calc(100% / 3))}@media screen and (max-width:600px){.agreement__body{-ms-grid-columns:100%;grid-template-columns:100%}}@media screen and (min-width:1800px){.agreement__body{-ms-grid-columns:(calc(100% / 4))[4];grid-template-columns:repeat(4,calc(100% / 4))}}.agreement__body-check-box{margin-bottom:16px;-ms-grid-column:1;grid-column-start:1;-ms-grid-column-span:2;grid-column-end:3}.address__body{display:-ms-grid;display:grid;-ms-grid-columns:(calc(100% / 4))[4];grid-template-columns:repeat(4,calc(100% / 4))}@media screen and (max-width:600px){.agreement__body-check-box{-ms-grid-column-span:auto;grid-column-end:auto}.address__body{-ms-grid-columns:100%;grid-template-columns:100%}}@media screen and (min-width:1800px){.address__body{-ms-grid-columns:(calc(100% / 5))[4];grid-template-columns:repeat(4,calc(100% / 5))}}.features__body{display:-ms-grid;display:grid;-ms-grid-columns:(calc(100% / 2))[2];grid-template-columns:repeat(2,calc(100% / 2))}.features-item__label{display:flex;align-items:center;margin:0;padding:8px 0}.features-item__radio-group{display:block;margin:8px 0}.features-item__radio-button{margin-right:16px}.features-item-bathrooms,.features-item-parking-spaces{-ms-grid-column:1;grid-column-start:1}.features-item-surface{-ms-grid-column:2;grid-column-start:2;-ms-grid-row:1;grid-row-start:1;-ms-grid-row-span:2;grid-row-end:3}.address__form-field,.agreement__form-field,.description__form-field,.external-link__form-field,.notes__form-field,.pricing__form-field{width:95%;margin:0 auto 0 0}@media screen and (max-width:600px){.features__body{-ms-grid-columns:100%;grid-template-columns:100%}.features-item-surface{-ms-grid-column:auto;grid-column-start:auto;-ms-grid-row:auto;grid-row-start:auto;-ms-grid-row-span:NaN;grid-row-end:auto}.address__form-field,.agreement__form-field,.description__form-field,.external-link__form-field,.notes__form-field,.pricing__form-field{width:100%;margin:0}}.pricing__maintenance-fee{display:flex;align-items:center;-ms-grid-column:1;grid-column-start:1;-ms-grid-column-span:2;grid-column-end:3}.pricing__maintenance-fee :first-child{margin:0 16px 0 0}@media screen and (max-width:600px){.pricing__maintenance-fee{flex-direction:column;align-items:start;-ms-grid-column:1;grid-column-start:1;-ms-grid-column-span:NaN;grid-column-end:auto}.pricing__maintenance-fee :first-child{margin:0 0 16px}}.address__visibility{-ms-grid-row:4;grid-row-start:4;-ms-grid-column:1;grid-column-start:1;-ms-grid-column-span:4;grid-column-end:5}.address__visibility-body{display:flex}.address__visibility-radio-group{display:block;margin-right:16px}.visibility-radio-group__button{margin-bottom:16px;display:block}.visibility__about{margin:0}.visibility__about-label{display:block;padding:0 8px 8px;font-size:14px}.label__icon{width:24px;height:24px;font-size:24px;color:#707070;margin-right:8px}.amenities,.attributes{width:50%;display:inline-block}@media screen and (max-width:600px){.address__visibility{-ms-grid-row:auto;grid-row-start:auto;-ms-grid-column:auto;grid-column-start:auto;-ms-grid-column-span:NaN;grid-column-end:auto}.address__visibility-body{flex-direction:column}.amenities,.attributes{width:100%;display:block}}.amenities__list-amenities{display:-ms-grid;display:grid;-ms-grid-columns:(calc(100% / 3))[3];grid-template-columns:repeat(3,calc(100% / 3))}.list-amenities__amenity{display:flex;flex-direction:column;justify-content:space-between;align-items:center;cursor:pointer;width:100px;padding:4px;box-sizing:border-box;border-radius:8px;margin:8px auto 0;text-align:center}.amenity__icon{width:24px;height:24px;font-size:24px;background:#707070;border-radius:50%;padding:8px;color:#fff;display:block;margin:0 auto}.amenity__text{padding:8px;box-sizing:border-box;display:block;font-size:12px}.button-submit{display:none}"]
             }] }
 ];
 /** @nocollapse */
@@ -5558,7 +5584,7 @@ DetailsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-property-details',
                 template: "<div class=\"info\" *ngIf=\"property\">\r\n  <h1 class=\"title\">\r\n    <span class=\"title__address\">\r\n      <!--\r\n        Address visible\r\n        Street #Ext Int. Lt Mz, Colony, PostalCode, Township, City, State, Country\r\n        Address hidden\r\n        Colony, PostalCode, Township, City, State, Country\r\n      -->\r\n      <ng-template [ngIf]=\"property.address.visible\">\r\n        {{property.address.street}}\r\n        <span *ngIf=\"property.address.outdoorNumber\">#{{property.address.outdoorNumber}} </span>\r\n        <span *ngIf=\"property.address.interiorNumber\">Int. {{property.address.interiorNumber}} </span>\r\n        <span *ngIf=\"property.address.lt\">Lt. {{property.address.lt}} </span>\r\n        <span *ngIf=\"property.address.mz\">Mz. {{property.address.mz}} </span>\r\n      </ng-template>\r\n      <span *ngIf=\"property.address.colony\">{{property.address.colony}}, </span>\r\n      <span *ngIf=\"property.address.postalCode\">{{property.address.postalCode}}, </span>\r\n      <span *ngIf=\"property.address.township\">{{property.address.township}}, </span>\r\n      <span *ngIf=\"property.address.city\">{{property.address.city}}, </span>\r\n      <span *ngIf=\"property.address.state\">{{property.address.state}}, </span>\r\n      <span *ngIf=\"property.address.country\">{{property.address.country}}</span>\r\n      <span *ngIf=\"!property.address.visible\" class=\"address-street__hidden\"><br> Direcci\u00F3n aproximada</span>\r\n    </span>\r\n    <span class=\"title__property-offering\">\r\n      <span class=\"title__property-offering-price\">\r\n        <ng-template [ngIf]=\"currencyConverted\" [ngIfElse]=\"realPrice\">\r\n          {{currencyConverted.price | currency : '' : 'symbol' : '1.0-0'}} {{currencyConverted.currency}}\r\n          <br>\r\n          <span class=\"property-offering-price__info-currency\"><mat-icon class=\"info-currency__icon\">info</mat-icon> Precio convertido <br> aproximado</span>\r\n        </ng-template>\r\n        <ng-template #realPrice>\r\n          {{property.price | currency : '' : 'symbol' : '1.0-0'}} {{property.currency}}\r\n        </ng-template>\r\n      </span>\r\n      <ng-template [ngIf]=\"currencyConverted\">\r\n        <br>\r\n        <span>{{property.price | currency : '' : 'symbol' : '1.0-0'}} {{property.currency}}</span>\r\n        <br>\r\n        <span class=\"property-offering-price__info-currency\"><mat-icon class=\"info-currency__icon\">info</mat-icon> Precio publicado</span>\r\n      </ng-template>\r\n      <br>\r\n      <div class=\"div__title-sku\">\r\n        <div>\r\n          <span\r\n            class=\"ic-property-{{propertyType.iconName}}\">\r\n          </span>{{property.type | propertyType}} {{property.offering | offeringType}}\r\n        </div>\r\n      <ng-template [ngIf]=\"property.sku !== '' && property.sku\">\r\n        <span class=\"title__sku\">\r\n          SKU: {{property.sku}}\r\n        </span>\r\n      </ng-template>\r\n      </div>\r\n    </span>\r\n  </h1>\r\n  <hr class=\"divider\">\r\n  <section class=\"features\">\r\n    <ng-template [ngIf]=\"property.features.bedrooms && property.features.bedrooms > 0\">\r\n      <p class=\"features__item\">\r\n        <span class=\"features__item-icon ic-features-bedroom\"></span>\r\n        <span class=\"features__item-text\">{{property.features.bedrooms}}</span>\r\n      </p>\r\n    </ng-template>\r\n    <ng-template [ngIf]=\"property.features.bathrooms && property.features.bathrooms > 0\">\r\n      <p class=\"features__item\">\r\n        <span class=\"features__item-icon ic-features-bathroom\"></span>\r\n        <span class=\"features__item-text\">{{property.features.bathrooms}}</span>\r\n      </p>\r\n    </ng-template>\r\n    <ng-template [ngIf]=\"property.features.mainArea && property.features.mainArea > 0\">\r\n      <p class=\"features__item\">\r\n        <span class=\"features__item-icon ic-features-surface\"></span>\r\n        <span class=\"features__item-text\">\r\n          {{property.features.mainArea}}\r\n          <span>m<sup>2</sup></span>\r\n        </span>\r\n      </p>\r\n    </ng-template>\r\n    <ng-template [ngIf]=\"property.features.parkingSpaces && property.features.parkingSpaces > 0\">\r\n      <p class=\"features__item\">\r\n        <span class=\"features__item-icon ic-features-parking\"></span>\r\n        <span class=\"features__item-text\">{{property.features.parkingSpaces}}</span>\r\n      </p>\r\n    </ng-template>\r\n    <ng-template [ngIf]=\"property.features.roi && property.features.roi > 0\">\r\n      <p class=\"features__item\">\r\n        <span class=\"features__item-icon ic-features-roi\"></span>\r\n        <span class=\"features__item-text\">{{property.features.roi}}</span>\r\n      </p>\r\n    </ng-template>\r\n  </section>\r\n  <section class=\"description\">\r\n    <h2 class=\"sub-title\">\r\n      Descripci\u00F3n\r\n    </h2>\r\n    <p class=\"description__body\">\r\n      {{property.description}}\r\n    </p>\r\n  </section>\r\n  <ng-template [ngIf]=\"property.externalLink && visibleTour\">\r\n    <hr class=\"divider\">\r\n    <section class=\"external-link\">\r\n      <h2 class=\"sub-title\">\r\n        Tour virtual\r\n      </h2>\r\n      <iframe class=\"external-link__body\" [src]=\"getTourUrl()\"></iframe>\r\n    </section>\r\n  </ng-template>\r\n  <ng-template [ngIf]=\"record\">\r\n    <hr class=\"divider\">\r\n    <section class=\"agreement\">\r\n      <h2 class=\"sub-title\">\r\n        Contrato\r\n      </h2>\r\n      <p class=\"agreement__body\">\r\n      <span class=\"agreement__body-filed\">\r\n        <span class=\"agreement__body-field-title\">\r\n          Exclusividad de contrato\r\n        </span>\r\n        <span class=\"agreement__body-field-content\">\r\n          {{property.propertyInfo.exclusivity ? 'Si' : 'No'}}\r\n        </span>\r\n      </span>\r\n        <span class=\"agreement__body-filed\" *ngIf=\"property.propertyInfo.listingAgreementStartDate\">\r\n        <span class=\"agreement__body-field-title\">\r\n          Fecha de inicio de contrato\r\n        </span>\r\n        <span class=\"agreement__body-field-content\">\r\n          {{property.propertyInfo.listingAgreementStartDate | libFormatDate : true : 'dd/MM/yyyy'}}\r\n        </span>\r\n      </span>\r\n        <span class=\"agreement__body-filed\" *ngIf=\"agreementEndDate\">\r\n        <span class=\"agreement__body-field-title\">\r\n          Fecha de termino de contrato\r\n        </span>\r\n        <span class=\"agreement__body-field-content\">\r\n          {{agreementEndDate | libFormatDate : true : 'dd/MM/yyyy'}}\r\n        </span>\r\n      </span>\r\n        <span class=\"agreement__body-filed\" *ngIf=\"property.propertyInfo.commission\">\r\n        <span class=\"agreement__body-field-title\">\r\n          Comisi\u00F3n\r\n        </span>\r\n        <span class=\"agreement__body-field-content\">\r\n          <span *ngIf=\"property.offering === 'RENT'\">{{property.propertyInfo.commission}} meses</span>\r\n          <span *ngIf=\"property.offering === 'SALE'\">{{property.propertyInfo.commission * 100}}%</span>\r\n        </span>\r\n      </span>\r\n        <span class=\"agreement__body-filed\">\r\n        <span class=\"agreement__body-field-title\">\r\n          Anunciada en el {{mlsLabel || 'MLS'}}\r\n        </span>\r\n        <span class=\"agreement__body-field-content\">\r\n          {{property.propertyInfo.mls ? 'Si' : 'No'}}\r\n        </span>\r\n      </span>\r\n      </p>\r\n    </section>\r\n    <hr class=\"divider\">\r\n    <section class=\"private-features\">\r\n      <h2 class=\"sub-title\">\r\n        Caracteristicas\r\n      </h2>\r\n      <p class=\"private-features__body\">\r\n        <span class=\"private-features__body-filed\" *ngIf=\"property.propertyInfo.lowestPrice\">\r\n          <span class=\"private-features__body-field-title\">\r\n            Precio minimo\r\n          </span>\r\n          <span class=\"private-features__body-field-content\">\r\n            {{property.propertyInfo.lowestPrice | currency : '' : 'symbol' : '1.0-0'}}\r\n          </span>\r\n        </span>\r\n        <span class=\"private-features__body-filed\" *ngIf=\"property.features.condominiumFeePrice\">\r\n          <span class=\"private-features__body-field-title\">\r\n            Cuota de mantenimiento\r\n          </span>\r\n          <span class=\"private-features__body-field-content\">\r\n            {{property.features.condominiumFeePrice | currency : '' : 'symbol' : '1.0-0'}}\r\n          </span>\r\n        </span>\r\n        <span class=\"private-features__body-filed\" *ngIf=\"property.propertyInfo.leaseTransferPrice\">\r\n          <span class=\"private-features__body-field-title\">\r\n            Traspaso\r\n          </span>\r\n          <span class=\"private-features__body-field-content\">\r\n            {{property.propertyInfo.leaseTransferPrice | currency : '' : 'symbol' : '1.0-0'}}\r\n          </span>\r\n        </span>\r\n        <span class=\"private-features__body-filed\" *ngIf=\"property.features.builtIn\">\r\n          <span class=\"private-features__body-field-title\">\r\n            A\u00F1o de construcci\u00F3n\r\n          </span>\r\n          <span class=\"private-features__body-field-content\">\r\n            {{property.features.builtIn}}\r\n          </span>\r\n        </span>\r\n        <span class=\"private-features__body-filed\" *ngIf=\"property.features.roi\">\r\n          <span class=\"private-features__body-field-title\">\r\n            Retorno de inversi\u00F3n\r\n          </span>\r\n          <span class=\"private-features__body-field-content\">\r\n            {{property.features.roi}}\r\n          </span>\r\n        </span>\r\n      </p>\r\n    </section>\r\n    <ng-template [ngIf]=\"property.propertyInfo.consumerReporting && property.propertyInfo.consumerReporting !== 0\">\r\n      <hr class=\"divider\">\r\n      <section class=\"buro-rentas\">\r\n        <h2 class=\"sub-title\">\r\n          Bur\u00F3 Rentas\r\n        </h2>\r\n        <p class=\"private-features__body\" *ngIf=\"property.propertyInfo.consumerReporting === 1\">Requerir certificado de\r\n          fiabiidad\r\n        </p>\r\n        <p class=\"private-features__body\" *ngIf=\"property.propertyInfo.consumerReporting === 2\">Requerir poliza de\r\n          arrendamiento\r\n        </p>\r\n      </section>\r\n    </ng-template>\r\n    <ng-template [ngIf]=\"property.propertyInfo.notes\">\r\n      <hr class=\"divider\">\r\n      <section class=\"notes\">\r\n        <h2 class=\"sub-title\">\r\n          Notas\r\n        </h2>\r\n        <p class=\"notes__body\">{{property.propertyInfo.notes}}</p>\r\n      </section>\r\n    </ng-template>\r\n  </ng-template>\r\n  <hr class=\"divider\">\r\n  <section class=\"indications\">\r\n    <h2 class=\"sub-title\">\r\n      Indicaciones\r\n    </h2>\r\n    <div class=\"indications__body\">\r\n      <a class=\"indications__body-item-link\"\r\n         href=\"https://www.google.com/maps/dir/?api=1&destination={{property.address.location.latitude}},{{property.address.location.longitude}}\"\r\n         [target]=\"'_blank'\">\r\n        <p matRipple class=\"indications__body-item\">\r\n          <span class=\"indications__body-item-icon ic-component-property-marker\"></span>\r\n          <span class=\"indications__body-item-text\">\u00BFCOMO LLEGAR?</span>\r\n        </p>\r\n      </a>\r\n      <a class=\"indications__body-item-link\"\r\n         href=\"https://www.google.com/maps/@?api=1&map_action=pano&viewpoint={{property.address.location.latitude}},{{property.address.location.longitude}}\"\r\n         [target]=\"'_blank'\">\r\n        <p matRipple class=\"indications__body-item\">\r\n          <span class=\"indications__body-item-icon ic-component-property-streetview\"></span>\r\n          <span class=\"indications__body-item-text\">VISTA DE LA CALLE</span>\r\n        </p>\r\n      </a>\r\n    </div>\r\n  </section>\r\n  <hr class=\"divider\">\r\n  <ng-template [ngIf]=\"amenities && amenities.length > 0\">\r\n    <section class=\"amenities\">\r\n      <h2 class=\"sub-title\">Amenidades</h2>\r\n      <p class=\"amenities__list-amenities\">\r\n        <ng-container *ngFor=\"let amenity of amenities\">\r\n          <span matRipple class=\"list-amenities__amenity\">\r\n            <span class=\"amenity__icon ic-amenities-{{amenity.iconName}}\"></span>\r\n            <span class=\"amenity__text\">{{amenity.name}}</span>\r\n          </span>\r\n        </ng-container>\r\n      </p>\r\n    </section>\r\n  </ng-template>\r\n  <ng-template [ngIf]=\"features && features.length > 0\">\r\n    <section class=\"amenities\">\r\n      <h2 class=\"sub-title\">Caracteristicas de la zona</h2>\r\n      <p class=\"amenities__list-amenities\">\r\n        <ng-container *ngFor=\"let feature of features\">\r\n          <span matRipple class=\"list-amenities__amenity\">\r\n            <span class=\"amenity__icon ic-amenities-{{feature.iconName}}\"></span>\r\n            <span class=\"amenity__text\">{{feature.name}}</span>\r\n          </span>\r\n        </ng-container>\r\n      </p>\r\n    </section>\r\n  </ng-template>\r\n</div>\r\n",
-                styles: [":host{display:block;width:100%}.divider{border:none;border-bottom:1px solid}.title{display:flex;font-size:18px;color:#707070;font-weight:400}.sub-title{margin:0;font-size:18px;padding:0 16px 16px 0}.title>span:first-child{width:60%}@media screen and (max-width:600px){.title{flex-direction:column}.title>span:first-child{width:100%}}.title>span:last-child{width:40%}.div__title-sku{display:flex;flex-direction:column}.title__sku{margin-bottom:2%}.address-street__hidden{font-size:12px}.title__property-offering{text-align:right}@media screen and (max-width:600px){.title>span:last-child{width:100%}.title__property-offering{text-align:left;margin:16px 0}}.title__property-offering-price{font-size:26px;font-weight:700}.property-offering-price__info-currency{font-size:12px;display:inline-block;margin:4px 0}.info-currency__icon{width:12px;height:12px;font-size:12px}.features{padding:8px 0;display:flex;align-items:center}.features__item{width:auto;margin:0 24px 0 0;display:flex;justify-content:center;align-items:center;position:relative}.features__item:last-child:after{content:none}.features__item-text{font-size:16px;display:inline-block}.features__item-icon{display:inline-block;font-size:24px;width:24px;height:24px;margin-right:8px}.agreement,.buro-rentas,.description,.external-link,.indications,.notes,.private-features{display:flex;padding:16px 0}.indications__body{display:flex}.indications__body-item-link{color:inherit;text-decoration:none}.indications__body-item{padding:8px;margin:0 16px 0 0;border-radius:8px;cursor:pointer}.indications__body-item-icon{margin:auto;padding:8px;border-radius:8px;display:block;font-size:24px;width:24px;height:24px}.indications__body-item-text{display:block;text-align:center;font-size:12px;margin:6px 0}.agreement__body,.description__body,.notes__body,.private-features__body{width:75%;margin:0 0 0 auto}@media screen and (max-width:600px){.agreement,.buro-rentas,.description,.external-link,.indications,.notes,.private-features{flex-direction:column;align-items:start}.agreement__body,.description__body,.notes__body,.private-features__body{width:100%;margin:0}}.external-link__body{width:75%;height:280px;border-radius:16px;margin-left:20px}@media screen and (max-width:600px){.external-link__body{width:100%;margin:0}}.agreement__body-filed,.private-features__body-filed{display:block;padding:8px 0}.agreement__body-field-content,.agreement__body-field-title,.private-features__body-field-content,.private-features__body-field-title{width:50%;display:inline-block}.amenities__list{width:50%;display:-ms-grid;display:grid;-ms-grid-columns:(25%)[4];grid-template-columns:repeat(4,25%)}.amenities,.attributes{width:50%;display:inline-block}@media screen and (max-width:600px){.amenities,.attributes{width:100%;display:block}}.amenities__list-amenities{display:-ms-grid;display:grid;-ms-grid-columns:(25%)[4];grid-template-columns:repeat(4,25%)}.list-amenities__amenity{display:flex;flex-direction:column;align-items:center;cursor:pointer;padding:4px;box-sizing:border-box;border-radius:8px;text-align:center}.amenity__icon{width:24px;height:24px;font-size:24px;border-radius:50%;padding:8px;display:block;margin:8px}.amenity__text{padding:8px;box-sizing:border-box;display:block;font-size:12px}"]
+                styles: [":host{display:block;width:100%}.divider{border:none;border-bottom:1px solid}.title{display:flex;font-size:18px;color:#707070;font-weight:400}.sub-title{margin:0;font-size:18px;padding:0 16px 16px 0}.title>span:first-child{width:60%}@media screen and (max-width:600px){.title{flex-direction:column}.title>span:first-child{width:100%}}.title>span:last-child{width:40%}.div__title-sku{display:flex;flex-direction:column}.title__sku{margin-bottom:2%}.address-street__hidden{font-size:12px}.title__property-offering{text-align:right}@media screen and (max-width:600px){.title>span:last-child{width:100%}.title__property-offering{text-align:left;margin:16px 0}}.title__property-offering-price{font-size:26px;font-weight:700}.property-offering-price__info-currency{font-size:12px;display:inline-block;margin:4px 0}.info-currency__icon{width:12px;height:12px;font-size:12px}.features{padding:8px 0;display:flex;align-items:center}.features__item{width:auto;margin:0 24px 0 0;display:flex;justify-content:center;align-items:center;position:relative}.features__item:last-child:after{content:none}.features__item-text{font-size:16px;display:inline-block}.features__item-icon{display:inline-block;font-size:24px;width:24px;height:24px;margin-right:8px}.agreement,.buro-rentas,.description,.external-link,.indications,.notes,.private-features{display:flex;padding:16px 0}.indications__body{display:flex}.indications__body-item-link{color:inherit;text-decoration:none}.indications__body-item{padding:8px;margin:0 16px 0 0;border-radius:8px;cursor:pointer}.indications__body-item-icon{margin:auto;padding:8px;border-radius:8px;display:block;font-size:24px;width:24px;height:24px}.indications__body-item-text{display:block;text-align:center;font-size:12px;margin:6px 0}.agreement__body,.description__body,.notes__body,.private-features__body{width:75%;margin:0 0 0 auto}@media screen and (max-width:600px){.agreement,.buro-rentas,.description,.external-link,.indications,.notes,.private-features{flex-direction:column;align-items:start}.agreement__body,.description__body,.notes__body,.private-features__body{width:100%;margin:0}}.external-link__body{width:75%;height:280px;border-radius:16px;margin-left:20px}@media screen and (max-width:600px){.external-link__body{width:100%;margin:0}}.agreement__body-filed,.private-features__body-filed{display:block;padding:8px 0}.agreement__body-field-content,.agreement__body-field-title,.private-features__body-field-content,.private-features__body-field-title{width:50%;display:inline-block}.amenities__list{width:50%;display:-ms-grid;display:grid;-ms-grid-columns:(calc(100% / 4))[4];grid-template-columns:repeat(4,calc(100% / 4))}.amenities,.attributes{width:50%;display:inline-block}@media screen and (max-width:600px){.amenities,.attributes{width:100%;display:block}}.amenities__list-amenities{display:-ms-grid;display:grid;-ms-grid-columns:(calc(100% / 4))[4];grid-template-columns:repeat(4,calc(100% / 4))}.list-amenities__amenity{display:flex;flex-direction:column;align-items:center;cursor:pointer;padding:4px;box-sizing:border-box;border-radius:8px;text-align:center}.amenity__icon{width:24px;height:24px;font-size:24px;border-radius:50%;padding:8px;display:block;margin:8px}.amenity__text{padding:8px;box-sizing:border-box;display:block;font-size:12px}"]
             }] }
 ];
 /** @nocollapse */
@@ -5654,7 +5680,7 @@ SlideShowComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-property-slide-show',
                 template: "<div class=\"slide-show\">\r\n  <div class=\"slide-show__actions\">\r\n    <ng-container [ngTemplateOutlet]=\"customActions\"></ng-container>\r\n    <p class=\"actions__count\" *ngIf=\"multimedia && multimedia.length > 0\">\r\n      {{index + 1}}/{{count}}\r\n    </p>\r\n  </div>\r\n  <button mat-button=\"\" class=\"button-previous\" [ngClass]=\"{'disabled':index===0}\" [disabled]=\"index===0\"\r\n          (click)=\"moveImage()\">\r\n    <mat-icon>keyboard_arrow_left</mat-icon>\r\n  </button>\r\n  <ul class=\"images-list\" #slider [ngStyle]=\"{'width':'calc(100% *' + count + ')'}\">\r\n    <ng-template [ngIf]=\"multimedia && multimedia.length > 0\">\r\n      <ng-container *ngFor=\"let m of multimedia\">\r\n        <li class=\"images-item\" [ngStyle]=\"{'width':'calc(100% /' + count + ')'}\">\r\n          <ng-container [ngSwitch]=\"m.type\">\r\n            <ng-container *ngSwitchCase=\"'IMAGE'\">\r\n              <img class=\"images-item__img\" [src]=\"m.fileCS.thumbnail\" alt=\"Property image\">\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'SPHERIC'\">\r\n              <lib-panorama-visor class=\"images-item__panorama\" [url]=\"m.fileCS.thumbnail\"></lib-panorama-visor>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'VIDEO'\">\r\n              <iframe class=\"images-item__video\"\r\n                      [src]=\"'https://www.youtube.com/embed/' + m.fileCS.thumbnail | safeUrl\"></iframe>\r\n            </ng-container>\r\n          </ng-container>\r\n        </li>\r\n      </ng-container>\r\n    </ng-template>\r\n    <ng-template [ngIf]=\"multimedia && multimedia.length === 0\">\r\n      <div class=\"no-items\"></div>\r\n    </ng-template>\r\n  </ul>\r\n  <button mat-button=\"\" class=\"button-next\" [disabled]=\"multimedia.length === 0\" (click)=\"moveImage(true)\">\r\n    <mat-icon>keyboard_arrow_right</mat-icon>\r\n  </button>\r\n</div>\r\n",
-                styles: [":host{display:block;position:relative;width:100%;padding-bottom:75%}.slide-show{width:100%;height:100%;overflow:hidden;position:absolute}.slide-show__actions{position:absolute;bottom:0;left:0;right:0;width:100%;color:#fff;padding:8px 24px;z-index:2;display:flex;align-items:center;justify-content:flex-end;box-sizing:border-box;background:linear-gradient(transparent,rgba(0,0,0,.4))}.actions__count{margin:4px 0 0 8px;font-size:14px}.images-list{width:100%;height:100%;list-style:none;padding:0;margin:0;display:flex;overflow:hidden;transition:250ms}.images-item{width:100%;height:100%}.images-item__img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;border-radius:8px}.images-item__panorama,.images-item__video{width:100%;height:100%;border:0;border-radius:8px}.button-next,.button-previous{position:absolute;min-width:30px;width:30px;height:80px;padding:0;z-index:1;color:#fff;top:calc(50% - 40px);background:rgba(0,0,0,.3)}.button-next mat-icon,.button-previous mat-icon{width:30px;height:30px;font-size:30px}.button-next:hover,.button-previous:hover{color:#000;background:#fff}.disabled{color:#d3d3d3}.button-previous{left:0;border-radius:0 16px 16px 0}.button-next{right:0;border-radius:16px 0 0 16px}.no-items{width:100%;height:100%;border-radius:8px}"]
+                styles: [":host{display:block;position:relative;width:100%;padding-bottom:calc(100% / 4 * 3)}.slide-show{width:100%;height:100%;overflow:hidden;position:absolute}.slide-show__actions{position:absolute;bottom:0;left:0;right:0;width:100%;color:#fff;padding:8px 24px;z-index:2;display:flex;align-items:center;justify-content:flex-end;box-sizing:border-box;background:linear-gradient(transparent,rgba(0,0,0,.4))}.actions__count{margin:4px 0 0 8px;font-size:14px}.images-list{width:100%;height:100%;list-style:none;padding:0;margin:0;display:flex;overflow:hidden;transition:250ms}.images-item{width:100%;height:100%}.images-item__img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;border-radius:8px}.images-item__panorama,.images-item__video{width:100%;height:100%;border:0;border-radius:8px}.button-next,.button-previous{position:absolute;min-width:30px;width:30px;height:80px;padding:0;z-index:1;color:#fff;top:calc(50% - 40px);background:rgba(0,0,0,.3)}.button-next mat-icon,.button-previous mat-icon{width:30px;height:30px;font-size:30px}.button-next:hover,.button-previous:hover{color:#000;background:#fff}.disabled{color:#d3d3d3}.button-previous{left:0;border-radius:0 16px 16px 0}.button-next{right:0;border-radius:16px 0 0 16px}.no-items{width:100%;height:100%;border-radius:8px}"]
             }] }
 ];
 /** @nocollapse */
@@ -6295,7 +6321,7 @@ PropertyCardComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-property-card',
                 template: "<div class=\"property-card\">\r\n  <ng-template [ngIf]=\"!isOPI\">\r\n    <div class=\"property-card__favorite\">\r\n      <button class=\"favorite__button\" mat-icon-button (click)=\"favorite()\">\r\n        <ng-template [ngIf]=\"isFavorite\" [ngIfElse]=\"noIsFavorite\">\r\n          <mat-icon>favorite</mat-icon>\r\n        </ng-template>\r\n        <ng-template #noIsFavorite>\r\n          <mat-icon>favorite_border</mat-icon>\r\n        </ng-template>\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n  <ng-template [ngIf]=\"showDiscard\">\r\n    <div class=\"property-card__discard\">\r\n      <button class=\"discard__button\" mat-icon-button (click)=\"discard()\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n  <ng-template [ngIf]=\"isOPI && showAlert\">\r\n    <div class=\"expiration-message\">\r\n      <p>\r\n        Aviso\r\n        <br>\r\n        Este anuncio expira el {{info.endPublishDate | libFormatDate : true : 'dd/MM/yyyy'}}\r\n      </p>\r\n    </div>\r\n  </ng-template>\r\n  <a routerLink=\"{{href || '/'}}\" [queryParams]=\"queryParams || null\" [target]=\"target || null\"\r\n     [state]=\"state || null\"\r\n     class=\"property-card__image\" (mouseover)=\"onFrontImageOver()\"\r\n     (mouseleave)=\"onFrontImageLeave()\">\r\n    <img [src]=\"info.image\" alt=\"Property image\" libImageError [typeImage]=\"info.type\">\r\n    <ng-template [ngIf]=\"mode === 'summary'\">\r\n      <div class=\"property-card__body-summary\">\r\n        <h2 class=\"color--white property-card__price\">\r\n          {{info.price | currency}} {{info.currency}}\r\n        </h2>\r\n        <p class=\"color--white property-card__type\">\r\n          {{info.type | propertyType}} {{info.offering | offeringType}}\r\n        </p>\r\n        <p class=\"color--white property-card__address body-summary__address\">\r\n          {{info.address.colony}}, {{info.address.city}}\r\n        </p>\r\n      </div>\r\n    </ng-template>\r\n  </a>\r\n  <ng-template [ngIf]=\"mode === 'full'\">\r\n    <div class=\"property-card__body\">\r\n      <div class=\"property-card__location-title\">\r\n        <h2 class=\"property-card__price\">\r\n          {{info.price | currency : currency : 'symbol' : '1.0-0'}} {{info.currency}}\r\n        </h2>\r\n        <ng-container *ngIf=\"distance !== ''\" >\r\n          <h2 class=\"property-card__location\" [hidden]=\"!distance\">\r\n            {{distance}}\r\n          </h2>\r\n        </ng-container>\r\n      </div>\r\n      <p class=\"property-card__type\">\r\n        {{info.type | propertyType}} {{info.offering | offeringType}}\r\n      </p>\r\n      <p class=\"property-card__address\">\r\n        {{info.address.colony}}, {{info.address.city}}\r\n      </p>\r\n      <ng-template [ngIf]=\"info.features\">\r\n        <div class=\"property-card__features\">\r\n          <ng-template [ngIf]=\"info.features && info.features.bedrooms && info.features.bedrooms > 0\">\r\n            <p class=\"property-card__feature\">\r\n              <span class=\"property-card__icon ic-features-bedroom\"></span>\r\n              {{info.features.bedrooms}}\r\n            </p>\r\n            <span class=\"property-card__divider\"></span>\r\n          </ng-template>\r\n          <ng-template [ngIf]=\"info.features && info.features.bathrooms && info.features.bathrooms > 0 \">\r\n            <p class=\"property-card__feature\">\r\n              <span class=\"property-card__icon ic-features-bathroom\"></span>\r\n              {{info.features.bathrooms}}\r\n            </p>\r\n            <span class=\"property-card__divider\"></span>\r\n          </ng-template>\r\n          <ng-template [ngIf]=\"info.features && info.features.mainArea && info.features.mainArea > 0\">\r\n            <p class=\"property-card__feature\">\r\n              <span class=\"property-card__icon ic-features-surface\"></span>\r\n              {{info.features.mainArea}}\r\n              <ng-template [ngIf]=\"info.features.areaUnit && info.features.areaUnit === 'M2'\"\r\n                           [ngIfElse]=\"ftUnit\">\r\n                m<sup>2</sup>\r\n              </ng-template>\r\n              <ng-template #ftUnit>\r\n                sq ft\r\n              </ng-template>\r\n            </p>\r\n          </ng-template>\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n",
-                styles: [":host{display:block;width:calc(100% - 16px);margin:16px auto;border-radius:16px}.property-card{width:100%;border-radius:16px;position:relative}.property-card__favorite{position:absolute;top:4px;right:4px;border-radius:50%;z-index:1;width:40px;height:40px;display:flex}.favorite__button{margin:auto}.expiration-message{position:absolute;top:0;background-color:#fff;width:100%;height:80px;z-index:1;text-align:center;color:red;font-size:16px;margin:auto;opacity:.9}.property-card__discard{position:absolute;right:8px;bottom:8px;z-index:1;width:40px;height:40px;border-radius:16px;display:flex}.discard__button{margin:auto}.property-card__image{width:100%;border-radius:16px;padding-bottom:75%;position:relative;text-decoration:none;display:block}.property-card__image:hover{width:calc(100% - 6px);padding-bottom:calc((100% - 6px)/ 4 * 3)}.property-card__image img{border-radius:16px;position:absolute;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.property-card__body{padding:8px;box-sizing:border-box}.property-card__body-summary{padding:8px;box-sizing:border-box;position:absolute;bottom:0;width:100%;border-radius:16px;background:linear-gradient(transparent,rgba(0,0,0,.8))}.body-summary__address{width:80%!important}.property-card__location-title{display:flex;width:100%;flex-direction:row;flex-wrap:wrap}.property-card__location{font-size:12px;margin:4px;color:#707070}@media (min-width:1200px){.property-card__location{font-size:14px}}.property-card__location:empty{width:60%;height:14px;background:#e0e0e0;border-radius:16px}.property-card__price{margin:3px 0;font-size:16px}.property-card__price:empty{width:60%;height:16px;background:#e0e0e0;border-radius:16px}.property-card__type{margin:3px 0}.property-card__type:empty{width:70%;height:16px;border-radius:16px;background:#e0e0e0}.property-card__address{margin:3px 0;color:#707070;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.property-card__address:empty{width:80%;height:16px;border-radius:16px;background:#e0e0e0}.property-card__features{display:flex;margin:6px 0 0}.property-card__feature{margin:0 8px 0 0;display:flex;align-items:center;font-size:12px;color:#707070}.property-card__divider{display:block;margin:auto 8px;width:1px;height:16px;background:#9e9e9e}.property-card__icon{width:24px;height:24px;font-size:24px;margin:0 4px 0 0;color:#bdbdbd}"]
+                styles: [":host{display:block;width:calc(100% - 16px);margin:16px auto;border-radius:16px}.property-card{width:100%;border-radius:16px;position:relative}.property-card__favorite{position:absolute;top:4px;right:4px;border-radius:50%;z-index:1;width:40px;height:40px;display:flex}.favorite__button{margin:auto}.expiration-message{position:absolute;top:0;background-color:#fff;width:100%;height:80px;z-index:1;text-align:center;color:red;font-size:16px;margin:auto;opacity:.9}.property-card__discard{position:absolute;right:8px;bottom:8px;z-index:1;width:40px;height:40px;border-radius:16px;display:flex}.discard__button{margin:auto}.property-card__image{width:100%;border-radius:16px;padding-bottom:calc(100% / 4 * 3);position:relative;text-decoration:none;display:block}.property-card__image:hover{width:calc(100% - 6px);padding-bottom:calc((100% - 6px)/ 4 * 3)}.property-card__image img{border-radius:16px;position:absolute;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.property-card__body{padding:8px;box-sizing:border-box}.property-card__body-summary{padding:8px;box-sizing:border-box;position:absolute;bottom:0;width:100%;border-radius:16px;background:linear-gradient(transparent,rgba(0,0,0,.8))}.body-summary__address{width:80%!important}.property-card__location-title{display:flex;width:100%;flex-direction:row;flex-wrap:wrap}.property-card__location{font-size:12px;margin:4px;color:#707070}@media (min-width:1200px){.property-card__location{font-size:14px}}.property-card__location:empty{width:60%;height:14px;background:#e0e0e0;border-radius:16px}.property-card__price{margin:3px 0;font-size:16px}.property-card__price:empty{width:60%;height:16px;background:#e0e0e0;border-radius:16px}.property-card__type{margin:3px 0}.property-card__type:empty{width:70%;height:16px;border-radius:16px;background:#e0e0e0}.property-card__address{margin:3px 0;color:#707070;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.property-card__address:empty{width:80%;height:16px;border-radius:16px;background:#e0e0e0}.property-card__features{display:flex;margin:6px 0 0}.property-card__feature{margin:0 8px 0 0;display:flex;align-items:center;font-size:12px;color:#707070}.property-card__divider{display:block;margin:auto 8px;width:1px;height:16px;background:#9e9e9e}.property-card__icon{width:24px;height:24px;font-size:24px;margin:0 4px 0 0;color:#bdbdbd}"]
             }] }
 ];
 /** @nocollapse */