@maplander/components 0.21.73 → 0.21.75
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 +15 -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 +9 -4
- package/esm2015/lib/components/panorama-visor/panorama-visor.component.js +1 -1
- package/esm2015/lib/components/property/components/details/details.component.js +1 -1
- package/esm2015/lib/components/property/components/editor/editor.component.js +1 -1
- 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 +9 -4
- package/esm5/lib/components/panorama-visor/panorama-visor.component.js +1 -1
- package/esm5/lib/components/property/components/details/details.component.js +1 -1
- package/esm5/lib/components/property/components/editor/editor.component.js +1 -1
- 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 +15 -12
- package/fesm2015/maplander-components.js.map +1 -1
- package/fesm5/maplander-components.js +15 -12
- package/fesm5/maplander-components.js.map +1 -1
- package/lib/components/filters/filters.component.d.ts +1 -0
- package/maplander-components.metadata.json +1 -1
- package/package.json +1 -1
|
@@ -2459,6 +2459,7 @@ class FiltersComponent {
|
|
|
2459
2459
|
this._converter = _converter;
|
|
2460
2460
|
this.METERS_TO_SQ = 10.76391042;
|
|
2461
2461
|
this.filterChange = new EventEmitter();
|
|
2462
|
+
this.closeEv = new EventEmitter();
|
|
2462
2463
|
this.isOPI = this._config || false;
|
|
2463
2464
|
this._subscription = new Subscription();
|
|
2464
2465
|
this.propertyTypeList = ConstantsComponents.PropertyTypeList.map((/**
|
|
@@ -2522,6 +2523,7 @@ class FiltersComponent {
|
|
|
2522
2523
|
* @return {?}
|
|
2523
2524
|
*/
|
|
2524
2525
|
close() {
|
|
2526
|
+
this.closeEv.emit(true);
|
|
2525
2527
|
this.openComponent(false);
|
|
2526
2528
|
}
|
|
2527
2529
|
/**
|
|
@@ -2908,8 +2910,8 @@ class FiltersComponent {
|
|
|
2908
2910
|
FiltersComponent.decorators = [
|
|
2909
2911
|
{ type: Component, args: [{
|
|
2910
2912
|
selector: 'lib-filters',
|
|
2911
|
-
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 VER {{totalProperties}} {{totalProperties === 1 ? 'PROPIEDAD' : 'PROPIEDADES'}}\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",
|
|
2912
|
-
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 .body{height:calc(100% - 36px);overflow-x:hidden;overflow-y:auto}.filters .header{display:flex;align-items:center;justify-content:space-around;margin-bottom:8px}.filters .listing-types{width:100%;border-radius:16px}.filters .listing-types mat-button-toggle{width:50%;height:36px}.filters ::ng-deep .listing-types mat-button-toggle button{height:36px}.filters ::ng-deep .listing-types mat-button-toggle button .mat-button-toggle-label-content{line-height:36px}.filters .currency ::ng-deep .mat-form-field-wrapper{padding:0}@media screen and (max-width:600px){.filters{width:100%;position:absolute;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;top:initial;bottom:0;left:0}.filters .--padding{padding:16px 24px}.filters .header{flex-direction:column}.filters .currency{width:70%;margin-bottom:8px}}.filters .offering-type-list{width:40%;border-radius:16px}.filters .offering-type-list mat-button-toggle{width:50%;height:36px}.filters ::ng-deep .offering-type-list mat-button-toggle button{height:36px}.filters ::ng-deep .offering-type-list mat-button-toggle button .mat-button-toggle-label-content{line-height:36px}.filters .property-type-list{display:-ms-grid;display:grid;-ms-grid-columns:(
|
|
2913
|
+
template: "<!-- Todo: [FiltersComponent] Refactor code -->\r\n<form class=\"filters\" [formGroup]=\"filtersForm\" [ngClass]=\"{'filters--opened': propertyTypeSelected.value !== 'NONE'}\">\r\n <ng-template [ngIf]=\"!isOPI\">\r\n <div class=\"float-button-close\">\r\n <button mat-icon-button type=\"button\" class=\"float-button-close__button\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n </ng-template>\r\n <div class=\"body\">\r\n <div class=\"--padding\">\r\n <h4 class=\"--title\">\r\n Divisa\r\n </h4>\r\n <div class=\"header\">\r\n <mat-form-field class=\"currency\" appearance=\"outline\">\r\n <mat-label>Divisa</mat-label>\r\n <mat-select formControlName=\"currency\" placeholder=\"Divisa\">\r\n <ng-container *ngFor=\"let currency of currencyList\">\r\n <mat-option [value]=\"currency.type\" (click)=\"changeCurrency(currency.type)\">\r\n {{currency.type}}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n <mat-button-toggle-group class=\"offering-type-list\" name=\"offering-type\" formControlName=\"offering\"\r\n aria-label=\"Offering type\">\r\n <mat-button-toggle (click)=\"changeOffering('SALE')\" [value]=\"'SALE'\"\r\n [disabled]=\"propertyTypeSelected.value === 'NONE' || propertyTypeSelected.value === 'ROOM'\">\r\n Venta\r\n </mat-button-toggle>\r\n <mat-button-toggle (click)=\"changeOffering('RENT')\" [value]=\"'RENT'\"\r\n [disabled]=\"propertyTypeSelected.value === 'NONE' || propertyTypeSelected.value === 'INVESTMENT'\">\r\n Renta\r\n </mat-button-toggle>\r\n </mat-button-toggle-group>\r\n </div>\r\n <div class=\"mat-elevation-z2\" [ngClass]=\"{'property-type-list': !newFilters, 'new-property-type-list': newFilters}\">\r\n <ng-container *ngFor=\"let type of propertyTypeList; let i = index\">\r\n <ng-template [ngIf]=\"type.value !== 'NONE' && (type.value !== 'ROOM' && newFilters)\">\r\n <div class=\"property-type-list__button\">\r\n <div\r\n class=\"property-type-list__border\"\r\n [ngClass]=\"{'property-type-list__border--active': (type.value === propertyTypeSelected.value) || (propertyTypeSelected.value === 'NONE') || ((type.value === 'HOUSE' || type.value === 'APARTMENT') && propertyTypeSelected.value === 'RESIDENTIAL')}\"\r\n [ngStyle]=\"{'border-color': 'var(--' + type.iconName + ')'}\">\r\n <button mat-mini-fab=\"\" type=\"button\" (click)=\"changePropertyType(i)\"\r\n [ngStyle]=\"{'background-color': 'var(--' + type.iconName + ')'}\">\r\n <span class=\"property-type-list__icon ic-property-{{type.iconName}}\"></span>\r\n </button>\r\n </div>\r\n <span class=\"property-type-list__label\">{{type.shortName}}</span>\r\n <ng-template [ngIf]=\"type.value === 'RESIDENTIAL' && propertyTypeSelected.value === 'RESIDENTIAL'\">\r\n <div class=\"property-type-list__divider property-type-list__divider--left\"></div>\r\n <div class=\"property-type-list__divider property-type-list__divider--right\"></div>\r\n </ng-template>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n <ng-template [ngIf]=\"isOPI\">\r\n <div class=\"all\">\r\n <button mat-raised-button=\"\" type=\"button\" class=\"all__button\"\r\n [ngClass]=\"{'all__button--active': propertyTypeSelected.value === 'NONE'}\"\r\n (click)=\"changePropertyType(9)\">Todo\r\n </button>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <ng-template [ngIf]=\"propertyTypeSelected.value !== 'NONE'\">\r\n <mat-divider></mat-divider>\r\n <div class=\"--padding\">\r\n <h4 class=\"--title\">\r\n Presupuesto\r\n </h4>\r\n <div class=\"budget\">\r\n <!-- Min price [START] -->\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>M\u00EDnimo</mat-label>\r\n <input placeholder=\"M\u00EDnimo\" libFormatPrice [currency]=\"filtersForm.controls['currency'].value\" [control]=\"filtersForm.controls['minPrice']\"\r\n autocomplete=\"off\" matInput=\"\" type=\"text\" title=\"Min price\" formControlName=\"minPrice\" min=\"1\" (blur)=\"changePrice()\">\r\n <mat-error *ngIf=\"filtersForm.controls['minPrice'].hasError('pattern')\">\r\n Debe ingresar solo n\u00FAmeros\r\n </mat-error>\r\n <mat-error *ngIf=\"filtersForm.controls['minPrice'].hasError('required')\">\r\n Este campo es requerido\r\n </mat-error>\r\n </mat-form-field>\r\n <!-- Min price [END] -->\r\n <!-- Max price [START] -->\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>M\u00E1ximo</mat-label>\r\n <input placeholder=\"M\u00E1ximo\" libFormatPrice [currency]=\"filtersForm.controls['currency'].value\" [control]=\"filtersForm.controls['maxPrice']\"\r\n autocomplete=\"off\" matInput=\"\" type=\"text\" title=\"max price\" formControlName=\"maxPrice\" (blur)=\"changePrice()\">\r\n <mat-error *ngIf=\"filtersForm.controls['maxPrice'].hasError('pattern')\">\r\n Debe ingresar solo n\u00FAmeros\r\n </mat-error>\r\n <mat-error *ngIf=\"filtersForm.controls['maxPrice'].hasError('required')\">\r\n Este campo es requerido\r\n </mat-error>\r\n <mat-error *ngIf=\"filtersForm.controls['maxPrice'].hasError('currency')\">\r\n Valor m\u00EDnimo excedido\r\n </mat-error>\r\n </mat-form-field>\r\n <!-- Max price [END] -->\r\n </div>\r\n <div class=\"features\">\r\n <ng-template\r\n [ngIf]=\"propertyTypeSelected.value === 'RESIDENTIAL' || propertyTypeSelected.value === 'HOUSE' || propertyTypeSelected.value === 'APARTMENT'\">\r\n <div class=\"features__bedrooms\">\r\n <h4 class=\"--title\">\r\n Habitaciones\r\n </h4>\r\n <mat-button-toggle-group name=\"bedrooms\" aria-label=\"Bedrooms\" formControlName=\"bedrooms\">\r\n <ng-container *ngFor=\"let bedroom of bedroomsList\">\r\n <ng-template [ngIf]=\"bedroom === 0\" [ngIfElse]=\"bedroomNumber\">\r\n <mat-button-toggle [value]=\"bedroom\" (click)=\"changeFilter()\" class=\"features__bedrooms--unlimited\">\r\n Sin <br> l\u00EDmite\r\n </mat-button-toggle>\r\n </ng-template>\r\n <ng-template #bedroomNumber>\r\n <mat-button-toggle [value]=\"bedroom\" (click)=\"changeFilter()\">{{bedroom}}+\r\n </mat-button-toggle>\r\n </ng-template>\r\n </ng-container>\r\n </mat-button-toggle-group>\r\n </div>\r\n <div class=\"features__bathrooms\">\r\n <h4 class=\"--title\">\r\n Ba\u00F1os\r\n </h4>\r\n <mat-button-toggle-group name=\"bathrooms\" aria-label=\"Bathrooms\" formControlName=\"bathrooms\">\r\n <ng-container *ngFor=\"let bathroom of bathroomsList\">\r\n <ng-template [ngIf]=\"bathroom === 0\" [ngIfElse]=\"bathroomNumber\">\r\n <mat-button-toggle [value]=\"bathroom\" (click)=\"changeFilter()\"\r\n class=\"features__bathrooms--unlimited\">\r\n Sin <br> l\u00EDmite\r\n </mat-button-toggle>\r\n </ng-template>\r\n <ng-template #bathroomNumber>\r\n <mat-button-toggle [value]=\"bathroom\" (click)=\"changeFilter()\">{{bathroom}}+\r\n </mat-button-toggle>\r\n </ng-template>\r\n </ng-container>\r\n </mat-button-toggle-group>\r\n </div>\r\n </ng-template>\r\n <ng-template [ngIf]=\"propertyTypeSelected.value !== 'LAND' && propertyTypeSelected.value !== 'INVESTMENT'\">\r\n <div class=\"features__parking-places\">\r\n <h4 class=\"--title\">\r\n Estacionamientos\r\n </h4>\r\n <mat-button-toggle-group name=\"parking_places\" aria-label=\"Parking Places\"\r\n formControlName=\"parkingPlaces\">\r\n <ng-container *ngFor=\"let parking of parkingPlacesList\">\r\n <ng-template [ngIf]=\"parking === 0\" [ngIfElse]=\"parkingNumber\">\r\n <mat-button-toggle [value]=\"parking\" (click)=\"changeFilter()\"\r\n class=\"features__parking-places--unlimited\">\r\n Sin <br> l\u00EDmite\r\n </mat-button-toggle>\r\n </ng-template>\r\n <ng-template #parkingNumber>\r\n <mat-button-toggle [value]=\"parking\" (click)=\"changeFilter()\">{{parking}}+\r\n </mat-button-toggle>\r\n </ng-template>\r\n </ng-container>\r\n </mat-button-toggle-group>\r\n </div>\r\n </ng-template>\r\n <ng-template [ngIf]=\"propertyTypeSelected.value !== 'INVESTMENT'\">\r\n <div class=\"features__surface\">\r\n <h4 class=\"--title\">\r\n Superficie\r\n </h4>\r\n <div class=\"--row\">\r\n <mat-form-field appearance=\"outline\" class=\"--col\">\r\n <mat-label>\u00C1rea</mat-label>\r\n <mat-select formControlName=\"surface\" placeholder=\"\u00C1rea\">\r\n <mat-option [value]=\"0\" (click)=\"changeFilter()\">\r\n Sin l\u00EDmite\r\n </mat-option>\r\n <ng-container *ngFor=\"let surface of surfaceList\">\r\n <mat-option [value]=\"surface\" (click)=\"changeFilter()\">\r\n {{surface}}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n <mat-button-toggle-group name=\"unit_surface\" aria-label=\"Unit surface\" formControlName=\"surfaceUnit\">\r\n <mat-button-toggle [value]=\"0\" (click)=\"changeFilter()\">m2</mat-button-toggle>\r\n <mat-button-toggle [value]=\"1\" (click)=\"changeFilter()\">sq ft</mat-button-toggle>\r\n </mat-button-toggle-group>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template [ngIf]=\"propertyTypeSelected.value === 'INVESTMENT'\">\r\n <div class=\"feature investment\">\r\n <h4 class=\"--title\">Retorno de inversi\u00F3n</h4>\r\n <mat-form-field appearance=\"outline\" class=\"--col\">\r\n <mat-label>Porcentaje</mat-label>\r\n <mat-select formControlName=\"roi\" placeholder=\"Porcentaje\">\r\n <mat-option [value]=\"0\" (click)=\"changeFilter()\">\r\n Sin l\u00EDmite\r\n </mat-option>\r\n <ng-container *ngFor=\"let roi of roiList\">\r\n <mat-option [value]=\"roi\" (click)=\"changeFilter()\">\r\n {{roi}}%\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </ng-template>\r\n <div class=\"amenities-container\" *ngIf=\"!hideAmenities\">\r\n <ng-template [ngIf]=\"propertyTypeSelected.amenities.length > 0\">\r\n <div class=\"amenities\">\r\n <h4 class=\"--title\">\r\n Amenidades\r\n </h4>\r\n <div class=\"amenities__list\">\r\n <ng-container *ngFor=\"let amenity of propertyTypeSelected.amenities\">\r\n <div class=\"amenities__amenity\" matRipple (click)=\"updateAmenity(amenity)\">\r\n <span class=\"amenity__icon ic-amenities-{{amenity.iconName}}\"\r\n [ngClass]=\"{'amenity--active': amenity.checked}\"></span>\r\n <span class=\"amenity__label\">{{amenity.name}}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template [ngIf]=\"propertyTypeSelected.features.length > 0\">\r\n <div class=\"amenities\">\r\n <h4 class=\"--title\">\r\n Caracteristicas de la ubicaci\u00F3n\r\n </h4>\r\n <div class=\"amenities__list\">\r\n <ng-container *ngFor=\"let feature of propertyTypeSelected.features\">\r\n <div class=\"amenities__amenity\" matRipple (click)=\"updateAmenity(feature)\">\r\n <span class=\"amenity__icon ic-amenities-{{feature.iconName}}\"\r\n [ngClass]=\"{'amenity--active': feature.checked}\"></span>\r\n <span class=\"amenity__label\">{{feature.name}}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <div class=\"actions\">\r\n <ng-template [ngIf]=\"!isOPI\">\r\n <button mat-flat-button=\"\" type=\"button\" class=\"action__button\" color=\"primary\" (click)=\"resetFilters(isRV ? 1 : null)\">\r\n LIMPIAR\r\n </button>\r\n </ng-template>\r\n <button mat-flat-button type=\"submit\" class=\"apply-button\" color=\"primary\" (click)=\"applyFilters()\" [disabled]=\"totalProperties === 0\">\r\n <span class=\"normal-text\">VER {{totalProperties}} {{totalProperties === 1 ? 'PROPIEDAD' : 'PROPIEDADES'}}</span>\r\n <span class=\"mobile-text\">BUSCAR</span>\r\n </button>\r\n </div>\r\n </div>\r\n <!--div class=\"actions\">\r\n <ng-template [ngIf]=\"!isOPI\" [ngIfElse]=\"closeButtonTemplate\">\r\n <button mat-flat-button=\"\" type=\"button\" class=\"action__button\" color=\"primary\" (click)=\"saveSearchByFilters()\">\r\n GUARDAR\r\n </button>\r\n </ng-template>\r\n <ng-template #closeButtonTemplate>\r\n <button mat-flat-button=\"\" type=\"button\" class=\"action__button\" color=\"primary\" (click)=\"close()\">CERRAR</button>\r\n </ng-template>\r\n <button mat-flat-button=\"\" type=\"button\" class=\"action__button\" color=\"primary\"\r\n (click)=\"resetFilters()\">LIMPIAR\r\n </button>\r\n </div-->\r\n</form>\r\n",
|
|
2914
|
+
styles: [":host{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;display:flex;background:var(--overlay);transition:250ms}.filters--opened{height:90%!important}@media screen and (max-width:600px){.filters--opened{width:100%!important;height:100%!important;top:0!important}}.filters{width:700px;height:auto;margin:auto;border-radius:16px;position:relative;overflow:hidden;transition:150ms}.filters .--padding{padding:16px 48px;box-sizing:border-box}.filters .--row{display:flex;justify-content:space-between;align-items:flex-start}.filters .--col{width:45%}.filters .--title{margin:16px 0}.filters .float-button-close{position:absolute;top:16px;right:16px;height:16px;border-radius:50%}.filters .apply-button{width:45%;border-radius:28px;height:40px;font-size:18px;font-weight:500}.filters .apply-button .mobile-text{display:none}.filters .apply-button .normal-text{display:initial}.filters .body{height:calc(100% - 36px);overflow-x:hidden;overflow-y:auto}.filters .header{display:flex;align-items:center;justify-content:space-around;margin-bottom:8px}.filters .listing-types{width:100%;border-radius:16px}.filters .listing-types mat-button-toggle{width:50%;height:36px}.filters ::ng-deep .listing-types mat-button-toggle button{height:36px}.filters ::ng-deep .listing-types mat-button-toggle button .mat-button-toggle-label-content{line-height:36px}.filters .currency ::ng-deep .mat-form-field-wrapper{padding:0}@media screen and (max-width:600px){.filters{width:100%;position:absolute;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;top:initial;bottom:0;left:0}.filters .--padding{padding:16px 24px}.filters .apply-button .mobile-text{display:initial}.filters .apply-button .normal-text{display:none}.filters .header{flex-direction:column}.filters .currency{width:70%;margin-bottom:8px}}.filters .offering-type-list{width:40%;border-radius:16px}.filters .offering-type-list mat-button-toggle{width:50%;height:36px}.filters ::ng-deep .offering-type-list mat-button-toggle button{height:36px}.filters ::ng-deep .offering-type-list mat-button-toggle button .mat-button-toggle-label-content{line-height:36px}.filters .property-type-list{display:-ms-grid;display:grid;-ms-grid-columns:(11.1111111111%)[9];grid-template-columns:repeat(9,11.1111111111%);-ms-grid-rows:(80px)[1];grid-template-rows:repeat(1,80px);border-radius:40px;padding:8px;box-sizing:border-box}@media screen and (max-width:600px){.filters .offering-type-list{width:70%}.filters .property-type-list{-ms-grid-columns:(33.3333333333%)[3];grid-template-columns:repeat(3,33.3333333333%);-ms-grid-rows:(80px)[3];grid-template-rows:repeat(3,80px)}}.filters .new-property-type-list{display:-ms-grid;display:grid;-ms-grid-columns:(12.5%)[8];grid-template-columns:repeat(8,12.5%);-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:(33.3333333333%)[3];grid-template-columns:repeat(3,33.3333333333%);-ms-grid-rows:(80px)[3];grid-template-rows:repeat(3,80px)}.filters .property-type-list .property-type-list__divider{width:60%}.filters .property-type-list .property-type-list__divider--left{left:-38px}.filters .property-type-list .property-type-list__divider--right{right:-38px}}.filters .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(50% - 8px)}.filters .features{display:-ms-grid;display:grid;-ms-grid-columns:(50%)[2];grid-template-columns:repeat(2,50%);-ms-grid-rows:(auto)[2];grid-template-rows:repeat(2,auto)}@media screen and (max-width:600px){.filters .all .all__button{width:50%;margin:0 25%}.filters .features{display:block}.filters .amenities-container{flex-direction:column}}.filters .features .features__bathrooms mat-button-toggle-group,.filters .features .features__bedrooms mat-button-toggle-group,.filters .features .features__parking-places mat-button-toggle-group{width:calc(100% - 16px);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(33.3333333333% - 24px);height:120px;border-radius:8px;padding:8px;display:inline-flex;flex-direction:column;align-items:center;box-sizing:border-box;margin:0 8px 8px 0;cursor:pointer}.filters .amenity__icon{display:block;width:24px;height:24px;margin:8px auto;font-size:24px;padding:8px;border-radius:50%}.filters .amenity__label{width:100%;display:block;text-align:center;font-size:12px;margin:auto}.filters .actions{display:flex;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}"]
|
|
2913
2915
|
}] }
|
|
2914
2916
|
];
|
|
2915
2917
|
/** @nocollapse */
|
|
@@ -2927,7 +2929,8 @@ FiltersComponent.propDecorators = {
|
|
|
2927
2929
|
totalProperties: [{ type: Input }],
|
|
2928
2930
|
hideAmenities: [{ type: Input }],
|
|
2929
2931
|
isRV: [{ type: Input }],
|
|
2930
|
-
filterChange: [{ type: Output }]
|
|
2932
|
+
filterChange: [{ type: Output }],
|
|
2933
|
+
closeEv: [{ type: Output }]
|
|
2931
2934
|
};
|
|
2932
2935
|
|
|
2933
2936
|
/**
|
|
@@ -3207,7 +3210,7 @@ PanoramaVisorComponent.decorators = [
|
|
|
3207
3210
|
{ type: Component, args: [{
|
|
3208
3211
|
selector: 'lib-panorama-visor',
|
|
3209
3212
|
template: "<div class=\"panorama-visor\">\r\n <ng-template [ngIf]=\"!showPanorama\">\r\n <div class=\"panorama-visor__loading\">\r\n <img class=\"loading__image\" src=\"https://storage.googleapis.com/maplander-develop/public/file/front-end/cdn/360-animation.gif\" alt=\"360 icon\">\r\n <p class=\"loading__label\">Cargando...</p>\r\n </div>\r\n </ng-template>\r\n <div #container class=\"panorama-visor__container\" [ngStyle]=\"{'opacity': showPanorama ? '1' : '0'}\">\r\n <div class=\"panorama-visor__actions\">\r\n <a mat-icon-button class=\"actions__menu-item\">\r\n <mat-icon>settings</mat-icon>\r\n <ul class=\"menu-item__hidden-list mat-elevation-z2\">\r\n <li mat-menu-item class=\"hidden-list__item\">\r\n Control\r\n <ul class=\"hidden-list__nested-list mat-elevation-z2\">\r\n <li mat-menu-item class=\"nested-list__item\" *ngIf=\"!isTouch\" (click)=\"changeControl('MOUSE')\">\r\n Mouse\r\n </li>\r\n <li mat-menu-item class=\"nested-list__item\" *ngIf=\"isTouch\" (click)=\"changeControl('TOUCH')\">\r\n Touch\r\n </li>\r\n <li mat-menu-item class=\"nested-list__item\" (click)=\"changeControl('SENSOR')\">\r\n Sensor\r\n </li>\r\n </ul>\r\n </li>\r\n <li mat-menu-item class=\"hidden-list__item\">\r\n Mode\r\n <ul class=\"hidden-list__nested-list mat-elevation-z2\">\r\n <li mat-menu-item class=\"nested-list__item\" (click)=\"changeMode('NORMAL')\">\r\n Normal\r\n </li>\r\n <li mat-menu-item class=\"nested-list__item\" (click)=\"changeMode('CARDBOARD')\">\r\n Cardboard\r\n </li>\r\n <li mat-menu-item class=\"nested-list__item\" (click)=\"changeMode('STEREOSCOPIC')\">\r\n Stereoscopic\r\n </li>\r\n </ul>\r\n </li>\r\n </ul>\r\n </a>\r\n <button mat-icon-button (click)=\"fullscreen()\">\r\n <mat-icon *ngIf=\"!isFullScreen\">fullscreen</mat-icon>\r\n <mat-icon *ngIf=\"isFullScreen\">fullscreen_exit</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n",
|
|
3210
|
-
styles: [":host{display:block;width:inherit;height:inherit}.panorama-visor{width:100%;padding-bottom:
|
|
3213
|
+
styles: [":host{display:block;width:inherit;height:inherit}.panorama-visor{width:100%;padding-bottom:75%;position:relative;border-radius:8px;transition:.2s;cursor:move}.panorama-visor__loading{position:absolute;width:100%;height:100%;font-size:12px;display:flex;flex-direction:column;align-items:center;justify-content:center}.loading__image{width:200px}.loading__label{color:#fff;font-weight:700}.panorama-visor__actions{position:absolute;border-radius:0 8px 8px 0;background:rgba(0,0,0,.4);z-index:100;color:#fff}.panorama-visor__actions button{display:block}.actions__menu-item{position:relative}.actions__menu-item:hover .menu-item__hidden-list,.hidden-list__item:hover .hidden-list__nested-list{display:block}.hidden-list__nested-list,.menu-item__hidden-list{display:none;list-style:none;position:absolute;background:#fff;margin:0;padding:0;left:calc(100% - 8px);top:0;z-index:1;border-radius:4px}.hidden-list__item,.nested-list__item{min-width:80px;padding:0 16px;text-align:left;cursor:pointer}.panorama-visor__container{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:8px;transition:250ms}::ng-deep .panorama-visor__container canvas{width:100%!important;height:100%!important}"]
|
|
3211
3214
|
}] }
|
|
3212
3215
|
];
|
|
3213
3216
|
/** @nocollapse */
|
|
@@ -3589,7 +3592,7 @@ MultimediaUploaderComponent.decorators = [
|
|
|
3589
3592
|
{ type: Component, args: [{
|
|
3590
3593
|
selector: 'lib-property-multimedia-uploader',
|
|
3591
3594
|
template: "<div class=\"multimedia-uploader\">\r\n <p class=\"title\">\r\n Multimedia\r\n <ng-template [ngIf]=\"currentIndex !== 2\">\r\n <lib-upload-file [content]=\"buttonUploadTemplate\" [noCrop]=\"true\" [fab]=\"true\" [fileType]=\"fileType\" [aspectRatio]=\"4 / 3\"\r\n [multiple]=\"true\"\r\n (loadImage)=\"onUploadImage($event)\">\r\n <ng-template #buttonUploadTemplate>\r\n <button mat-icon-button color=\"primary\">\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n </ng-template>\r\n </lib-upload-file>\r\n </ng-template>\r\n </p>\r\n <mat-tab-group class=\"multimedia-uploader__tab-group\" [selectedIndex]=\"currentIndex\"\r\n (selectedIndexChange)=\"onTabChanged($event)\">\r\n <mat-tab label=\"Fotografias\">\r\n <lib-custom-drag-and-drop [items]=\"images\" [content]=\"imageTemplate\" (itemsChanged)=\"onListChanged($event)\">\r\n <ng-template #imageTemplate let-image=\"image\" let-index=\"index\">\r\n <div class=\"list__item\" [ngClass]=\"{'first-photo': index === 0}\">\r\n <img alt=\"Property image\" [src]=\"image.fileCS.thumbnail\" class=\"list__item-img\">\r\n <button mat-icon-button class=\"list__item-button mat-elevation-z2\" (click)=\"removeMedia(image)\">\r\n <mat-icon class=\"list__item-icon\">close</mat-icon>\r\n </button>\r\n </div>\r\n </ng-template>\r\n </lib-custom-drag-and-drop>\r\n </mat-tab>\r\n <mat-tab label=\"Esfericas\">\r\n <lib-custom-drag-and-drop [items]=\"images360\" [content]=\"image360Template\" (itemsChanged)=\"onListChanged($event)\">\r\n <ng-template #image360Template let-image=\"image\">\r\n <div class=\"list__item\">\r\n <img alt=\"Property image\" [src]=\"image.fileCS.thumbnail\" class=\"list__item-img\">\r\n <button mat-icon-button class=\"list__item-button mat-elevation-z2\" (click)=\"removeMedia(image)\">\r\n <mat-icon class=\"list__item-icon\">close</mat-icon>\r\n </button>\r\n </div>\r\n </ng-template>\r\n </lib-custom-drag-and-drop>\r\n </mat-tab>\r\n <mat-tab label=\"Videos\">\r\n <div class=\"you-tube-container\">\r\n <span class=\"you-tube-container__searchbox\">\r\n <button *ngIf=\"inputYouTube.value !== ''\" mat-icon-button class=\"you-tube-container__close-btn\"\r\n (click)=\"inputYouTube.value = ''\"><mat-icon>close</mat-icon></button>\r\n <input class=\"you-tube-container__input\" #inputYouTube (input)=\"onYouTubeInputTextChanged(inputYouTube)\"\r\n title=\"YouTube URL\" placeholder=\"YouTube URL o YouTube Video ID\">\r\n </span>\r\n <a href=\"https://www.youtube.com\" target=\"_blank\" mat-button color=\"primary\">\r\n Ir a Youtube\r\n </a>\r\n </div>\r\n <lib-custom-drag-and-drop [items]=\"videos\" [content]=\"videosTemplate\" (itemsChanged)=\"onListChanged($event)\">\r\n <ng-template #videosTemplate let-image=\"image\">\r\n <div class=\"list__item\">\r\n <img alt=\"Property image\" [src]=\"'https://i3.ytimg.com/vi/'+image.fileCS.thumbnail+'/hqdefault.jpg'\"\r\n class=\"list__item-img\">\r\n <button mat-icon-button class=\"list__item-button mat-elevation-z2\" (click)=\"removeMedia(image)\">\r\n <mat-icon class=\"list__item-icon\">close</mat-icon>\r\n </button>\r\n </div>\r\n </ng-template>\r\n </lib-custom-drag-and-drop>\r\n </mat-tab>\r\n </mat-tab-group>\r\n <div class=\"multimedia-uploader__actions\">\r\n <button mat-flat-button color=\"primary\" class=\"actions__button\" (click)=\"close()\">\r\n CERRAR\r\n </button>\r\n <button mat-flat-button color=\"primary\" class=\"actions__button\" (click)=\"accept()\">\r\n ACEPTAR\r\n </button>\r\n </div>\r\n</div>\r\n",
|
|
3592
|
-
styles: [":host{display:block;width:100%;height:100%}::ng-deep .multimedia-uploader-panel-class{width:50%;height:70%}::ng-deep .multimedia-uploader-panel-class mat-dialog-container{width:100%;height:100%;padding:16px;overflow:hidden;position:relative}.multimedia-uploader{width:100%;height:100%}.multimedia-uploader__actions{position:absolute;left:0;bottom:0;width:100%;background:#fff;z-index:1}.actions__button{width:50%}.actions__button:first-child{border-radius:8px 0 0}.actions__button:last-child{border-radius:0 8px 0 0}.title{font-weight:700;display:flex;align-items:center;justify-content:space-between;padding:0 16px;margin:0}.multimedia-uploader__tab-group{width:100%;height:calc(100% - 36px)}.multimedia-uploader__list{width:100%;height:100%;overflow-x:hidden;overflow-y:auto;display:-ms-grid;display:grid;-ms-grid-columns:(
|
|
3595
|
+
styles: [":host{display:block;width:100%;height:100%}::ng-deep .multimedia-uploader-panel-class{width:50%;height:70%}::ng-deep .multimedia-uploader-panel-class mat-dialog-container{width:100%;height:100%;padding:16px;overflow:hidden;position:relative}.multimedia-uploader{width:100%;height:100%}.multimedia-uploader__actions{position:absolute;left:0;bottom:0;width:100%;background:#fff;z-index:1}.actions__button{width:50%}.actions__button:first-child{border-radius:8px 0 0}.actions__button:last-child{border-radius:0 8px 0 0}.title{font-weight:700;display:flex;align-items:center;justify-content:space-between;padding:0 16px;margin:0}.multimedia-uploader__tab-group{width:100%;height:calc(100% - 36px)}.multimedia-uploader__list{width:100%;height:100%;overflow-x:hidden;overflow-y:auto;display:-ms-grid;display:grid;-ms-grid-columns:(33.3333333333%)[3];grid-template-columns:repeat(3,33.3333333333%)}@media screen and (max-width:600px){::ng-deep .multimedia-uploader-panel-class{width:100%!important;max-width:100%!important;height:100%!important}.multimedia-uploader__list{-ms-grid-columns:100%;grid-template-columns:100%}}.list__item{width:200px;height:150px;border-radius:8px;margin:16px auto;position:relative}.first-photo:after{content:\"Imagen principal del anuncio\";position:absolute;top:0;padding:8px;box-sizing:border-box;font-size:12px;width:100%;color:#fff;background:rgba(0,0,0,.3)}.list__item-img{position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:8px}.list__item-button{position:absolute;width:24px;height:24px;top:-12px;right:-12px;background:#000;color:#fff}.list__item-icon{width:24px;height:24px;font-size:16px;line-height:8px}.you-tube-container{display:flex;padding:8px 0;box-sizing:border-box;justify-content:space-between;position:-webkit-sticky;position:sticky;top:0;z-index:5;background:#fff}.you-tube-container__searchbox{position:relative;width:calc(100% - 120px);box-sizing:border-box;display:flex;align-items:center}.you-tube-container__close-btn{position:absolute;right:0}.you-tube-container__input{width:100%;border:1px solid #d3d3d3;padding:8px 32px 8px 8px;border-radius:8px;outline:0}"]
|
|
3593
3596
|
}] }
|
|
3594
3597
|
];
|
|
3595
3598
|
/** @nocollapse */
|
|
@@ -3838,7 +3841,7 @@ GalleryComponent.decorators = [
|
|
|
3838
3841
|
{ type: Component, args: [{
|
|
3839
3842
|
selector: 'lib-gallery',
|
|
3840
3843
|
template: "<div class=\"gallery\">\r\n <mat-sidenav-container class=\"gallery__sidenav-container\">\r\n <mat-sidenav mode=\"side\" [opened]=\"sideOpened\" class=\"sidenav-container__sidenav\">\r\n <mat-toolbar class=\"sidenav__toolbar\" color=\"primary\">\r\n <span>Galeria</span>\r\n <button mat-icon-button (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </mat-toolbar>\r\n <mat-toolbar class=\"sidenav__thumbnails-types\">\r\n <button class=\"thumbnails-types__item-type\" mat-button\r\n [ngClass]=\"{'item-type--selected': typeSelected === 'IMAGE'}\" (click)=\"changePFileType('IMAGE')\">\r\n <span class=\"item-type__icon ic-component-property-file-image\"></span>\r\n <span class=\"item-type__label\">{{count.image}}</span>\r\n </button>\r\n <button class=\"thumbnails-types__item-type\" mat-button\r\n [ngClass]=\"{'item-type--selected': typeSelected === 'SPHERIC'}\" (click)=\"changePFileType('SPHERIC')\">\r\n <span class=\"item-type__icon ic-component-property-sphere\"></span>\r\n <span class=\"item-type__label\">{{count.sphere}}</span>\r\n </button>\r\n <button class=\"thumbnails-types__item-type\" mat-button\r\n [ngClass]=\"{'item-type--selected': typeSelected === 'VIDEO'}\" (click)=\"changePFileType('VIDEO')\">\r\n <span class=\"item-type__icon ic-component-property-video\"></span>\r\n <span class=\"item-type__label\">{{count.video}}</span>\r\n </button>\r\n </mat-toolbar>\r\n <div class=\"sidenav__thumbnail-list\">\r\n <ng-container *ngFor=\"let image of multimedia; let i = index\">\r\n <div class=\"thumbnail-list__item\" (click)=\"selectPFile(i)\"\r\n [ngClass]=\"{'thumbnail-list__item--selected': indexSelected === i}\">\r\n <ng-template [ngIf]=\"image.type !== 'VIDEO'\" [ngIfElse]=\"youTubeVideo\">\r\n <img class=\"item__img\" [src]=\"image.fileCS.thumbnail\" alt=\"Property image\">\r\n </ng-template>\r\n <ng-template #youTubeVideo>\r\n <img class=\"item__img\" [src]=\"'https://i3.ytimg.com/vi/'+image.fileCS.thumbnail+'/hqdefault.jpg'\"\r\n alt=\"Property image\">\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n <ng-template [ngIf]=\"multimedia.length === 0\">\r\n <div class=\"thumbnail-list__empty-list\">\r\n <p class=\"empty-list__label\">\r\n Por el momento no hay\r\n <span *ngIf=\"typeSelected === 'IMAGE'\">fotos</span>\r\n <span *ngIf=\"typeSelected === 'VIDEO'\">videos</span>\r\n <span *ngIf=\"typeSelected === 'SPHERIC'\">fotos esf\u00E9ricas</span>\r\n </p>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </mat-sidenav>\r\n <mat-sidenav-content class=\"sidenav-container__content\" [ngStyle]=\"{'width': sideOpened ? '80%' : '100%'}\">\r\n <button class=\"sidenav-container__button-sidenav\" mat-flat-button color=\"primary\" (click)=\"updateSideNav()\">\r\n <mat-icon *ngIf=\"sideOpened\">chevron_left</mat-icon>\r\n <mat-icon *ngIf=\"!sideOpened\">chevron_right</mat-icon>\r\n </button>\r\n <button class=\"sidenav-container__button-close\" mat-mini-fab color=\"primary\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n <div class=\"content__list-container\">\r\n <lib-property-slide-show class=\"list-container__slide-show\" [multimedia]=\"multimedia\" [selectIndex]=\"indexSelected\"\r\n [initialIndex]=\"indexSelected\"\r\n (currentIndex)=\"onIndexSelectedChange($event)\"></lib-property-slide-show>\r\n </div>\r\n </mat-sidenav-content>\r\n </mat-sidenav-container>\r\n</div>\r\n",
|
|
3841
|
-
styles: ["::ng-deep .gallery_dialog{max-width:100%!important;width:100%;height:100%}::ng-deep .gallery_dialog mat-dialog-container{width:100%;height:100%;padding:0}:host{display:block;width:100%;height:100%}.gallery,.gallery__sidenav-container{width:100%;height:100%}.sidenav__toolbar{display:flex;justify-content:space-between}.sidenav__thumbnail-list{width:100%;height:calc(100% - 128px);padding:16px;box-sizing:border-box;overflow-x:hidden;overflow-y:auto}.thumbnail-list__empty-list{width:100%;height:100%;display:flex}.empty-list__label{margin:auto;text-align:center}.thumbnail-list__item{width:100%;cursor:pointer;padding-bottom:
|
|
3844
|
+
styles: ["::ng-deep .gallery_dialog{max-width:100%!important;width:100%;height:100%}::ng-deep .gallery_dialog mat-dialog-container{width:100%;height:100%;padding:0}:host{display:block;width:100%;height:100%}.gallery,.gallery__sidenav-container{width:100%;height:100%}.sidenav__toolbar{display:flex;justify-content:space-between}.sidenav__thumbnail-list{width:100%;height:calc(100% - 128px);padding:16px;box-sizing:border-box;overflow-x:hidden;overflow-y:auto}.thumbnail-list__empty-list{width:100%;height:100%;display:flex}.empty-list__label{margin:auto;text-align:center}.thumbnail-list__item{width:100%;cursor:pointer;padding-bottom:75%;border-radius:8px;margin-bottom:16px;position:relative}.item__img{position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:8px}.sidenav-container__sidenav{width:20%}@media screen and (max-width:1024px){.sidenav-container__sidenav{width:100%}}.sidenav__thumbnails-types{display:flex;align-items:center;justify-content:space-around}.item-type{padding:0}.item-type__label{padding:0 4px;display:inline-block}.item-type__icon{display:inline-block;width:24px;height:24px;font-size:24px;margin:auto}.sidenav-container__content{width:80%;display:flex;position:relative}@media screen and (max-width:1024px){.sidenav-container__content{width:100%}}.sidenav-container__button-sidenav{position:absolute;top:0;left:0;height:64px;padding:0;min-width:36px;border-radius:0 8px 8px 0;z-index:1}.sidenav-container__button-close{position:absolute;top:16px;right:16px;z-index:1}.content__list-container{width:100%;height:100%;margin:auto;overflow:hidden;position:relative;border-radius:8px}.list-container__slide-show{width:100%;height:100%;padding:initial}::ng-deep .list-container__slide-show .panorama-visor{height:100%!important;padding:initial!important}::ng-deep .list-container__slide-show lib-panorama-visor .panorama-visor__actions{top:72px!important}"]
|
|
3842
3845
|
}] }
|
|
3843
3846
|
];
|
|
3844
3847
|
/** @nocollapse */
|
|
@@ -3922,7 +3925,7 @@ StatsComponent.decorators = [
|
|
|
3922
3925
|
{ type: Component, args: [{
|
|
3923
3926
|
selector: 'lib-stats',
|
|
3924
3927
|
template: "<div class=\"stats\">\r\n <mat-toolbar class=\"stats__toolbar\" color=\"primary\">\r\n Estad\u00EDsticas\r\n <button mat-icon-button (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </mat-toolbar>\r\n <div class=\"stats__content\">\r\n <div class=\"content__stat\">\r\n <div class=\"stat__icon-container\">\r\n <mat-icon>visibility</mat-icon>\r\n </div>\r\n <p class=\"stat__count\">\r\n {{data.views ? data.views['RV'] || 0 : 0}}\r\n </p>\r\n <p class=\"stat__label\">\r\n Vistas en Renta o Venta\r\n </p>\r\n <div class=\"stat__app-icon\">\r\n <img alt=\"Renta o Venta logo\" class=\"app-icon__img\" src=\"https://storage.googleapis.com/maplander-develop/public/file/front-end/email/rentaoventa.png\">\r\n </div>\r\n </div>\r\n <div class=\"content__stat\">\r\n <div class=\"stat__icon-container\">\r\n <mat-icon>visibility</mat-icon>\r\n </div>\r\n <p class=\"stat__count\">\r\n {{data.views ? data.views['FIABCI'] || 0 : 0}}\r\n </p>\r\n <p class=\"stat__label\">\r\n Vistas en GlobalMLS\r\n </p>\r\n <div class=\"stat__app-icon\">\r\n <img alt=\"GlobalMLS logo\" class=\"app-icon__img\" src=\"https://storage.googleapis.com/maplander-develop/public/file/front-end/email/globalmls.png\">\r\n </div>\r\n </div>\r\n <div class=\"content__stat\">\r\n <div class=\"stat__icon-container\">\r\n <mat-icon>favorite</mat-icon>\r\n </div>\r\n <p class=\"stat__count\">\r\n {{data.favorites || 0}}\r\n </p>\r\n <p class=\"stat__label\">\r\n Veces a\u00F1adida a favoritos\r\n </p>\r\n </div>\r\n <div class=\"content__stat\">\r\n <div class=\"stat__icon-container\">\r\n <mat-icon>share</mat-icon>\r\n </div>\r\n <p class=\"stat__count\">\r\n {{data.shared || 0}}\r\n </p>\r\n <p class=\"stat__label\">\r\n Veces compartida\r\n </p>\r\n </div>\r\n <div class=\"content__stat\">\r\n <div class=\"stat__icon-container\">\r\n <mat-icon>assignment</mat-icon>\r\n </div>\r\n <p class=\"stat__count\">\r\n {{data.requests || 0}}\r\n </p>\r\n <p class=\"stat__label\">\r\n Solicitudes de informaci\u00F3n\r\n </p>\r\n </div>\r\n </div>\r\n</div>\r\n",
|
|
3925
|
-
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:(
|
|
3928
|
+
styles: ["::ng-deep .stats-panel-class{width:30%;height:80%}::ng-deep .stats-panel-class mat-dialog-container{padding:0;overflow:hidden}@media screen and (max-width:600px){::ng-deep .stats-panel-class{min-width:90%!important}}:host{display:block;width:100%;height:100%}.stats{width:100%;height:100%;overflow:auto}.stats__toolbar{width:100%;height:64px;display:flex;position:-webkit-sticky;position:sticky;top:0;z-index:2;justify-content:space-between}.stats__content{padding:16px;box-sizing:content-box;display:-ms-grid;display:grid;-ms-grid-columns:(50%)[2];grid-template-columns:repeat(2,50%)}.content__stat{border:1px solid #000;border-radius:8px;padding:16px;box-sizing:content-box;position:relative;margin:0 16px 16px 0}.stat__icon-container{position:absolute;top:16px;right:16px}.stat__app-icon{position:absolute;bottom:16px;right:16px}.app-icon__img{width:24px;height:24px;border-radius:4px}.stat__count{font-size:32px;font-weight:700;margin:0 0 16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stat__label{width:80%;margin:0}"]
|
|
3926
3929
|
}] }
|
|
3927
3930
|
];
|
|
3928
3931
|
/** @nocollapse */
|
|
@@ -4391,7 +4394,7 @@ PropertyComponent.decorators = [
|
|
|
4391
4394
|
{ type: Component, args: [{
|
|
4392
4395
|
selector: 'lib-property',
|
|
4393
4396
|
template: "<div class=\"property\">\r\n <div class=\"header\">\r\n <ng-container [ngSwitch]=\"mode\">\r\n <ng-container *ngSwitchCase=\"'add'\">\r\n <h1 class=\"title\">\r\n <span *ngIf=\"!completeProperty.property.id\">Cargar </span>\r\n <span *ngIf=\"completeProperty.property.id\">Editar </span>\r\n expediente de {{ propertyType | propertyType }}\r\n </h1>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'record'\">\r\n <h1 class=\"title\">Expediente de {{propertyType | propertyType}}</h1>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'detail'\">\r\n <div class=\"breadcrumb-list\">\r\n <p class=\"breadcrumb-content\">\r\n <span class=\"breadcrumb-item\">\r\n {{completeProperty.property.type | propertyType}}\r\n </span>\r\n <span class=\"breadcrumb-item\">\r\n {{completeProperty.property.offering | offeringType : ' ' | stringManipulation : 'capitalize'}}\r\n </span>\r\n <span *ngIf=\"completeProperty.property.address.city\" class=\"breadcrumb-item\">\r\n {{completeProperty.property.address.city}}\r\n </span>\r\n <span *ngIf=\"completeProperty.property.address.postalCode\" class=\"breadcrumb-item\">\r\n {{completeProperty.property.address.postalCode}}\r\n </span>\r\n <span *ngIf=\"completeProperty.property.address.colony\" class=\"breadcrumb-item\">\r\n {{completeProperty.property.address.colony}}\r\n </span>\r\n </p>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <div class=\"header__actions\">\r\n <!-- Button Publish [START] -->\r\n <ng-template\r\n [ngIf]=\"(mode === 'record' || mode === 'add') && (completeProperty.property.status !== 'ANNOUNCED' && completeProperty.property.status !== 'HIDDEN')\">\r\n <button mat-icon-button color=\"primary\" matTooltip=\"Publicar\" matTooltipPosition=\"left\"\r\n class=\"header__actions-button-publish\" (click)=\"goToPublish()\">\r\n <span class=\"header__actions-button-publish-icon ic-property-status-announce\"></span>\r\n </button>\r\n </ng-template>\r\n <!-- Button Publish [END] -->\r\n <ng-container [ngSwitch]=\"mode\">\r\n <ng-container *ngSwitchCase=\"'add'\">\r\n <ng-template [ngIf]=\"multimedia.length > 0\">\r\n <button mat-icon-button color=\"primary\" (click)=\"openUploaderMultimedia()\">\r\n <mat-icon>photo_library</mat-icon>\r\n </button>\r\n </ng-template>\r\n <ng-template [ngIf]=\"completeProperty?.property?.id\">\r\n <button mat-icon-button color=\"primary\" matTooltip=\"Guardar\" matTooltipPosition=\"left\" (click)=\"saveData()\">\r\n <mat-icon>save</mat-icon>\r\n </button>\r\n </ng-template>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'record'\">\r\n <ng-template\r\n [ngIf]=\"!sharedProperty.isShared && (completeProperty.property.status !== 'DRAFT' && completeProperty.property.status !== 'NONE')\">\r\n <button mat-icon-button color=\"primary\" matTooltip=\"Estad\u00EDsticas\" matTooltipPosition=\"left\"\r\n (click)=\"goToStats()\">\r\n <mat-icon>bar_chart</mat-icon>\r\n </button>\r\n </ng-template>\r\n <ng-template\r\n [ngIf]=\"(completeProperty.property.status === 'ANNOUNCED' || completeProperty.property.status === 'HIDDEN') && !sharedProperty.isShared\">\r\n <button mat-icon-button color=\"primary\"\r\n matTooltip=\"{{completeProperty.property.status === 'ANNOUNCED' ? 'Ocultar' : 'Mostrar'}}\"\r\n matTooltipPosition=\"left\" (click)=\"goToUpdateVisibility()\">\r\n <mat-icon *ngIf=\"completeProperty.property.status === 'HIDDEN'\">visibility</mat-icon>\r\n <mat-icon *ngIf=\"completeProperty.property.status === 'ANNOUNCED'\">visibility_off</mat-icon>\r\n </button>\r\n </ng-template>\r\n <ng-template [ngIf]=\"!sharedProperty.isShared\">\r\n <button mat-icon-button color=\"primary\" matTooltip=\"Editar\" matTooltipPosition=\"left\"\r\n (click)=\"goToEditProperty()\">\r\n <mat-icon>edit</mat-icon>\r\n </button>\r\n </ng-template>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'detail'\">\r\n <ng-template [ngIf]=\"isOPI\" [ngIfElse]=\"maplanderActions\">\r\n <button mat-flat-button color=\"primary\" class=\"header__actions-button-commission\"\r\n [disabled]=\"disableShareCommission\"\r\n (click)=\"agentActions('SHARE_COMMISSION')\">\r\n <span *ngIf=\"!disableShareCommission\">Solicitar comisi\u00F3n compartida</span>\r\n <span *ngIf=\"disableShareCommission\">Solicitud pendiente</span>\r\n </button>\r\n </ng-template>\r\n <ng-template #maplanderActions>\r\n <button mat-flat-button color=\"primary\" class=\"header__actions-button-commission\"\r\n (click)=\"agentActions('SHOW_AGENTS')\">\r\n Mostrar Asesor\r\n </button>\r\n <button mat-icon-button color=\"primary\" class=\"header__actions-button-commission\"\r\n (click)=\"agentActions('FAVORITE')\">\r\n <mat-icon *ngIf=\"isFavorite\">favorite</mat-icon>\r\n <mat-icon *ngIf=\"!isFavorite\">favorite_border</mat-icon>\r\n </button>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <!-- Button Share [START] -->\r\n <ng-template\r\n [ngIf]=\"mode === 'detail' || (mode === 'record' && (completeProperty.property.status === 'READY' || completeProperty.property.status === 'ANNOUNCED'))\" [ngIfElse]=\"noShare\">\r\n <button mat-icon-button color=\"primary\" (click)=\"shareProperty()\">\r\n <mat-icon>share</mat-icon>\r\n </button>\r\n </ng-template>\r\n <!-- Button Share [END] -->\r\n <ng-template #noShare>\r\n <ng-template [ngIf]=\"sharedProperty.isShared\">\r\n <h1 class=\"title\">\r\n Propiedad oculta</h1>\r\n </ng-template>\r\n </ng-template>\r\n <!-- Button Back [START] -->\r\n <button mat-icon-button color=\"primary\" (click)=\"goToBack()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n <!-- Button Back [END] -->\r\n </div>\r\n </div>\r\n <div class=\"body\">\r\n <div class=\"body__multimedia-wrapper\">\r\n <div class=\"multimedia-wrapper__list-thumbnails\">\r\n <div class=\"list-thumbnails__wrapper-thumbnails\">\r\n <div class=\"wrapper-thumbnails__header-types\">\r\n <button mat-button class=\"header-types__button-type\"\r\n [ngClass]=\"{'header-types__button-type--active': currentType === 'IMAGE'}\"\r\n (click)=\"changeMultimediaType('IMAGE')\">\r\n <span class=\"button-type__icon ic-component-property-file-image\"></span>\r\n <span class=\"button-type__label\">{{multimediaCount.images}}</span>\r\n </button>\r\n <button mat-button class=\"header-types__button-type\"\r\n [ngClass]=\"{'header-types__button-type--active': currentType === 'SPHERIC'}\"\r\n (click)=\"changeMultimediaType('SPHERIC')\">\r\n <span class=\"button-type__icon ic-component-property-sphere\"></span>\r\n <span class=\"button-type__label\">{{multimediaCount.images360}}</span>\r\n </button>\r\n <button mat-button class=\"header-types__button-type\"\r\n [ngClass]=\"{'header-types__button-type--active': currentType === 'VIDEO'}\"\r\n (click)=\"changeMultimediaType('VIDEO')\">\r\n <span class=\"button-type__icon ic-component-property-video\"></span>\r\n <span class=\"button-type__label\">{{multimediaCount.videos}}</span>\r\n </button>\r\n </div>\r\n <ng-template [ngIf]=\"multimedia && multimedia.length === 0\">\r\n <div class=\"wrapper-thumbnails__item-thumbnail\"></div>\r\n <div class=\"wrapper-thumbnails__item-thumbnail\"></div>\r\n <div class=\"wrapper-thumbnails__item-thumbnail\"></div>\r\n </ng-template>\r\n <ng-container *ngFor=\"let image of multimedia; let i = index;\">\r\n <div class=\"wrapper-thumbnails__item-thumbnail\"\r\n [ngClass]=\"{'wrapper-thumbnails__item-thumbnail--selected': i === currentIndex}\"\r\n (click)=\"onMultimediaIndexChanged(i)\">\r\n <ng-container [ngSwitch]=\"image.type\">\r\n <ng-container *ngSwitchCase=\"'VIDEO'\">\r\n <img class=\"item-thumbnail__img\" alt=\"Property image\"\r\n [src]=\"'https://i3.ytimg.com/vi/'+image.fileCS.thumbnail+'/hqdefault.jpg'\">\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <img class=\"item-thumbnail__img\" alt=\"Property image\" [src]=\"image.fileCS.thumbnail\">\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"multimedia-wrapper__front-image\">\r\n <lib-property-slide-show [multimedia]=\"multimedia\"\r\n [selectIndex]=\"currentIndex\"\r\n (currentIndex)=\"onMultimediaIndexChanged($event)\"\r\n [customActions]=\"customSlideShowActions\"\r\n ></lib-property-slide-show>\r\n <ng-template [ngIf]=\"mode === 'add' && multimedia.length === 0\">\r\n <div class=\"front-image__upload-multimedia\">\r\n <div class=\"upload-multimedia__container-add-multimedia\">\r\n <button class=\"container-add-multimedia__button\" mat-button color=\"primary\"\r\n (click)=\"openUploaderMultimedia()\">\r\n AGREGAR\r\n </button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template #customSlideShowActions>\r\n <button *ngIf=\"multimedia.length > 0\" mat-icon-button (click)=\"openGallery()\" matTooltip=\"Fullscreen\">\r\n <mat-icon>fullscreen</mat-icon>\r\n </button>\r\n </ng-template>\r\n </div>\r\n </div>\r\n <div class=\"body__additional-content\">\r\n <ng-template\r\n [ngIf]=\"mode === 'record' && property.property.status === 'ANNOUNCED' && property.property.propertyInfo.mls\">\r\n <div class=\"additional-content__mls\">\r\n <p class=\"mls__title\">\r\n Bolsa inmobiliaria\r\n </p>\r\n <button mat-flat-button color=\"primary\" class=\"mls__button\"\r\n (click)=\"agentActions('REAL_ESTATE_EXCHANGE')\">\r\n Mesa de comercializaci\u00F3n\r\n </button>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <div class=\"body__content\">\r\n <ng-container [ngSwitch]=\"mode\">\r\n <ng-container *ngSwitchCase=\"'detail'\">\r\n <lib-property-details [property]=\"completeProperty.property\" [mlsLabel]=\"mlsLabel\"\r\n [currencyConverted]=\"currencyConverted\" [visibleTour]=\"!isOPI\"></lib-property-details>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'record'\">\r\n <lib-property-details [property]=\"completeProperty.property\" [mlsLabel]=\"mlsLabel\"\r\n [record]=\"true\"></lib-property-details>\r\n <ng-template [ngIf]=\"sharedProperty.ownerAvailable\">\r\n <div class=\"content__private-info\">\r\n <p class=\"private-info__title\">INFORMACI\u00D3N PRIVADA</p>\r\n <lib-property-owner-info [owner]=\"completeProperty.property.propertyInfo.owner\"\r\n [disabled]=\"true\"></lib-property-owner-info>\r\n <ng-template [ngIf]=\"!sharedProperty.isShared\">\r\n <lib-property-documents [files]=\"completeProperty.files\" [disabled]=\"true\"></lib-property-documents>\r\n </ng-template>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'add'\">\r\n <ng-template [ngIf]=\"frontImageError\">\r\n <p class=\"content__error-front-image\">\r\n * Debe subir al menos una imagen\r\n </p>\r\n </ng-template>\r\n <lib-property-editor [utils]=\"utils\" [propertyType]=\"propertyType\" [address]=\"address\"\r\n [mlsLabel]=\"mlsLabel\"\r\n [property]=\"completeProperty.property\"\r\n (editorInstance)=\"onEditorInstance($event)\"\r\n (selectAddress)=\"onSelectAddress()\"></lib-property-editor>\r\n <div class=\"content__private-info\">\r\n <p class=\"private-info__title\">INFORMACI\u00D3N PRIVADA</p>\r\n <lib-property-owner-info (ownerInstance)=\"onOwnerInstance($event)\"\r\n [owner]=\"completeProperty.property.propertyInfo.owner\"></lib-property-owner-info>\r\n <lib-property-documents (documentsInstance)=\"onDocumentsInstance($event)\"\r\n [files]=\"completeProperty.files\"></lib-property-documents>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"footer mat-elevation-z2\" [ngClass]=\"{'footer--primary': mode === 'record'}\"\r\n [ngStyle]=\"{'display': (mode === 'detail' && isOPI) ? 'none' : 'block'}\">\r\n <ng-container [ngSwitch]=\"mode\">\r\n <ng-container *ngSwitchCase=\"'detail'\">\r\n <div class=\"footer__footer-content\">\r\n <ng-template [ngIf]=\"!isOPI\">\r\n <button mat-raised-button color=\"primary\" class=\"footer-content__button-request-info mat-elevation-z2\"\r\n (click)=\"agentActions('REQUEST_INFO')\">\r\n Solicitar informaci\u00F3n\r\n </button>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'record'\">\r\n <div class=\"footer__footer-content\">\r\n <p class=\"footer-content__status-label\">\r\n <ng-container [ngSwitch]=\"completeProperty.property.status\">\r\n <ng-container *ngSwitchCase=\"'HIDDEN'\">\r\n Propiedad oculta\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'READY'\">\r\n Propiedad lista <br> para publicar\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'EXPIRED'\">\r\n Propiedad expirada desde el <br>\r\n {{completeProperty.property.propertyInfo.endPublishDate | libFormatDate : true : 'dd MMMMM yyyy'}}\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'ANNOUNCED'\">\r\n Anunciada\r\n <br> Anuncio valido hasta el\r\n {{completeProperty.property.propertyInfo.endPublishDate | libFormatDate : true : 'dd MMMMM yyyy'}}\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n Propiedad en borrador\r\n </ng-container>\r\n </ng-container>\r\n </p>\r\n <div class=\"footer-content__fab\">\r\n <eco-fab-speed-dial>\r\n <eco-fab-speed-dial-trigger>\r\n <button mat-fab color=\"primary\">\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n </eco-fab-speed-dial-trigger>\r\n <eco-fab-speed-dial-actions>\r\n <button *ngIf=\"completeProperty.property.status !== 'NONE' && completeProperty.property.status !== 'DRAFT'\"\r\n mat-mini-fab color=\"primary\" matTooltip=\"Clientes\" matTooltipPosition=\"left\" (click)=\"goToClients()\">\r\n <mat-icon class=\"fab-button__icon\">people</mat-icon>\r\n </button>\r\n <button *ngIf=\"!sharedProperty.isShared\" mat-mini-fab color=\"primary\" matTooltip=\"Archivar propiedad\"\r\n matTooltipPosition=\"left\"\r\n (click)=\"agentActions('ARCHIVE')\">\r\n <mat-icon class=\"fab-button__icon\">archive</mat-icon>\r\n </button>\r\n <button mat-mini-fab color=\"primary\" matTooltip=\"Generar letrero\" matTooltipPosition=\"left\"\r\n (click)=\"agentActions('POSTER')\">\r\n <span class=\"fab-button__icon ic-component-property-poster\"></span>\r\n </button>\r\n <button mat-mini-fab color=\"primary\" matTooltip=\"Generar folleto\" matTooltipPosition=\"left\"\r\n (click)=\"agentActions('BROCHURE')\">\r\n <span class=\"fab-button__icon ic-component-property-brochure\"></span>\r\n </button>\r\n <button mat-mini-fab color=\"primary\" matTooltip=\"Generar lona\" matTooltipPosition=\"left\"\r\n (click)=\"agentActions('TARPS')\">\r\n <span class=\"fab-button__icon ic-component-property-canvas\"></span>\r\n </button>\r\n </eco-fab-speed-dial-actions>\r\n </eco-fab-speed-dial>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'add'\">\r\n <div class=\"footer__footer-content\">\r\n <button class=\"footer-content__button-save\" mat-flat-button color=\"primary\" (click)=\"saveData()\">Guardar\r\n </button>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</div>\r\n",
|
|
4394
|
-
styles: [":host{width:100%;height:100%;display:block}.property{position:relative;width:100%;height:100%;z-index:5;border-radius:4px}.title{margin:0 16px;font-size:24px}.breadcrumb-list{width:50%;padding:4px 16px;box-sizing:border-box;border-radius:0 24px 24px 0}.breadcrumb-content{color:#fff;margin:4px 0;width:100%;line-height:21px}.breadcrumb-item{position:relative;display:inline-flex;padding:0 18px 0 4px}.breadcrumb-item:last-child:before{content:none}.divider{border-width:1px}.divider-vertical{display:block;border:.5px inset}.header{width:100%;position:-webkit-sticky;position:sticky;top:0;z-index:10;padding:8px 0;display:flex;align-items:center;justify-content:space-between}@media screen and (max-width:600px){.breadcrumb-list{width:100%;order:1}.header{flex-direction:column}}.header__actions{padding:8px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between}@media screen and (max-width:600px){.header__actions{order:0;width:100%;padding:4px 8px;justify-content:flex-end}}.header__actions button{margin-right:8px}.header__actions-button-commission{border-radius:16px}.actions-button-commission__icon{display:inline-block;width:24px;height:24px;font-size:24px;margin-left:8px}.header__actions-button-publish-icon{font-size:24px;width:24px;height:24px}.body{width:100%;height:calc(100% - 80px);overflow-x:hidden;overflow-y:auto;background:0 0;box-sizing:border-box;padding-bottom:56px}@media screen and (max-width:600px){.body{display:flex;flex-direction:column;padding:0 8px 56px}}.body__additional-content{width:25%;display:inline-block;padding:16px;box-sizing:border-box;background:#fff}@media screen and (max-width:600px){.body__additional-content{width:100%;order:2}}.mls__title{font-size:12px}.mls__button{width:100%;display:block;margin-bottom:8px;border-radius:16px}.body__content{width:75%;display:inline-block;padding:16px;box-sizing:border-box;float:right;background:#fff}.body__multimedia-wrapper{width:100%;background:#fff;display:flex}@media screen and (max-width:600px){.body__content{width:100%;order:1}.body__multimedia-wrapper{width:100%;order:0;flex-direction:column}}.multimedia-wrapper__list-thumbnails{width:25%;height:0;padding-bottom:
|
|
4397
|
+
styles: [":host{width:100%;height:100%;display:block}.property{position:relative;width:100%;height:100%;z-index:5;border-radius:4px}.title{margin:0 16px;font-size:24px}.breadcrumb-list{width:50%;padding:4px 16px;box-sizing:border-box;border-radius:0 24px 24px 0}.breadcrumb-content{color:#fff;margin:4px 0;width:100%;line-height:21px}.breadcrumb-item{position:relative;display:inline-flex;padding:0 18px 0 4px}.breadcrumb-item:last-child:before{content:none}.divider{border-width:1px}.divider-vertical{display:block;border:.5px inset}.header{width:100%;position:-webkit-sticky;position:sticky;top:0;z-index:10;padding:8px 0;display:flex;align-items:center;justify-content:space-between}@media screen and (max-width:600px){.breadcrumb-list{width:100%;order:1}.header{flex-direction:column}}.header__actions{padding:8px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between}@media screen and (max-width:600px){.header__actions{order:0;width:100%;padding:4px 8px;justify-content:flex-end}}.header__actions button{margin-right:8px}.header__actions-button-commission{border-radius:16px}.actions-button-commission__icon{display:inline-block;width:24px;height:24px;font-size:24px;margin-left:8px}.header__actions-button-publish-icon{font-size:24px;width:24px;height:24px}.body{width:100%;height:calc(100% - 80px);overflow-x:hidden;overflow-y:auto;background:0 0;box-sizing:border-box;padding-bottom:56px}@media screen and (max-width:600px){.body{display:flex;flex-direction:column;padding:0 8px 56px}}.body__additional-content{width:25%;display:inline-block;padding:16px;box-sizing:border-box;background:#fff}@media screen and (max-width:600px){.body__additional-content{width:100%;order:2}}.mls__title{font-size:12px}.mls__button{width:100%;display:block;margin-bottom:8px;border-radius:16px}.body__content{width:75%;display:inline-block;padding:16px;box-sizing:border-box;float:right;background:#fff}.body__multimedia-wrapper{width:100%;background:#fff;display:flex}@media screen and (max-width:600px){.body__content{width:100%;order:1}.body__multimedia-wrapper{width:100%;order:0;flex-direction:column}}.multimedia-wrapper__list-thumbnails{width:25%;height:0;padding-bottom:56.25%;overflow:hidden;position:relative}@media screen and (max-width:600px){.multimedia-wrapper__list-thumbnails{width:100%;height:56px;padding:0}}.list-thumbnails__wrapper-thumbnails{position:absolute;width:100%;height:100%;background:#fff;overflow-x:hidden;overflow-y:scroll;padding:0 18px 8px;box-sizing:border-box}.wrapper-thumbnails__header-types{width:100%;height:40px;background:#fff;padding-top:8px;position:-webkit-sticky;position:sticky;top:0;z-index:1}.header-types__button-type{min-width:33.3333333333%;width:33.3333333333%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0;height:100%;font-size:12px;line-height:16px}.button-type__icon{font-size:24px;width:24px;height:24px;display:inline-block}.button-type__label{display:inline-block;margin:0 4px}.wrapper-thumbnails__item-thumbnail{width:100%;padding-bottom:75%;margin-top:8px;border-radius:8px;position:relative;cursor:pointer}.item-thumbnail__img{position:absolute;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:inherit}.multimedia-wrapper__front-image{width:calc(75% - 16px);height:0;padding-bottom:calc((75% - 16px)/ 4 * 3);margin:auto;border-radius:8px;position:relative}@media screen and (max-width:600px){.wrapper-thumbnails__item-thumbnail{display:none}.multimedia-wrapper__front-image{width:100%;padding-bottom:75%}}.front-image__upload-multimedia{position:absolute;top:0;left:25%;width:50%;height:100%;z-index:1;display:flex}@media screen{.front-image__upload-multimedia{width:80%;left:10%}}.upload-multimedia__container-add-multimedia{margin:auto;width:200px;height:200px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;background:url(https://storage.googleapis.com/maplander-develop/public/file/front-end/cdn/360-image.svg) center/80% no-repeat}.container-add-multimedia__button{position:absolute;bottom:8px}.content__error-front-image{font-size:12px;margin:8px 0 8px 8px}.content__private-info{border-radius:8px}.private-info__title{font-weight:700;margin:0;padding:16px;border-radius:8px 8px 0 0}.footer{width:100%;height:43px;border-radius:16px 16px 0 0;padding:8px 16px;box-sizing:border-box;background:#fff;position:-webkit-sticky;position:sticky;z-index:2;bottom:0}.footer__footer-content{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.footer-content__status-label{margin:6px 0;font-size:14px;text-align:center}.footer-content__button-request-info{width:30%;border-radius:16px}@media screen and (max-width:600px){.footer-content__button-request-info{width:90%}}.footer-content__button-save{width:120px;border-radius:16px}.footer-content__fab{position:absolute;right:0;bottom:12px;padding:8px;border-radius:50%;background:linear-gradient(transparent 50%,#fff 50%)}.fab-button__icon{width:24px;height:24px;font-size:24px}"]
|
|
4395
4398
|
}] }
|
|
4396
4399
|
];
|
|
4397
4400
|
/** @nocollapse */
|
|
@@ -5053,7 +5056,7 @@ EditorComponent.decorators = [
|
|
|
5053
5056
|
{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS] },
|
|
5054
5057
|
{ provide: MAT_DATE_FORMATS, useValue: ɵ0 }
|
|
5055
5058
|
],
|
|
5056
|
-
styles: [":host{display:block;width:100%}.section_label{font-weight:700;display:flex;justify-content:space-between}.address__label-button{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.offering{margin-bottom:8px}.direct-debit{margin:16px 0;display:flex}.direct-debit__check-box{margin-top:4px}.direct-debit__radio-group{display:inline-block;margin:0 0 0 32px}@media screen and (max-width:600px){.section_label{flex-direction:column}.section_label :last-child{margin-top:16px}.direct-debit{flex-direction:column;align-items:flex-start}.direct-debit__radio-group{margin:16px 0 0}}.direct-debit__radio-button{margin-right:16px}.pricing{display:-ms-grid;display:grid;-ms-grid-columns:(
|
|
5059
|
+
styles: [":host{display:block;width:100%}.section_label{font-weight:700;display:flex;justify-content:space-between}.address__label-button{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.offering{margin-bottom:8px}.direct-debit{margin:16px 0;display:flex}.direct-debit__check-box{margin-top:4px}.direct-debit__radio-group{display:inline-block;margin:0 0 0 32px}@media screen and (max-width:600px){.section_label{flex-direction:column}.section_label :last-child{margin-top:16px}.direct-debit{flex-direction:column;align-items:flex-start}.direct-debit__radio-group{margin:16px 0 0}}.direct-debit__radio-button{margin-right:16px}.pricing{display:-ms-grid;display:grid;-ms-grid-columns:(33.3333333333%)[3];grid-template-columns:repeat(3,33.3333333333%)}@media screen and (max-width:600px){.pricing{-ms-grid-columns:100%;grid-template-columns:100%}}@media screen and (min-width:1800px){.pricing{-ms-grid-columns:(25%)[4];grid-template-columns:repeat(4,25%)}}.agreement__body{display:-ms-grid;display:grid;-ms-grid-columns:(33.3333333333%)[2];grid-template-columns:repeat(2,33.3333333333%)}@media screen and (max-width:600px){.agreement__body{-ms-grid-columns:100%;grid-template-columns:100%}}@media screen and (min-width:1800px){.agreement__body{-ms-grid-columns:(25%)[4];grid-template-columns:repeat(4,25%)}}.agreement__body-check-box{margin-bottom:16px;-ms-grid-column:1;grid-column-start:1;-ms-grid-column-span:2;grid-column-end:3}.address__body{display:-ms-grid;display:grid;-ms-grid-columns:(25%)[4];grid-template-columns:repeat(4,25%)}@media screen and (max-width:600px){.agreement__body-check-box{-ms-grid-column-span:auto;grid-column-end:auto}.address__body{-ms-grid-columns:100%;grid-template-columns:100%}}@media screen and (min-width:1800px){.address__body{-ms-grid-columns:(20%)[4];grid-template-columns:repeat(4,20%)}}.features__body{display:-ms-grid;display:grid;-ms-grid-columns:(50%)[2];grid-template-columns:repeat(2,50%)}.features-item__label{display:flex;align-items:center;margin:0;padding:8px 0}.features-item__radio-group{display:block;margin:8px 0}.features-item__radio-button{margin-right:16px}.features-item-bathrooms,.features-item-parking-spaces{-ms-grid-column:1;grid-column-start:1}.features-item-surface{-ms-grid-column:2;grid-column-start:2;-ms-grid-row:1;grid-row-start:1;-ms-grid-row-span:2;grid-row-end:3}.address__form-field,.agreement__form-field,.description__form-field,.external-link__form-field,.notes__form-field,.pricing__form-field{width:95%;margin:0 auto 0 0}@media screen and (max-width:600px){.features__body{-ms-grid-columns:100%;grid-template-columns:100%}.features-item-surface{-ms-grid-column:auto;grid-column-start:auto;-ms-grid-row:auto;grid-row-start:auto;-ms-grid-row-span:NaN;grid-row-end:auto}.address__form-field,.agreement__form-field,.description__form-field,.external-link__form-field,.notes__form-field,.pricing__form-field{width:100%;margin:0}}.pricing__maintenance-fee{display:flex;align-items:center;-ms-grid-column:1;grid-column-start:1;-ms-grid-column-span:2;grid-column-end:3}.pricing__maintenance-fee :first-child{margin:0 16px 0 0}@media screen and (max-width:600px){.pricing__maintenance-fee{flex-direction:column;align-items:start;-ms-grid-column:1;grid-column-start:1;-ms-grid-column-span:NaN;grid-column-end:auto}.pricing__maintenance-fee :first-child{margin:0 0 16px}}.address__visibility{-ms-grid-row:4;grid-row-start:4;-ms-grid-column:1;grid-column-start:1;-ms-grid-column-span:4;grid-column-end:5}.address__visibility-body{display:flex}.address__visibility-radio-group{display:block;margin-right:16px}.visibility-radio-group__button{margin-bottom:16px;display:block}.visibility__about{margin:0}.visibility__about-label{display:block;padding:0 8px 8px;font-size:14px}.label__icon{width:24px;height:24px;font-size:24px;color:#707070;margin-right:8px}.amenities,.attributes{width:50%;display:inline-block}@media screen and (max-width:600px){.address__visibility{-ms-grid-row:auto;grid-row-start:auto;-ms-grid-column:auto;grid-column-start:auto;-ms-grid-column-span:NaN;grid-column-end:auto}.address__visibility-body{flex-direction:column}.amenities,.attributes{width:100%;display:block}}.amenities__list-amenities{display:-ms-grid;display:grid;-ms-grid-columns:(33.3333333333%)[3];grid-template-columns:repeat(3,33.3333333333%)}.list-amenities__amenity{display:flex;flex-direction:column;justify-content:space-between;align-items:center;cursor:pointer;width:100px;padding:4px;box-sizing:border-box;border-radius:8px;margin:8px auto 0;text-align:center}.amenity__icon{width:24px;height:24px;font-size:24px;background:#707070;border-radius:50%;padding:8px;color:#fff;display:block;margin:0 auto}.amenity__text{padding:8px;box-sizing:border-box;display:block;font-size:12px}.button-submit{display:none}"]
|
|
5057
5060
|
}] }
|
|
5058
5061
|
];
|
|
5059
5062
|
/** @nocollapse */
|
|
@@ -5607,7 +5610,7 @@ DetailsComponent.decorators = [
|
|
|
5607
5610
|
{ type: Component, args: [{
|
|
5608
5611
|
selector: 'lib-property-details',
|
|
5609
5612
|
template: "<div class=\"info\" *ngIf=\"property\">\r\n <h1 class=\"title\">\r\n <span class=\"title__address\">\r\n <!--\r\n Address visible\r\n Street #Ext Int. Lt Mz, Colony, PostalCode, Township, City, State, Country\r\n Address hidden\r\n Colony, PostalCode, Township, City, State, Country\r\n -->\r\n <ng-template [ngIf]=\"property.address.visible\">\r\n {{property.address.street}}\r\n <span *ngIf=\"property.address.outdoorNumber\">#{{property.address.outdoorNumber}} </span>\r\n <span *ngIf=\"property.address.interiorNumber\">Int. {{property.address.interiorNumber}} </span>\r\n <span *ngIf=\"property.address.lt\">Lt. {{property.address.lt}} </span>\r\n <span *ngIf=\"property.address.mz\">Mz. {{property.address.mz}} </span>\r\n </ng-template>\r\n <span *ngIf=\"property.address.colony\">{{property.address.colony}}, </span>\r\n <span *ngIf=\"property.address.postalCode\">{{property.address.postalCode}}, </span>\r\n <span *ngIf=\"property.address.township\">{{property.address.township}}, </span>\r\n <span *ngIf=\"property.address.city\">{{property.address.city}}, </span>\r\n <span *ngIf=\"property.address.state\">{{property.address.state}}, </span>\r\n <span *ngIf=\"property.address.country\">{{property.address.country}}</span>\r\n <span *ngIf=\"!property.address.visible\" class=\"address-street__hidden\"><br> Direcci\u00F3n aproximada</span>\r\n </span>\r\n <span class=\"title__property-offering\">\r\n <span class=\"title__property-offering-price\">\r\n <ng-template [ngIf]=\"currencyConverted\" [ngIfElse]=\"realPrice\">\r\n {{currencyConverted.price | currency : '' : 'symbol' : '1.0-0'}} {{currencyConverted.currency}}\r\n <br>\r\n <span class=\"property-offering-price__info-currency\"><mat-icon class=\"info-currency__icon\">info</mat-icon> Precio convertido <br> aproximado</span>\r\n </ng-template>\r\n <ng-template #realPrice>\r\n {{property.price | currency : '' : 'symbol' : '1.0-0'}} {{property.currency}}\r\n </ng-template>\r\n </span>\r\n <ng-template [ngIf]=\"currencyConverted\">\r\n <br>\r\n <span>{{property.price | currency : '' : 'symbol' : '1.0-0'}} {{property.currency}}</span>\r\n <br>\r\n <span class=\"property-offering-price__info-currency\"><mat-icon class=\"info-currency__icon\">info</mat-icon> Precio publicado</span>\r\n </ng-template>\r\n <br>\r\n <div class=\"div__title-sku\">\r\n <div>\r\n <span\r\n class=\"ic-property-{{propertyType.iconName}}\">\r\n </span>{{property.type | propertyType}} {{property.offering | offeringType}}\r\n </div>\r\n <ng-template [ngIf]=\"property.sku !== '' && property.sku\">\r\n <span class=\"title__sku\">\r\n SKU: {{property.sku}}\r\n </span>\r\n </ng-template>\r\n </div>\r\n </span>\r\n </h1>\r\n <hr class=\"divider\">\r\n <section class=\"features\">\r\n <ng-template [ngIf]=\"property.features.bedrooms && property.features.bedrooms > 0\">\r\n <p class=\"features__item\">\r\n <span class=\"features__item-icon ic-features-bedroom\"></span>\r\n <span class=\"features__item-text\">{{property.features.bedrooms}}</span>\r\n </p>\r\n </ng-template>\r\n <ng-template [ngIf]=\"property.features.bathrooms && property.features.bathrooms > 0\">\r\n <p class=\"features__item\">\r\n <span class=\"features__item-icon ic-features-bathroom\"></span>\r\n <span class=\"features__item-text\">{{property.features.bathrooms}}</span>\r\n </p>\r\n </ng-template>\r\n <ng-template [ngIf]=\"property.features.mainArea && property.features.mainArea > 0\">\r\n <p class=\"features__item\">\r\n <span class=\"features__item-icon ic-features-surface\"></span>\r\n <span class=\"features__item-text\">\r\n {{property.features.mainArea}}\r\n <span>m<sup>2</sup></span>\r\n </span>\r\n </p>\r\n </ng-template>\r\n <ng-template [ngIf]=\"property.features.parkingSpaces && property.features.parkingSpaces > 0\">\r\n <p class=\"features__item\">\r\n <span class=\"features__item-icon ic-features-parking\"></span>\r\n <span class=\"features__item-text\">{{property.features.parkingSpaces}}</span>\r\n </p>\r\n </ng-template>\r\n <ng-template [ngIf]=\"property.features.roi && property.features.roi > 0\">\r\n <p class=\"features__item\">\r\n <span class=\"features__item-icon ic-features-roi\"></span>\r\n <span class=\"features__item-text\">{{property.features.roi}}</span>\r\n </p>\r\n </ng-template>\r\n </section>\r\n <section class=\"description\">\r\n <h2 class=\"sub-title\">\r\n Descripci\u00F3n\r\n </h2>\r\n <p class=\"description__body\">\r\n {{property.description}}\r\n </p>\r\n </section>\r\n <ng-template [ngIf]=\"property.externalLink && visibleTour\">\r\n <hr class=\"divider\">\r\n <section class=\"external-link\">\r\n <h2 class=\"sub-title\">\r\n Tour virtual\r\n </h2>\r\n <iframe class=\"external-link__body\" [src]=\"getTourUrl()\"></iframe>\r\n </section>\r\n </ng-template>\r\n <ng-template [ngIf]=\"record\">\r\n <hr class=\"divider\">\r\n <section class=\"agreement\">\r\n <h2 class=\"sub-title\">\r\n Contrato\r\n </h2>\r\n <p class=\"agreement__body\">\r\n <span class=\"agreement__body-filed\">\r\n <span class=\"agreement__body-field-title\">\r\n Exclusividad de contrato\r\n </span>\r\n <span class=\"agreement__body-field-content\">\r\n {{property.propertyInfo.exclusivity ? 'Si' : 'No'}}\r\n </span>\r\n </span>\r\n <span class=\"agreement__body-filed\" *ngIf=\"property.propertyInfo.listingAgreementStartDate\">\r\n <span class=\"agreement__body-field-title\">\r\n Fecha de inicio de contrato\r\n </span>\r\n <span class=\"agreement__body-field-content\">\r\n {{property.propertyInfo.listingAgreementStartDate | libFormatDate : true : 'dd/MM/yyyy'}}\r\n </span>\r\n </span>\r\n <span class=\"agreement__body-filed\" *ngIf=\"agreementEndDate\">\r\n <span class=\"agreement__body-field-title\">\r\n Fecha de termino de contrato\r\n </span>\r\n <span class=\"agreement__body-field-content\">\r\n {{agreementEndDate | libFormatDate : true : 'dd/MM/yyyy'}}\r\n </span>\r\n </span>\r\n <span class=\"agreement__body-filed\" *ngIf=\"property.propertyInfo.commission\">\r\n <span class=\"agreement__body-field-title\">\r\n Comisi\u00F3n\r\n </span>\r\n <span class=\"agreement__body-field-content\">\r\n <span *ngIf=\"property.offering === 'RENT'\">{{property.propertyInfo.commission}} meses</span>\r\n <span *ngIf=\"property.offering === 'SALE'\">{{property.propertyInfo.commission * 100}}%</span>\r\n </span>\r\n </span>\r\n <span class=\"agreement__body-filed\">\r\n <span class=\"agreement__body-field-title\">\r\n Anunciada en el {{mlsLabel || 'MLS'}}\r\n </span>\r\n <span class=\"agreement__body-field-content\">\r\n {{property.propertyInfo.mls ? 'Si' : 'No'}}\r\n </span>\r\n </span>\r\n </p>\r\n </section>\r\n <hr class=\"divider\">\r\n <section class=\"private-features\">\r\n <h2 class=\"sub-title\">\r\n Caracteristicas\r\n </h2>\r\n <p class=\"private-features__body\">\r\n <span class=\"private-features__body-filed\" *ngIf=\"property.propertyInfo.lowestPrice\">\r\n <span class=\"private-features__body-field-title\">\r\n Precio minimo\r\n </span>\r\n <span class=\"private-features__body-field-content\">\r\n {{property.propertyInfo.lowestPrice | currency : '' : 'symbol' : '1.0-0'}}\r\n </span>\r\n </span>\r\n <span class=\"private-features__body-filed\" *ngIf=\"property.features.condominiumFeePrice\">\r\n <span class=\"private-features__body-field-title\">\r\n Cuota de mantenimiento\r\n </span>\r\n <span class=\"private-features__body-field-content\">\r\n {{property.features.condominiumFeePrice | currency : '' : 'symbol' : '1.0-0'}}\r\n </span>\r\n </span>\r\n <span class=\"private-features__body-filed\" *ngIf=\"property.propertyInfo.leaseTransferPrice\">\r\n <span class=\"private-features__body-field-title\">\r\n Traspaso\r\n </span>\r\n <span class=\"private-features__body-field-content\">\r\n {{property.propertyInfo.leaseTransferPrice | currency : '' : 'symbol' : '1.0-0'}}\r\n </span>\r\n </span>\r\n <span class=\"private-features__body-filed\" *ngIf=\"property.features.builtIn\">\r\n <span class=\"private-features__body-field-title\">\r\n A\u00F1o de construcci\u00F3n\r\n </span>\r\n <span class=\"private-features__body-field-content\">\r\n {{property.features.builtIn}}\r\n </span>\r\n </span>\r\n <span class=\"private-features__body-filed\" *ngIf=\"property.features.roi\">\r\n <span class=\"private-features__body-field-title\">\r\n Retorno de inversi\u00F3n\r\n </span>\r\n <span class=\"private-features__body-field-content\">\r\n {{property.features.roi}}\r\n </span>\r\n </span>\r\n </p>\r\n </section>\r\n <ng-template [ngIf]=\"property.propertyInfo.consumerReporting && property.propertyInfo.consumerReporting !== 0\">\r\n <hr class=\"divider\">\r\n <section class=\"buro-rentas\">\r\n <h2 class=\"sub-title\">\r\n Bur\u00F3 Rentas\r\n </h2>\r\n <p class=\"private-features__body\" *ngIf=\"property.propertyInfo.consumerReporting === 1\">Requerir certificado de\r\n fiabiidad\r\n </p>\r\n <p class=\"private-features__body\" *ngIf=\"property.propertyInfo.consumerReporting === 2\">Requerir poliza de\r\n arrendamiento\r\n </p>\r\n </section>\r\n </ng-template>\r\n <ng-template [ngIf]=\"property.propertyInfo.notes\">\r\n <hr class=\"divider\">\r\n <section class=\"notes\">\r\n <h2 class=\"sub-title\">\r\n Notas\r\n </h2>\r\n <p class=\"notes__body\">{{property.propertyInfo.notes}}</p>\r\n </section>\r\n </ng-template>\r\n </ng-template>\r\n <hr class=\"divider\">\r\n <section class=\"indications\">\r\n <h2 class=\"sub-title\">\r\n Indicaciones\r\n </h2>\r\n <div class=\"indications__body\">\r\n <a class=\"indications__body-item-link\"\r\n href=\"https://www.google.com/maps/dir/?api=1&destination={{property.address.location.latitude}},{{property.address.location.longitude}}\"\r\n [target]=\"'_blank'\">\r\n <p matRipple class=\"indications__body-item\">\r\n <span class=\"indications__body-item-icon ic-component-property-marker\"></span>\r\n <span class=\"indications__body-item-text\">\u00BFCOMO LLEGAR?</span>\r\n </p>\r\n </a>\r\n <a class=\"indications__body-item-link\"\r\n href=\"https://www.google.com/maps/@?api=1&map_action=pano&viewpoint={{property.address.location.latitude}},{{property.address.location.longitude}}\"\r\n [target]=\"'_blank'\">\r\n <p matRipple class=\"indications__body-item\">\r\n <span class=\"indications__body-item-icon ic-component-property-streetview\"></span>\r\n <span class=\"indications__body-item-text\">VISTA DE LA CALLE</span>\r\n </p>\r\n </a>\r\n </div>\r\n </section>\r\n <hr class=\"divider\">\r\n <ng-template [ngIf]=\"amenities && amenities.length > 0\">\r\n <section class=\"amenities\">\r\n <h2 class=\"sub-title\">Amenidades</h2>\r\n <p class=\"amenities__list-amenities\">\r\n <ng-container *ngFor=\"let amenity of amenities\">\r\n <span matRipple class=\"list-amenities__amenity\">\r\n <span class=\"amenity__icon ic-amenities-{{amenity.iconName}}\"></span>\r\n <span class=\"amenity__text\">{{amenity.name}}</span>\r\n </span>\r\n </ng-container>\r\n </p>\r\n </section>\r\n </ng-template>\r\n <ng-template [ngIf]=\"features && features.length > 0\">\r\n <section class=\"amenities\">\r\n <h2 class=\"sub-title\">Caracteristicas de la zona</h2>\r\n <p class=\"amenities__list-amenities\">\r\n <ng-container *ngFor=\"let feature of features\">\r\n <span matRipple class=\"list-amenities__amenity\">\r\n <span class=\"amenity__icon ic-amenities-{{feature.iconName}}\"></span>\r\n <span class=\"amenity__text\">{{feature.name}}</span>\r\n </span>\r\n </ng-container>\r\n </p>\r\n </section>\r\n </ng-template>\r\n</div>\r\n",
|
|
5610
|
-
styles: [":host{display:block;width:100%}.divider{border:none;border-bottom:1px solid}.title{display:flex;font-size:18px;color:#707070;font-weight:400}.sub-title{margin:0;font-size:18px;padding:0 16px 16px 0}.title>span:first-child{width:60%}@media screen and (max-width:600px){.title{flex-direction:column}.title>span:first-child{width:100%}}.title>span:last-child{width:40%}.div__title-sku{display:flex;flex-direction:column}.title__sku{margin-bottom:2%}.address-street__hidden{font-size:12px}.title__property-offering{text-align:right}@media screen and (max-width:600px){.title>span:last-child{width:100%}.title__property-offering{text-align:left;margin:16px 0}}.title__property-offering-price{font-size:26px;font-weight:700}.property-offering-price__info-currency{font-size:12px;display:inline-block;margin:4px 0}.info-currency__icon{width:12px;height:12px;font-size:12px}.features{padding:8px 0;display:flex;align-items:center}.features__item{width:auto;margin:0 24px 0 0;display:flex;justify-content:center;align-items:center;position:relative}.features__item:last-child:after{content:none}.features__item-text{font-size:16px;display:inline-block}.features__item-icon{display:inline-block;font-size:24px;width:24px;height:24px;margin-right:8px}.agreement,.buro-rentas,.description,.external-link,.indications,.notes,.private-features{display:flex;padding:16px 0}.indications__body{display:flex}.indications__body-item-link{color:inherit;text-decoration:none}.indications__body-item{padding:8px;margin:0 16px 0 0;border-radius:8px;cursor:pointer}.indications__body-item-icon{margin:auto;padding:8px;border-radius:8px;display:block;font-size:24px;width:24px;height:24px}.indications__body-item-text{display:block;text-align:center;font-size:12px;margin:6px 0}.agreement__body,.description__body,.notes__body,.private-features__body{width:75%;margin:0 0 0 auto}@media screen and (max-width:600px){.agreement,.buro-rentas,.description,.external-link,.indications,.notes,.private-features{flex-direction:column;align-items:start}.agreement__body,.description__body,.notes__body,.private-features__body{width:100%;margin:0}}.external-link__body{width:75%;height:280px;border-radius:16px;margin-left:20px}@media screen and (max-width:600px){.external-link__body{width:100%;margin:0}}.agreement__body-filed,.private-features__body-filed{display:block;padding:8px 0}.agreement__body-field-content,.agreement__body-field-title,.private-features__body-field-content,.private-features__body-field-title{width:50%;display:inline-block}.amenities__list{width:50%;display:-ms-grid;display:grid;-ms-grid-columns:(
|
|
5613
|
+
styles: [":host{display:block;width:100%}.divider{border:none;border-bottom:1px solid}.title{display:flex;font-size:18px;color:#707070;font-weight:400}.sub-title{margin:0;font-size:18px;padding:0 16px 16px 0}.title>span:first-child{width:60%}@media screen and (max-width:600px){.title{flex-direction:column}.title>span:first-child{width:100%}}.title>span:last-child{width:40%}.div__title-sku{display:flex;flex-direction:column}.title__sku{margin-bottom:2%}.address-street__hidden{font-size:12px}.title__property-offering{text-align:right}@media screen and (max-width:600px){.title>span:last-child{width:100%}.title__property-offering{text-align:left;margin:16px 0}}.title__property-offering-price{font-size:26px;font-weight:700}.property-offering-price__info-currency{font-size:12px;display:inline-block;margin:4px 0}.info-currency__icon{width:12px;height:12px;font-size:12px}.features{padding:8px 0;display:flex;align-items:center}.features__item{width:auto;margin:0 24px 0 0;display:flex;justify-content:center;align-items:center;position:relative}.features__item:last-child:after{content:none}.features__item-text{font-size:16px;display:inline-block}.features__item-icon{display:inline-block;font-size:24px;width:24px;height:24px;margin-right:8px}.agreement,.buro-rentas,.description,.external-link,.indications,.notes,.private-features{display:flex;padding:16px 0}.indications__body{display:flex}.indications__body-item-link{color:inherit;text-decoration:none}.indications__body-item{padding:8px;margin:0 16px 0 0;border-radius:8px;cursor:pointer}.indications__body-item-icon{margin:auto;padding:8px;border-radius:8px;display:block;font-size:24px;width:24px;height:24px}.indications__body-item-text{display:block;text-align:center;font-size:12px;margin:6px 0}.agreement__body,.description__body,.notes__body,.private-features__body{width:75%;margin:0 0 0 auto}@media screen and (max-width:600px){.agreement,.buro-rentas,.description,.external-link,.indications,.notes,.private-features{flex-direction:column;align-items:start}.agreement__body,.description__body,.notes__body,.private-features__body{width:100%;margin:0}}.external-link__body{width:75%;height:280px;border-radius:16px;margin-left:20px}@media screen and (max-width:600px){.external-link__body{width:100%;margin:0}}.agreement__body-filed,.private-features__body-filed{display:block;padding:8px 0}.agreement__body-field-content,.agreement__body-field-title,.private-features__body-field-content,.private-features__body-field-title{width:50%;display:inline-block}.amenities__list{width:50%;display:-ms-grid;display:grid;-ms-grid-columns:(25%)[4];grid-template-columns:repeat(4,25%)}.amenities,.attributes{width:50%;display:inline-block}@media screen and (max-width:600px){.amenities,.attributes{width:100%;display:block}}.amenities__list-amenities{display:-ms-grid;display:grid;-ms-grid-columns:(25%)[4];grid-template-columns:repeat(4,25%)}.list-amenities__amenity{display:flex;flex-direction:column;align-items:center;cursor:pointer;padding:4px;box-sizing:border-box;border-radius:8px;text-align:center}.amenity__icon{width:24px;height:24px;font-size:24px;border-radius:50%;padding:8px;display:block;margin:8px}.amenity__text{padding:8px;box-sizing:border-box;display:block;font-size:12px}"]
|
|
5611
5614
|
}] }
|
|
5612
5615
|
];
|
|
5613
5616
|
/** @nocollapse */
|
|
@@ -5703,7 +5706,7 @@ SlideShowComponent.decorators = [
|
|
|
5703
5706
|
{ type: Component, args: [{
|
|
5704
5707
|
selector: 'lib-property-slide-show',
|
|
5705
5708
|
template: "<div class=\"slide-show\">\r\n <div class=\"slide-show__actions\">\r\n <ng-container [ngTemplateOutlet]=\"customActions\"></ng-container>\r\n <p class=\"actions__count\" *ngIf=\"multimedia && multimedia.length > 0\">\r\n {{index + 1}}/{{count}}\r\n </p>\r\n </div>\r\n <button mat-button=\"\" class=\"button-previous\" [ngClass]=\"{'disabled':index===0}\" [disabled]=\"index===0\"\r\n (click)=\"moveImage()\" (keyup.arrowLeft)=\"moveImage()\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </button>\r\n <ul class=\"images-list\" #slider [ngStyle]=\"{'width':'calc(100% *' + count + ')'}\">\r\n <ng-template [ngIf]=\"multimedia && multimedia.length > 0\">\r\n <ng-container *ngFor=\"let m of multimedia\">\r\n <li class=\"images-item\" [ngStyle]=\"{'width':'calc(100% /' + count + ')'}\">\r\n <ng-container [ngSwitch]=\"m.type\">\r\n <ng-container *ngSwitchCase=\"'IMAGE'\">\r\n <img class=\"images-item__img\" [src]=\"m.fileCS.thumbnail\" alt=\"Property image\">\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'SPHERIC'\">\r\n <lib-panorama-visor class=\"images-item__panorama\" [url]=\"m.fileCS.thumbnail\"></lib-panorama-visor>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'VIDEO'\">\r\n <iframe class=\"images-item__video\"\r\n [src]=\"'https://www.youtube.com/embed/' + m.fileCS.thumbnail | safeUrl\"></iframe>\r\n </ng-container>\r\n </ng-container>\r\n </li>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template [ngIf]=\"multimedia && multimedia.length === 0\">\r\n <div class=\"no-items\"></div>\r\n </ng-template>\r\n </ul>\r\n <button mat-button=\"\" class=\"button-next\" [disabled]=\"multimedia.length === 0\" (click)=\"moveImage(true)\" (keyup.arrowRight)=\"moveImage(true)\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </button>\r\n</div>\r\n",
|
|
5706
|
-
styles: [":host{display:block;position:relative;width:100%;padding-bottom:
|
|
5709
|
+
styles: [":host{display:block;position:relative;width:100%;padding-bottom:75%}.slide-show{width:100%;height:100%;overflow:hidden;position:absolute}.slide-show__actions{position:absolute;bottom:0;left:0;right:0;width:100%;color:#fff;padding:8px 24px;z-index:2;display:flex;align-items:center;justify-content:flex-end;box-sizing:border-box;background:linear-gradient(transparent,rgba(0,0,0,.4))}.actions__count{margin:4px 0 0 8px;font-size:14px}.images-list{width:100%;height:100%;list-style:none;padding:0;margin:0;display:flex;overflow:hidden;transition:250ms}.images-item{width:100%;height:100%}.images-item__img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;border-radius:8px}.images-item__panorama,.images-item__video{width:100%;height:100%;border:0;border-radius:8px}.button-next,.button-previous{position:absolute;min-width:30px;width:30px;height:80px;padding:0;z-index:1;color:#fff;top:calc(50% - 40px);background:rgba(0,0,0,.3)}.button-next mat-icon,.button-previous mat-icon{width:30px;height:30px;font-size:30px}.button-next:hover,.button-previous:hover{color:#000;background:#fff}.disabled{color:#d3d3d3}.button-previous{left:0;border-radius:0 16px 16px 0}.button-next{right:0;border-radius:16px 0 0 16px}.no-items{width:100%;height:100%;border-radius:8px}"]
|
|
5707
5710
|
}] }
|
|
5708
5711
|
];
|
|
5709
5712
|
/** @nocollapse */
|
|
@@ -6344,7 +6347,7 @@ PropertyCardComponent.decorators = [
|
|
|
6344
6347
|
{ type: Component, args: [{
|
|
6345
6348
|
selector: 'lib-property-card',
|
|
6346
6349
|
template: "<div class=\"property-card\">\r\n <ng-template [ngIf]=\"!isOPI\">\r\n <div class=\"property-card__favorite\">\r\n <button class=\"favorite__button\" mat-icon-button (click)=\"favorite()\">\r\n <ng-template [ngIf]=\"isFavorite\" [ngIfElse]=\"noIsFavorite\">\r\n <mat-icon>favorite</mat-icon>\r\n </ng-template>\r\n <ng-template #noIsFavorite>\r\n <mat-icon>favorite_border</mat-icon>\r\n </ng-template>\r\n </button>\r\n </div>\r\n </ng-template>\r\n <ng-template [ngIf]=\"showDiscard\">\r\n <div class=\"property-card__discard\">\r\n <button class=\"discard__button\" mat-icon-button (click)=\"discard()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n </ng-template>\r\n <ng-template [ngIf]=\"isOPI && showAlert\">\r\n <div class=\"expiration-message\">\r\n <p>\r\n Aviso\r\n <br>\r\n Este anuncio expira el {{info.endPublishDate | libFormatDate : true : 'dd/MM/yyyy'}}\r\n </p>\r\n </div>\r\n </ng-template>\r\n <a routerLink=\"{{href || '/'}}\" [queryParams]=\"queryParams || null\" [target]=\"target || null\"\r\n [state]=\"state || null\"\r\n class=\"property-card__image\" (mouseover)=\"onFrontImageOver()\"\r\n (mouseleave)=\"onFrontImageLeave()\">\r\n <img [src]=\"info.image\" alt=\"Property image\" libImageError [typeImage]=\"info.type\">\r\n <ng-template [ngIf]=\"mode === 'summary'\">\r\n <div class=\"property-card__body-summary\">\r\n <h2 class=\"color--white property-card__price\">\r\n {{info.price | currency}} {{info.currency}}\r\n </h2>\r\n <p class=\"color--white property-card__type\">\r\n {{info.type | propertyType}} {{info.offering | offeringType}}\r\n </p>\r\n <p class=\"color--white property-card__address body-summary__address\">\r\n {{info.address.colony}}, {{info.address.city}}\r\n </p>\r\n </div>\r\n </ng-template>\r\n </a>\r\n <ng-template [ngIf]=\"mode === 'full'\">\r\n <div class=\"property-card__body\">\r\n <div class=\"property-card__location-title\">\r\n <h2 class=\"property-card__price\">\r\n {{info.price | currency : currency : 'symbol' : '1.0-0'}} {{info.currency}}\r\n </h2>\r\n <ng-container *ngIf=\"distance !== ''\" >\r\n <h2 class=\"property-card__location\" [hidden]=\"!distance\">\r\n {{distance}}\r\n </h2>\r\n </ng-container>\r\n </div>\r\n <p class=\"property-card__type\">\r\n {{info.type | propertyType}} {{info.offering | offeringType}}\r\n </p>\r\n <p class=\"property-card__address\">\r\n {{info.address.colony}}, {{info.address.city}}\r\n </p>\r\n <ng-template [ngIf]=\"info.features\">\r\n <div class=\"property-card__features\">\r\n <ng-template [ngIf]=\"info.features && info.features.bedrooms && info.features.bedrooms > 0\">\r\n <p class=\"property-card__feature\">\r\n <span class=\"property-card__icon ic-features-bedroom\"></span>\r\n {{info.features.bedrooms}}\r\n </p>\r\n <span class=\"property-card__divider\"></span>\r\n </ng-template>\r\n <ng-template [ngIf]=\"info.features && info.features.bathrooms && info.features.bathrooms > 0 \">\r\n <p class=\"property-card__feature\">\r\n <span class=\"property-card__icon ic-features-bathroom\"></span>\r\n {{info.features.bathrooms}}\r\n </p>\r\n <span class=\"property-card__divider\"></span>\r\n </ng-template>\r\n <ng-template [ngIf]=\"info.features && info.features.mainArea && info.features.mainArea > 0\">\r\n <p class=\"property-card__feature\">\r\n <span class=\"property-card__icon ic-features-surface\"></span>\r\n {{info.features.mainArea}}\r\n <ng-template [ngIf]=\"info.features.areaUnit && info.features.areaUnit === 'M2'\"\r\n [ngIfElse]=\"ftUnit\">\r\n m<sup>2</sup>\r\n </ng-template>\r\n <ng-template #ftUnit>\r\n sq ft\r\n </ng-template>\r\n </p>\r\n </ng-template>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </ng-template>\r\n</div>\r\n",
|
|
6347
|
-
styles: [":host{display:block;width:calc(100% - 16px);margin:16px auto;border-radius:16px}.property-card{width:100%;border-radius:16px;position:relative}.property-card__favorite{position:absolute;top:4px;right:4px;border-radius:50%;z-index:1;width:40px;height:40px;display:flex}.favorite__button{margin:auto}.expiration-message{position:absolute;top:0;background-color:#fff;width:100%;height:80px;z-index:1;text-align:center;color:red;font-size:16px;margin:auto;opacity:.9}.property-card__discard{position:absolute;right:8px;bottom:8px;z-index:1;width:40px;height:40px;border-radius:16px;display:flex}.discard__button{margin:auto}.property-card__image{width:100%;border-radius:16px;padding-bottom:
|
|
6350
|
+
styles: [":host{display:block;width:calc(100% - 16px);margin:16px auto;border-radius:16px}.property-card{width:100%;border-radius:16px;position:relative}.property-card__favorite{position:absolute;top:4px;right:4px;border-radius:50%;z-index:1;width:40px;height:40px;display:flex}.favorite__button{margin:auto}.expiration-message{position:absolute;top:0;background-color:#fff;width:100%;height:80px;z-index:1;text-align:center;color:red;font-size:16px;margin:auto;opacity:.9}.property-card__discard{position:absolute;right:8px;bottom:8px;z-index:1;width:40px;height:40px;border-radius:16px;display:flex}.discard__button{margin:auto}.property-card__image{width:100%;border-radius:16px;padding-bottom:75%;position:relative;text-decoration:none;display:block}.property-card__image:hover{width:calc(100% - 6px);padding-bottom:calc((100% - 6px)/ 4 * 3)}.property-card__image img{border-radius:16px;position:absolute;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.property-card__body{padding:8px;box-sizing:border-box}.property-card__body-summary{padding:8px;box-sizing:border-box;position:absolute;bottom:0;width:100%;border-radius:16px;background:linear-gradient(transparent,rgba(0,0,0,.8))}.body-summary__address{width:80%!important}.property-card__location-title{display:flex;width:100%;flex-direction:row;flex-wrap:wrap}.property-card__location{font-size:12px;margin:4px;color:#707070}@media (min-width:1200px){.property-card__location{font-size:14px}}.property-card__location:empty{width:60%;height:14px;background:#e0e0e0;border-radius:16px}.property-card__price{margin:3px 0;font-size:16px}.property-card__price:empty{width:60%;height:16px;background:#e0e0e0;border-radius:16px}.property-card__type{margin:3px 0}.property-card__type:empty{width:70%;height:16px;border-radius:16px;background:#e0e0e0}.property-card__address{margin:3px 0;color:#707070;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.property-card__address:empty{width:80%;height:16px;border-radius:16px;background:#e0e0e0}.property-card__features{display:flex;margin:6px 0 0}.property-card__feature{margin:0 8px 0 0;display:flex;align-items:center;font-size:12px;color:#707070}.property-card__divider{display:block;margin:auto 8px;width:1px;height:16px;background:#9e9e9e}.property-card__icon{width:24px;height:24px;font-size:24px;margin:0 4px 0 0;color:#bdbdbd}"]
|
|
6348
6351
|
}] }
|
|
6349
6352
|
];
|
|
6350
6353
|
/** @nocollapse */
|