@maplander/components 0.19.14 → 0.20.2

package/fesm2015/maplander-components.js

@@ -1,7 +1,7 @@
 import { Pipe, NgModule, Directive, ElementRef, Input, Component, Inject, Injectable, InjectionToken, Optional, Renderer2, ViewChild, EventEmitter, Output, 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 { FormBuilder, ReactiveFormsModule, FormsModule, Validators, NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Validators, FormBuilder, ReactiveFormsModule, FormsModule, NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Subscription, Subject, BehaviorSubject, of } from 'rxjs';
 import { MAT_DIALOG_DATA, MatDialogRef, MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { MatButtonModule } from '@angular/material/button';
@@ -14,9 +14,9 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatRippleModule, MAT_DATE_LOCALE, DateAdapter, MAT_DATE_FORMATS, NativeDateAdapter, MatNativeDateModule } from '@angular/material/core';
+import { MatInputModule, MatMenuModule, MatButtonModule as MatButtonModule$1, MatIconModule as MatIconModule$1, MAT_DIALOG_DATA as MAT_DIALOG_DATA$1, MatDialogRef as MatDialogRef$1, MatDialog as MatDialog$1 } from '@angular/material';
 import { fromPromise } from 'rxjs/internal-compatibility';
 import { mergeMap, map, takeUntil } from 'rxjs/operators';
-import { MatMenuModule, MatButtonModule as MatButtonModule$1, MatIconModule as MatIconModule$1, MAT_DIALOG_DATA as MAT_DIALOG_DATA$1, MatDialogRef as MatDialogRef$1, MatDialog as MatDialog$1 } from '@angular/material';
 import { SnackBarService, SnackBarModule } from '@maplander/core';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';
@@ -24,7 +24,7 @@ import * as momentImported from 'moment';
 import { HttpClient } from '@angular/common/http';
 import { DomSanitizer } from '@angular/platform-browser';
 import { MatCalendar, MatDatepickerModule } from '@angular/material/datepicker';
-import { MatInputModule } from '@angular/material/input';
+import { MatInputModule as MatInputModule$1 } from '@angular/material/input';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatSidenavModule } from '@angular/material/sidenav';
@@ -2364,6 +2364,64 @@ class MUtils {
     }
 }
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/**
+ * @param {?} control
+ * @param {?} error
+ * @return {?}
+ */
+function removeError(control, error) {
+    /** @type {?} */
+    const err = control.errors;
+    if (err) {
+        delete err[error]; // delete your own error
+        if (!Object.keys(err).length) { // if no errors left
+            control.setErrors(null); // set control errors to null making it VALID
+        }
+        else {
+            control.setErrors(err); // controls got other errors so set them back
+        }
+    }
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/**
+ * @param {?} controlName
+ * @param {?} controlName2
+ * @return {?}
+ */
+function CurrencyFilterValidator(controlName, controlName2) {
+    return (/**
+     * @param {?} control
+     * @return {?}
+     */
+    (control) => {
+        if (control) {
+            /** @type {?} */
+            const peerControl = control.controls[controlName];
+            /** @type {?} */
+            const peerControl2 = control.controls[controlName2];
+            if (peerControl2.value) {
+                if (peerControl.value >= peerControl2.value) {
+                    peerControl2.setErrors({
+                        currency: true
+                    });
+                }
+                if (peerControl.value < peerControl2.value) {
+                    removeError(peerControl2, 'currency');
+                }
+            }
+        }
+        return null;
+    });
+}
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -2540,14 +2598,16 @@ class FiltersComponent {
         this.filtersForm = this._formBuilder.group({
             offering: [],
             currency: [],
-            minPrice: [],
-            maxPrice: [],
+            minPrice: ['', [Validators.required, Validators.pattern(new RegExp('(^[0-9]+)'))]],
+            maxPrice: ['', [Validators.required, Validators.pattern(new RegExp('(^[0-9]+)'))]],
             bedrooms: [],
             bathrooms: [],
             parkingPlaces: [],
             surface: [],
             surfaceUnit: [],
             roi: []
+        }, {
+            validator: CurrencyFilterValidator('minPrice', 'maxPrice')
         });
     }
     /**
@@ -2801,7 +2861,7 @@ class FiltersComponent {
 FiltersComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-filters',
-                template: "<!-- Todo: [FiltersComponent] Refactor code -->\r\n<form class=\"filters\" [formGroup]=\"filtersForm\" [ngClass]=\"{'filters--opened': propertyTypeSelected.value !== 'NONE'}\">\r\n  <ng-template [ngIf]=\"!isOPI\">\r\n    <div class=\"float-button-close\">\r\n      <button mat-icon-button type=\"button\" class=\"float-button-close__button\" (click)=\"close()\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n  <div class=\"body\">\r\n    <div class=\"--padding\">\r\n      <div class=\"header\">\r\n        <mat-form-field class=\"currency\" appearance=\"outline\">\r\n          <mat-label>Divisa</mat-label>\r\n          <mat-select formControlName=\"currency\">\r\n            <ng-container *ngFor=\"let currency of currencyList\">\r\n              <mat-option [value]=\"currency.type\" (click)=\"changeCurrency(currency.type)\">\r\n                {{currency.type}}\r\n              </mat-option>\r\n            </ng-container>\r\n          </mat-select>\r\n        </mat-form-field>\r\n        <mat-button-toggle-group class=\"offering-type-list\" name=\"offering-type\" formControlName=\"offering\"\r\n                                 aria-label=\"Offering type\">\r\n          <mat-button-toggle (click)=\"changeOffering('SALE')\" [value]=\"'SALE'\"\r\n                             [disabled]=\"propertyTypeSelected.value === 'NONE' || propertyTypeSelected.value === 'ROOM'\">\r\n            Venta\r\n          </mat-button-toggle>\r\n          <mat-button-toggle (click)=\"changeOffering('RENT')\" [value]=\"'RENT'\"\r\n                             [disabled]=\"propertyTypeSelected.value === 'NONE' || propertyTypeSelected.value === 'INVESTMENT'\">\r\n            Renta\r\n          </mat-button-toggle>\r\n        </mat-button-toggle-group>\r\n      </div>\r\n      <div class=\"property-type-list mat-elevation-z2\">\r\n        <ng-container *ngFor=\"let type of propertyTypeList; let i = index\">\r\n          <ng-template [ngIf]=\"type.value !== 'NONE'\">\r\n            <div class=\"property-type-list__button\">\r\n              <div\r\n                class=\"property-type-list__border\"\r\n                [ngClass]=\"{'property-type-list__border--active': (type.value === propertyTypeSelected.value) || (propertyTypeSelected.value === 'NONE') || ((type.value === 'HOUSE' || type.value === 'APARTMENT') && propertyTypeSelected.value === 'RESIDENTIAL')}\"\r\n                [ngStyle]=\"{'border-color': 'var(--' + type.iconName + ')'}\">\r\n                <button mat-mini-fab=\"\" type=\"button\" (click)=\"changePropertyType(i)\"\r\n                        [ngStyle]=\"{'background-color': 'var(--' + type.iconName + ')'}\">\r\n                  <span class=\"property-type-list__icon ic-property-{{type.iconName}}\"></span>\r\n                </button>\r\n              </div>\r\n              <span class=\"property-type-list__label\">{{type.shortName}}</span>\r\n              <ng-template [ngIf]=\"type.value === 'RESIDENTIAL' && propertyTypeSelected.value === 'RESIDENTIAL'\">\r\n                <div class=\"property-type-list__divider property-type-list__divider--left\"></div>\r\n                <div class=\"property-type-list__divider property-type-list__divider--right\"></div>\r\n              </ng-template>\r\n            </div>\r\n          </ng-template>\r\n        </ng-container>\r\n      </div>\r\n      <ng-template [ngIf]=\"isOPI\">\r\n        <div class=\"all\">\r\n          <button mat-raised-button=\"\" type=\"button\" class=\"all__button\"\r\n                  [ngClass]=\"{'all__button--active': propertyTypeSelected.value === 'NONE'}\"\r\n                  (click)=\"changePropertyType(9)\">Todo\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n    <ng-template [ngIf]=\"propertyTypeSelected.value !== 'NONE'\">\r\n      <mat-divider></mat-divider>\r\n      <div class=\"--padding\">\r\n        <h4 class=\"--title\">\r\n          <span class=\"ic-features-price\"></span>\r\n          Presupuesto\r\n        </h4>\r\n        <div class=\"budget\">\r\n          <!-- Min price [START] -->\r\n          <mat-form-field appearance=\"outline\">\r\n            <mat-label>M\u00EDnimo</mat-label>\r\n            <mat-select formControlName=\"minPrice\">\r\n              <mat-option [value]=\"0\">\r\n                Sin l\u00EDmite\r\n              </mat-option>\r\n              <ng-container *ngFor=\"let price of minPriceList\">\r\n                <mat-option [value]=\"price\">\r\n                  {{price | markerPrice : filter.currency}}\r\n                </mat-option>\r\n              </ng-container>\r\n            </mat-select>\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            <mat-select formControlName=\"maxPrice\">\r\n              <mat-option [value]=\"0\">\r\n                Sin l\u00EDmite\r\n              </mat-option>\r\n              <ng-container *ngFor=\"let price of maxPriceList\">\r\n                <mat-option [value]=\"price\">\r\n                  {{price | markerPrice : filter.currency}}\r\n                </mat-option>\r\n              </ng-container>\r\n            </mat-select>\r\n          </mat-form-field>\r\n          <!-- Max price [END] -->\r\n        </div>\r\n        <div class=\"features\">\r\n          <ng-template\r\n            [ngIf]=\"propertyTypeSelected.value === 'RESIDENTIAL' || propertyTypeSelected.value ===  'HOUSE' || propertyTypeSelected.value === 'APARTMENT'\">\r\n            <div class=\"features__bedrooms\">\r\n              <h4 class=\"--title\">\r\n                <span class=\"ic-features-bedroom\"></span>\r\n                Habitaciones\r\n              </h4>\r\n              <mat-button-toggle-group name=\"bedrooms\" aria-label=\"Bedrooms\" formControlName=\"bedrooms\">\r\n                <ng-container *ngFor=\"let bedroom of bedroomsList\">\r\n                  <ng-template [ngIf]=\"bedroom === 0\" [ngIfElse]=\"bedroomNumber\">\r\n                    <mat-button-toggle [value]=\"bedroom\" class=\"features__bedrooms--unlimited\">\r\n                      Sin <br> l\u00EDmite\r\n                    </mat-button-toggle>\r\n                  </ng-template>\r\n                  <ng-template #bedroomNumber>\r\n                    <mat-button-toggle [value]=\"bedroom\">{{bedroom}}+\r\n                    </mat-button-toggle>\r\n                  </ng-template>\r\n                </ng-container>\r\n              </mat-button-toggle-group>\r\n            </div>\r\n            <div class=\"features__bathrooms\">\r\n              <h4 class=\"--title\">\r\n                <span class=\"ic-features-bathroom\"></span>\r\n                Ba\u00F1os\r\n              </h4>\r\n              <mat-button-toggle-group name=\"bathrooms\" aria-label=\"Bathrooms\" formControlName=\"bathrooms\">\r\n                <ng-container *ngFor=\"let bathroom of bathroomsList\">\r\n                  <ng-template [ngIf]=\"bathroom === 0\" [ngIfElse]=\"bathroomNumber\">\r\n                    <mat-button-toggle [value]=\"bathroom\"\r\n                                       class=\"features__bathrooms--unlimited\">\r\n                      Sin <br> l\u00EDmite\r\n                    </mat-button-toggle>\r\n                  </ng-template>\r\n                  <ng-template #bathroomNumber>\r\n                    <mat-button-toggle [value]=\"bathroom\">{{bathroom}}+\r\n                    </mat-button-toggle>\r\n                  </ng-template>\r\n                </ng-container>\r\n              </mat-button-toggle-group>\r\n            </div>\r\n          </ng-template>\r\n          <ng-template [ngIf]=\"propertyTypeSelected.value !== 'LAND' && propertyTypeSelected.value !== 'INVESTMENT'\">\r\n            <div class=\"features__parking-places\">\r\n              <h4 class=\"--title\">\r\n                <span class=\"ic-features-parking\"></span>\r\n                Estacionamientos\r\n              </h4>\r\n              <mat-button-toggle-group name=\"parking_places\" aria-label=\"Parking Places\"\r\n                                       formControlName=\"parkingPlaces\">\r\n                <ng-container *ngFor=\"let parking of parkingPlacesList\">\r\n                  <ng-template [ngIf]=\"parking === 0\" [ngIfElse]=\"parkingNumber\">\r\n                    <mat-button-toggle [value]=\"parking\"\r\n                                       class=\"features__parking-places--unlimited\">\r\n                      Sin <br> l\u00EDmite\r\n                    </mat-button-toggle>\r\n                  </ng-template>\r\n                  <ng-template #parkingNumber>\r\n                    <mat-button-toggle [value]=\"parking\">{{parking}}+\r\n                    </mat-button-toggle>\r\n                  </ng-template>\r\n                </ng-container>\r\n              </mat-button-toggle-group>\r\n            </div>\r\n          </ng-template>\r\n          <ng-template [ngIf]=\"propertyTypeSelected.value !== 'INVESTMENT'\">\r\n            <div class=\"features__surface\">\r\n              <h4 class=\"--title\">\r\n                <span class=\"ic-features-surface\"></span>\r\n                Superficie\r\n              </h4>\r\n              <div class=\"--row\">\r\n                <mat-form-field appearance=\"outline\" class=\"--col\">\r\n                  <mat-label>\u00C1rea</mat-label>\r\n                  <mat-select formControlName=\"surface\">\r\n                    <mat-option [value]=\"0\">\r\n                      Sin l\u00EDmite\r\n                    </mat-option>\r\n                    <ng-container *ngFor=\"let surface of surfaceList\">\r\n                      <mat-option [value]=\"surface\">\r\n                        {{surface}}\r\n                      </mat-option>\r\n                    </ng-container>\r\n                  </mat-select>\r\n                </mat-form-field>\r\n                <mat-button-toggle-group name=\"unit_surface\" aria-label=\"Unit surface\" formControlName=\"surfaceUnit\">\r\n                  <mat-button-toggle [value]=\"0\">m2</mat-button-toggle>\r\n                  <mat-button-toggle [value]=\"1\">sq ft</mat-button-toggle>\r\n                </mat-button-toggle-group>\r\n              </div>\r\n            </div>\r\n          </ng-template>\r\n          <ng-template [ngIf]=\"propertyTypeSelected.value === 'INVESTMENT'\">\r\n            <div class=\"feature investment\">\r\n              <h4 class=\"--title\">Retorno de inversi\u00F3n</h4>\r\n              <mat-form-field appearance=\"outline\" class=\"--col\">\r\n                <mat-label>Porcentaje</mat-label>\r\n                <mat-select formControlName=\"roi\">\r\n                  <mat-option [value]=\"0\">\r\n                    Sin l\u00EDmite\r\n                  </mat-option>\r\n                  <ng-container *ngFor=\"let roi of roiList\">\r\n                    <mat-option [value]=\"roi\">\r\n                      {{roi}}%\r\n                    </mat-option>\r\n                  </ng-container>\r\n                </mat-select>\r\n              </mat-form-field>\r\n            </div>\r\n          </ng-template>\r\n          <div class=\"amenities-container\">\r\n            <ng-template [ngIf]=\"propertyTypeSelected.amenities.length > 0\">\r\n              <div class=\"amenities\">\r\n                <h4 class=\"--title\">\r\n                  Amenidades\r\n                </h4>\r\n                <div class=\"amenities__list\">\r\n                  <ng-container *ngFor=\"let amenity of propertyTypeSelected.amenities\">\r\n                    <div class=\"amenities__amenity\" matRipple (click)=\"updateAmenity(amenity)\">\r\n                  <span class=\"amenity__icon ic-amenities-{{amenity.iconName}}\"\r\n                        [ngClass]=\"{'amenity--active': amenity.checked}\"></span>\r\n                      <span class=\"amenity__label\">{{amenity.name}}</span>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </ng-template>\r\n            <ng-template [ngIf]=\"propertyTypeSelected.features.length > 0\">\r\n              <div class=\"amenities\">\r\n                <h4 class=\"--title\">\r\n                  Caracteristicas de la ubicaci\u00F3n\r\n                </h4>\r\n                <div class=\"amenities__list\">\r\n                  <ng-container *ngFor=\"let feature of propertyTypeSelected.features\">\r\n                    <div class=\"amenities__amenity\" matRipple (click)=\"updateAmenity(feature)\">\r\n                <span class=\"amenity__icon ic-amenities-{{feature.iconName}}\"\r\n                      [ngClass]=\"{'amenity--active': feature.checked}\"></span>\r\n                      <span class=\"amenity__label\">{{feature.name}}</span>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </ng-template>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </div>\r\n  <div class=\"actions\">\r\n    <ng-template [ngIf]=\"!isOPI\" [ngIfElse]=\"closeButtonTemplate\">\r\n      <button mat-flat-button=\"\" type=\"button\" class=\"action__button\" color=\"primary\" (click)=\"saveSearchByFilters()\">\r\n        GUARDAR\r\n      </button>\r\n    </ng-template>\r\n    <ng-template #closeButtonTemplate>\r\n      <button mat-flat-button=\"\" type=\"button\" class=\"action__button\" color=\"primary\" (click)=\"close()\">CERRAR</button>\r\n    </ng-template>\r\n    <button mat-flat-button=\"\" type=\"button\" class=\"action__button\" color=\"primary\"\r\n            (click)=\"resetFilters()\">LIMPIAR\r\n    </button>\r\n    <button mat-flat-button=\"\" type=\"submit\" class=\"action__button\" color=\"primary\"\r\n            (click)=\"applyFilters()\">APLICAR\r\n    </button>\r\n  </div>\r\n</form>\r\n",
+                template: "<!-- Todo: [FiltersComponent] Refactor code -->\r\n<form class=\"filters\" [formGroup]=\"filtersForm\" [ngClass]=\"{'filters--opened': propertyTypeSelected.value !== 'NONE'}\">\r\n  <ng-template [ngIf]=\"!isOPI\">\r\n    <div class=\"float-button-close\">\r\n      <button mat-icon-button type=\"button\" class=\"float-button-close__button\" (click)=\"close()\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n  <div class=\"body\">\r\n    <div class=\"--padding\">\r\n      <div class=\"header\">\r\n        <mat-form-field class=\"currency\" appearance=\"outline\">\r\n          <mat-label>Divisa</mat-label>\r\n          <mat-select formControlName=\"currency\">\r\n            <ng-container *ngFor=\"let currency of currencyList\">\r\n              <mat-option [value]=\"currency.type\" (click)=\"changeCurrency(currency.type)\">\r\n                {{currency.type}}\r\n              </mat-option>\r\n            </ng-container>\r\n          </mat-select>\r\n        </mat-form-field>\r\n        <mat-button-toggle-group class=\"offering-type-list\" name=\"offering-type\" formControlName=\"offering\"\r\n                                 aria-label=\"Offering type\">\r\n          <mat-button-toggle (click)=\"changeOffering('SALE')\" [value]=\"'SALE'\"\r\n                             [disabled]=\"propertyTypeSelected.value === 'NONE' || propertyTypeSelected.value === 'ROOM'\">\r\n            Venta\r\n          </mat-button-toggle>\r\n          <mat-button-toggle (click)=\"changeOffering('RENT')\" [value]=\"'RENT'\"\r\n                             [disabled]=\"propertyTypeSelected.value === 'NONE' || propertyTypeSelected.value === 'INVESTMENT'\">\r\n            Renta\r\n          </mat-button-toggle>\r\n        </mat-button-toggle-group>\r\n      </div>\r\n      <div class=\"property-type-list mat-elevation-z2\">\r\n        <ng-container *ngFor=\"let type of propertyTypeList; let i = index\">\r\n          <ng-template [ngIf]=\"type.value !== 'NONE'\">\r\n            <div class=\"property-type-list__button\">\r\n              <div\r\n                class=\"property-type-list__border\"\r\n                [ngClass]=\"{'property-type-list__border--active': (type.value === propertyTypeSelected.value) || (propertyTypeSelected.value === 'NONE') || ((type.value === 'HOUSE' || type.value === 'APARTMENT') && propertyTypeSelected.value === 'RESIDENTIAL')}\"\r\n                [ngStyle]=\"{'border-color': 'var(--' + type.iconName + ')'}\">\r\n                <button mat-mini-fab=\"\" type=\"button\" (click)=\"changePropertyType(i)\"\r\n                        [ngStyle]=\"{'background-color': 'var(--' + type.iconName + ')'}\">\r\n                  <span class=\"property-type-list__icon ic-property-{{type.iconName}}\"></span>\r\n                </button>\r\n              </div>\r\n              <span class=\"property-type-list__label\">{{type.shortName}}</span>\r\n              <ng-template [ngIf]=\"type.value === 'RESIDENTIAL' && propertyTypeSelected.value === 'RESIDENTIAL'\">\r\n                <div class=\"property-type-list__divider property-type-list__divider--left\"></div>\r\n                <div class=\"property-type-list__divider property-type-list__divider--right\"></div>\r\n              </ng-template>\r\n            </div>\r\n          </ng-template>\r\n        </ng-container>\r\n      </div>\r\n      <ng-template [ngIf]=\"isOPI\">\r\n        <div class=\"all\">\r\n          <button mat-raised-button=\"\" type=\"button\" class=\"all__button\"\r\n                  [ngClass]=\"{'all__button--active': propertyTypeSelected.value === 'NONE'}\"\r\n                  (click)=\"changePropertyType(9)\">Todo\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n    <ng-template [ngIf]=\"propertyTypeSelected.value !== 'NONE'\">\r\n      <mat-divider></mat-divider>\r\n      <div class=\"--padding\">\r\n        <h4 class=\"--title\">\r\n          <span class=\"ic-features-price\"></span>\r\n          Presupuesto\r\n        </h4>\r\n        <div class=\"budget\">\r\n          <!-- Min price [START] -->\r\n          <mat-form-field appearance=\"outline\">\r\n            <mat-label>M\u00EDnimo</mat-label>\r\n            <input autocomplete=\"off\" matInput=\"\" type=\"number\" title=\"Min price\" formControlName=\"minPrice\" min=\"1\" >\r\n            <mat-error *ngIf=\"filtersForm.controls['minPrice'].hasError('pattern')\">\r\n              Debe ingresar solo numeros\r\n            </mat-error>\r\n            <mat-error *ngIf=\"filtersForm.controls['minPrice'].hasError('required')\">\r\n              Este campo es requerido\r\n            </mat-error>\r\n          </mat-form-field>\r\n          <!-- Min price [END] -->\r\n          <!-- Max price [START] -->\r\n          <mat-form-field appearance=\"outline\">\r\n            <mat-label>M\u00E1ximo</mat-label>\r\n            <input autocomplete=\"off\" matInput=\"\" type=\"number\" title=\"max price\" formControlName=\"maxPrice\">\r\n            <mat-error *ngIf=\"filtersForm.controls['maxPrice'].hasError('pattern')\">\r\n              Debe ingresar solo numeros\r\n            </mat-error>\r\n            <mat-error *ngIf=\"filtersForm.controls['maxPrice'].hasError('required')\">\r\n              Este campo es requerido\r\n            </mat-error>\r\n            <mat-error *ngIf=\"filtersForm.controls['maxPrice'].hasError('currency')\">\r\n              Valor minimo excedido\r\n            </mat-error>\r\n          </mat-form-field>\r\n          <!-- Max price [END] -->\r\n        </div>\r\n        <div class=\"features\">\r\n          <ng-template\r\n            [ngIf]=\"propertyTypeSelected.value === 'RESIDENTIAL' || propertyTypeSelected.value ===  'HOUSE' || propertyTypeSelected.value === 'APARTMENT'\">\r\n            <div class=\"features__bedrooms\">\r\n              <h4 class=\"--title\">\r\n                <span class=\"ic-features-bedroom\"></span>\r\n                Habitaciones\r\n              </h4>\r\n              <mat-button-toggle-group name=\"bedrooms\" aria-label=\"Bedrooms\" formControlName=\"bedrooms\">\r\n                <ng-container *ngFor=\"let bedroom of bedroomsList\">\r\n                  <ng-template [ngIf]=\"bedroom === 0\" [ngIfElse]=\"bedroomNumber\">\r\n                    <mat-button-toggle [value]=\"bedroom\" class=\"features__bedrooms--unlimited\">\r\n                      Sin <br> l\u00EDmite\r\n                    </mat-button-toggle>\r\n                  </ng-template>\r\n                  <ng-template #bedroomNumber>\r\n                    <mat-button-toggle [value]=\"bedroom\">{{bedroom}}+\r\n                    </mat-button-toggle>\r\n                  </ng-template>\r\n                </ng-container>\r\n              </mat-button-toggle-group>\r\n            </div>\r\n            <div class=\"features__bathrooms\">\r\n              <h4 class=\"--title\">\r\n                <span class=\"ic-features-bathroom\"></span>\r\n                Ba\u00F1os\r\n              </h4>\r\n              <mat-button-toggle-group name=\"bathrooms\" aria-label=\"Bathrooms\" formControlName=\"bathrooms\">\r\n                <ng-container *ngFor=\"let bathroom of bathroomsList\">\r\n                  <ng-template [ngIf]=\"bathroom === 0\" [ngIfElse]=\"bathroomNumber\">\r\n                    <mat-button-toggle [value]=\"bathroom\"\r\n                                       class=\"features__bathrooms--unlimited\">\r\n                      Sin <br> l\u00EDmite\r\n                    </mat-button-toggle>\r\n                  </ng-template>\r\n                  <ng-template #bathroomNumber>\r\n                    <mat-button-toggle [value]=\"bathroom\">{{bathroom}}+\r\n                    </mat-button-toggle>\r\n                  </ng-template>\r\n                </ng-container>\r\n              </mat-button-toggle-group>\r\n            </div>\r\n          </ng-template>\r\n          <ng-template [ngIf]=\"propertyTypeSelected.value !== 'LAND' && propertyTypeSelected.value !== 'INVESTMENT'\">\r\n            <div class=\"features__parking-places\">\r\n              <h4 class=\"--title\">\r\n                <span class=\"ic-features-parking\"></span>\r\n                Estacionamientos\r\n              </h4>\r\n              <mat-button-toggle-group name=\"parking_places\" aria-label=\"Parking Places\"\r\n                                       formControlName=\"parkingPlaces\">\r\n                <ng-container *ngFor=\"let parking of parkingPlacesList\">\r\n                  <ng-template [ngIf]=\"parking === 0\" [ngIfElse]=\"parkingNumber\">\r\n                    <mat-button-toggle [value]=\"parking\"\r\n                                       class=\"features__parking-places--unlimited\">\r\n                      Sin <br> l\u00EDmite\r\n                    </mat-button-toggle>\r\n                  </ng-template>\r\n                  <ng-template #parkingNumber>\r\n                    <mat-button-toggle [value]=\"parking\">{{parking}}+\r\n                    </mat-button-toggle>\r\n                  </ng-template>\r\n                </ng-container>\r\n              </mat-button-toggle-group>\r\n            </div>\r\n          </ng-template>\r\n          <ng-template [ngIf]=\"propertyTypeSelected.value !== 'INVESTMENT'\">\r\n            <div class=\"features__surface\">\r\n              <h4 class=\"--title\">\r\n                <span class=\"ic-features-surface\"></span>\r\n                Superficie\r\n              </h4>\r\n              <div class=\"--row\">\r\n                <mat-form-field appearance=\"outline\" class=\"--col\">\r\n                  <mat-label>\u00C1rea</mat-label>\r\n                  <mat-select formControlName=\"surface\">\r\n                    <mat-option [value]=\"0\">\r\n                      Sin l\u00EDmite\r\n                    </mat-option>\r\n                    <ng-container *ngFor=\"let surface of surfaceList\">\r\n                      <mat-option [value]=\"surface\">\r\n                        {{surface}}\r\n                      </mat-option>\r\n                    </ng-container>\r\n                  </mat-select>\r\n                </mat-form-field>\r\n                <mat-button-toggle-group name=\"unit_surface\" aria-label=\"Unit surface\" formControlName=\"surfaceUnit\">\r\n                  <mat-button-toggle [value]=\"0\">m2</mat-button-toggle>\r\n                  <mat-button-toggle [value]=\"1\">sq ft</mat-button-toggle>\r\n                </mat-button-toggle-group>\r\n              </div>\r\n            </div>\r\n          </ng-template>\r\n          <ng-template [ngIf]=\"propertyTypeSelected.value === 'INVESTMENT'\">\r\n            <div class=\"feature investment\">\r\n              <h4 class=\"--title\">Retorno de inversi\u00F3n</h4>\r\n              <mat-form-field appearance=\"outline\" class=\"--col\">\r\n                <mat-label>Porcentaje</mat-label>\r\n                <mat-select formControlName=\"roi\">\r\n                  <mat-option [value]=\"0\">\r\n                    Sin l\u00EDmite\r\n                  </mat-option>\r\n                  <ng-container *ngFor=\"let roi of roiList\">\r\n                    <mat-option [value]=\"roi\">\r\n                      {{roi}}%\r\n                    </mat-option>\r\n                  </ng-container>\r\n                </mat-select>\r\n              </mat-form-field>\r\n            </div>\r\n          </ng-template>\r\n          <div class=\"amenities-container\">\r\n            <ng-template [ngIf]=\"propertyTypeSelected.amenities.length > 0\">\r\n              <div class=\"amenities\">\r\n                <h4 class=\"--title\">\r\n                  Amenidades\r\n                </h4>\r\n                <div class=\"amenities__list\">\r\n                  <ng-container *ngFor=\"let amenity of propertyTypeSelected.amenities\">\r\n                    <div class=\"amenities__amenity\" matRipple (click)=\"updateAmenity(amenity)\">\r\n                  <span class=\"amenity__icon ic-amenities-{{amenity.iconName}}\"\r\n                        [ngClass]=\"{'amenity--active': amenity.checked}\"></span>\r\n                      <span class=\"amenity__label\">{{amenity.name}}</span>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </ng-template>\r\n            <ng-template [ngIf]=\"propertyTypeSelected.features.length > 0\">\r\n              <div class=\"amenities\">\r\n                <h4 class=\"--title\">\r\n                  Caracteristicas de la ubicaci\u00F3n\r\n                </h4>\r\n                <div class=\"amenities__list\">\r\n                  <ng-container *ngFor=\"let feature of propertyTypeSelected.features\">\r\n                    <div class=\"amenities__amenity\" matRipple (click)=\"updateAmenity(feature)\">\r\n                <span class=\"amenity__icon ic-amenities-{{feature.iconName}}\"\r\n                      [ngClass]=\"{'amenity--active': feature.checked}\"></span>\r\n                      <span class=\"amenity__label\">{{feature.name}}</span>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </ng-template>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </div>\r\n  <div class=\"actions\">\r\n    <ng-template [ngIf]=\"!isOPI\" [ngIfElse]=\"closeButtonTemplate\">\r\n      <button mat-flat-button=\"\" type=\"button\" class=\"action__button\" color=\"primary\" (click)=\"saveSearchByFilters()\">\r\n        GUARDAR\r\n      </button>\r\n    </ng-template>\r\n    <ng-template #closeButtonTemplate>\r\n      <button mat-flat-button=\"\" type=\"button\" class=\"action__button\" color=\"primary\" (click)=\"close()\">CERRAR</button>\r\n    </ng-template>\r\n    <button mat-flat-button=\"\" type=\"button\" class=\"action__button\" color=\"primary\"\r\n            (click)=\"resetFilters()\">LIMPIAR\r\n    </button>\r\n    <button mat-flat-button=\"\" type=\"submit\" class=\"action__button\" color=\"primary\"\r\n            (click)=\"applyFilters()\">APLICAR\r\n    </button>\r\n  </div>\r\n</form>\r\n",
                 styles: [":host{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;display:flex;background:var(--overlay);transition:250ms}.filters--opened{height:90%!important}@media screen and (max-width:600px){.filters--opened{width:100%!important;height:100%!important;top:0!important}}.filters{width:700px;height:auto;margin:auto;border-radius:16px;position:relative;overflow:hidden;transition:150ms}.filters .--padding{padding:16px 48px;box-sizing:border-box}.filters .--row{display:flex;justify-content:space-between;align-items:flex-start}.filters .--col{width:45%}.filters .--title{margin:16px 0;color:#707070}.filters .float-button-close{position:absolute;top:16px;right:16px;height:16px;border-radius:50%}.filters .body{height:calc(100% - 36px);overflow-x:hidden;overflow-y:auto}.filters .header{display:flex;align-items:center;justify-content:space-around;margin-bottom:8px}.filters .listing-types{width:100%;border-radius:16px}.filters .listing-types mat-button-toggle{width:50%;height:36px}.filters ::ng-deep .listing-types mat-button-toggle button{height:36px}.filters ::ng-deep .listing-types mat-button-toggle button .mat-button-toggle-label-content{line-height:36px}.filters .currency ::ng-deep .mat-form-field-wrapper{padding:0}@media screen and (max-width:600px){.filters{width:100%;position:absolute;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;top:initial;bottom:0;left:0}.filters .--padding{padding:16px 24px}.filters .header{flex-direction:column}.filters .currency{width:70%;margin-bottom:8px}}.filters .offering-type-list{width:40%;border-radius:16px}.filters .offering-type-list mat-button-toggle{width:50%;height:36px}.filters ::ng-deep .offering-type-list mat-button-toggle button{height:36px}.filters ::ng-deep .offering-type-list mat-button-toggle button .mat-button-toggle-label-content{line-height:36px}.filters .property-type-list{display:-ms-grid;display:grid;-ms-grid-columns:(calc(100% / 9))[9];grid-template-columns:repeat(9,calc(100% / 9));-ms-grid-rows:(80px)[1];grid-template-rows:repeat(1,80px);border-radius:40px;padding:8px;box-sizing:border-box}.filters .property-type-list .property-type-list__button{margin:auto;position:relative}.filters .property-type-list .property-type-list__button button{box-shadow:none}.filters .property-type-list .property-type-list__icon{width:24px;height:24px;font-size:24px}.filters .property-type-list .property-type-list__border{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:auto;opacity:.7;border-radius:50%;box-sizing:border-box}.filters .property-type-list .property-type-list__border--active{padding:4px;border:2px solid;opacity:1!important}.filters .property-type-list .property-type-list__label{font-size:12px;display:block;margin:8px 0;text-align:center}.filters .property-type-list .property-type-list__divider{width:14%;height:2px;background:#707070;top:30%;position:absolute}.filters .property-type-list .property-type-list__divider--left{left:-9px}.filters .property-type-list .property-type-list__divider--right{right:-9px}@media screen and (max-width:600px){.filters .offering-type-list{width:70%}.filters .property-type-list{-ms-grid-columns:(calc(100% / 3))[3];grid-template-columns:repeat(3,calc(100% / 3));-ms-grid-rows:(80px)[3];grid-template-rows:repeat(3,80px)}.filters .property-type-list .property-type-list__divider{width:60%}.filters .property-type-list .property-type-list__divider--left{left:-38px}.filters .property-type-list .property-type-list__divider--right{right:-38px}}.filters .all{width:100%;margin:8px 0}.filters .all .all__button{margin:0 40%;width:20%;border-radius:16px;background:0 0}.filters .budget{display:flex}.filters .budget mat-form-field{margin-right:8px;width:calc(100% / 2 - 8px)}.filters .features{display:-ms-grid;display:grid;-ms-grid-columns:(50%)[2];grid-template-columns:repeat(2,50%);-ms-grid-rows:(auto)[2];grid-template-rows:repeat(2,auto)}@media screen and (max-width:600px){.filters .all .all__button{width:50%;margin:0 25%}.filters .features{display:block}.filters .amenities-container{flex-direction:column}}.filters .features .features__bathrooms mat-button-toggle-group,.filters .features .features__bedrooms mat-button-toggle-group,.filters .features .features__parking-places mat-button-toggle-group{width:calc(100% - 16px)}.filters .features .features__bathrooms mat-button-toggle-group mat-button-toggle,.filters .features .features__bedrooms mat-button-toggle-group mat-button-toggle,.filters .features .features__parking-places mat-button-toggle-group mat-button-toggle{width:calc(100% / 5)}.filters .features .features__bedrooms--unlimited ::ng-deep .mat-button-toggle-label-content{line-height:16px;padding:8px;font-size:12px}.filters .features .features__bathrooms--unlimited ::ng-deep .mat-button-toggle-label-content{line-height:16px;padding:8px;font-size:12px}.filters .features .features__parking-places--unlimited ::ng-deep .mat-button-toggle-label-content{line-height:16px;padding:8px;font-size:12px}.filters .features .features__surface mat-button-toggle-group{margin-top:6px;margin-right:16px}.filters .amenities-container{width:100%;-ms-grid-column:1;grid-column-start:1;-ms-grid-column-span:2;grid-column-end:3;display:flex}.filters .amenities{width:50%}@media screen and (max-width:600px){.filters .amenities{width:100%}}.filters .amenities__amenity{width:calc(100% / 3 - 24px);height:120px;border-radius:8px;padding:8px;display:inline-flex;flex-direction:column;align-items:center;box-sizing:border-box;margin:0 8px 8px 0;cursor:pointer}.filters .amenity__icon{display:block;width:24px;height:24px;margin:8px auto;font-size:24px;padding:8px;border-radius:50%}.filters .amenity__label{width:100%;display:block;text-align:center;font-size:12px;margin:auto}.filters .actions{display:flex}.filters .actions .action__button{width:50%;border-radius:0}"]
             }] }
 ];
@@ -2878,6 +2938,7 @@ FiltersModule.decorators = [
                     MatIconModule,
                     MatButtonModule,
                     MatDividerModule,
+                    MatInputModule,
                     MarkerPriceModule.forChild(),
                     CurrencyConverterModule.forChild()
                 ],
@@ -3168,6 +3229,7 @@ class MultimediaUploaderComponent {
     static getYouTubeID(text) {
         if (text.indexOf('https://youtu.be/') !== -1) {
             text = text.replace('https://youtu.be/', '');
+            return text;
         }
         else if (text.indexOf('https://www.youtube.com/') !== -1) {
             text = text.replace('https://www.youtube.com/', '');
@@ -3181,6 +3243,11 @@ class MultimediaUploaderComponent {
         else {
             return text = null;
         }
+        if (text.indexOf('&')) {
+            /** @type {?} */
+            const arr = text.split('&');
+            text = arr[0];
+        }
         return text;
     }
     /**
@@ -3865,6 +3932,7 @@ const PropertyEventType = {
     CLIENTS: 'CLIENTS',
     BACK: 'BACK',
     SHOW_AGENTS: 'SHOW_AGENTS',
+    TARPS: 'TARPS',
 };
 class PropertyComponent {
     /**
@@ -3908,6 +3976,7 @@ class PropertyComponent {
      * @return {?}
      */
     ngOnInit() {
+        // this.agentActions('SHOW_AGENTS');
     }
     /**
      * @param {?} changes
@@ -3954,7 +4023,10 @@ class PropertyComponent {
      */
     shareProperty() {
         this.agentActions('SHARE');
-        this._share.open(this.completeProperty.property.url);
+        this._share.open({
+            url: this.completeProperty.property.url,
+            urlUser: this.userUrl
+        });
     }
     /**
      * @return {?}
@@ -4265,8 +4337,8 @@ class PropertyComponent {
 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 Asesores\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'))\">\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      <!-- 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              </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: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:56px;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}"]
+                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: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 */
@@ -4292,33 +4364,11 @@ PropertyComponent.propDecorators = {
     isFavorite: [{ type: Input }],
     disableConfirmAnnounce: [{ type: Input }],
     currencyConverted: [{ type: Input }],
+    userUrl: [{ type: Input }],
     change: [{ type: Output }],
     modeChange: [{ type: Output }]
 };
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/**
- * @param {?} control
- * @param {?} error
- * @return {?}
- */
-function removeError(control, error) {
-    /** @type {?} */
-    const err = control.errors;
-    if (err) {
-        delete err[error]; // delete your own error
-        if (!Object.keys(err).length) { // if no errors left
-            control.setErrors(null); // set control errors to null making it VALID
-        }
-        else {
-            control.setErrors(err); // controls got other errors so set them back
-        }
-    }
-}
-
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -4455,6 +4505,7 @@ class EditorComponent {
         this.REGEX_ONLY_INTEGERS = new RegExp(/^[0-9]\d*$/);
         this.REGEX_MIDDLE_NUMBER = new RegExp(/^[0-9]*(\.[5])?$/);
         this.REGEX_WEBSITE = new RegExp(/(http|https):\/\/(\w+:?\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@\-\/]))?/);
+        this.REGEX_ALPHA_NUMBER = new RegExp(/[A-Za-z0-9_]/);
         this.editorInstance = new EventEmitter();
         this.selectAddress = new EventEmitter();
         this._subscription = new Subscription();
@@ -4480,10 +4531,12 @@ class EditorComponent {
             parkingSpaces: [Validators.pattern(this.REGEX_ONLY_INTEGERS)],
             mainArea: [],
             secondaryArea: [],
-            externalLink: [Validators.pattern(this.REGEX_WEBSITE)]
+            externalLink: [Validators.pattern(this.REGEX_WEBSITE)],
+            sku: [Validators.pattern(this.REGEX_ALPHA_NUMBER)]
         };
         this.propertyForm = this._formBuilder.group({
             offering: [OfferingTypeEnum.SALE],
+            sku: [null, this._validators.sku],
             consumerReporting: [],
             consumerReportingOption: [1],
             currency: ['MXN'],
@@ -4715,6 +4768,7 @@ class EditorComponent {
     updateFormByProperty() {
         this.propertyForm.patchValue({
             offering: this._property.offering,
+            sku: this._property.sku,
             consumerReporting: this._property.propertyInfo.consumerReporting && this._property.propertyInfo.consumerReporting !== 0,
             consumerReportingOption: this._property.propertyInfo.consumerReporting,
             currency: this._property.currency,
@@ -4767,6 +4821,7 @@ class EditorComponent {
     updatePropertyByForm(data) {
         this._property.type = this.propertyType;
         this._property.offering = data.offering;
+        this._property.sku = data.sku;
         this._property.propertyInfo.consumerReporting = data.consumerReporting ? data.consumerReportingOption : null;
         this._property.currency = data.currency;
         this._property.propertyInfo.lowestPrice = data.minPrice ? Number(data.minPrice) : null;
@@ -4939,7 +4994,7 @@ class EditorComponent {
 EditorComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-property-editor',
-                template: "<form class=\"editor\" [formGroup]=\"propertyForm\" autocomplete=\"off\">\r\n  <div class=\"offering\">\r\n    <p class=\"section_label\"><span>Tipo de oferta</span> <span>Informaci\u00F3n P\u00FAblica</span></p>\r\n    <mat-button-toggle-group class=\"offering__toggle\" formControlName=\"offering\">\r\n      <ng-container *ngFor=\"let offering of offeringTypeList\">\r\n        <mat-button-toggle\r\n          [disabled]=\"(propertyType === 'ROOM' && offering.value === 'SALE') || (propertyType === 'INVESTMENT' && offering.value === 'RENT')\"\r\n          [value]=\"offering.value\">{{offering.name}}</mat-button-toggle>\r\n      </ng-container>\r\n    </mat-button-toggle-group>\r\n  </div>\r\n  <ng-template [ngIf]=\"propertyForm.controls['offering'].value === 'RENT'\">\r\n    <div class=\"direct-debit\">\r\n      <mat-checkbox class=\"direct-debit__check-box\" formControlName=\"consumerReporting\">Domiciliaci\u00F3n</mat-checkbox>\r\n      <mat-radio-group class=\"direct-debit__radio-group\" aria-label=\"Select an option\"\r\n                       formControlName=\"consumerReportingOption\"\r\n                       *ngIf=\"propertyForm.controls['consumerReporting'].value\">\r\n        <mat-radio-button class=\"direct-debit__radio-button\" [value]=\"1\">Requerir certificado <br> de fiabilidad\r\n        </mat-radio-button>\r\n        <mat-radio-button class=\"direct-debit__radio-button\" [value]=\"2\">Requerir poliza <br> de arrendamiento\r\n        </mat-radio-button>\r\n        <p>\r\n          Para mayor informaci\u00F3n de este servicio visite <br>\r\n          <a href=\"https://www.burorentas.mx\">\r\n            www.burorentas.mx\r\n          </a>\r\n        </p>\r\n        <mat-error *ngIf=\"propertyForm.controls['consumerReportingOption'].hasError('required')\">\r\n          Este campo es requerido\r\n        </mat-error>\r\n      </mat-radio-group>\r\n    </div>\r\n  </ng-template>\r\n  <div class=\"pricing\">\r\n    <mat-form-field appearance=\"outline\" class=\"pricing__form-field\">\r\n      <mat-label>Moneda</mat-label>\r\n      <mat-select formControlName=\"currency\">\r\n        <ng-container *ngFor=\"let currency of currencyList\">\r\n          <mat-option [value]=\"currency.type\">{{currency.type}}</mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n      <mat-error *ngIf=\"propertyForm.controls['currency'].hasError('required')\">\r\n        Este campo es requerido\r\n      </mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field appearance=\"outline\" class=\"pricing__form-field\">\r\n      <mat-label>Precio deseado</mat-label>\r\n      <input libFormatPrice autocomplete=\"off\" matInput=\"\" type=\"text\" title=\"Max price\" formControlName=\"price\"\r\n             [control]=\"propertyForm.controls['price']\" [currency]=\"propertyForm.get('currency').value\">\r\n      <mat-error *ngIf=\"propertyForm.controls['price'].hasError('format')\">\r\n        Debe ingresar solo numeros\r\n      </mat-error>\r\n      <mat-error *ngIf=\"propertyForm.controls['price'].hasError('required')\">\r\n        Este campo es requerido\r\n      </mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field appearance=\"outline\" class=\"pricing__form-field\">\r\n      <mat-label>Precio m\u00EDnimo</mat-label>\r\n      <input libFormatPrice autocomplete=\"off\" matInput=\"\" type=\"text\" title=\"Min price\" formControlName=\"minPrice\"\r\n             [control]=\"propertyForm.controls['minPrice']\" [currency]=\"propertyForm.get('currency').value\">\r\n      <mat-error *ngIf=\"propertyForm.controls['minPrice'].hasError('minPriceInvalid')\">\r\n        Este valor debe ser menor al precio deseado\r\n      </mat-error>\r\n      <mat-error *ngIf=\"propertyForm.controls['minPrice'].hasError('format')\">\r\n        Debe ingresar solo numeros\r\n      </mat-error>\r\n    </mat-form-field>\r\n    <div class=\"pricing__maintenance-fee\" *ngIf=\"propertyType !== 'INVESTMENT' && propertyType !== 'LAND'\">\r\n      <mat-checkbox formControlName=\"maintenance\">Tiene cuota de mantenimiento\r\n      </mat-checkbox>\r\n      <mat-form-field appearance=\"outline\" class=\"pricing__form-field\"\r\n                      *ngIf=\"propertyForm.controls['maintenance'].value\">\r\n        <mat-label>Cuota de mantenimiento</mat-label>\r\n        <input autocomplete=\"off\" matInput type=\"text\" libFormatPrice title=\"Price\"\r\n               [control]=\"propertyForm.controls['maintenancePrice']\"\r\n               [currency]=\"propertyForm.get('currency').value\"\r\n               formControlName=\"maintenancePrice\">\r\n        <mat-error *ngIf=\"propertyForm.controls['maintenancePrice'].hasError('format')\">\r\n          Debe ingresar solo numeros\r\n        </mat-error>\r\n        <mat-error *ngIf=\"propertyForm.controls['maintenancePrice'].hasError('required')\">\r\n          Esta campo es requerido\r\n        </mat-error>\r\n      </mat-form-field>\r\n    </div>\r\n    <ng-template [ngIf]=\"propertyForm.controls['offering'].value === 'RENT' && propertyType !== 'INVESTMENT'\">\r\n      <div class=\"pricing__maintenance-fee\" *ngIf=\"propertyType !== 'ROOM'\">\r\n        <mat-checkbox formControlName=\"transfer\">Traspaso\r\n        </mat-checkbox>\r\n        <mat-form-field appearance=\"outline\" class=\"pricing__form-field\"\r\n                        *ngIf=\"propertyForm.controls['transfer'].value\">\r\n          <mat-label>Monto por traspaso</mat-label>\r\n          <input autocomplete=\"off\" matInput type=\"text\" libFormatPrice\r\n                 title=\"Price\" [control]=\"propertyForm.controls['transferPrice']\"\r\n                 [currency]=\"propertyForm.get('currency').value\"\r\n                 formControlName=\"transferPrice\">\r\n          <mat-error *ngIf=\"propertyForm.controls['transferPrice'].hasError('format')\">\r\n            Debe ingresar solo numeros\r\n          </mat-error>\r\n          <mat-error *ngIf=\"propertyForm.controls['transferPrice'].hasError('required')\">\r\n            Este campo es requerido\r\n          </mat-error>\r\n        </mat-form-field>\r\n      </div>\r\n    </ng-template>\r\n  </div>\r\n  <hr>\r\n  <div class=\"address\" formGroupName=\"address\">\r\n    <p class=\"section_label\">\r\n      Direcci\u00F3n\r\n      <button mat-flat-button=\"\" type=\"button\" color=\"primary\" (click)=\"goToSelectAddress()\"\r\n              class=\"address__label-button\">\r\n        COLOCAR UBICACI\u00D3N EN EL MAPA\r\n      </button>\r\n    </p>\r\n    <div class=\"address__body\">\r\n      <mat-form-field appearance=\"outline\" class=\"address__form-field\">\r\n        <mat-label>Pa\u00EDs</mat-label>\r\n        <input autocomplete=\"off\" matInput=\"\" title=\"Country\" formControlName=\"country\">\r\n      </mat-form-field>\r\n      <mat-form-field appearance=\"outline\" class=\"address__form-field\">\r\n        <mat-label>C\u00F3digo postal</mat-label>\r\n        <input autocomplete=\"off\" matInput=\"\" title=\"Postal code\" formControlName=\"postalCode\" type=\"number\">\r\n      </mat-form-field>\r\n      <mat-form-field appearance=\"outline\" class=\"address__form-field\">\r\n        <mat-label>Entidad Federativa</mat-label>\r\n        <input autocomplete=\"off\" matInput=\"\" title=\"State\" formControlName=\"state\">\r\n      </mat-form-field>\r\n      <mat-form-field appearance=\"outline\" class=\"address__form-field\">\r\n        <mat-label>Ciudad</mat-label>\r\n        <input autocomplete=\"off\" matInput=\"\" title=\"City\" formControlName=\"city\">\r\n      </mat-form-field>\r\n      <mat-form-field appearance=\"outline\" class=\"address__form-field\">\r\n        <mat-label>Alcaldia/Municipio</mat-label>\r\n        <input autocomplete=\"off\" matInput=\"\" title=\"Township\" formControlName=\"township\">\r\n      </mat-form-field>\r\n      <mat-form-field appearance=\"outline\" class=\"address__form-field\">\r\n        <mat-label>Colonia</mat-label>\r\n        <input autocomplete=\"off\" matInput=\"\" title=\"Colony\" formControlName=\"colony\">\r\n      </mat-form-field>\r\n      <mat-form-field appearance=\"outline\" class=\"address__form-field\">\r\n        <mat-label>Vialidad</mat-label>\r\n        <input autocomplete=\"off\" matInput=\"\" title=\"Street\" formControlName=\"street\">\r\n      </mat-form-field>\r\n      <mat-form-field appearance=\"outline\" class=\"address__form-field\">\r\n        <mat-label>N\u00FAmero exterior</mat-label>\r\n        <input autocomplete=\"off\" matInput=\"\" title=\"No exterior\" formControlName=\"extNumber\" type=\"number\">\r\n      </mat-form-field>\r\n      <mat-form-field appearance=\"outline\" class=\"address__form-field\">\r\n        <mat-label>N\u00FAmero interior</mat-label>\r\n        <input autocomplete=\"off\" matInput=\"\" title=\"No interior\" formControlName=\"intNumber\" type=\"number\">\r\n      </mat-form-field>\r\n      <mat-form-field appearance=\"outline\" class=\"address__form-field\">\r\n        <mat-label>Manzana</mat-label>\r\n        <input autocomplete=\"off\" matInput=\"\" title=\"Mz\" formControlName=\"mz\" type=\"number\">\r\n      </mat-form-field>\r\n      <mat-form-field appearance=\"outline\" class=\"address__form-field\">\r\n        <mat-label>Lote</mat-label>\r\n        <input autocomplete=\"off\" matInput=\"\" title=\"Lt\" formControlName=\"lt\" type=\"number\">\r\n      </mat-form-field>\r\n      <div class=\"address__visibility\">\r\n        <p class=\"section_label\">\r\n          Ubicaci\u00F3n en el mapa\r\n        </p>\r\n        <div class=\"address__visibility-body\">\r\n          <mat-radio-group formControlName=\"visible\" class=\"address__visibility-radio-group\">\r\n            <mat-radio-button class=\"visibility-radio-group__button\" [value]=\"true\">\r\n              Mostrar direcci\u00F3n exacta\r\n            </mat-radio-button>\r\n            <mat-radio-button class=\"visibility-radio-group__button\" [value]=\"false\">\r\n              Mostrar direcci\u00F3n aproximada\r\n            </mat-radio-button>\r\n          </mat-radio-group>\r\n          <p class=\"visibility__about\">\r\n          <span class=\"visibility__about-label\" [ngStyle]=\"{'font-weight': propertyForm.get('address.visible').value ? 'bold' : 'normal'}\">\r\n            Mostrar direcci\u00F3n exacta: muestra el <br> lugar preciso en el mapa con un marcador.\r\n          </span>\r\n            <span class=\"visibility__about-label\" [ngStyle]=\"{'font-weight': !propertyForm.get('address.visible').value ? 'bold' : 'normal'}\">\r\n            Mostrar direcci\u00F3n aproximada: reacomoda la ubicaci\u00F3n en un radio de 50 metros, ocultando calle y n\u00FAmero.\r\n          </span>\r\n          </p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <hr>\r\n  <!-- Features [START], Only visible for all property types except INVESTMENT -->\r\n  <div class=\"features\">\r\n    <p class=\"section_label\">Caracteristicas</p>\r\n    <div class=\"features__body\">\r\n      <div class=\"features__item\" *ngIf=\"propertyType === 'HOUSE' || propertyType === 'APARTMENT'\">\r\n        <span class=\"label__icon ic-features-bedroom\"></span>\r\n        <mat-form-field appearance=\"outline\">\r\n          <mat-label>Habitaciones</mat-label>\r\n          <input autocomplete=\"off\" matInput title=\"Bedrooms\" formControlName=\"bedrooms\" type=\"number\">\r\n          <mat-error *ngIf=\"propertyForm.controls['bedrooms'].hasError('required')\">\r\n            Este campo es requerido\r\n          </mat-error>\r\n          <mat-error *ngIf=\"propertyForm.controls['bedrooms'].hasError('pattern')\">\r\n            Valor invalido\r\n          </mat-error>\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"features__item features-item-bathrooms\"\r\n           *ngIf=\"propertyType === 'HOUSE' || propertyType === 'APARTMENT' || propertyType === 'ROOM'\">\r\n        <span class=\"label__icon ic-features-bathroom\"></span>\r\n        <mat-form-field appearance=\"outline\">\r\n          <mat-label>Ba\u00F1os</mat-label>\r\n          <input autocomplete=\"off\" title=\"Bathrooms\" matInput formControlName=\"bathrooms\" type=\"number\">\r\n          <mat-error *ngIf=\"propertyForm.controls['bathrooms'].hasError('required')\">\r\n            Este campo es requerido\r\n          </mat-error>\r\n          <mat-error *ngIf=\"propertyForm.controls['bathrooms'].hasError('pattern')\">\r\n            Valor invalido\r\n          </mat-error>\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"features__item features-item-parking-spaces\" *ngIf=\"propertyType !== 'INVESTMENT'\">\r\n        <span class=\"label__icon ic-features-parking\"></span>\r\n        <mat-form-field appearance=\"outline\">\r\n          <mat-label>Estacionamientos</mat-label>\r\n          <input autocomplete=\"off\" title=\"Parking spaces\" matInput formControlName=\"parkingSpaces\" type=\"number\">\r\n          <mat-error *ngIf=\"propertyForm.controls['parkingSpaces'].hasError('pattern')\">\r\n            Valor invalido\r\n          </mat-error>\r\n        </mat-form-field>\r\n      </div>\r\n      <!-- Surfaces [START] Only visible for property type distinct INVESTMENT-->\r\n      <div class=\"features__item features-item-surface\" *ngIf=\"propertyType !== 'INVESTMENT'\">\r\n        <p class=\"features-item__label\">\r\n          <span class=\"label__icon ic-features-surface\"></span>\r\n          Superficie\r\n        </p>\r\n        <mat-radio-group class=\"features-item__radio-group\" formControlName=\"unit\">\r\n          <mat-radio-button class=\"features-item__radio-button\" [value]=\"'M2'\">m<sup>2</sup></mat-radio-button>\r\n          <mat-radio-button class=\"features-item__radio-button\" [value]=\"'FT2'\">sq ft</mat-radio-button>\r\n        </mat-radio-group>\r\n        <!--\r\n            Build area [START]\r\n            Only visible for HOUSE, APARTMENT, ROOM, OFFICE, RETAIL, WAREHOUSE and LAND  property types\r\n          -->\r\n        <mat-form-field appearance=\"outline\"\r\n                        *ngIf=\"propertyType !== 'INVESTMENT'\">\r\n          <mat-label>\r\n            <ng-container [ngSwitch]=\"propertyType\">\r\n              <span *ngSwitchDefault>Construida</span>\r\n              <span *ngSwitchCase=\"'OFFICE'\">De Oficinas</span>\r\n              <span *ngSwitchCase=\"'LAND'\">De Terreno</span>\r\n            </ng-container>\r\n          </mat-label>\r\n          <input autocomplete=\"off\" matInput=\"\" title=\"Surface build\" formControlName=\"mainArea\" type=\"number\">\r\n          <span matSuffix>\r\n                  <span *ngIf=\"propertyForm.controls['unit'].value === 'M2'\">m<sup>2</sup></span>\r\n                  <span *ngIf=\"propertyForm.controls['unit'].value === 'FT2'\">sq ft</span>\r\n                </span>\r\n          <mat-error *ngIf=\"propertyForm.controls['mainArea'].hasError('required')\">\r\n            Este campo es requerido\r\n          </mat-error>\r\n          <mat-error *ngIf=\"propertyForm.controls['mainArea'].hasError('pattern')\">\r\n            Valor invalido\r\n          </mat-error>\r\n        </mat-form-field>\r\n        <!-- Build area [END] -->\r\n        <!--\r\n          Secondary build area [START]\r\n          Only visible for HOUSE, and WAREHOUSE\r\n        -->\r\n        <mat-form-field appearance=\"outline\"\r\n                        *ngIf=\"propertyType === 'HOUSE' || propertyType === 'WAREHOUSE'\">\r\n          <mat-label>\r\n            <ng-container [ngSwitch]=\"propertyType\">\r\n              <span *ngSwitchCase=\"'HOUSE'\">De terreno</span>\r\n              <span *ngSwitchCase=\"'WAREHOUSE'\">De oficinas</span>\r\n            </ng-container>\r\n          </mat-label>\r\n          <input autocomplete=\"off\" matInput=\"\" title=\"Surface land build\" formControlName=\"secondaryArea\" type=\"number\">\r\n          <span matSuffix>\r\n                  <span *ngIf=\"propertyForm.controls['unit'].value === 'M2'\">m<sup>2</sup></span>\r\n                  <span *ngIf=\"propertyForm.controls['unit'].value === 'FT2'\">sq ft</span>\r\n                </span>\r\n          <mat-error *ngIf=\"propertyForm.controls['secondaryArea'].hasError('pattern')\">\r\n            Valor invalido\r\n          </mat-error>\r\n        </mat-form-field>\r\n        <!-- Secondary build area [END]-->\r\n      </div>\r\n      <!-- Surfaces [END]-->\r\n      <!-- Year build [START], Only visible for HOUSE, APARTMENT, ROOM, OFFICE, RETAIL and WAREHOUSE property types -->\r\n      <div class=\"features__item\"\r\n           *ngIf=\"propertyType === 'HOUSE' || propertyType === 'APARTMENT' || propertyType === 'ROOM' || propertyType === 'OFFICE' || propertyType  === 'RETAIL' || propertyType === 'WAREHOUSE'\">\r\n        <p class=\"features-item__label\">\r\n          <span class=\"label__icon\"><mat-icon>event</mat-icon></span>\r\n          A\u00F1o de construcci\u00F3n\r\n        </p>\r\n        <lib-property-custom-datepicker formControlName=\"buildIn\"></lib-property-custom-datepicker>\r\n      </div>\r\n      <!-- Year build [END]  -->\r\n      <!-- Land use [START], Only for LAND property type -->\r\n      <div class=\"features__item\" *ngIf=\"propertyType === 'LAND'\">\r\n        <p class=\"features-item__label\">\r\n          <span class=\"label__icon ic-features-land-use\"></span>\r\n          Uso de suelo\r\n        </p>\r\n        <mat-form-field appearance=\"outline\">\r\n          <mat-label>Tipo</mat-label>\r\n          <mat-select formControlName=\"landUse\">\r\n            <mat-option [value]=\"null\">\r\n              Seleccione una opci\u00F3n\r\n            </mat-option>\r\n            <ng-container *ngFor=\"let use of landUseList\">\r\n              <mat-option [value]=\"use.value\">\r\n                {{use.name}}\r\n              </mat-option>\r\n            </ng-container>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <!-- Land use [END]  -->\r\n    </div>\r\n  </div>\r\n  <!-- Features [END] -->\r\n  <hr>\r\n  <div class=\"agreement\">\r\n    <p class=\"section_label\">Contrato</p>\r\n    <div class=\"agreement__body\">\r\n      <mat-form-field appearance=\"outline\" class=\"agreement__form-field\">\r\n        <mat-label>Fecha de inicio</mat-label>\r\n        <input autocomplete=\"off\" matInput formControlName=\"agreementDate\" [matDatepicker]=\"dp2\"\r\n               placeholder=\"Seleccione una fecha\"\r\n               title=\"Chose a date\">\r\n        <mat-datepicker-toggle matSuffix [for]=\"dp2\"></mat-datepicker-toggle>\r\n        <mat-datepicker #dp2 [disabled]=\"false\"></mat-datepicker>\r\n      </mat-form-field>\r\n      <mat-form-field appearance=\"outline\" class=\"agreement__form-field\">\r\n        <mat-label>Duraci\u00F3n</mat-label>\r\n        <mat-select formControlName=\"duration\">\r\n          <mat-option [value]=\"null\">\r\n            Seleccione una opci\u00F3n\r\n          </mat-option>\r\n          <ng-container *ngFor=\"let time of durationList\">\r\n            <mat-option [value]=\"time\">\r\n              <ng-container [ngSwitch]=\"time\">\r\n                <span *ngSwitchCase=\"365\">1 a\u00F1o</span>\r\n                <span *ngSwitchCase=\"180\">6 meses</span>\r\n                <span *ngSwitchDefault>{{time}} d\u00EDas</span>\r\n              </ng-container>\r\n            </mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <mat-form-field appearance=\"outline\" class=\"agreement__form-field\">\r\n        <mat-label>Comisi\u00F3n</mat-label>\r\n        <mat-select formControlName=\"commission\">\r\n          <mat-option [value]=\"null\">\r\n            Seleccione una opci\u00F3n\r\n          </mat-option>\r\n          <ng-container *ngFor=\"let commission of commissionList\">\r\n            <mat-option [value]=\"commission\">\r\n              <span *ngIf=\"propertyForm.controls['offering'].value === 'RENT'\">\r\n                <ng-container [ngSwitch]=\"commission\">\r\n                  <span *ngSwitchCase=\"1\">1 mes = {{propertyForm.controls['price'].value * commission | currency : '' : 'symbol' : '1.0-0'}}</span>\r\n                  <span *ngSwitchDefault>\r\n                    {{commission}} meses = {{propertyForm.controls['price'].value * commission | currency : '' : 'symbol' : '1.0-0'}}\r\n                  </span>\r\n                </ng-container>\r\n              </span>\r\n              <span *ngIf=\"propertyForm.controls['offering'].value === 'SALE'\">\r\n                <span>{{commission * 100 | currency: '' : '': '1.1-1'}}\r\n                  % = {{propertyForm.controls['price'].value * commission | currency : '' : 'symbol' : '1.0-0'}}</span>\r\n              </span>\r\n            </mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n        <mat-error *ngIf=\"propertyForm.controls['commission'].hasError('commissionInvalid')\">\r\n          Es necesario ingresar el precio deseado\r\n        </mat-error>\r\n      </mat-form-field>\r\n      <ng-template [ngIf]=\"propertyType === 'INVESTMENT'\">\r\n        <mat-form-field appearance=\"outline\" class=\"investment-return__form-field\">\r\n          <mat-label>Retorno de Inversi\u00F3n</mat-label>\r\n          <input autocomplete=\"off\" matInput title=\"Investment return\" formControlName=\"roi\" type=\"number\">\r\n          <span matSuffix>%</span>\r\n        </mat-form-field>\r\n      </ng-template>\r\n      <mat-checkbox class=\"agreement__body-check-box\" formControlName=\"exclusivity\">Contrato con exclusividad\r\n      </mat-checkbox>\r\n      <mat-checkbox class=\"agreement__body-check-box\" formControlName=\"mlm\">Quiero compartir en el {{mlsLabel || 'MLS'}}</mat-checkbox>\r\n      <mat-form-field appearance=\"outline\" class=\"agreement__form-field\" *ngIf=\"propertyForm.controls['mlm'].value\">\r\n        <mat-label>Monto de comisi\u00F3n compartida</mat-label>\r\n        <mat-select formControlName=\"sharedCommission\">\r\n          <mat-option [value]=\"null\">\r\n            Seleccione una opci\u00F3n\r\n          </mat-option>\r\n          <ng-container *ngFor=\"let commission of sharedCommissionList\">\r\n            <mat-option [value]=\"commission\">\r\n              {{commission * 100}}% de mi comisi\u00F3n\r\n              = {{propertyForm.controls['price'].value * propertyForm.controls['commission'].value * commission | currency : '' : 'symbol' : '1.0-0'}}\r\n            </mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n        <mat-error *ngIf=\"propertyForm.controls['sharedCommission'].hasError('sharedCommissionInvalid')\">\r\n          Debe seleccionar su comisi\u00F3n\r\n        </mat-error>\r\n        <mat-error *ngIf=\"propertyForm.controls['sharedCommission'].hasError('required')\">\r\n          Este campo es requerido\r\n        </mat-error>\r\n      </mat-form-field>\r\n    </div>\r\n  </div>\r\n  <hr>\r\n  <div class=\"description\">\r\n    <p class=\"section_label\">Descripci\u00F3n</p>\r\n    <mat-form-field appearance=\"outline\" class=\"description__form-field\">\r\n      <textarea matInput=\"\" cdkTextareaAutosize title=\"Description\" formControlName=\"description\"></textarea>\r\n      <mat-hint align=\"end\"><span>N\u00FAmero de caracteres ideal: 3500</span>\r\n        Actuales: {{propertyForm.controls['description'].value ? propertyForm.controls['description'].value.length : 0}}\r\n      </mat-hint>\r\n      <mat-error *ngIf=\"propertyForm.controls['description'].hasError('required')\">\r\n        Este campo es requerido\r\n      </mat-error>\r\n    </mat-form-field>\r\n  </div>\r\n  <div class=\"external-link\">\r\n    <p class=\"section_label\">Tour virtual</p>\r\n    <mat-form-field appearance=\"outline\" class=\"external-link__form-field\">\r\n      <input matInput=\"\" title=\"externalLink\" formControlName=\"externalLink\">\r\n      <mat-error *ngIf=\"propertyForm.controls['externalLink'].hasError('pattern')\">\r\n        Url invalida\r\n      </mat-error>\r\n    </mat-form-field>\r\n  </div>\r\n  <div class=\"notes\">\r\n    <p class=\"section_label\">Notas</p>\r\n    <mat-form-field appearance=\"outline\" class=\"notes__form-field\">\r\n      <textarea matInput=\"\" cdkTextareaAutosize title=\"Notes\" formControlName=\"notes\"></textarea>\r\n    </mat-form-field>\r\n  </div>\r\n  <hr *ngIf=\"propertyType !== 'INVESTMENT'\">\r\n  <div class=\"amenities\" *ngIf=\"propertyType !== 'INVESTMENT'\">\r\n    <p class=\"section_label\">Amenidades</p>\r\n    <p class=\"amenities__list-amenities\">\r\n      <ng-container *ngFor=\"let amenity of amenitiesList\">\r\n        <span matRipple class=\"list-amenities__amenity\" (click)=\"updateAmenity(amenity)\">\r\n          <span class=\"amenity__icon ic-amenities-{{amenity.iconName}}\"\r\n                [ngClass]=\"{'amenity__icon-active': amenity.checked}\"></span>\r\n          <span class=\"amenity__text\">{{amenity.name}}</span>\r\n        </span>\r\n      </ng-container>\r\n    </p>\r\n  </div>\r\n  <div class=\"attributes\" *ngIf=\"propertyType !== 'INVESTMENT'\">\r\n    <p class=\"section_label\">Caracteristicas de ubicaci\u00F3n</p>\r\n    <p class=\"amenities__list-amenities\">\r\n      <ng-container *ngFor=\"let feature of featuresList\">\r\n        <span matRipple class=\"list-amenities__amenity\" (click)=\"updateAmenity(feature)\">\r\n          <span class=\"amenity__icon ic-amenities-{{feature.iconName}}\"\r\n                [ngClass]=\"{'amenity__icon-active': feature.checked}\"></span>\r\n          <span class=\"amenity__text\">{{feature.name}}</span>\r\n        </span>\r\n      </ng-container>\r\n    </p>\r\n  </div>\r\n  <button type=\"submit\" class=\"button-submit\" mat-button #btnSubmit>Enviar</button>\r\n</form>\r\n",
+                template: "<form class=\"editor\" [formGroup]=\"propertyForm\" autocomplete=\"off\">\r\n  <div class=\"offering\">\r\n    <p class=\"section_label\"><span>Tipo de oferta</span> <span>Informaci\u00F3n P\u00FAblica</span></p>\r\n    <mat-button-toggle-group class=\"offering__toggle\" formControlName=\"offering\">\r\n      <ng-container *ngFor=\"let offering of offeringTypeList\">\r\n        <mat-button-toggle\r\n          [disabled]=\"(propertyType === 'ROOM' && offering.value === 'SALE') || (propertyType === 'INVESTMENT' && offering.value === 'RENT')\"\r\n          [value]=\"offering.value\">{{offering.name}}</mat-button-toggle>\r\n      </ng-container>\r\n    </mat-button-toggle-group>\r\n  </div>\r\n  <ng-template [ngIf]=\"propertyForm.controls['offering'].value === 'RENT'\">\r\n    <div class=\"direct-debit\">\r\n      <mat-checkbox class=\"direct-debit__check-box\" formControlName=\"consumerReporting\">Domiciliaci\u00F3n</mat-checkbox>\r\n      <mat-radio-group class=\"direct-debit__radio-group\" aria-label=\"Select an option\"\r\n                       formControlName=\"consumerReportingOption\"\r\n                       *ngIf=\"propertyForm.controls['consumerReporting'].value\">\r\n        <mat-radio-button class=\"direct-debit__radio-button\" [value]=\"1\">Requerir certificado <br> de fiabilidad\r\n        </mat-radio-button>\r\n        <mat-radio-button class=\"direct-debit__radio-button\" [value]=\"2\">Requerir poliza <br> de arrendamiento\r\n        </mat-radio-button>\r\n        <p>\r\n          Para mayor informaci\u00F3n de este servicio visite <br>\r\n          <a href=\"https://www.burorentas.mx\">\r\n            www.burorentas.mx\r\n          </a>\r\n        </p>\r\n        <mat-error *ngIf=\"propertyForm.controls['consumerReportingOption'].hasError('required')\">\r\n          Este campo es requerido\r\n        </mat-error>\r\n      </mat-radio-group>\r\n    </div>\r\n  </ng-template>\r\n  <div class=\"pricing\">\r\n    <mat-form-field appearance=\"outline\" class=\"pricing__form-field\">\r\n      <mat-label>Moneda</mat-label>\r\n      <mat-select formControlName=\"currency\">\r\n        <ng-container *ngFor=\"let currency of currencyList\">\r\n          <mat-option [value]=\"currency.type\">{{currency.type}}</mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n      <mat-error *ngIf=\"propertyForm.controls['currency'].hasError('required')\">\r\n        Este campo es requerido\r\n      </mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field appearance=\"outline\" class=\"pricing__form-field\">\r\n      <mat-label>Precio deseado</mat-label>\r\n      <input libFormatPrice autocomplete=\"off\" matInput=\"\" type=\"text\" title=\"Max price\" formControlName=\"price\"\r\n             [control]=\"propertyForm.controls['price']\" [currency]=\"propertyForm.get('currency').value\">\r\n      <mat-error *ngIf=\"propertyForm.controls['price'].hasError('format')\">\r\n        Debe ingresar solo numeros\r\n      </mat-error>\r\n      <mat-error *ngIf=\"propertyForm.controls['price'].hasError('required')\">\r\n        Este campo es requerido\r\n      </mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field appearance=\"outline\" class=\"pricing__form-field\">\r\n      <mat-label>Precio m\u00EDnimo</mat-label>\r\n      <input libFormatPrice autocomplete=\"off\" matInput=\"\" type=\"text\" title=\"Min price\" formControlName=\"minPrice\"\r\n             [control]=\"propertyForm.controls['minPrice']\" [currency]=\"propertyForm.get('currency').value\">\r\n      <mat-error *ngIf=\"propertyForm.controls['minPrice'].hasError('minPriceInvalid')\">\r\n        Este valor debe ser menor al precio deseado\r\n      </mat-error>\r\n      <mat-error *ngIf=\"propertyForm.controls['minPrice'].hasError('format')\">\r\n        Debe ingresar solo numeros\r\n      </mat-error>\r\n    </mat-form-field>\r\n    <div class=\"pricing__maintenance-fee\" *ngIf=\"propertyType !== 'INVESTMENT' && propertyType !== 'LAND'\">\r\n      <mat-checkbox formControlName=\"maintenance\">Tiene cuota de mantenimiento\r\n      </mat-checkbox>\r\n      <mat-form-field appearance=\"outline\" class=\"pricing__form-field\"\r\n                      *ngIf=\"propertyForm.controls['maintenance'].value\">\r\n        <mat-label>Cuota de mantenimiento</mat-label>\r\n        <input autocomplete=\"off\" matInput type=\"text\" libFormatPrice title=\"Price\"\r\n               [control]=\"propertyForm.controls['maintenancePrice']\"\r\n               [currency]=\"propertyForm.get('currency').value\"\r\n               formControlName=\"maintenancePrice\">\r\n        <mat-error *ngIf=\"propertyForm.controls['maintenancePrice'].hasError('format')\">\r\n          Debe ingresar solo numeros\r\n        </mat-error>\r\n        <mat-error *ngIf=\"propertyForm.controls['maintenancePrice'].hasError('required')\">\r\n          Esta campo es requerido\r\n        </mat-error>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"sku__maintenance-fee\">\r\n      <mat-form-field appearance=\"outline\" class=\"sku__form-field\">\r\n        <mat-label>SKU</mat-label>\r\n        <input matInput=\"\" title=\"SKU\" formControlName=\"sku\">\r\n        <mat-error *ngIf=\"propertyForm.controls['sku'].hasError('pattern')\">\r\n          SKU invalida\r\n        </mat-error>\r\n      </mat-form-field>\r\n    </div>\r\n    <ng-template [ngIf]=\"propertyForm.controls['offering'].value === 'RENT' && propertyType !== 'INVESTMENT'\">\r\n      <div class=\"pricing__maintenance-fee\" *ngIf=\"propertyType !== 'ROOM'\">\r\n        <mat-checkbox formControlName=\"transfer\">Traspaso\r\n        </mat-checkbox>\r\n        <mat-form-field appearance=\"outline\" class=\"pricing__form-field\"\r\n                        *ngIf=\"propertyForm.controls['transfer'].value\">\r\n          <mat-label>Monto por traspaso</mat-label>\r\n          <input autocomplete=\"off\" matInput type=\"text\" libFormatPrice\r\n                 title=\"Price\" [control]=\"propertyForm.controls['transferPrice']\"\r\n                 [currency]=\"propertyForm.get('currency').value\"\r\n                 formControlName=\"transferPrice\">\r\n          <mat-error *ngIf=\"propertyForm.controls['transferPrice'].hasError('format')\">\r\n            Debe ingresar solo numeros\r\n          </mat-error>\r\n          <mat-error *ngIf=\"propertyForm.controls['transferPrice'].hasError('required')\">\r\n            Este campo es requerido\r\n          </mat-error>\r\n        </mat-form-field>\r\n      </div>\r\n    </ng-template>\r\n  </div>\r\n  <hr>\r\n  <div class=\"address\" formGroupName=\"address\">\r\n    <p class=\"section_label\">\r\n      Direcci\u00F3n\r\n      <button mat-flat-button=\"\" type=\"button\" color=\"primary\" (click)=\"goToSelectAddress()\"\r\n              class=\"address__label-button\">\r\n        COLOCAR UBICACI\u00D3N EN EL MAPA\r\n      </button>\r\n    </p>\r\n    <div class=\"address__body\">\r\n      <mat-form-field appearance=\"outline\" class=\"address__form-field\">\r\n        <mat-label>Pa\u00EDs</mat-label>\r\n        <input autocomplete=\"off\" matInput=\"\" title=\"Country\" formControlName=\"country\">\r\n      </mat-form-field>\r\n      <mat-form-field appearance=\"outline\" class=\"address__form-field\">\r\n        <mat-label>C\u00F3digo postal</mat-label>\r\n        <input autocomplete=\"off\" matInput=\"\" title=\"Postal code\" formControlName=\"postalCode\" type=\"number\">\r\n      </mat-form-field>\r\n      <mat-form-field appearance=\"outline\" class=\"address__form-field\">\r\n        <mat-label>Entidad Federativa</mat-label>\r\n        <input autocomplete=\"off\" matInput=\"\" title=\"State\" formControlName=\"state\">\r\n      </mat-form-field>\r\n      <mat-form-field appearance=\"outline\" class=\"address__form-field\">\r\n        <mat-label>Ciudad</mat-label>\r\n        <input autocomplete=\"off\" matInput=\"\" title=\"City\" formControlName=\"city\">\r\n      </mat-form-field>\r\n      <mat-form-field appearance=\"outline\" class=\"address__form-field\">\r\n        <mat-label>Alcaldia/Municipio</mat-label>\r\n        <input autocomplete=\"off\" matInput=\"\" title=\"Township\" formControlName=\"township\">\r\n      </mat-form-field>\r\n      <mat-form-field appearance=\"outline\" class=\"address__form-field\">\r\n        <mat-label>Colonia</mat-label>\r\n        <input autocomplete=\"off\" matInput=\"\" title=\"Colony\" formControlName=\"colony\">\r\n      </mat-form-field>\r\n      <mat-form-field appearance=\"outline\" class=\"address__form-field\">\r\n        <mat-label>Vialidad</mat-label>\r\n        <input autocomplete=\"off\" matInput=\"\" title=\"Street\" formControlName=\"street\">\r\n      </mat-form-field>\r\n      <mat-form-field appearance=\"outline\" class=\"address__form-field\">\r\n        <mat-label>N\u00FAmero exterior</mat-label>\r\n        <input autocomplete=\"off\" matInput=\"\" title=\"No exterior\" formControlName=\"extNumber\" type=\"number\">\r\n      </mat-form-field>\r\n      <mat-form-field appearance=\"outline\" class=\"address__form-field\">\r\n        <mat-label>N\u00FAmero interior</mat-label>\r\n        <input autocomplete=\"off\" matInput=\"\" title=\"No interior\" formControlName=\"intNumber\" type=\"number\">\r\n      </mat-form-field>\r\n      <mat-form-field appearance=\"outline\" class=\"address__form-field\">\r\n        <mat-label>Manzana</mat-label>\r\n        <input autocomplete=\"off\" matInput=\"\" title=\"Mz\" formControlName=\"mz\" type=\"number\">\r\n      </mat-form-field>\r\n      <mat-form-field appearance=\"outline\" class=\"address__form-field\">\r\n        <mat-label>Lote</mat-label>\r\n        <input autocomplete=\"off\" matInput=\"\" title=\"Lt\" formControlName=\"lt\" type=\"number\">\r\n      </mat-form-field>\r\n      <div class=\"address__visibility\">\r\n        <p class=\"section_label\">\r\n          Ubicaci\u00F3n en el mapa\r\n        </p>\r\n        <div class=\"address__visibility-body\">\r\n          <mat-radio-group formControlName=\"visible\" class=\"address__visibility-radio-group\">\r\n            <mat-radio-button class=\"visibility-radio-group__button\" [value]=\"true\">\r\n              Mostrar direcci\u00F3n exacta\r\n            </mat-radio-button>\r\n            <mat-radio-button class=\"visibility-radio-group__button\" [value]=\"false\">\r\n              Mostrar direcci\u00F3n aproximada\r\n            </mat-radio-button>\r\n          </mat-radio-group>\r\n          <p class=\"visibility__about\">\r\n          <span class=\"visibility__about-label\" [ngStyle]=\"{'font-weight': propertyForm.get('address.visible').value ? 'bold' : 'normal'}\">\r\n            Mostrar direcci\u00F3n exacta: muestra el <br> lugar preciso en el mapa con un marcador.\r\n          </span>\r\n            <span class=\"visibility__about-label\" [ngStyle]=\"{'font-weight': !propertyForm.get('address.visible').value ? 'bold' : 'normal'}\">\r\n            Mostrar direcci\u00F3n aproximada: reacomoda la ubicaci\u00F3n en un radio de 50 metros, ocultando calle y n\u00FAmero.\r\n          </span>\r\n          </p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <hr>\r\n  <!-- Features [START], Only visible for all property types except INVESTMENT -->\r\n  <div class=\"features\">\r\n    <p class=\"section_label\">Caracteristicas</p>\r\n    <div class=\"features__body\">\r\n      <div class=\"features__item\" *ngIf=\"propertyType === 'HOUSE' || propertyType === 'APARTMENT'\">\r\n        <span class=\"label__icon ic-features-bedroom\"></span>\r\n        <mat-form-field appearance=\"outline\">\r\n          <mat-label>Habitaciones</mat-label>\r\n          <input autocomplete=\"off\" matInput title=\"Bedrooms\" formControlName=\"bedrooms\" type=\"number\">\r\n          <mat-error *ngIf=\"propertyForm.controls['bedrooms'].hasError('required')\">\r\n            Este campo es requerido\r\n          </mat-error>\r\n          <mat-error *ngIf=\"propertyForm.controls['bedrooms'].hasError('pattern')\">\r\n            Valor invalido\r\n          </mat-error>\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"features__item features-item-bathrooms\"\r\n           *ngIf=\"propertyType === 'HOUSE' || propertyType === 'APARTMENT' || propertyType === 'ROOM'\">\r\n        <span class=\"label__icon ic-features-bathroom\"></span>\r\n        <mat-form-field appearance=\"outline\">\r\n          <mat-label>Ba\u00F1os</mat-label>\r\n          <input autocomplete=\"off\" title=\"Bathrooms\" matInput formControlName=\"bathrooms\" type=\"number\">\r\n          <mat-error *ngIf=\"propertyForm.controls['bathrooms'].hasError('required')\">\r\n            Este campo es requerido\r\n          </mat-error>\r\n          <mat-error *ngIf=\"propertyForm.controls['bathrooms'].hasError('pattern')\">\r\n            Valor invalido\r\n          </mat-error>\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"features__item features-item-parking-spaces\" *ngIf=\"propertyType !== 'INVESTMENT'\">\r\n        <span class=\"label__icon ic-features-parking\"></span>\r\n        <mat-form-field appearance=\"outline\">\r\n          <mat-label>Estacionamientos</mat-label>\r\n          <input autocomplete=\"off\" title=\"Parking spaces\" matInput formControlName=\"parkingSpaces\" type=\"number\">\r\n          <mat-error *ngIf=\"propertyForm.controls['parkingSpaces'].hasError('pattern')\">\r\n            Valor invalido\r\n          </mat-error>\r\n        </mat-form-field>\r\n      </div>\r\n      <!-- Surfaces [START] Only visible for property type distinct INVESTMENT-->\r\n      <div class=\"features__item features-item-surface\" *ngIf=\"propertyType !== 'INVESTMENT'\">\r\n        <p class=\"features-item__label\">\r\n          <span class=\"label__icon ic-features-surface\"></span>\r\n          Superficie\r\n        </p>\r\n        <mat-radio-group class=\"features-item__radio-group\" formControlName=\"unit\">\r\n          <mat-radio-button class=\"features-item__radio-button\" [value]=\"'M2'\">m<sup>2</sup></mat-radio-button>\r\n          <mat-radio-button class=\"features-item__radio-button\" [value]=\"'FT2'\">sq ft</mat-radio-button>\r\n        </mat-radio-group>\r\n        <!--\r\n            Build area [START]\r\n            Only visible for HOUSE, APARTMENT, ROOM, OFFICE, RETAIL, WAREHOUSE and LAND  property types\r\n          -->\r\n        <mat-form-field appearance=\"outline\"\r\n                        *ngIf=\"propertyType !== 'INVESTMENT'\">\r\n          <mat-label>\r\n            <ng-container [ngSwitch]=\"propertyType\">\r\n              <span *ngSwitchDefault>Construida</span>\r\n              <span *ngSwitchCase=\"'OFFICE'\">De Oficinas</span>\r\n              <span *ngSwitchCase=\"'LAND'\">De Terreno</span>\r\n            </ng-container>\r\n          </mat-label>\r\n          <input autocomplete=\"off\" matInput=\"\" title=\"Surface build\" formControlName=\"mainArea\" type=\"number\">\r\n          <span matSuffix>\r\n                  <span *ngIf=\"propertyForm.controls['unit'].value === 'M2'\">m<sup>2</sup></span>\r\n                  <span *ngIf=\"propertyForm.controls['unit'].value === 'FT2'\">sq ft</span>\r\n                </span>\r\n          <mat-error *ngIf=\"propertyForm.controls['mainArea'].hasError('required')\">\r\n            Este campo es requerido\r\n          </mat-error>\r\n          <mat-error *ngIf=\"propertyForm.controls['mainArea'].hasError('pattern')\">\r\n            Valor invalido\r\n          </mat-error>\r\n        </mat-form-field>\r\n        <!-- Build area [END] -->\r\n        <!--\r\n          Secondary build area [START]\r\n          Only visible for HOUSE, and WAREHOUSE\r\n        -->\r\n        <mat-form-field appearance=\"outline\"\r\n                        *ngIf=\"propertyType === 'HOUSE' || propertyType === 'WAREHOUSE'\">\r\n          <mat-label>\r\n            <ng-container [ngSwitch]=\"propertyType\">\r\n              <span *ngSwitchCase=\"'HOUSE'\">De terreno</span>\r\n              <span *ngSwitchCase=\"'WAREHOUSE'\">De oficinas</span>\r\n            </ng-container>\r\n          </mat-label>\r\n          <input autocomplete=\"off\" matInput=\"\" title=\"Surface land build\" formControlName=\"secondaryArea\" type=\"number\">\r\n          <span matSuffix>\r\n                  <span *ngIf=\"propertyForm.controls['unit'].value === 'M2'\">m<sup>2</sup></span>\r\n                  <span *ngIf=\"propertyForm.controls['unit'].value === 'FT2'\">sq ft</span>\r\n                </span>\r\n          <mat-error *ngIf=\"propertyForm.controls['secondaryArea'].hasError('pattern')\">\r\n            Valor invalido\r\n          </mat-error>\r\n        </mat-form-field>\r\n        <!-- Secondary build area [END]-->\r\n      </div>\r\n      <!-- Surfaces [END]-->\r\n      <!-- Year build [START], Only visible for HOUSE, APARTMENT, ROOM, OFFICE, RETAIL and WAREHOUSE property types -->\r\n      <div class=\"features__item\"\r\n           *ngIf=\"propertyType === 'HOUSE' || propertyType === 'APARTMENT' || propertyType === 'ROOM' || propertyType === 'OFFICE' || propertyType  === 'RETAIL' || propertyType === 'WAREHOUSE'\">\r\n        <p class=\"features-item__label\">\r\n          <span class=\"label__icon\"><mat-icon>event</mat-icon></span>\r\n          A\u00F1o de construcci\u00F3n\r\n        </p>\r\n        <lib-property-custom-datepicker formControlName=\"buildIn\"></lib-property-custom-datepicker>\r\n      </div>\r\n      <!-- Year build [END]  -->\r\n      <!-- Land use [START], Only for LAND property type -->\r\n      <div class=\"features__item\" *ngIf=\"propertyType === 'LAND'\">\r\n        <p class=\"features-item__label\">\r\n          <span class=\"label__icon ic-features-land-use\"></span>\r\n          Uso de suelo\r\n        </p>\r\n        <mat-form-field appearance=\"outline\">\r\n          <mat-label>Tipo</mat-label>\r\n          <mat-select formControlName=\"landUse\">\r\n            <mat-option [value]=\"null\">\r\n              Seleccione una opci\u00F3n\r\n            </mat-option>\r\n            <ng-container *ngFor=\"let use of landUseList\">\r\n              <mat-option [value]=\"use.value\">\r\n                {{use.name}}\r\n              </mat-option>\r\n            </ng-container>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <!-- Land use [END]  -->\r\n    </div>\r\n  </div>\r\n  <!-- Features [END] -->\r\n  <hr>\r\n  <div class=\"agreement\">\r\n    <p class=\"section_label\">Contrato</p>\r\n    <div class=\"agreement__body\">\r\n      <mat-form-field appearance=\"outline\" class=\"agreement__form-field\">\r\n        <mat-label>Fecha de inicio</mat-label>\r\n        <input autocomplete=\"off\" matInput formControlName=\"agreementDate\" [matDatepicker]=\"dp2\"\r\n               placeholder=\"Seleccione una fecha\"\r\n               title=\"Chose a date\">\r\n        <mat-datepicker-toggle matSuffix [for]=\"dp2\"></mat-datepicker-toggle>\r\n        <mat-datepicker #dp2 [disabled]=\"false\"></mat-datepicker>\r\n      </mat-form-field>\r\n      <mat-form-field appearance=\"outline\" class=\"agreement__form-field\">\r\n        <mat-label>Duraci\u00F3n</mat-label>\r\n        <mat-select formControlName=\"duration\">\r\n          <mat-option [value]=\"null\">\r\n            Seleccione una opci\u00F3n\r\n          </mat-option>\r\n          <ng-container *ngFor=\"let time of durationList\">\r\n            <mat-option [value]=\"time\">\r\n              <ng-container [ngSwitch]=\"time\">\r\n                <span *ngSwitchCase=\"365\">1 a\u00F1o</span>\r\n                <span *ngSwitchCase=\"180\">6 meses</span>\r\n                <span *ngSwitchDefault>{{time}} d\u00EDas</span>\r\n              </ng-container>\r\n            </mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <mat-form-field appearance=\"outline\" class=\"agreement__form-field\">\r\n        <mat-label>Comisi\u00F3n</mat-label>\r\n        <mat-select formControlName=\"commission\">\r\n          <mat-option [value]=\"null\">\r\n            Seleccione una opci\u00F3n\r\n          </mat-option>\r\n          <ng-container *ngFor=\"let commission of commissionList\">\r\n            <mat-option [value]=\"commission\">\r\n              <span *ngIf=\"propertyForm.controls['offering'].value === 'RENT'\">\r\n                <ng-container [ngSwitch]=\"commission\">\r\n                  <span *ngSwitchCase=\"1\">1 mes = {{propertyForm.controls['price'].value * commission | currency : '' : 'symbol' : '1.0-0'}}</span>\r\n                  <span *ngSwitchDefault>\r\n                    {{commission}} meses = {{propertyForm.controls['price'].value * commission | currency : '' : 'symbol' : '1.0-0'}}\r\n                  </span>\r\n                </ng-container>\r\n              </span>\r\n              <span *ngIf=\"propertyForm.controls['offering'].value === 'SALE'\">\r\n                <span>{{commission * 100 | currency: '' : '': '1.1-1'}}\r\n                  % = {{propertyForm.controls['price'].value * commission | currency : '' : 'symbol' : '1.0-0'}}</span>\r\n              </span>\r\n            </mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n        <mat-error *ngIf=\"propertyForm.controls['commission'].hasError('commissionInvalid')\">\r\n          Es necesario ingresar el precio deseado\r\n        </mat-error>\r\n      </mat-form-field>\r\n      <ng-template [ngIf]=\"propertyType === 'INVESTMENT'\">\r\n        <mat-form-field appearance=\"outline\" class=\"investment-return__form-field\">\r\n          <mat-label>Retorno de Inversi\u00F3n</mat-label>\r\n          <input autocomplete=\"off\" matInput title=\"Investment return\" formControlName=\"roi\" type=\"number\">\r\n          <span matSuffix>%</span>\r\n        </mat-form-field>\r\n      </ng-template>\r\n      <mat-checkbox class=\"agreement__body-check-box\" formControlName=\"exclusivity\">Contrato con exclusividad\r\n      </mat-checkbox>\r\n      <mat-checkbox class=\"agreement__body-check-box\" formControlName=\"mlm\">Quiero compartir en el {{mlsLabel || 'MLS'}}</mat-checkbox>\r\n      <mat-form-field appearance=\"outline\" class=\"agreement__form-field\" *ngIf=\"propertyForm.controls['mlm'].value\">\r\n        <mat-label>Monto de comisi\u00F3n compartida</mat-label>\r\n        <mat-select formControlName=\"sharedCommission\">\r\n          <mat-option [value]=\"null\">\r\n            Seleccione una opci\u00F3n\r\n          </mat-option>\r\n          <ng-container *ngFor=\"let commission of sharedCommissionList\">\r\n            <mat-option [value]=\"commission\">\r\n              {{commission * 100}}% de mi comisi\u00F3n\r\n              = {{propertyForm.controls['price'].value * propertyForm.controls['commission'].value * commission | currency : '' : 'symbol' : '1.0-0'}}\r\n            </mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n        <mat-error *ngIf=\"propertyForm.controls['sharedCommission'].hasError('sharedCommissionInvalid')\">\r\n          Debe seleccionar su comisi\u00F3n\r\n        </mat-error>\r\n        <mat-error *ngIf=\"propertyForm.controls['sharedCommission'].hasError('required')\">\r\n          Este campo es requerido\r\n        </mat-error>\r\n      </mat-form-field>\r\n    </div>\r\n  </div>\r\n  <hr>\r\n  <div class=\"description\">\r\n    <p class=\"section_label\">Descripci\u00F3n</p>\r\n    <mat-form-field appearance=\"outline\" class=\"description__form-field\">\r\n      <textarea matInput=\"\" cdkTextareaAutosize title=\"Description\" formControlName=\"description\"></textarea>\r\n      <mat-hint align=\"end\"><span>N\u00FAmero de caracteres ideal: 3500</span>\r\n        Actuales: {{propertyForm.controls['description'].value ? propertyForm.controls['description'].value.length : 0}}\r\n      </mat-hint>\r\n      <mat-error *ngIf=\"propertyForm.controls['description'].hasError('required')\">\r\n        Este campo es requerido\r\n      </mat-error>\r\n    </mat-form-field>\r\n  </div>\r\n  <div class=\"external-link\">\r\n    <p class=\"section_label\">Tour virtual</p>\r\n    <mat-form-field appearance=\"outline\" class=\"external-link__form-field\">\r\n      <input matInput=\"\" title=\"externalLink\" formControlName=\"externalLink\">\r\n      <mat-error *ngIf=\"propertyForm.controls['externalLink'].hasError('pattern')\">\r\n        Url invalida\r\n      </mat-error>\r\n    </mat-form-field>\r\n  </div>\r\n  <div class=\"notes\">\r\n    <p class=\"section_label\">Notas</p>\r\n    <mat-form-field appearance=\"outline\" class=\"notes__form-field\">\r\n      <textarea matInput=\"\" cdkTextareaAutosize title=\"Notes\" formControlName=\"notes\"></textarea>\r\n    </mat-form-field>\r\n  </div>\r\n  <hr *ngIf=\"propertyType !== 'INVESTMENT'\">\r\n  <div class=\"amenities\" *ngIf=\"propertyType !== 'INVESTMENT'\">\r\n    <p class=\"section_label\">Amenidades</p>\r\n    <p class=\"amenities__list-amenities\">\r\n      <ng-container *ngFor=\"let amenity of amenitiesList\">\r\n        <span matRipple class=\"list-amenities__amenity\" (click)=\"updateAmenity(amenity)\">\r\n          <span class=\"amenity__icon ic-amenities-{{amenity.iconName}}\"\r\n                [ngClass]=\"{'amenity__icon-active': amenity.checked}\"></span>\r\n          <span class=\"amenity__text\">{{amenity.name}}</span>\r\n        </span>\r\n      </ng-container>\r\n    </p>\r\n  </div>\r\n  <div class=\"attributes\" *ngIf=\"propertyType !== 'INVESTMENT'\">\r\n    <p class=\"section_label\">Caracteristicas de ubicaci\u00F3n</p>\r\n    <p class=\"amenities__list-amenities\">\r\n      <ng-container *ngFor=\"let feature of featuresList\">\r\n        <span matRipple class=\"list-amenities__amenity\" (click)=\"updateAmenity(feature)\">\r\n          <span class=\"amenity__icon ic-amenities-{{feature.iconName}}\"\r\n                [ngClass]=\"{'amenity__icon-active': feature.checked}\"></span>\r\n          <span class=\"amenity__text\">{{feature.name}}</span>\r\n        </span>\r\n      </ng-container>\r\n    </p>\r\n  </div>\r\n  <button type=\"submit\" class=\"button-submit\" mat-button #btnSubmit>Enviar</button>\r\n</form>\r\n",
                 providers: [
                     { provide: MAT_DATE_LOCALE, useValue: 'es-MX' },
                     { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS] },
@@ -5498,8 +5553,8 @@ class DetailsComponent {
 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      <span\r\n        class=\"ic-property-{{propertyType.iconName}}\"></span>{{property.type | propertyType}} {{property.offering | offeringType}}\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%}.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}"]
+                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:(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 */
@@ -5799,7 +5854,7 @@ CustomDatepickerComponent.ctorParameters = () => [
 /** @type {?} */
 const MATERIAL$1 = [
     MatFormFieldModule,
-    MatInputModule,
+    MatInputModule$1,
     MatDatepickerModule,
     MatButtonModule,
     MatIconModule
@@ -6007,7 +6062,7 @@ const MATERIAL$2 = [
     MatIconModule,
     MatButtonToggleModule,
     MatRadioModule,
-    MatInputModule,
+    MatInputModule$1,
     MatFormFieldModule,
     MatSelectModule,
     MatSidenavModule,
@@ -6131,6 +6186,14 @@ class PropertyCardComponent {
         this.favoriteChanged = new EventEmitter();
         this.propertyDiscarded = new EventEmitter();
     }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+        if (this.positionLatLng) {
+            this.latLng(this.positionLatLng.latitude, this.positionLatLng.longitude);
+        }
+    }
     /**
      * @param {?} changes
      * @return {?}
@@ -6169,12 +6232,66 @@ class PropertyCardComponent {
     discard() {
         this.propertyDiscarded.emit(this.info.propertyId);
     }
+    /**
+     * @private
+     * @param {?} deg
+     * @return {?}
+     */
+    deg2rad(deg) {
+        return deg * (Math.PI / 180);
+    }
+    /**
+     * @private
+     * @param {?} lat
+     * @param {?} lng
+     * @return {?}
+     */
+    latLng(lat, lng) {
+        /** @type {?} */
+        const lat1 = lat;
+        /** @type {?} */
+        const lon1 = lng;
+        /** @type {?} */
+        const lat2 = this.marker.location.latitude;
+        /** @type {?} */
+        const lon2 = this.marker.location.longitude;
+        /** @type {?} */
+        const R = 6371;
+        // Radius of the earth in km
+        /** @type {?} */
+        const dLat = this.deg2rad(lat2 - lat1);
+        // deg2rad below
+        /** @type {?} */
+        const dLon = this.deg2rad(lon2 - lon1);
+        /** @type {?} */
+        const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+            Math.cos(this.deg2rad(lat1)) * Math.cos(this.deg2rad(lat2)) *
+                Math.sin(dLon / 2) * Math.sin(dLon / 2);
+        /** @type {?} */
+        const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+        /** @type {?} */
+        let d = R * c;
+        if (Math.trunc(d) < 1) {
+            d = d * 1000;
+            d = Math.trunc(d);
+            if (d < 10) {
+                this.distance = 10 + ' m de su búsqueda';
+            }
+            else {
+                d = d - (d % 10);
+                this.distance = d + ' m de su búsqueda';
+            }
+        }
+        else {
+            this.distance = d.toFixed(2) + ' km de su búsqueda';
+        }
+    }
 }
 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  <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      <h2 class=\"property-card__price\">\r\n        {{info.price | currency : currency : 'symbol' : '1.0-0'}} {{info.currency}}\r\n      </h2>\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}.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__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}"]
+                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  <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}.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 */
@@ -6187,6 +6304,7 @@ PropertyCardComponent.propDecorators = {
     target: [{ type: Input }],
     queryParams: [{ type: Input }],
     state: [{ type: Input }],
+    positionLatLng: [{ type: Input }],
     isFavorite: [{ type: Input }],
     currency: [{ type: Input }],
     showDiscard: [{ type: Input }],