@maplander/components 0.21.76 → 0.21.77
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/maplander-components.umd.js +12 -12
- package/bundles/maplander-components.umd.js.map +1 -1
- package/bundles/maplander-components.umd.min.js +2 -2
- package/bundles/maplander-components.umd.min.js.map +1 -1
- package/esm2015/lib/components/filters/filters.component.js +1 -1
- package/esm2015/lib/components/panorama-visor/panorama-visor.component.js +3 -3
- package/esm2015/lib/components/property/components/details/details.component.js +1 -1
- package/esm2015/lib/components/property/components/editor/editor.component.js +3 -3
- package/esm2015/lib/components/property/components/gallery/gallery.component.js +1 -1
- package/esm2015/lib/components/property/components/multimedia-uploader/multimedia-uploader.component.js +1 -1
- package/esm2015/lib/components/property/components/property/property.component.js +1 -1
- package/esm2015/lib/components/property/components/slideshow/slide-show.component.js +1 -1
- package/esm2015/lib/components/property/components/stats/stats.component.js +1 -1
- package/esm2015/lib/components/property-card/property-card.component.js +1 -1
- package/esm5/lib/components/filters/filters.component.js +1 -1
- package/esm5/lib/components/panorama-visor/panorama-visor.component.js +3 -3
- package/esm5/lib/components/property/components/details/details.component.js +1 -1
- package/esm5/lib/components/property/components/editor/editor.component.js +3 -3
- package/esm5/lib/components/property/components/gallery/gallery.component.js +1 -1
- package/esm5/lib/components/property/components/multimedia-uploader/multimedia-uploader.component.js +1 -1
- package/esm5/lib/components/property/components/property/property.component.js +1 -1
- package/esm5/lib/components/property/components/slideshow/slide-show.component.js +1 -1
- package/esm5/lib/components/property/components/stats/stats.component.js +1 -1
- package/esm5/lib/components/property-card/property-card.component.js +1 -1
- package/fesm2015/maplander-components.js +12 -12
- package/fesm2015/maplander-components.js.map +1 -1
- package/fesm5/maplander-components.js +12 -12
- package/fesm5/maplander-components.js.map +1 -1
- package/maplander-components.metadata.json +1 -1
- package/package.json +1 -1
|
@@ -2911,7 +2911,7 @@ FiltersComponent.decorators = [
|
|
|
2911
2911
|
{ type: Component, args: [{
|
|
2912
2912
|
selector: 'lib-filters',
|
|
2913
2913
|
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 <h4 class=\"--title\">\r\n Divisa\r\n </h4>\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\" placeholder=\"Divisa\">\r\n <ng-container *ngFor=\"let currency of currencyList\">\r\n <mat-option [value]=\"currency.type\" (click)=\"changeCurrency(currency.type)\">\r\n {{currency.type}}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n <mat-button-toggle-group class=\"offering-type-list\" name=\"offering-type\" formControlName=\"offering\"\r\n aria-label=\"Offering type\">\r\n <mat-button-toggle (click)=\"changeOffering('SALE')\" [value]=\"'SALE'\"\r\n [disabled]=\"propertyTypeSelected.value === 'NONE' || propertyTypeSelected.value === 'ROOM'\">\r\n Venta\r\n </mat-button-toggle>\r\n <mat-button-toggle (click)=\"changeOffering('RENT')\" [value]=\"'RENT'\"\r\n [disabled]=\"propertyTypeSelected.value === 'NONE' || propertyTypeSelected.value === 'INVESTMENT'\">\r\n Renta\r\n </mat-button-toggle>\r\n </mat-button-toggle-group>\r\n </div>\r\n <div class=\"mat-elevation-z2\" [ngClass]=\"{'property-type-list': !newFilters, 'new-property-type-list': newFilters}\">\r\n <ng-container *ngFor=\"let type of propertyTypeList; let i = index\">\r\n <ng-template [ngIf]=\"type.value !== 'NONE' && (type.value !== 'ROOM' && newFilters)\">\r\n <div class=\"property-type-list__button\">\r\n <div\r\n class=\"property-type-list__border\"\r\n [ngClass]=\"{'property-type-list__border--active': (type.value === propertyTypeSelected.value) || (propertyTypeSelected.value === 'NONE') || ((type.value === 'HOUSE' || type.value === 'APARTMENT') && propertyTypeSelected.value === 'RESIDENTIAL')}\"\r\n [ngStyle]=\"{'border-color': 'var(--' + type.iconName + ')'}\">\r\n <button mat-mini-fab=\"\" type=\"button\" (click)=\"changePropertyType(i)\"\r\n [ngStyle]=\"{'background-color': 'var(--' + type.iconName + ')'}\">\r\n <span class=\"property-type-list__icon ic-property-{{type.iconName}}\"></span>\r\n </button>\r\n </div>\r\n <span class=\"property-type-list__label\">{{type.shortName}}</span>\r\n <ng-template [ngIf]=\"type.value === 'RESIDENTIAL' && propertyTypeSelected.value === 'RESIDENTIAL'\">\r\n <div class=\"property-type-list__divider property-type-list__divider--left\"></div>\r\n <div class=\"property-type-list__divider property-type-list__divider--right\"></div>\r\n </ng-template>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n <ng-template [ngIf]=\"isOPI\">\r\n <div class=\"all\">\r\n <button mat-raised-button=\"\" type=\"button\" class=\"all__button\"\r\n [ngClass]=\"{'all__button--active': propertyTypeSelected.value === 'NONE'}\"\r\n (click)=\"changePropertyType(9)\">Todo\r\n </button>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <ng-template [ngIf]=\"propertyTypeSelected.value !== 'NONE'\">\r\n <mat-divider></mat-divider>\r\n <div class=\"--padding\">\r\n <h4 class=\"--title\">\r\n 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 placeholder=\"M\u00EDnimo\" libFormatPrice [currency]=\"filtersForm.controls['currency'].value\" [control]=\"filtersForm.controls['minPrice']\"\r\n autocomplete=\"off\" matInput=\"\" type=\"text\" title=\"Min price\" formControlName=\"minPrice\" min=\"1\" (blur)=\"changePrice()\">\r\n <mat-error *ngIf=\"filtersForm.controls['minPrice'].hasError('pattern')\">\r\n Debe ingresar solo n\u00FAmeros\r\n </mat-error>\r\n <mat-error *ngIf=\"filtersForm.controls['minPrice'].hasError('required')\">\r\n Este campo es requerido\r\n </mat-error>\r\n </mat-form-field>\r\n <!-- Min price [END] -->\r\n <!-- Max price [START] -->\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>M\u00E1ximo</mat-label>\r\n <input placeholder=\"M\u00E1ximo\" libFormatPrice [currency]=\"filtersForm.controls['currency'].value\" [control]=\"filtersForm.controls['maxPrice']\"\r\n autocomplete=\"off\" matInput=\"\" type=\"text\" title=\"max price\" formControlName=\"maxPrice\" (blur)=\"changePrice()\">\r\n <mat-error *ngIf=\"filtersForm.controls['maxPrice'].hasError('pattern')\">\r\n Debe ingresar solo n\u00FAmeros\r\n </mat-error>\r\n <mat-error *ngIf=\"filtersForm.controls['maxPrice'].hasError('required')\">\r\n Este campo es requerido\r\n </mat-error>\r\n <mat-error *ngIf=\"filtersForm.controls['maxPrice'].hasError('currency')\">\r\n Valor m\u00EDnimo excedido\r\n </mat-error>\r\n </mat-form-field>\r\n <!-- Max price [END] -->\r\n </div>\r\n <div class=\"features\">\r\n <ng-template\r\n [ngIf]=\"propertyTypeSelected.value === 'RESIDENTIAL' || propertyTypeSelected.value === 'HOUSE' || propertyTypeSelected.value === 'APARTMENT'\">\r\n <div class=\"features__bedrooms\">\r\n <h4 class=\"--title\">\r\n Habitaciones\r\n </h4>\r\n <mat-button-toggle-group name=\"bedrooms\" aria-label=\"Bedrooms\" formControlName=\"bedrooms\">\r\n <ng-container *ngFor=\"let bedroom of bedroomsList\">\r\n <ng-template [ngIf]=\"bedroom === 0\" [ngIfElse]=\"bedroomNumber\">\r\n <mat-button-toggle [value]=\"bedroom\" (click)=\"changeFilter()\" class=\"features__bedrooms--unlimited\">\r\n Sin <br> l\u00EDmite\r\n </mat-button-toggle>\r\n </ng-template>\r\n <ng-template #bedroomNumber>\r\n <mat-button-toggle [value]=\"bedroom\" (click)=\"changeFilter()\">{{bedroom}}+\r\n </mat-button-toggle>\r\n </ng-template>\r\n </ng-container>\r\n </mat-button-toggle-group>\r\n </div>\r\n <div class=\"features__bathrooms\">\r\n <h4 class=\"--title\">\r\n Ba\u00F1os\r\n </h4>\r\n <mat-button-toggle-group name=\"bathrooms\" aria-label=\"Bathrooms\" formControlName=\"bathrooms\">\r\n <ng-container *ngFor=\"let bathroom of bathroomsList\">\r\n <ng-template [ngIf]=\"bathroom === 0\" [ngIfElse]=\"bathroomNumber\">\r\n <mat-button-toggle [value]=\"bathroom\" (click)=\"changeFilter()\"\r\n class=\"features__bathrooms--unlimited\">\r\n Sin <br> l\u00EDmite\r\n </mat-button-toggle>\r\n </ng-template>\r\n <ng-template #bathroomNumber>\r\n <mat-button-toggle [value]=\"bathroom\" (click)=\"changeFilter()\">{{bathroom}}+\r\n </mat-button-toggle>\r\n </ng-template>\r\n </ng-container>\r\n </mat-button-toggle-group>\r\n </div>\r\n </ng-template>\r\n <ng-template [ngIf]=\"propertyTypeSelected.value !== 'LAND' && propertyTypeSelected.value !== 'INVESTMENT'\">\r\n <div class=\"features__parking-places\">\r\n <h4 class=\"--title\">\r\n Estacionamientos\r\n </h4>\r\n <mat-button-toggle-group name=\"parking_places\" aria-label=\"Parking Places\"\r\n formControlName=\"parkingPlaces\">\r\n <ng-container *ngFor=\"let parking of parkingPlacesList\">\r\n <ng-template [ngIf]=\"parking === 0\" [ngIfElse]=\"parkingNumber\">\r\n <mat-button-toggle [value]=\"parking\" (click)=\"changeFilter()\"\r\n class=\"features__parking-places--unlimited\">\r\n Sin <br> l\u00EDmite\r\n </mat-button-toggle>\r\n </ng-template>\r\n <ng-template #parkingNumber>\r\n <mat-button-toggle [value]=\"parking\" (click)=\"changeFilter()\">{{parking}}+\r\n </mat-button-toggle>\r\n </ng-template>\r\n </ng-container>\r\n </mat-button-toggle-group>\r\n </div>\r\n </ng-template>\r\n <ng-template [ngIf]=\"propertyTypeSelected.value !== 'INVESTMENT'\">\r\n <div class=\"features__surface\">\r\n <h4 class=\"--title\">\r\n 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\" placeholder=\"\u00C1rea\">\r\n <mat-option [value]=\"0\" (click)=\"changeFilter()\">\r\n Sin l\u00EDmite\r\n </mat-option>\r\n <ng-container *ngFor=\"let surface of surfaceList\">\r\n <mat-option [value]=\"surface\" (click)=\"changeFilter()\">\r\n {{surface}}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n <mat-button-toggle-group name=\"unit_surface\" aria-label=\"Unit surface\" formControlName=\"surfaceUnit\">\r\n <mat-button-toggle [value]=\"0\" (click)=\"changeFilter()\">m2</mat-button-toggle>\r\n <mat-button-toggle [value]=\"1\" (click)=\"changeFilter()\">sq ft</mat-button-toggle>\r\n </mat-button-toggle-group>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template [ngIf]=\"propertyTypeSelected.value === 'INVESTMENT'\">\r\n <div class=\"feature investment\">\r\n <h4 class=\"--title\">Retorno de inversi\u00F3n</h4>\r\n <mat-form-field appearance=\"outline\" class=\"--col\">\r\n <mat-label>Porcentaje</mat-label>\r\n <mat-select formControlName=\"roi\" placeholder=\"Porcentaje\">\r\n <mat-option [value]=\"0\" (click)=\"changeFilter()\">\r\n Sin l\u00EDmite\r\n </mat-option>\r\n <ng-container *ngFor=\"let roi of roiList\">\r\n <mat-option [value]=\"roi\" (click)=\"changeFilter()\">\r\n {{roi}}%\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </ng-template>\r\n <div class=\"amenities-container\" *ngIf=\"!hideAmenities\">\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 class=\"actions\">\r\n <ng-template [ngIf]=\"!isOPI\">\r\n <button mat-flat-button=\"\" type=\"button\" class=\"action__button\" color=\"primary\" (click)=\"resetFilters(isRV ? 1 : null)\">\r\n LIMPIAR\r\n </button>\r\n </ng-template>\r\n <button mat-flat-button type=\"submit\" class=\"apply-button\" color=\"primary\" (click)=\"applyFilters()\" [disabled]=\"totalProperties === 0\">\r\n <span class=\"normal-text\">VER {{totalProperties}} {{totalProperties === 1 ? 'PROPIEDAD' : 'PROPIEDADES'}}</span>\r\n <span class=\"mobile-text\">BUSCAR</span>\r\n </button>\r\n </div>\r\n </div>\r\n <!--div class=\"actions\">\r\n <ng-template [ngIf]=\"!isOPI\" [ngIfElse]=\"closeButtonTemplate\">\r\n <button mat-flat-button=\"\" type=\"button\" class=\"action__button\" color=\"primary\" (click)=\"saveSearchByFilters()\">\r\n GUARDAR\r\n </button>\r\n </ng-template>\r\n <ng-template #closeButtonTemplate>\r\n <button mat-flat-button=\"\" type=\"button\" class=\"action__button\" color=\"primary\" (click)=\"close()\">CERRAR</button>\r\n </ng-template>\r\n <button mat-flat-button=\"\" type=\"button\" class=\"action__button\" color=\"primary\"\r\n (click)=\"resetFilters()\">LIMPIAR\r\n </button>\r\n </div-->\r\n</form>\r\n",
|
|
2914
|
-
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}.filters .float-button-close{position:absolute;top:16px;right:16px;height:16px;border-radius:50%}.filters .apply-button{width:45%;border-radius:28px;height:40px;font-size:18px;font-weight:500}.filters .apply-button .mobile-text{display:none}.filters .apply-button .normal-text{display:initial}.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 .apply-button .mobile-text{display:initial}.filters .apply-button .normal-text{display:none}.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:(
|
|
2914
|
+
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}.filters .float-button-close{position:absolute;top:16px;right:16px;height:16px;border-radius:50%}.filters .apply-button{width:45%;border-radius:28px;height:40px;font-size:18px;font-weight:500}.filters .apply-button .mobile-text{display:none}.filters .apply-button .normal-text{display:initial}.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 .apply-button .mobile-text{display:initial}.filters .apply-button .normal-text{display:none}.filters .header{flex-direction:column}.filters .currency{width:70%;margin-bottom:8px}}.filters .offering-type-list{width:40%;border-radius:16px}.filters .offering-type-list mat-button-toggle{width:50%;height:36px}.filters ::ng-deep .offering-type-list mat-button-toggle button{height:36px}.filters ::ng-deep .offering-type-list mat-button-toggle button .mat-button-toggle-label-content{line-height:36px}.filters .property-type-list{display:-ms-grid;display:grid;-ms-grid-columns:(calc(100% / 9))[9];grid-template-columns:repeat(9,calc(100% / 9));-ms-grid-rows:(80px)[1];grid-template-rows:repeat(1,80px);border-radius:40px;padding:8px;box-sizing:border-box}@media screen and (max-width:600px){.filters .offering-type-list{width:70%}.filters .property-type-list{-ms-grid-columns:(calc(100% / 3))[3];grid-template-columns:repeat(3,calc(100% / 3));-ms-grid-rows:(80px)[3];grid-template-rows:repeat(3,80px)}}.filters .new-property-type-list{display:-ms-grid;display:grid;-ms-grid-columns:(calc(100% / 8))[8];grid-template-columns:repeat(8,calc(100% / 8));-ms-grid-rows:(80px)[1];grid-template-rows:repeat(1,80px);border-radius:40px;padding:8px;box-sizing:border-box}.filters .property-type-list .property-type-list__button{margin:auto;position:relative}.filters .property-type-list .property-type-list__button button{box-shadow:none}.filters .property-type-list .property-type-list__icon{width:24px;height:24px;font-size:24px}.filters .property-type-list .property-type-list__border{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:auto;opacity:.7;border-radius:50%;box-sizing:border-box}.filters .property-type-list .property-type-list__border--active{padding:4px;border:2px solid;opacity:1!important}.filters .property-type-list .property-type-list__label{font-size:12px;display:block;margin:8px 0;text-align:center}.filters .property-type-list .property-type-list__divider{width:14%;height:2px;background:#707070;top:30%;position:absolute}.filters .property-type-list .property-type-list__divider--left{left:-9px}.filters .property-type-list .property-type-list__divider--right{right:-9px}@media screen and (max-width:600px){.filters .new-property-type-list{-ms-grid-columns:(calc(100% / 3))[3];grid-template-columns:repeat(3,calc(100% / 3));-ms-grid-rows:(80px)[3];grid-template-rows:repeat(3,80px)}.filters .property-type-list .property-type-list__divider{width:60%}.filters .property-type-list .property-type-list__divider--left{left:-38px}.filters .property-type-list .property-type-list__divider--right{right:-38px}}.filters .new-property-type-list .property-type-list__button{margin:auto;position:relative}.filters .new-property-type-list .property-type-list__button button{box-shadow:none}.filters .new-property-type-list .property-type-list__icon{width:24px;height:24px;font-size:24px}.filters .new-property-type-list .property-type-list__border{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:auto;opacity:.7;border-radius:50%;box-sizing:border-box}.filters .new-property-type-list .property-type-list__border--active{padding:4px;border:2px solid;opacity:1!important}.filters .new-property-type-list .property-type-list__label{font-size:12px;display:block;margin:8px 0;text-align:center}.filters .new-property-type-list .property-type-list__divider{width:14%;height:2px;background:#707070;top:30%;position:absolute}.filters .new-property-type-list .property-type-list__divider--left{left:-9px}.filters .new-property-type-list .property-type-list__divider--right{right:-9px}@media screen and (max-width:600px){.filters .new-property-type-list .property-type-list__divider{width:60%}.filters .new-property-type-list .property-type-list__divider--left{left:-38px}.filters .new-property-type-list .property-type-list__divider--right{right:-38px}}.filters .all{width:100%;margin:8px 0}.filters .all .all__button{margin:0 40%;width:20%;border-radius:16px;background:0 0}.filters .budget{display:flex}.filters .budget mat-form-field{margin-right:8px;width:calc(100% / 2 - 8px)}.filters .features{display:-ms-grid;display:grid;-ms-grid-columns:(50%)[2];grid-template-columns:repeat(2,50%);-ms-grid-rows:(auto)[2];grid-template-rows:repeat(2,auto)}@media screen and (max-width:600px){.filters .all .all__button{width:50%;margin:0 25%}.filters .features{display:block}.filters .amenities-container{flex-direction:column}}.filters .features .features__bathrooms mat-button-toggle-group,.filters .features .features__bedrooms mat-button-toggle-group,.filters .features .features__parking-places mat-button-toggle-group{width:calc(100% - 16px);border:none}.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{border-radius:50%;margin:4px auto;box-shadow:0 0 4px;width:18%}.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;border:24px}.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;position:absolute;bottom:16px;width:100%;justify-content:space-around}.filters .actions .action__button{width:45%;border-radius:28px;height:40px;font-size:18px;font-weight:500}"]
|
|
2915
2915
|
}] }
|
|
2916
2916
|
];
|
|
2917
2917
|
/** @nocollapse */
|
|
@@ -3041,7 +3041,7 @@ class PanoramaVisorComponent {
|
|
|
3041
3041
|
* @return {?}
|
|
3042
3042
|
*/
|
|
3043
3043
|
() => {
|
|
3044
|
-
return this._lazy.load('https://
|
|
3044
|
+
return this._lazy.load('https://cdn.jsdelivr.net/npm/panolens@0.12.1/build/panolens.min.js');
|
|
3045
3045
|
})).then((/**
|
|
3046
3046
|
* @return {?}
|
|
3047
3047
|
*/
|
|
@@ -3210,7 +3210,7 @@ PanoramaVisorComponent.decorators = [
|
|
|
3210
3210
|
{ type: Component, args: [{
|
|
3211
3211
|
selector: 'lib-panorama-visor',
|
|
3212
3212
|
template: "<div class=\"panorama-visor\">\r\n <ng-template [ngIf]=\"!showPanorama\">\r\n <div class=\"panorama-visor__loading\">\r\n <img class=\"loading__image\" src=\"https://storage.googleapis.com/maplander-develop/public/file/front-end/cdn/360-animation.gif\" alt=\"360 icon\">\r\n <p class=\"loading__label\">Cargando...</p>\r\n </div>\r\n </ng-template>\r\n <div #container class=\"panorama-visor__container\" [ngStyle]=\"{'opacity': showPanorama ? '1' : '0'}\">\r\n <div class=\"panorama-visor__actions\">\r\n <a mat-icon-button class=\"actions__menu-item\">\r\n <mat-icon>settings</mat-icon>\r\n <ul class=\"menu-item__hidden-list mat-elevation-z2\">\r\n <li mat-menu-item class=\"hidden-list__item\">\r\n Control\r\n <ul class=\"hidden-list__nested-list mat-elevation-z2\">\r\n <li mat-menu-item class=\"nested-list__item\" *ngIf=\"!isTouch\" (click)=\"changeControl('MOUSE')\">\r\n Mouse\r\n </li>\r\n <li mat-menu-item class=\"nested-list__item\" *ngIf=\"isTouch\" (click)=\"changeControl('TOUCH')\">\r\n Touch\r\n </li>\r\n <li mat-menu-item class=\"nested-list__item\" (click)=\"changeControl('SENSOR')\">\r\n Sensor\r\n </li>\r\n </ul>\r\n </li>\r\n <li mat-menu-item class=\"hidden-list__item\">\r\n Mode\r\n <ul class=\"hidden-list__nested-list mat-elevation-z2\">\r\n <li mat-menu-item class=\"nested-list__item\" (click)=\"changeMode('NORMAL')\">\r\n Normal\r\n </li>\r\n <li mat-menu-item class=\"nested-list__item\" (click)=\"changeMode('CARDBOARD')\">\r\n Cardboard\r\n </li>\r\n <li mat-menu-item class=\"nested-list__item\" (click)=\"changeMode('STEREOSCOPIC')\">\r\n Stereoscopic\r\n </li>\r\n </ul>\r\n </li>\r\n </ul>\r\n </a>\r\n <button mat-icon-button (click)=\"fullscreen()\">\r\n <mat-icon *ngIf=\"!isFullScreen\">fullscreen</mat-icon>\r\n <mat-icon *ngIf=\"isFullScreen\">fullscreen_exit</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n",
|
|
3213
|
-
styles: [":host{display:block;width:inherit;height:inherit}.panorama-visor{width:100%;padding-bottom:
|
|
3213
|
+
styles: [":host{display:block;width:inherit;height:inherit}.panorama-visor{width:100%;padding-bottom:calc(100% / 4 * 3);position:relative;border-radius:8px;transition:.2s;cursor:move}.panorama-visor__loading{position:absolute;width:100%;height:100%;font-size:12px;display:flex;flex-direction:column;align-items:center;justify-content:center}.loading__image{width:200px}.loading__label{color:#fff;font-weight:700}.panorama-visor__actions{position:absolute;border-radius:0 8px 8px 0;background:rgba(0,0,0,.4);z-index:100;color:#fff}.panorama-visor__actions button{display:block}.actions__menu-item{position:relative}.actions__menu-item:hover .menu-item__hidden-list,.hidden-list__item:hover .hidden-list__nested-list{display:block}.hidden-list__nested-list,.menu-item__hidden-list{display:none;list-style:none;position:absolute;background:#fff;margin:0;padding:0;left:calc(100% - 8px);top:0;z-index:1;border-radius:4px}.hidden-list__item,.nested-list__item{min-width:80px;padding:0 16px;text-align:left;cursor:pointer}.panorama-visor__container{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:8px;transition:250ms}::ng-deep .panorama-visor__container canvas{width:100%!important;height:100%!important}"]
|
|
3214
3214
|
}] }
|
|
3215
3215
|
];
|
|
3216
3216
|
/** @nocollapse */
|
|
@@ -3592,7 +3592,7 @@ MultimediaUploaderComponent.decorators = [
|
|
|
3592
3592
|
{ type: Component, args: [{
|
|
3593
3593
|
selector: 'lib-property-multimedia-uploader',
|
|
3594
3594
|
template: "<div class=\"multimedia-uploader\">\r\n <p class=\"title\">\r\n Multimedia\r\n <ng-template [ngIf]=\"currentIndex !== 2\">\r\n <lib-upload-file [content]=\"buttonUploadTemplate\" [noCrop]=\"true\" [fab]=\"true\" [fileType]=\"fileType\" [aspectRatio]=\"4 / 3\"\r\n [multiple]=\"true\"\r\n (loadImage)=\"onUploadImage($event)\">\r\n <ng-template #buttonUploadTemplate>\r\n <button mat-icon-button color=\"primary\">\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n </ng-template>\r\n </lib-upload-file>\r\n </ng-template>\r\n </p>\r\n <mat-tab-group class=\"multimedia-uploader__tab-group\" [selectedIndex]=\"currentIndex\"\r\n (selectedIndexChange)=\"onTabChanged($event)\">\r\n <mat-tab label=\"Fotografias\">\r\n <lib-custom-drag-and-drop [items]=\"images\" [content]=\"imageTemplate\" (itemsChanged)=\"onListChanged($event)\">\r\n <ng-template #imageTemplate let-image=\"image\" let-index=\"index\">\r\n <div class=\"list__item\" [ngClass]=\"{'first-photo': index === 0}\">\r\n <img alt=\"Property image\" [src]=\"image.fileCS.thumbnail\" class=\"list__item-img\">\r\n <button mat-icon-button class=\"list__item-button mat-elevation-z2\" (click)=\"removeMedia(image)\">\r\n <mat-icon class=\"list__item-icon\">close</mat-icon>\r\n </button>\r\n </div>\r\n </ng-template>\r\n </lib-custom-drag-and-drop>\r\n </mat-tab>\r\n <mat-tab label=\"Esfericas\">\r\n <lib-custom-drag-and-drop [items]=\"images360\" [content]=\"image360Template\" (itemsChanged)=\"onListChanged($event)\">\r\n <ng-template #image360Template let-image=\"image\">\r\n <div class=\"list__item\">\r\n <img alt=\"Property image\" [src]=\"image.fileCS.thumbnail\" class=\"list__item-img\">\r\n <button mat-icon-button class=\"list__item-button mat-elevation-z2\" (click)=\"removeMedia(image)\">\r\n <mat-icon class=\"list__item-icon\">close</mat-icon>\r\n </button>\r\n </div>\r\n </ng-template>\r\n </lib-custom-drag-and-drop>\r\n </mat-tab>\r\n <mat-tab label=\"Videos\">\r\n <div class=\"you-tube-container\">\r\n <span class=\"you-tube-container__searchbox\">\r\n <button *ngIf=\"inputYouTube.value !== ''\" mat-icon-button class=\"you-tube-container__close-btn\"\r\n (click)=\"inputYouTube.value = ''\"><mat-icon>close</mat-icon></button>\r\n <input class=\"you-tube-container__input\" #inputYouTube (input)=\"onYouTubeInputTextChanged(inputYouTube)\"\r\n title=\"YouTube URL\" placeholder=\"YouTube URL o YouTube Video ID\">\r\n </span>\r\n <a href=\"https://www.youtube.com\" target=\"_blank\" mat-button color=\"primary\">\r\n Ir a Youtube\r\n </a>\r\n </div>\r\n <lib-custom-drag-and-drop [items]=\"videos\" [content]=\"videosTemplate\" (itemsChanged)=\"onListChanged($event)\">\r\n <ng-template #videosTemplate let-image=\"image\">\r\n <div class=\"list__item\">\r\n <img alt=\"Property image\" [src]=\"'https://i3.ytimg.com/vi/'+image.fileCS.thumbnail+'/hqdefault.jpg'\"\r\n class=\"list__item-img\">\r\n <button mat-icon-button class=\"list__item-button mat-elevation-z2\" (click)=\"removeMedia(image)\">\r\n <mat-icon class=\"list__item-icon\">close</mat-icon>\r\n </button>\r\n </div>\r\n </ng-template>\r\n </lib-custom-drag-and-drop>\r\n </mat-tab>\r\n </mat-tab-group>\r\n <div class=\"multimedia-uploader__actions\">\r\n <button mat-flat-button color=\"primary\" class=\"actions__button\" (click)=\"close()\">\r\n CERRAR\r\n </button>\r\n <button mat-flat-button color=\"primary\" class=\"actions__button\" (click)=\"accept()\">\r\n ACEPTAR\r\n </button>\r\n </div>\r\n</div>\r\n",
|
|
3595
|
-
styles: [":host{display:block;width:100%;height:100%}::ng-deep .multimedia-uploader-panel-class{width:50%;height:70%}::ng-deep .multimedia-uploader-panel-class mat-dialog-container{width:100%;height:100%;padding:16px;overflow:hidden;position:relative}.multimedia-uploader{width:100%;height:100%}.multimedia-uploader__actions{position:absolute;left:0;bottom:0;width:100%;background:#fff;z-index:1}.actions__button{width:50%}.actions__button:first-child{border-radius:8px 0 0}.actions__button:last-child{border-radius:0 8px 0 0}.title{font-weight:700;display:flex;align-items:center;justify-content:space-between;padding:0 16px;margin:0}.multimedia-uploader__tab-group{width:100%;height:calc(100% - 36px)}.multimedia-uploader__list{width:100%;height:100%;overflow-x:hidden;overflow-y:auto;display:-ms-grid;display:grid;-ms-grid-columns:(
|
|
3595
|
+
styles: [":host{display:block;width:100%;height:100%}::ng-deep .multimedia-uploader-panel-class{width:50%;height:70%}::ng-deep .multimedia-uploader-panel-class mat-dialog-container{width:100%;height:100%;padding:16px;overflow:hidden;position:relative}.multimedia-uploader{width:100%;height:100%}.multimedia-uploader__actions{position:absolute;left:0;bottom:0;width:100%;background:#fff;z-index:1}.actions__button{width:50%}.actions__button:first-child{border-radius:8px 0 0}.actions__button:last-child{border-radius:0 8px 0 0}.title{font-weight:700;display:flex;align-items:center;justify-content:space-between;padding:0 16px;margin:0}.multimedia-uploader__tab-group{width:100%;height:calc(100% - 36px)}.multimedia-uploader__list{width:100%;height:100%;overflow-x:hidden;overflow-y:auto;display:-ms-grid;display:grid;-ms-grid-columns:(calc(100% / 3))[3];grid-template-columns:repeat(3,calc(100% / 3))}@media screen and (max-width:600px){::ng-deep .multimedia-uploader-panel-class{width:100%!important;max-width:100%!important;height:100%!important}.multimedia-uploader__list{-ms-grid-columns:100%;grid-template-columns:100%}}.list__item{width:200px;height:150px;border-radius:8px;margin:16px auto;position:relative}.first-photo:after{content:\"Imagen principal del anuncio\";position:absolute;top:0;padding:8px;box-sizing:border-box;font-size:12px;width:100%;color:#fff;background:rgba(0,0,0,.3)}.list__item-img{position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:8px}.list__item-button{position:absolute;width:24px;height:24px;top:-12px;right:-12px;background:#000;color:#fff}.list__item-icon{width:24px;height:24px;font-size:16px;line-height:8px}.you-tube-container{display:flex;padding:8px 0;box-sizing:border-box;justify-content:space-between;position:-webkit-sticky;position:sticky;top:0;z-index:5;background:#fff}.you-tube-container__searchbox{position:relative;width:calc(100% - 120px);box-sizing:border-box;display:flex;align-items:center}.you-tube-container__close-btn{position:absolute;right:0}.you-tube-container__input{width:100%;border:1px solid #d3d3d3;padding:8px 32px 8px 8px;border-radius:8px;outline:0}"]
|
|
3596
3596
|
}] }
|
|
3597
3597
|
];
|
|
3598
3598
|
/** @nocollapse */
|
|
@@ -3841,7 +3841,7 @@ GalleryComponent.decorators = [
|
|
|
3841
3841
|
{ type: Component, args: [{
|
|
3842
3842
|
selector: 'lib-gallery',
|
|
3843
3843
|
template: "<div class=\"gallery\">\r\n <mat-sidenav-container class=\"gallery__sidenav-container\">\r\n <mat-sidenav mode=\"side\" [opened]=\"sideOpened\" class=\"sidenav-container__sidenav\">\r\n <mat-toolbar class=\"sidenav__toolbar\" color=\"primary\">\r\n <span>Galeria</span>\r\n <button mat-icon-button (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </mat-toolbar>\r\n <mat-toolbar class=\"sidenav__thumbnails-types\">\r\n <button class=\"thumbnails-types__item-type\" mat-button\r\n [ngClass]=\"{'item-type--selected': typeSelected === 'IMAGE'}\" (click)=\"changePFileType('IMAGE')\">\r\n <span class=\"item-type__icon ic-component-property-file-image\"></span>\r\n <span class=\"item-type__label\">{{count.image}}</span>\r\n </button>\r\n <button class=\"thumbnails-types__item-type\" mat-button\r\n [ngClass]=\"{'item-type--selected': typeSelected === 'SPHERIC'}\" (click)=\"changePFileType('SPHERIC')\">\r\n <span class=\"item-type__icon ic-component-property-sphere\"></span>\r\n <span class=\"item-type__label\">{{count.sphere}}</span>\r\n </button>\r\n <button class=\"thumbnails-types__item-type\" mat-button\r\n [ngClass]=\"{'item-type--selected': typeSelected === 'VIDEO'}\" (click)=\"changePFileType('VIDEO')\">\r\n <span class=\"item-type__icon ic-component-property-video\"></span>\r\n <span class=\"item-type__label\">{{count.video}}</span>\r\n </button>\r\n </mat-toolbar>\r\n <div class=\"sidenav__thumbnail-list\">\r\n <ng-container *ngFor=\"let image of multimedia; let i = index\">\r\n <div class=\"thumbnail-list__item\" (click)=\"selectPFile(i)\"\r\n [ngClass]=\"{'thumbnail-list__item--selected': indexSelected === i}\">\r\n <ng-template [ngIf]=\"image.type !== 'VIDEO'\" [ngIfElse]=\"youTubeVideo\">\r\n <img class=\"item__img\" [src]=\"image.fileCS.thumbnail\" alt=\"Property image\">\r\n </ng-template>\r\n <ng-template #youTubeVideo>\r\n <img class=\"item__img\" [src]=\"'https://i3.ytimg.com/vi/'+image.fileCS.thumbnail+'/hqdefault.jpg'\"\r\n alt=\"Property image\">\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n <ng-template [ngIf]=\"multimedia.length === 0\">\r\n <div class=\"thumbnail-list__empty-list\">\r\n <p class=\"empty-list__label\">\r\n Por el momento no hay\r\n <span *ngIf=\"typeSelected === 'IMAGE'\">fotos</span>\r\n <span *ngIf=\"typeSelected === 'VIDEO'\">videos</span>\r\n <span *ngIf=\"typeSelected === 'SPHERIC'\">fotos esf\u00E9ricas</span>\r\n </p>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </mat-sidenav>\r\n <mat-sidenav-content class=\"sidenav-container__content\" [ngStyle]=\"{'width': sideOpened ? '80%' : '100%'}\">\r\n <button class=\"sidenav-container__button-sidenav\" mat-flat-button color=\"primary\" (click)=\"updateSideNav()\">\r\n <mat-icon *ngIf=\"sideOpened\">chevron_left</mat-icon>\r\n <mat-icon *ngIf=\"!sideOpened\">chevron_right</mat-icon>\r\n </button>\r\n <button class=\"sidenav-container__button-close\" mat-mini-fab color=\"primary\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n <div class=\"content__list-container\">\r\n <lib-property-slide-show class=\"list-container__slide-show\" [multimedia]=\"multimedia\" [selectIndex]=\"indexSelected\"\r\n [initialIndex]=\"indexSelected\"\r\n (currentIndex)=\"onIndexSelectedChange($event)\"></lib-property-slide-show>\r\n </div>\r\n </mat-sidenav-content>\r\n </mat-sidenav-container>\r\n</div>\r\n",
|
|
3844
|
-
styles: ["::ng-deep .gallery_dialog{max-width:100%!important;width:100%;height:100%}::ng-deep .gallery_dialog mat-dialog-container{width:100%;height:100%;padding:0}:host{display:block;width:100%;height:100%}.gallery,.gallery__sidenav-container{width:100%;height:100%}.sidenav__toolbar{display:flex;justify-content:space-between}.sidenav__thumbnail-list{width:100%;height:calc(100% - 128px);padding:16px;box-sizing:border-box;overflow-x:hidden;overflow-y:auto}.thumbnail-list__empty-list{width:100%;height:100%;display:flex}.empty-list__label{margin:auto;text-align:center}.thumbnail-list__item{width:100%;cursor:pointer;padding-bottom:
|
|
3844
|
+
styles: ["::ng-deep .gallery_dialog{max-width:100%!important;width:100%;height:100%}::ng-deep .gallery_dialog mat-dialog-container{width:100%;height:100%;padding:0}:host{display:block;width:100%;height:100%}.gallery,.gallery__sidenav-container{width:100%;height:100%}.sidenav__toolbar{display:flex;justify-content:space-between}.sidenav__thumbnail-list{width:100%;height:calc(100% - 128px);padding:16px;box-sizing:border-box;overflow-x:hidden;overflow-y:auto}.thumbnail-list__empty-list{width:100%;height:100%;display:flex}.empty-list__label{margin:auto;text-align:center}.thumbnail-list__item{width:100%;cursor:pointer;padding-bottom:calc(100% / 4 * 3);border-radius:8px;margin-bottom:16px;position:relative}.item__img{position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:8px}.sidenav-container__sidenav{width:20%}@media screen and (max-width:1024px){.sidenav-container__sidenav{width:100%}}.sidenav__thumbnails-types{display:flex;align-items:center;justify-content:space-around}.item-type{padding:0}.item-type__label{padding:0 4px;display:inline-block}.item-type__icon{display:inline-block;width:24px;height:24px;font-size:24px;margin:auto}.sidenav-container__content{width:80%;display:flex;position:relative}@media screen and (max-width:1024px){.sidenav-container__content{width:100%}}.sidenav-container__button-sidenav{position:absolute;top:0;left:0;height:64px;padding:0;min-width:36px;border-radius:0 8px 8px 0;z-index:1}.sidenav-container__button-close{position:absolute;top:16px;right:16px;z-index:1}.content__list-container{width:100%;height:100%;margin:auto;overflow:hidden;position:relative;border-radius:8px}.list-container__slide-show{width:100%;height:100%;padding:initial}::ng-deep .list-container__slide-show .panorama-visor{height:100%!important;padding:initial!important}::ng-deep .list-container__slide-show lib-panorama-visor .panorama-visor__actions{top:72px!important}"]
|
|
3845
3845
|
}] }
|
|
3846
3846
|
];
|
|
3847
3847
|
/** @nocollapse */
|
|
@@ -3925,7 +3925,7 @@ StatsComponent.decorators = [
|
|
|
3925
3925
|
{ type: Component, args: [{
|
|
3926
3926
|
selector: 'lib-stats',
|
|
3927
3927
|
template: "<div class=\"stats\">\r\n <mat-toolbar class=\"stats__toolbar\" color=\"primary\">\r\n Estad\u00EDsticas\r\n <button mat-icon-button (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </mat-toolbar>\r\n <div class=\"stats__content\">\r\n <div class=\"content__stat\">\r\n <div class=\"stat__icon-container\">\r\n <mat-icon>visibility</mat-icon>\r\n </div>\r\n <p class=\"stat__count\">\r\n {{data.views ? data.views['RV'] || 0 : 0}}\r\n </p>\r\n <p class=\"stat__label\">\r\n Vistas en Renta o Venta\r\n </p>\r\n <div class=\"stat__app-icon\">\r\n <img alt=\"Renta o Venta logo\" class=\"app-icon__img\" src=\"https://storage.googleapis.com/maplander-develop/public/file/front-end/email/rentaoventa.png\">\r\n </div>\r\n </div>\r\n <div class=\"content__stat\">\r\n <div class=\"stat__icon-container\">\r\n <mat-icon>visibility</mat-icon>\r\n </div>\r\n <p class=\"stat__count\">\r\n {{data.views ? data.views['FIABCI'] || 0 : 0}}\r\n </p>\r\n <p class=\"stat__label\">\r\n Vistas en GlobalMLS\r\n </p>\r\n <div class=\"stat__app-icon\">\r\n <img alt=\"GlobalMLS logo\" class=\"app-icon__img\" src=\"https://storage.googleapis.com/maplander-develop/public/file/front-end/email/globalmls.png\">\r\n </div>\r\n </div>\r\n <div class=\"content__stat\">\r\n <div class=\"stat__icon-container\">\r\n <mat-icon>favorite</mat-icon>\r\n </div>\r\n <p class=\"stat__count\">\r\n {{data.favorites || 0}}\r\n </p>\r\n <p class=\"stat__label\">\r\n Veces a\u00F1adida a favoritos\r\n </p>\r\n </div>\r\n <div class=\"content__stat\">\r\n <div class=\"stat__icon-container\">\r\n <mat-icon>share</mat-icon>\r\n </div>\r\n <p class=\"stat__count\">\r\n {{data.shared || 0}}\r\n </p>\r\n <p class=\"stat__label\">\r\n Veces compartida\r\n </p>\r\n </div>\r\n <div class=\"content__stat\">\r\n <div class=\"stat__icon-container\">\r\n <mat-icon>assignment</mat-icon>\r\n </div>\r\n <p class=\"stat__count\">\r\n {{data.requests || 0}}\r\n </p>\r\n <p class=\"stat__label\">\r\n Solicitudes de informaci\u00F3n\r\n </p>\r\n </div>\r\n </div>\r\n</div>\r\n",
|
|
3928
|
-
styles: ["::ng-deep .stats-panel-class{width:30%;height:80%}::ng-deep .stats-panel-class mat-dialog-container{padding:0;overflow:hidden}@media screen and (max-width:600px){::ng-deep .stats-panel-class{min-width:90%!important}}:host{display:block;width:100%;height:100%}.stats{width:100%;height:100%;overflow:auto}.stats__toolbar{width:100%;height:64px;display:flex;position:-webkit-sticky;position:sticky;top:0;z-index:2;justify-content:space-between}.stats__content{padding:16px;box-sizing:content-box;display:-ms-grid;display:grid;-ms-grid-columns:(50%)[2];grid-template-columns:repeat(2,50%)}.content__stat{border:1px solid #000;border-radius:8px;padding:16px;box-sizing:content-box;position:relative;margin:0 16px 16px 0}.stat__icon-container{position:absolute;top:16px;right:16px}.stat__app-icon{position:absolute;bottom:16px;right:16px}.app-icon__img{width:24px;height:24px;border-radius:4px}.stat__count{font-size:32px;font-weight:700;margin:0 0 16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stat__label{width:80%;margin:0}"]
|
|
3928
|
+
styles: ["::ng-deep .stats-panel-class{width:30%;height:80%}::ng-deep .stats-panel-class mat-dialog-container{padding:0;overflow:hidden}@media screen and (max-width:600px){::ng-deep .stats-panel-class{min-width:90%!important}}:host{display:block;width:100%;height:100%}.stats{width:100%;height:100%;overflow:auto}.stats__toolbar{width:100%;height:64px;display:flex;position:-webkit-sticky;position:sticky;top:0;z-index:2;justify-content:space-between}.stats__content{padding:16px;box-sizing:content-box;display:-ms-grid;display:grid;-ms-grid-columns:(calc(50%))[2];grid-template-columns:repeat(2,calc(50%))}.content__stat{border:1px solid #000;border-radius:8px;padding:16px;box-sizing:content-box;position:relative;margin:0 16px 16px 0}.stat__icon-container{position:absolute;top:16px;right:16px}.stat__app-icon{position:absolute;bottom:16px;right:16px}.app-icon__img{width:24px;height:24px;border-radius:4px}.stat__count{font-size:32px;font-weight:700;margin:0 0 16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stat__label{width:80%;margin:0}"]
|
|
3929
3929
|
}] }
|
|
3930
3930
|
];
|
|
3931
3931
|
/** @nocollapse */
|
|
@@ -4394,7 +4394,7 @@ PropertyComponent.decorators = [
|
|
|
4394
4394
|
{ type: Component, args: [{
|
|
4395
4395
|
selector: 'lib-property',
|
|
4396
4396
|
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",
|
|
4397
|
-
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:
|
|
4397
|
+
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}"]
|
|
4398
4398
|
}] }
|
|
4399
4399
|
];
|
|
4400
4400
|
/** @nocollapse */
|
|
@@ -5050,13 +5050,13 @@ class EditorComponent {
|
|
|
5050
5050
|
EditorComponent.decorators = [
|
|
5051
5051
|
{ type: Component, args: [{
|
|
5052
5052
|
selector: 'lib-property-editor',
|
|
5053
|
-
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",
|
|
5053
|
+
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 n\u00FAmeros\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 n\u00FAmeros\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 n\u00FAmeros\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 n\u00FAmeros\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",
|
|
5054
5054
|
providers: [
|
|
5055
5055
|
{ provide: MAT_DATE_LOCALE, useValue: 'es-MX' },
|
|
5056
5056
|
{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS] },
|
|
5057
5057
|
{ provide: MAT_DATE_FORMATS, useValue: ɵ0 }
|
|
5058
5058
|
],
|
|
5059
|
-
styles: [":host{display:block;width:100%}.section_label{font-weight:700;display:flex;justify-content:space-between}.address__label-button{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.offering{margin-bottom:8px}.direct-debit{margin:16px 0;display:flex}.direct-debit__check-box{margin-top:4px}.direct-debit__radio-group{display:inline-block;margin:0 0 0 32px}@media screen and (max-width:600px){.section_label{flex-direction:column}.section_label :last-child{margin-top:16px}.direct-debit{flex-direction:column;align-items:flex-start}.direct-debit__radio-group{margin:16px 0 0}}.direct-debit__radio-button{margin-right:16px}.pricing{display:-ms-grid;display:grid;-ms-grid-columns:(
|
|
5059
|
+
styles: [":host{display:block;width:100%}.section_label{font-weight:700;display:flex;justify-content:space-between}.address__label-button{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.offering{margin-bottom:8px}.direct-debit{margin:16px 0;display:flex}.direct-debit__check-box{margin-top:4px}.direct-debit__radio-group{display:inline-block;margin:0 0 0 32px}@media screen and (max-width:600px){.section_label{flex-direction:column}.section_label :last-child{margin-top:16px}.direct-debit{flex-direction:column;align-items:flex-start}.direct-debit__radio-group{margin:16px 0 0}}.direct-debit__radio-button{margin-right:16px}.pricing{display:-ms-grid;display:grid;-ms-grid-columns:(calc(100% / 3))[3];grid-template-columns:repeat(3,calc(100% / 3))}@media screen and (max-width:600px){.pricing{-ms-grid-columns:100%;grid-template-columns:100%}}@media screen and (min-width:1800px){.pricing{-ms-grid-columns:(calc(100% / 4))[4];grid-template-columns:repeat(4,calc(100% / 4))}}.agreement__body{display:-ms-grid;display:grid;-ms-grid-columns:(calc(100% / 3))[2];grid-template-columns:repeat(2,calc(100% / 3))}@media screen and (max-width:600px){.agreement__body{-ms-grid-columns:100%;grid-template-columns:100%}}@media screen and (min-width:1800px){.agreement__body{-ms-grid-columns:(calc(100% / 4))[4];grid-template-columns:repeat(4,calc(100% / 4))}}.agreement__body-check-box{margin-bottom:16px;-ms-grid-column:1;grid-column-start:1;-ms-grid-column-span:2;grid-column-end:3}.address__body{display:-ms-grid;display:grid;-ms-grid-columns:(calc(100% / 4))[4];grid-template-columns:repeat(4,calc(100% / 4))}@media screen and (max-width:600px){.agreement__body-check-box{-ms-grid-column-span:auto;grid-column-end:auto}.address__body{-ms-grid-columns:100%;grid-template-columns:100%}}@media screen and (min-width:1800px){.address__body{-ms-grid-columns:(calc(100% / 5))[4];grid-template-columns:repeat(4,calc(100% / 5))}}.features__body{display:-ms-grid;display:grid;-ms-grid-columns:(calc(100% / 2))[2];grid-template-columns:repeat(2,calc(100% / 2))}.features-item__label{display:flex;align-items:center;margin:0;padding:8px 0}.features-item__radio-group{display:block;margin:8px 0}.features-item__radio-button{margin-right:16px}.features-item-bathrooms,.features-item-parking-spaces{-ms-grid-column:1;grid-column-start:1}.features-item-surface{-ms-grid-column:2;grid-column-start:2;-ms-grid-row:1;grid-row-start:1;-ms-grid-row-span:2;grid-row-end:3}.address__form-field,.agreement__form-field,.description__form-field,.external-link__form-field,.notes__form-field,.pricing__form-field{width:95%;margin:0 auto 0 0}@media screen and (max-width:600px){.features__body{-ms-grid-columns:100%;grid-template-columns:100%}.features-item-surface{-ms-grid-column:auto;grid-column-start:auto;-ms-grid-row:auto;grid-row-start:auto;-ms-grid-row-span:NaN;grid-row-end:auto}.address__form-field,.agreement__form-field,.description__form-field,.external-link__form-field,.notes__form-field,.pricing__form-field{width:100%;margin:0}}.pricing__maintenance-fee{display:flex;align-items:center;-ms-grid-column:1;grid-column-start:1;-ms-grid-column-span:2;grid-column-end:3}.pricing__maintenance-fee :first-child{margin:0 16px 0 0}@media screen and (max-width:600px){.pricing__maintenance-fee{flex-direction:column;align-items:start;-ms-grid-column:1;grid-column-start:1;-ms-grid-column-span:NaN;grid-column-end:auto}.pricing__maintenance-fee :first-child{margin:0 0 16px}}.address__visibility{-ms-grid-row:4;grid-row-start:4;-ms-grid-column:1;grid-column-start:1;-ms-grid-column-span:4;grid-column-end:5}.address__visibility-body{display:flex}.address__visibility-radio-group{display:block;margin-right:16px}.visibility-radio-group__button{margin-bottom:16px;display:block}.visibility__about{margin:0}.visibility__about-label{display:block;padding:0 8px 8px;font-size:14px}.label__icon{width:24px;height:24px;font-size:24px;color:#707070;margin-right:8px}.amenities,.attributes{width:50%;display:inline-block}@media screen and (max-width:600px){.address__visibility{-ms-grid-row:auto;grid-row-start:auto;-ms-grid-column:auto;grid-column-start:auto;-ms-grid-column-span:NaN;grid-column-end:auto}.address__visibility-body{flex-direction:column}.amenities,.attributes{width:100%;display:block}}.amenities__list-amenities{display:-ms-grid;display:grid;-ms-grid-columns:(calc(100% / 3))[3];grid-template-columns:repeat(3,calc(100% / 3))}.list-amenities__amenity{display:flex;flex-direction:column;justify-content:space-between;align-items:center;cursor:pointer;width:100px;padding:4px;box-sizing:border-box;border-radius:8px;margin:8px auto 0;text-align:center}.amenity__icon{width:24px;height:24px;font-size:24px;background:#707070;border-radius:50%;padding:8px;color:#fff;display:block;margin:0 auto}.amenity__text{padding:8px;box-sizing:border-box;display:block;font-size:12px}.button-submit{display:none}"]
|
|
5060
5060
|
}] }
|
|
5061
5061
|
];
|
|
5062
5062
|
/** @nocollapse */
|
|
@@ -5610,7 +5610,7 @@ DetailsComponent.decorators = [
|
|
|
5610
5610
|
{ type: Component, args: [{
|
|
5611
5611
|
selector: 'lib-property-details',
|
|
5612
5612
|
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",
|
|
5613
|
-
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:(
|
|
5613
|
+
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}"]
|
|
5614
5614
|
}] }
|
|
5615
5615
|
];
|
|
5616
5616
|
/** @nocollapse */
|
|
@@ -5706,7 +5706,7 @@ SlideShowComponent.decorators = [
|
|
|
5706
5706
|
{ type: Component, args: [{
|
|
5707
5707
|
selector: 'lib-property-slide-show',
|
|
5708
5708
|
template: "<div class=\"slide-show\">\r\n <div class=\"slide-show__actions\">\r\n <ng-container [ngTemplateOutlet]=\"customActions\"></ng-container>\r\n <p class=\"actions__count\" *ngIf=\"multimedia && multimedia.length > 0\">\r\n {{index + 1}}/{{count}}\r\n </p>\r\n </div>\r\n <button mat-button=\"\" class=\"button-previous\" [ngClass]=\"{'disabled':index===0}\" [disabled]=\"index===0\"\r\n (click)=\"moveImage()\" (keyup.arrowLeft)=\"moveImage()\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </button>\r\n <ul class=\"images-list\" #slider [ngStyle]=\"{'width':'calc(100% *' + count + ')'}\">\r\n <ng-template [ngIf]=\"multimedia && multimedia.length > 0\">\r\n <ng-container *ngFor=\"let m of multimedia\">\r\n <li class=\"images-item\" [ngStyle]=\"{'width':'calc(100% /' + count + ')'}\">\r\n <ng-container [ngSwitch]=\"m.type\">\r\n <ng-container *ngSwitchCase=\"'IMAGE'\">\r\n <img class=\"images-item__img\" [src]=\"m.fileCS.thumbnail\" alt=\"Property image\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'SPHERIC'\">\r\n <lib-panorama-visor class=\"images-item__panorama\" [url]=\"m.fileCS.thumbnail\"></lib-panorama-visor>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'VIDEO'\">\r\n <iframe class=\"images-item__video\"\r\n [src]=\"'https://www.youtube.com/embed/' + m.fileCS.thumbnail | safeUrl\"></iframe>\r\n </ng-container>\r\n </ng-container>\r\n </li>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template [ngIf]=\"multimedia && multimedia.length === 0\">\r\n <div class=\"no-items\"></div>\r\n </ng-template>\r\n </ul>\r\n <button mat-button=\"\" class=\"button-next\" [disabled]=\"multimedia.length === 0\" (click)=\"moveImage(true)\" (keyup.arrowRight)=\"moveImage(true)\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </button>\r\n</div>\r\n",
|
|
5709
|
-
styles: [":host{display:block;position:relative;width:100%;padding-bottom:
|
|
5709
|
+
styles: [":host{display:block;position:relative;width:100%;padding-bottom:calc(100% / 4 * 3)}.slide-show{width:100%;height:100%;overflow:hidden;position:absolute}.slide-show__actions{position:absolute;bottom:0;left:0;right:0;width:100%;color:#fff;padding:8px 24px;z-index:2;display:flex;align-items:center;justify-content:flex-end;box-sizing:border-box;background:linear-gradient(transparent,rgba(0,0,0,.4))}.actions__count{margin:4px 0 0 8px;font-size:14px}.images-list{width:100%;height:100%;list-style:none;padding:0;margin:0;display:flex;overflow:hidden;transition:250ms}.images-item{width:100%;height:100%}.images-item__img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;border-radius:8px}.images-item__panorama,.images-item__video{width:100%;height:100%;border:0;border-radius:8px}.button-next,.button-previous{position:absolute;min-width:30px;width:30px;height:80px;padding:0;z-index:1;color:#fff;top:calc(50% - 40px);background:rgba(0,0,0,.3)}.button-next mat-icon,.button-previous mat-icon{width:30px;height:30px;font-size:30px}.button-next:hover,.button-previous:hover{color:#000;background:#fff}.disabled{color:#d3d3d3}.button-previous{left:0;border-radius:0 16px 16px 0}.button-next{right:0;border-radius:16px 0 0 16px}.no-items{width:100%;height:100%;border-radius:8px}"]
|
|
5710
5710
|
}] }
|
|
5711
5711
|
];
|
|
5712
5712
|
/** @nocollapse */
|
|
@@ -6347,7 +6347,7 @@ PropertyCardComponent.decorators = [
|
|
|
6347
6347
|
{ type: Component, args: [{
|
|
6348
6348
|
selector: 'lib-property-card',
|
|
6349
6349
|
template: "<div class=\"property-card\">\r\n <ng-template [ngIf]=\"!isOPI\">\r\n <div class=\"property-card__favorite\">\r\n <button class=\"favorite__button\" mat-icon-button (click)=\"favorite()\">\r\n <ng-template [ngIf]=\"isFavorite\" [ngIfElse]=\"noIsFavorite\">\r\n <mat-icon>favorite</mat-icon>\r\n </ng-template>\r\n <ng-template #noIsFavorite>\r\n <mat-icon>favorite_border</mat-icon>\r\n </ng-template>\r\n </button>\r\n </div>\r\n </ng-template>\r\n <ng-template [ngIf]=\"showDiscard\">\r\n <div class=\"property-card__discard\">\r\n <button class=\"discard__button\" mat-icon-button (click)=\"discard()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n </ng-template>\r\n <ng-template [ngIf]=\"isOPI && showAlert\">\r\n <div class=\"expiration-message\">\r\n <p>\r\n Aviso\r\n <br>\r\n Este anuncio expira el {{info.endPublishDate | libFormatDate : true : 'dd/MM/yyyy'}}\r\n </p>\r\n </div>\r\n </ng-template>\r\n <a routerLink=\"{{href || '/'}}\" [queryParams]=\"queryParams || null\" [target]=\"target || null\"\r\n [state]=\"state || null\"\r\n class=\"property-card__image\" (mouseover)=\"onFrontImageOver()\"\r\n (mouseleave)=\"onFrontImageLeave()\">\r\n <img [src]=\"info.image\" alt=\"Property image\" libImageError [typeImage]=\"info.type\">\r\n <ng-template [ngIf]=\"mode === 'summary'\">\r\n <div class=\"property-card__body-summary\">\r\n <h2 class=\"color--white property-card__price\">\r\n {{info.price | currency}} {{info.currency}}\r\n </h2>\r\n <p class=\"color--white property-card__type\">\r\n {{info.type | propertyType}} {{info.offering | offeringType}}\r\n </p>\r\n <p class=\"color--white property-card__address body-summary__address\">\r\n {{info.address.colony}}, {{info.address.city}}\r\n </p>\r\n </div>\r\n </ng-template>\r\n </a>\r\n <ng-template [ngIf]=\"mode === 'full'\">\r\n <div class=\"property-card__body\">\r\n <div class=\"property-card__location-title\">\r\n <h2 class=\"property-card__price\">\r\n {{info.price | currency : currency : 'symbol' : '1.0-0'}} {{info.currency}}\r\n </h2>\r\n <ng-container *ngIf=\"distance !== ''\" >\r\n <h2 class=\"property-card__location\" [hidden]=\"!distance\">\r\n {{distance}}\r\n </h2>\r\n </ng-container>\r\n </div>\r\n <p class=\"property-card__type\">\r\n {{info.type | propertyType}} {{info.offering | offeringType}}\r\n </p>\r\n <p class=\"property-card__address\">\r\n {{info.address.colony}}, {{info.address.city}}\r\n </p>\r\n <ng-template [ngIf]=\"info.features\">\r\n <div class=\"property-card__features\">\r\n <ng-template [ngIf]=\"info.features && info.features.bedrooms && info.features.bedrooms > 0\">\r\n <p class=\"property-card__feature\">\r\n <span class=\"property-card__icon ic-features-bedroom\"></span>\r\n {{info.features.bedrooms}}\r\n </p>\r\n <span class=\"property-card__divider\"></span>\r\n </ng-template>\r\n <ng-template [ngIf]=\"info.features && info.features.bathrooms && info.features.bathrooms > 0 \">\r\n <p class=\"property-card__feature\">\r\n <span class=\"property-card__icon ic-features-bathroom\"></span>\r\n {{info.features.bathrooms}}\r\n </p>\r\n <span class=\"property-card__divider\"></span>\r\n </ng-template>\r\n <ng-template [ngIf]=\"info.features && info.features.mainArea && info.features.mainArea > 0\">\r\n <p class=\"property-card__feature\">\r\n <span class=\"property-card__icon ic-features-surface\"></span>\r\n {{info.features.mainArea}}\r\n <ng-template [ngIf]=\"info.features.areaUnit && info.features.areaUnit === 'M2'\"\r\n [ngIfElse]=\"ftUnit\">\r\n m<sup>2</sup>\r\n </ng-template>\r\n <ng-template #ftUnit>\r\n sq ft\r\n </ng-template>\r\n </p>\r\n </ng-template>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </ng-template>\r\n</div>\r\n",
|
|
6350
|
-
styles: [":host{display:block;width:calc(100% - 16px);margin:16px auto;border-radius:16px}.property-card{width:100%;border-radius:16px;position:relative}.property-card__favorite{position:absolute;top:4px;right:4px;border-radius:50%;z-index:1;width:40px;height:40px;display:flex}.favorite__button{margin:auto}.expiration-message{position:absolute;top:0;background-color:#fff;width:100%;height:80px;z-index:1;text-align:center;color:red;font-size:16px;margin:auto;opacity:.9}.property-card__discard{position:absolute;right:8px;bottom:8px;z-index:1;width:40px;height:40px;border-radius:16px;display:flex}.discard__button{margin:auto}.property-card__image{width:100%;border-radius:16px;padding-bottom:
|
|
6350
|
+
styles: [":host{display:block;width:calc(100% - 16px);margin:16px auto;border-radius:16px}.property-card{width:100%;border-radius:16px;position:relative}.property-card__favorite{position:absolute;top:4px;right:4px;border-radius:50%;z-index:1;width:40px;height:40px;display:flex}.favorite__button{margin:auto}.expiration-message{position:absolute;top:0;background-color:#fff;width:100%;height:80px;z-index:1;text-align:center;color:red;font-size:16px;margin:auto;opacity:.9}.property-card__discard{position:absolute;right:8px;bottom:8px;z-index:1;width:40px;height:40px;border-radius:16px;display:flex}.discard__button{margin:auto}.property-card__image{width:100%;border-radius:16px;padding-bottom:calc(100% / 4 * 3);position:relative;text-decoration:none;display:block}.property-card__image:hover{width:calc(100% - 6px);padding-bottom:calc((100% - 6px)/ 4 * 3)}.property-card__image img{border-radius:16px;position:absolute;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.property-card__body{padding:8px;box-sizing:border-box}.property-card__body-summary{padding:8px;box-sizing:border-box;position:absolute;bottom:0;width:100%;border-radius:16px;background:linear-gradient(transparent,rgba(0,0,0,.8))}.body-summary__address{width:80%!important}.property-card__location-title{display:flex;width:100%;flex-direction:row;flex-wrap:wrap}.property-card__location{font-size:12px;margin:4px;color:#707070}@media (min-width:1200px){.property-card__location{font-size:14px}}.property-card__location:empty{width:60%;height:14px;background:#e0e0e0;border-radius:16px}.property-card__price{margin:3px 0;font-size:16px}.property-card__price:empty{width:60%;height:16px;background:#e0e0e0;border-radius:16px}.property-card__type{margin:3px 0}.property-card__type:empty{width:70%;height:16px;border-radius:16px;background:#e0e0e0}.property-card__address{margin:3px 0;color:#707070;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.property-card__address:empty{width:80%;height:16px;border-radius:16px;background:#e0e0e0}.property-card__features{display:flex;margin:6px 0 0}.property-card__feature{margin:0 8px 0 0;display:flex;align-items:center;font-size:12px;color:#707070}.property-card__divider{display:block;margin:auto 8px;width:1px;height:16px;background:#9e9e9e}.property-card__icon{width:24px;height:24px;font-size:24px;margin:0 4px 0 0;color:#bdbdbd}"]
|
|
6351
6351
|
}] }
|
|
6352
6352
|
];
|
|
6353
6353
|
/** @nocollapse */
|