@maplander/components 0.21.22 → 0.21.24
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 +2 -1
- 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 +3 -2
- package/esm5/lib/components/filters/filters.component.js +3 -2
- package/fesm2015/maplander-components.js +2 -1
- package/fesm2015/maplander-components.js.map +1 -1
- package/fesm5/maplander-components.js +2 -1
- package/fesm5/maplander-components.js.map +1 -1
- package/lib/components/filters/filters.component.d.ts +1 -1
- package/maplander-components.metadata.json +1 -1
- package/package.json +1 -1
|
@@ -3345,6 +3345,7 @@
|
|
|
3345
3345
|
if (open) {
|
|
3346
3346
|
this._render.setStyle(this._ref.nativeElement, 'visibility', 'visible');
|
|
3347
3347
|
this._render.setStyle(this._ref.nativeElement, 'opacity', '1');
|
|
3348
|
+
this.changeFilter.emit({ type: 'init', payload: null });
|
|
3348
3349
|
}
|
|
3349
3350
|
else {
|
|
3350
3351
|
this._render.setStyle(this._ref.nativeElement, 'opacity', '0');
|
|
@@ -3413,7 +3414,7 @@
|
|
|
3413
3414
|
FiltersComponent.decorators = [
|
|
3414
3415
|
{ type: core.Component, args: [{
|
|
3415
3416
|
selector: 'lib-filters',
|
|
3416
|
-
template: "<!-- Todo: [FiltersComponent] Refactor code -->\r\n<form class=\"filters\" [formGroup]=\"filtersForm\" [ngClass]=\"{'filters--opened': propertyTypeSelected.value !== 'NONE'}\">\r\n <ng-template [ngIf]=\"!isOPI\">\r\n <div class=\"float-button-close\">\r\n <button mat-icon-button type=\"button\" class=\"float-button-close__button\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n </ng-template>\r\n <div class=\"body\">\r\n <div class=\"--padding\">\r\n <div class=\"header\">\r\n <mat-form-field class=\"currency\" appearance=\"outline\">\r\n <mat-label>Divisa</mat-label>\r\n <mat-select formControlName=\"currency\">\r\n <ng-container *ngFor=\"let currency of currencyList\">\r\n <mat-option [value]=\"currency.type\" (click)=\"changeCurrency(currency.type)\">\r\n {{currency.type}}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n <mat-button-toggle-group class=\"offering-type-list\" name=\"offering-type\" formControlName=\"offering\"\r\n aria-label=\"Offering type\">\r\n <mat-button-toggle (click)=\"changeOffering('SALE')\" [value]=\"'SALE'\"\r\n [disabled]=\"propertyTypeSelected.value === 'NONE' || propertyTypeSelected.value === 'ROOM'\">\r\n Venta\r\n </mat-button-toggle>\r\n <mat-button-toggle (click)=\"changeOffering('RENT')\" [value]=\"'RENT'\"\r\n [disabled]=\"propertyTypeSelected.value === 'NONE' || propertyTypeSelected.value === 'INVESTMENT'\">\r\n Renta\r\n </mat-button-toggle>\r\n </mat-button-toggle-group>\r\n </div>\r\n <div class=\"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]=\"newFilters && propertyTypeSelected.value !== 'NONE'\">\r\n <div class=\"--padding\">\r\n <h4 class=\"--title\">\r\n Estado\r\n </h4>\r\n <div class=\"budget\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>Estado</mat-label>\r\n <mat-select formControlName=\"state\">\r\n <ng-container *ngFor=\"let state of stateOptions\">\r\n <mat-option [value]=\"state.name\" (click)=\"changeState(state.name)\">{{state.name}}</mat-option>\r\n </ng-container>\r\n </mat-select>\r\n <mat-error *ngIf=\"filtersForm.controls['state'].hasError('required')\">\r\n Este campo es requerido\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template [ngIf]=\"propertyTypeSelected.value !== 'NONE'\">\r\n <mat-divider></mat-divider>\r\n <div class=\"--padding\">\r\n <h4 class=\"--title\">\r\n <span class=\"ic-features-price\"></span>\r\n Presupuesto\r\n </h4>\r\n <div class=\"budget\">\r\n <!-- Min price [START] -->\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>M\u00EDnimo</mat-label>\r\n <input autocomplete=\"off\" matInput=\"\" type=\"number\" title=\"Min price\" formControlName=\"minPrice\" min=\"1\" (focusout)=\"changeFilterStatus()\">\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 autocomplete=\"off\" matInput=\"\" type=\"number\" title=\"max price\" formControlName=\"maxPrice\" (focusout)=\"changeFilterStatus()\">\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 <span class=\"ic-features-bedroom\"></span>\r\n Habitaciones\r\n </h4>\r\n <mat-button-toggle-group name=\"bedrooms\" aria-label=\"Bedrooms\" formControlName=\"bedrooms\">\r\n <ng-container *ngFor=\"let bedroom of bedroomsList\">\r\n <ng-template [ngIf]=\"bedroom === 0\" [ngIfElse]=\"bedroomNumber\">\r\n <mat-button-toggle [value]=\"bedroom\" (click)=\"changeFilterStatus()\" 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)=\"changeFilterStatus()\">{{bedroom}}+\r\n </mat-button-toggle>\r\n </ng-template>\r\n </ng-container>\r\n </mat-button-toggle-group>\r\n </div>\r\n <div class=\"features__bathrooms\">\r\n <h4 class=\"--title\">\r\n <span class=\"ic-features-bathroom\"></span>\r\n Ba\u00F1os\r\n </h4>\r\n <mat-button-toggle-group name=\"bathrooms\" aria-label=\"Bathrooms\" formControlName=\"bathrooms\">\r\n <ng-container *ngFor=\"let bathroom of bathroomsList\">\r\n <ng-template [ngIf]=\"bathroom === 0\" [ngIfElse]=\"bathroomNumber\">\r\n <mat-button-toggle [value]=\"bathroom\" (click)=\"changeFilterStatus()\"\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)=\"changeFilterStatus()\">{{bathroom}}+\r\n </mat-button-toggle>\r\n </ng-template>\r\n </ng-container>\r\n </mat-button-toggle-group>\r\n </div>\r\n </ng-template>\r\n <ng-template [ngIf]=\"propertyTypeSelected.value !== 'LAND' && propertyTypeSelected.value !== 'INVESTMENT'\">\r\n <div class=\"features__parking-places\">\r\n <h4 class=\"--title\">\r\n <span class=\"ic-features-parking\"></span>\r\n Estacionamientos\r\n </h4>\r\n <mat-button-toggle-group name=\"parking_places\" aria-label=\"Parking Places\"\r\n formControlName=\"parkingPlaces\">\r\n <ng-container *ngFor=\"let parking of parkingPlacesList\">\r\n <ng-template [ngIf]=\"parking === 0\" [ngIfElse]=\"parkingNumber\">\r\n <mat-button-toggle [value]=\"parking\" (click)=\"changeFilterStatus()\"\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)=\"changeFilterStatus()\">{{parking}}+\r\n </mat-button-toggle>\r\n </ng-template>\r\n </ng-container>\r\n </mat-button-toggle-group>\r\n </div>\r\n </ng-template>\r\n <ng-template [ngIf]=\"propertyTypeSelected.value !== 'INVESTMENT'\">\r\n <div class=\"features__surface\">\r\n <h4 class=\"--title\">\r\n <span class=\"ic-features-surface\"></span>\r\n Superficie\r\n </h4>\r\n <div class=\"--row\">\r\n <mat-form-field appearance=\"outline\" class=\"--col\">\r\n <mat-label>\u00C1rea</mat-label>\r\n <mat-select formControlName=\"surface\" (selectionChange)=\"changeFilterStatus()\">\r\n <mat-option [value]=\"0\" (click)=\"changeFilterStatus()\">\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)=\"changeFilterStatus()\">\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 (click)=\"changeFilterStatus()\" [value]=\"0\">m2</mat-button-toggle>\r\n <mat-button-toggle (click)=\"changeFilterStatus()\" [value]=\"1\">sq ft</mat-button-toggle>\r\n </mat-button-toggle-group>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template [ngIf]=\"propertyTypeSelected.value === 'INVESTMENT'\">\r\n <div class=\"feature investment\">\r\n <h4 class=\"--title\">Retorno de inversi\u00F3n</h4>\r\n <mat-form-field appearance=\"outline\" class=\"--col\">\r\n <mat-label>Porcentaje</mat-label>\r\n <mat-select formControlName=\"roi\">\r\n <mat-option [value]=\"0\" (click)=\"changeFilterStatus()\">\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)=\"changeFilterStatus()\">\r\n {{roi}}%\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </ng-template>\r\n <div class=\"amenities-container\">\r\n <ng-template [ngIf]=\"propertyTypeSelected.amenities.length > 0\">\r\n <div class=\"amenities\">\r\n <h4 class=\"--title\">\r\n Amenidades\r\n </h4>\r\n <div class=\"amenities__list\">\r\n <ng-container *ngFor=\"let amenity of propertyTypeSelected.amenities\">\r\n <div class=\"amenities__amenity\" matRipple (click)=\"updateAmenity(amenity)\">\r\n <span class=\"amenity__icon ic-amenities-{{amenity.iconName}}\"\r\n [ngClass]=\"{'amenity--active': amenity.checked}\"></span>\r\n <span class=\"amenity__label\">{{amenity.name}}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template [ngIf]=\"propertyTypeSelected.features.length > 0\">\r\n <div class=\"amenities\">\r\n <h4 class=\"--title\">\r\n Caracteristicas de la ubicaci\u00F3n\r\n </h4>\r\n <div class=\"amenities__list\">\r\n <ng-container *ngFor=\"let feature of propertyTypeSelected.features\">\r\n <div class=\"amenities__amenity\" matRipple (click)=\"updateAmenity(feature)\">\r\n <span class=\"amenity__icon ic-amenities-{{feature.iconName}}\"\r\n [ngClass]=\"{'amenity--active': feature.checked}\"></span>\r\n <span class=\"amenity__label\">{{feature.name}}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <div class=\"actions\">\r\n <!--ng-template [ngIf]=\"!isOPI\" [ngIfElse]=\"closeButtonTemplate\">\r\n <button mat-flat-button=\"\" type=\"button\" class=\"action__button\" color=\"primary\" (click)=\"saveSearchByFilters()\">\r\n GUARDAR\r\n </button>\r\n </ng-template-->\r\n <ng-template #closeButtonTemplate>\r\n <button mat-flat-button=\"\" type=\"button\" class=\"action__button\" color=\"primary\" (click)=\"close()\">CERRAR</button>\r\n </ng-template>\r\n <button mat-flat-button=\"\" type=\"button\" class=\"action__button\" color=\"primary\"\r\n (click)=\"resetFilters()\">LIMPIAR\r\n </button>\r\n <button mat-flat-button=\"\" type=\"submit\" class=\"action__button\" color=\"primary\" [disabled]=\"(propertyTotal === 0 || filtersForm.invalid) && newFilters\"\r\n (click)=\"applyFilters()\">APLICAR <span *ngIf=\"propertyTotal > 0 && newFilters\">({{propertyTotal}})</span>\r\n </button>\r\n </div>\r\n</form>\r\n",
|
|
3417
|
+
template: "<!-- Todo: [FiltersComponent] Refactor code -->\r\n<form class=\"filters\" [formGroup]=\"filtersForm\" [ngClass]=\"{'filters--opened': propertyTypeSelected.value !== 'NONE'}\">\r\n <ng-template [ngIf]=\"!isOPI\">\r\n <div class=\"float-button-close\">\r\n <button mat-icon-button type=\"button\" class=\"float-button-close__button\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n </ng-template>\r\n <div class=\"body\">\r\n <div class=\"--padding\">\r\n <div class=\"header\">\r\n <mat-form-field class=\"currency\" appearance=\"outline\">\r\n <mat-label>Divisa</mat-label>\r\n <mat-select formControlName=\"currency\">\r\n <ng-container *ngFor=\"let currency of currencyList\">\r\n <mat-option [value]=\"currency.type\" (click)=\"changeCurrency(currency.type)\">\r\n {{currency.type}}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n <mat-button-toggle-group class=\"offering-type-list\" name=\"offering-type\" formControlName=\"offering\"\r\n aria-label=\"Offering type\">\r\n <mat-button-toggle (click)=\"changeOffering('SALE')\" [value]=\"'SALE'\"\r\n [disabled]=\"propertyTypeSelected.value === 'NONE' || propertyTypeSelected.value === 'ROOM'\">\r\n Venta\r\n </mat-button-toggle>\r\n <mat-button-toggle (click)=\"changeOffering('RENT')\" [value]=\"'RENT'\"\r\n [disabled]=\"propertyTypeSelected.value === 'NONE' || propertyTypeSelected.value === 'INVESTMENT'\">\r\n Renta\r\n </mat-button-toggle>\r\n </mat-button-toggle-group>\r\n </div>\r\n <div class=\"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]=\"newFilters && propertyTypeSelected.value !== 'NONE'\">\r\n <div class=\"--padding\">\r\n <h4 class=\"--title\">\r\n Estado\r\n </h4>\r\n <div class=\"budget\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>Estado</mat-label>\r\n <mat-select formControlName=\"state\">\r\n <ng-container *ngFor=\"let state of stateOptions\">\r\n <mat-option [value]=\"state.name\" (click)=\"changeState(state.name)\">{{state.name}}</mat-option>\r\n </ng-container>\r\n </mat-select>\r\n <mat-error *ngIf=\"filtersForm.controls['state'].hasError('required')\">\r\n Este campo es requerido\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template [ngIf]=\"propertyTypeSelected.value !== 'NONE'\">\r\n <mat-divider></mat-divider>\r\n <div class=\"--padding\">\r\n <h4 class=\"--title\">\r\n <span class=\"ic-features-price\"></span>\r\n Presupuesto\r\n </h4>\r\n <div class=\"budget\">\r\n <!-- Min price [START] -->\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>M\u00EDnimo</mat-label>\r\n <input autocomplete=\"off\" matInput=\"\" type=\"number\" title=\"Min price\" formControlName=\"minPrice\" min=\"1\" (focusout)=\"changeFilterStatus()\">\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 autocomplete=\"off\" matInput=\"\" type=\"number\" title=\"max price\" formControlName=\"maxPrice\" (focusout)=\"changeFilterStatus()\">\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 <span class=\"ic-features-bedroom\"></span>\r\n Habitaciones\r\n </h4>\r\n <mat-button-toggle-group name=\"bedrooms\" aria-label=\"Bedrooms\" formControlName=\"bedrooms\">\r\n <ng-container *ngFor=\"let bedroom of bedroomsList\">\r\n <ng-template [ngIf]=\"bedroom === 0\" [ngIfElse]=\"bedroomNumber\">\r\n <mat-button-toggle [value]=\"bedroom\" (click)=\"changeFilterStatus()\" 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)=\"changeFilterStatus()\">{{bedroom}}+\r\n </mat-button-toggle>\r\n </ng-template>\r\n </ng-container>\r\n </mat-button-toggle-group>\r\n </div>\r\n <div class=\"features__bathrooms\">\r\n <h4 class=\"--title\">\r\n <span class=\"ic-features-bathroom\"></span>\r\n Ba\u00F1os\r\n </h4>\r\n <mat-button-toggle-group name=\"bathrooms\" aria-label=\"Bathrooms\" formControlName=\"bathrooms\">\r\n <ng-container *ngFor=\"let bathroom of bathroomsList\">\r\n <ng-template [ngIf]=\"bathroom === 0\" [ngIfElse]=\"bathroomNumber\">\r\n <mat-button-toggle [value]=\"bathroom\" (click)=\"changeFilterStatus()\"\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)=\"changeFilterStatus()\">{{bathroom}}+\r\n </mat-button-toggle>\r\n </ng-template>\r\n </ng-container>\r\n </mat-button-toggle-group>\r\n </div>\r\n </ng-template>\r\n <ng-template [ngIf]=\"propertyTypeSelected.value !== 'LAND' && propertyTypeSelected.value !== 'INVESTMENT'\">\r\n <div class=\"features__parking-places\">\r\n <h4 class=\"--title\">\r\n <span class=\"ic-features-parking\"></span>\r\n Estacionamientos\r\n </h4>\r\n <mat-button-toggle-group name=\"parking_places\" aria-label=\"Parking Places\"\r\n formControlName=\"parkingPlaces\">\r\n <ng-container *ngFor=\"let parking of parkingPlacesList\">\r\n <ng-template [ngIf]=\"parking === 0\" [ngIfElse]=\"parkingNumber\">\r\n <mat-button-toggle [value]=\"parking\" (click)=\"changeFilterStatus()\"\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)=\"changeFilterStatus()\">{{parking}}+\r\n </mat-button-toggle>\r\n </ng-template>\r\n </ng-container>\r\n </mat-button-toggle-group>\r\n </div>\r\n </ng-template>\r\n <ng-template [ngIf]=\"propertyTypeSelected.value !== 'INVESTMENT'\">\r\n <div class=\"features__surface\">\r\n <h4 class=\"--title\">\r\n <span class=\"ic-features-surface\"></span>\r\n Superficie\r\n </h4>\r\n <div class=\"--row\">\r\n <mat-form-field appearance=\"outline\" class=\"--col\">\r\n <mat-label>\u00C1rea</mat-label>\r\n <mat-select formControlName=\"surface\" (selectionChange)=\"changeFilterStatus()\">\r\n <mat-option [value]=\"0\" (click)=\"changeFilterStatus()\">\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)=\"changeFilterStatus()\">\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 (click)=\"changeFilterStatus()\" [value]=\"0\">m2</mat-button-toggle>\r\n <mat-button-toggle (click)=\"changeFilterStatus()\" [value]=\"1\">sq ft</mat-button-toggle>\r\n </mat-button-toggle-group>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template [ngIf]=\"propertyTypeSelected.value === 'INVESTMENT'\">\r\n <div class=\"feature investment\">\r\n <h4 class=\"--title\">Retorno de inversi\u00F3n</h4>\r\n <mat-form-field appearance=\"outline\" class=\"--col\">\r\n <mat-label>Porcentaje</mat-label>\r\n <mat-select formControlName=\"roi\">\r\n <mat-option [value]=\"0\" (click)=\"changeFilterStatus()\">\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)=\"changeFilterStatus()\">\r\n {{roi}}%\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </ng-template>\r\n <div class=\"amenities-container\">\r\n <ng-template [ngIf]=\"propertyTypeSelected.amenities.length > 0\">\r\n <div class=\"amenities\">\r\n <h4 class=\"--title\">\r\n Amenidades\r\n </h4>\r\n <div class=\"amenities__list\">\r\n <ng-container *ngFor=\"let amenity of propertyTypeSelected.amenities\">\r\n <div class=\"amenities__amenity\" matRipple (click)=\"updateAmenity(amenity)\">\r\n <span class=\"amenity__icon ic-amenities-{{amenity.iconName}}\"\r\n [ngClass]=\"{'amenity--active': amenity.checked}\"></span>\r\n <span class=\"amenity__label\">{{amenity.name}}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template [ngIf]=\"propertyTypeSelected.features.length > 0\">\r\n <div class=\"amenities\">\r\n <h4 class=\"--title\">\r\n Caracteristicas de la ubicaci\u00F3n\r\n </h4>\r\n <div class=\"amenities__list\">\r\n <ng-container *ngFor=\"let feature of propertyTypeSelected.features\">\r\n <div class=\"amenities__amenity\" matRipple (click)=\"updateAmenity(feature)\">\r\n <span class=\"amenity__icon ic-amenities-{{feature.iconName}}\"\r\n [ngClass]=\"{'amenity--active': feature.checked}\"></span>\r\n <span class=\"amenity__label\">{{feature.name}}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <div class=\"actions\">\r\n <!--ng-template [ngIf]=\"!isOPI\" [ngIfElse]=\"closeButtonTemplate\">\r\n <button mat-flat-button=\"\" type=\"button\" class=\"action__button\" color=\"primary\" (click)=\"saveSearchByFilters()\">\r\n GUARDAR\r\n </button>\r\n </ng-template-->\r\n <ng-template #closeButtonTemplate>\r\n <button mat-flat-button=\"\" type=\"button\" class=\"action__button\" color=\"primary\" (click)=\"close()\">CERRAR</button>\r\n </ng-template>\r\n <button mat-flat-button=\"\" type=\"button\" class=\"action__button\" color=\"primary\"\r\n (click)=\"resetFilters()\">LIMPIAR\r\n </button>\r\n <button mat-flat-button=\"\" type=\"submit\" class=\"action__button\" color=\"primary\" [disabled]=\"(propertyTotal === 0 || filtersForm.invalid) && newFilters\"\r\n (click)=\"applyFilters()\">\r\n VER <span *ngIf=\"propertyTotal > 0 && newFilters\">{{propertyTotal}}</span> {{(propertyTotal === 1 ? 'PROPIEDAD' : 'PROPIEDADES')}}\r\n </button>\r\n </div>\r\n</form>\r\n",
|
|
3417
3418
|
styles: [":host{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;display:flex;background:var(--overlay);transition:250ms}.filters--opened{height:90%!important}@media screen and (max-width:600px){.filters--opened{width:100%!important;height:100%!important;top:0!important}}.filters{width:700px;height:auto;margin:auto;border-radius:16px;position:relative;overflow:hidden;transition:150ms}.filters .--padding{padding:16px 48px;box-sizing:border-box}.filters .--row{display:flex;justify-content:space-between;align-items:flex-start}.filters .--col{width:45%}.filters .--title{margin:16px 0;color:#707070}.filters .float-button-close{position:absolute;top:16px;right:16px;height:16px;border-radius:50%}.filters .body{height:calc(100% - 36px);overflow-x:hidden;overflow-y:auto}.filters .header{display:flex;align-items:center;justify-content:space-around;margin-bottom:8px}.filters .listing-types{width:100%;border-radius:16px}.filters .listing-types mat-button-toggle{width:50%;height:36px}.filters ::ng-deep .listing-types mat-button-toggle button{height:36px}.filters ::ng-deep .listing-types mat-button-toggle button .mat-button-toggle-label-content{line-height:36px}.filters .currency ::ng-deep .mat-form-field-wrapper{padding:0}@media screen and (max-width:600px){.filters{width:100%;position:absolute;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;top:initial;bottom:0;left:0}.filters .--padding{padding:16px 24px}.filters .header{flex-direction:column}.filters .currency{width:70%;margin-bottom:8px}}.filters .offering-type-list{width:40%;border-radius:16px}.filters .offering-type-list mat-button-toggle{width:50%;height:36px}.filters ::ng-deep .offering-type-list mat-button-toggle button{height:36px}.filters ::ng-deep .offering-type-list mat-button-toggle button .mat-button-toggle-label-content{line-height:36px}.filters .property-type-list{display:-ms-grid;display:grid;-ms-grid-columns:(calc(100% / 9))[9];grid-template-columns:repeat(9,calc(100% / 9));-ms-grid-rows:(80px)[1];grid-template-rows:repeat(1,80px);border-radius:40px;padding:8px;box-sizing:border-box}@media screen and (max-width:600px){.filters .offering-type-list{width:70%}.filters .property-type-list{-ms-grid-columns:(calc(100% / 3))[3];grid-template-columns:repeat(3,calc(100% / 3));-ms-grid-rows:(80px)[3];grid-template-rows:repeat(3,80px)}}.filters .new-property-type-list{display:-ms-grid;display:grid;-ms-grid-columns:(calc(100% / 8))[8];grid-template-columns:repeat(8,calc(100% / 8));-ms-grid-rows:(80px)[1];grid-template-rows:repeat(1,80px);border-radius:40px;padding:8px;box-sizing:border-box}.filters .property-type-list .property-type-list__button{margin:auto;position:relative}.filters .property-type-list .property-type-list__button button{box-shadow:none}.filters .property-type-list .property-type-list__icon{width:24px;height:24px;font-size:24px}.filters .property-type-list .property-type-list__border{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:auto;opacity:.7;border-radius:50%;box-sizing:border-box}.filters .property-type-list .property-type-list__border--active{padding:4px;border:2px solid;opacity:1!important}.filters .property-type-list .property-type-list__label{font-size:12px;display:block;margin:8px 0;text-align:center}.filters .property-type-list .property-type-list__divider{width:14%;height:2px;background:#707070;top:30%;position:absolute}.filters .property-type-list .property-type-list__divider--left{left:-9px}.filters .property-type-list .property-type-list__divider--right{right:-9px}@media screen and (max-width:600px){.filters .new-property-type-list{-ms-grid-columns:(calc(100% / 3))[3];grid-template-columns:repeat(3,calc(100% / 3));-ms-grid-rows:(80px)[3];grid-template-rows:repeat(3,80px)}.filters .property-type-list .property-type-list__divider{width:60%}.filters .property-type-list .property-type-list__divider--left{left:-38px}.filters .property-type-list .property-type-list__divider--right{right:-38px}}.filters .new-property-type-list .property-type-list__button{margin:auto;position:relative}.filters .new-property-type-list .property-type-list__button button{box-shadow:none}.filters .new-property-type-list .property-type-list__icon{width:24px;height:24px;font-size:24px}.filters .new-property-type-list .property-type-list__border{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:auto;opacity:.7;border-radius:50%;box-sizing:border-box}.filters .new-property-type-list .property-type-list__border--active{padding:4px;border:2px solid;opacity:1!important}.filters .new-property-type-list .property-type-list__label{font-size:12px;display:block;margin:8px 0;text-align:center}.filters .new-property-type-list .property-type-list__divider{width:14%;height:2px;background:#707070;top:30%;position:absolute}.filters .new-property-type-list .property-type-list__divider--left{left:-9px}.filters .new-property-type-list .property-type-list__divider--right{right:-9px}@media screen and (max-width:600px){.filters .new-property-type-list .property-type-list__divider{width:60%}.filters .new-property-type-list .property-type-list__divider--left{left:-38px}.filters .new-property-type-list .property-type-list__divider--right{right:-38px}}.filters .all{width:100%;margin:8px 0}.filters .all .all__button{margin:0 40%;width:20%;border-radius:16px;background:0 0}.filters .budget{display:flex}.filters .budget mat-form-field{margin-right:8px;width:calc(100% / 2 - 8px)}.filters .features{display:-ms-grid;display:grid;-ms-grid-columns:(50%)[2];grid-template-columns:repeat(2,50%);-ms-grid-rows:(auto)[2];grid-template-rows:repeat(2,auto)}@media screen and (max-width:600px){.filters .all .all__button{width:50%;margin:0 25%}.filters .features{display:block}.filters .amenities-container{flex-direction:column}}.filters .features .features__bathrooms mat-button-toggle-group,.filters .features .features__bedrooms mat-button-toggle-group,.filters .features .features__parking-places mat-button-toggle-group{width:calc(100% - 16px)}.filters .features .features__bathrooms mat-button-toggle-group mat-button-toggle,.filters .features .features__bedrooms mat-button-toggle-group mat-button-toggle,.filters .features .features__parking-places mat-button-toggle-group mat-button-toggle{width:calc(100% / 5)}.filters .features .features__bedrooms--unlimited ::ng-deep .mat-button-toggle-label-content{line-height:16px;padding:8px;font-size:12px}.filters .features .features__bathrooms--unlimited ::ng-deep .mat-button-toggle-label-content{line-height:16px;padding:8px;font-size:12px}.filters .features .features__parking-places--unlimited ::ng-deep .mat-button-toggle-label-content{line-height:16px;padding:8px;font-size:12px}.filters .features .features__surface mat-button-toggle-group{margin-top:6px;margin-right:16px}.filters .amenities-container{width:100%;-ms-grid-column:1;grid-column-start:1;-ms-grid-column-span:2;grid-column-end:3;display:flex}.filters .amenities{width:50%}@media screen and (max-width:600px){.filters .amenities{width:100%}}.filters .amenities__amenity{width:calc(100% / 3 - 24px);height:120px;border-radius:8px;padding:8px;display:inline-flex;flex-direction:column;align-items:center;box-sizing:border-box;margin:0 8px 8px 0;cursor:pointer}.filters .amenity__icon{display:block;width:24px;height:24px;margin:8px auto;font-size:24px;padding:8px;border-radius:50%}.filters .amenity__label{width:100%;display:block;text-align:center;font-size:12px;margin:auto}.filters .actions{display:flex}.filters .actions .action__button{width:50%;border-radius:0}"]
|
|
3418
3419
|
}] }
|
|
3419
3420
|
];
|