@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
|
@@ -3423,7 +3423,7 @@
|
|
|
3423
3423
|
{ type: core.Component, args: [{
|
|
3424
3424
|
selector: 'lib-filters',
|
|
3425
3425
|
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",
|
|
3426
|
-
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:(
|
|
3426
|
+
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}"]
|
|
3427
3427
|
}] }
|
|
3428
3428
|
];
|
|
3429
3429
|
/** @nocollapse */
|
|
@@ -3573,7 +3573,7 @@
|
|
|
3573
3573
|
* @return {?}
|
|
3574
3574
|
*/
|
|
3575
3575
|
function () {
|
|
3576
|
-
return _this._lazy.load('https://
|
|
3576
|
+
return _this._lazy.load('https://cdn.jsdelivr.net/npm/panolens@0.12.1/build/panolens.min.js');
|
|
3577
3577
|
})).then((/**
|
|
3578
3578
|
* @return {?}
|
|
3579
3579
|
*/
|
|
@@ -3768,7 +3768,7 @@
|
|
|
3768
3768
|
{ type: core.Component, args: [{
|
|
3769
3769
|
selector: 'lib-panorama-visor',
|
|
3770
3770
|
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",
|
|
3771
|
-
styles: [":host{display:block;width:inherit;height:inherit}.panorama-visor{width:100%;padding-bottom:
|
|
3771
|
+
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}"]
|
|
3772
3772
|
}] }
|
|
3773
3773
|
];
|
|
3774
3774
|
/** @nocollapse */
|
|
@@ -4204,7 +4204,7 @@
|
|
|
4204
4204
|
{ type: core.Component, args: [{
|
|
4205
4205
|
selector: 'lib-property-multimedia-uploader',
|
|
4206
4206
|
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",
|
|
4207
|
-
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:(
|
|
4207
|
+
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}"]
|
|
4208
4208
|
}] }
|
|
4209
4209
|
];
|
|
4210
4210
|
/** @nocollapse */
|
|
@@ -4498,7 +4498,7 @@
|
|
|
4498
4498
|
{ type: core.Component, args: [{
|
|
4499
4499
|
selector: 'lib-gallery',
|
|
4500
4500
|
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",
|
|
4501
|
-
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:
|
|
4501
|
+
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}"]
|
|
4502
4502
|
}] }
|
|
4503
4503
|
];
|
|
4504
4504
|
/** @nocollapse */
|
|
@@ -4589,7 +4589,7 @@
|
|
|
4589
4589
|
{ type: core.Component, args: [{
|
|
4590
4590
|
selector: 'lib-stats',
|
|
4591
4591
|
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",
|
|
4592
|
-
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}"]
|
|
4592
|
+
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}"]
|
|
4593
4593
|
}] }
|
|
4594
4594
|
];
|
|
4595
4595
|
/** @nocollapse */
|
|
@@ -5158,7 +5158,7 @@
|
|
|
5158
5158
|
{ type: core.Component, args: [{
|
|
5159
5159
|
selector: 'lib-property',
|
|
5160
5160
|
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",
|
|
5161
|
-
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:
|
|
5161
|
+
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}"]
|
|
5162
5162
|
}] }
|
|
5163
5163
|
];
|
|
5164
5164
|
/** @nocollapse */
|
|
@@ -5908,13 +5908,13 @@
|
|
|
5908
5908
|
EditorComponent.decorators = [
|
|
5909
5909
|
{ type: core.Component, args: [{
|
|
5910
5910
|
selector: 'lib-property-editor',
|
|
5911
|
-
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",
|
|
5911
|
+
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",
|
|
5912
5912
|
providers: [
|
|
5913
5913
|
{ provide: core$1.MAT_DATE_LOCALE, useValue: 'es-MX' },
|
|
5914
5914
|
{ provide: core$1.DateAdapter, useClass: materialMomentAdapter.MomentDateAdapter, deps: [core$1.MAT_DATE_LOCALE, materialMomentAdapter.MAT_MOMENT_DATE_ADAPTER_OPTIONS] },
|
|
5915
5915
|
{ provide: core$1.MAT_DATE_FORMATS, useValue: ɵ0 }
|
|
5916
5916
|
],
|
|
5917
|
-
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:(
|
|
5917
|
+
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}"]
|
|
5918
5918
|
}] }
|
|
5919
5919
|
];
|
|
5920
5920
|
/** @nocollapse */
|
|
@@ -6567,7 +6567,7 @@
|
|
|
6567
6567
|
{ type: core.Component, args: [{
|
|
6568
6568
|
selector: 'lib-property-details',
|
|
6569
6569
|
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",
|
|
6570
|
-
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:(
|
|
6570
|
+
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}"]
|
|
6571
6571
|
}] }
|
|
6572
6572
|
];
|
|
6573
6573
|
/** @nocollapse */
|
|
@@ -6680,7 +6680,7 @@
|
|
|
6680
6680
|
{ type: core.Component, args: [{
|
|
6681
6681
|
selector: 'lib-property-slide-show',
|
|
6682
6682
|
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",
|
|
6683
|
-
styles: [":host{display:block;position:relative;width:100%;padding-bottom:
|
|
6683
|
+
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}"]
|
|
6684
6684
|
}] }
|
|
6685
6685
|
];
|
|
6686
6686
|
/** @nocollapse */
|
|
@@ -7414,7 +7414,7 @@
|
|
|
7414
7414
|
{ type: core.Component, args: [{
|
|
7415
7415
|
selector: 'lib-property-card',
|
|
7416
7416
|
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",
|
|
7417
|
-
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:
|
|
7417
|
+
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}"]
|
|
7418
7418
|
}] }
|
|
7419
7419
|
];
|
|
7420
7420
|
/** @nocollapse */
|