@maplander/components 0.21.67 → 0.21.69

package/fesm5/maplander-components.js

@@ -3404,8 +3404,8 @@ var FiltersComponent = /** @class */ (function () {
     FiltersComponent.decorators = [
         { type: Component, args: [{
                     selector: 'lib-filters',
-                    template: "<!-- Todo: [FiltersComponent] Refactor code -->\r\n<form class=\"filters\" [formGroup]=\"filtersForm\" [ngClass]=\"{'filters--opened': propertyTypeSelected.value !== 'NONE'}\">\r\n  <ng-template [ngIf]=\"!isOPI\">\r\n    <div class=\"float-button-close\">\r\n      <button mat-icon-button type=\"button\" class=\"float-button-close__button\" (click)=\"close()\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n  <div class=\"body\">\r\n    <div class=\"--padding\">\r\n      <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\" autocomplete=\"off\" matInput=\"\" type=\"number\" 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\" autocomplete=\"off\" matInput=\"\" type=\"number\" 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)=\"saveSearchByFilters()\">\r\n          GUARDAR\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",
-                    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:50%;border-radius:0}.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);border:none}.filters .features .features__bathrooms mat-button-toggle-group mat-button-toggle,.filters .features .features__bedrooms mat-button-toggle-group mat-button-toggle,.filters .features .features__parking-places mat-button-toggle-group mat-button-toggle{border-radius:50%;margin:4px auto;box-shadow:0 0 4px;width:18%}.filters .features .features__bedrooms--unlimited ::ng-deep .mat-button-toggle-label-content{line-height:16px;padding:8px;font-size:12px}.filters .features .features__bathrooms--unlimited ::ng-deep .mat-button-toggle-label-content{line-height:16px;padding:8px;font-size:12px}.filters .features .features__parking-places--unlimited ::ng-deep .mat-button-toggle-label-content{line-height:16px;padding:8px;font-size:12px}.filters .features .features__surface mat-button-toggle-group{margin-top:6px;margin-right:16px;border:24px}.filters .amenities-container{width:100%;-ms-grid-column:1;grid-column-start:1;-ms-grid-column-span:2;grid-column-end:3;display:flex}.filters .amenities{width:50%}@media screen and (max-width:600px){.filters .amenities{width:100%}}.filters .amenities__amenity{width:calc(100% / 3 - 24px);height:120px;border-radius:8px;padding:8px;display:inline-flex;flex-direction:column;align-items:center;box-sizing:border-box;margin:0 8px 8px 0;cursor:pointer}.filters .amenity__icon{display:block;width:24px;height:24px;margin:8px auto;font-size:24px;padding:8px;border-radius:50%}.filters .amenity__label{width:100%;display:block;text-align:center;font-size:12px;margin:auto}.filters .actions{display:flex;position:absolute;bottom:0;width:100%}.filters .actions .action__button{width:50%;border-radius:0}"]
+                    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()\">\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",
+                    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:50%;border-radius:0}.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);border:none}.filters .features .features__bathrooms mat-button-toggle-group mat-button-toggle,.filters .features .features__bedrooms mat-button-toggle-group mat-button-toggle,.filters .features .features__parking-places mat-button-toggle-group mat-button-toggle{border-radius:50%;margin:4px auto;box-shadow:0 0 4px;width:18%}.filters .features .features__bedrooms--unlimited ::ng-deep .mat-button-toggle-label-content{line-height:16px;padding:8px;font-size:12px}.filters .features .features__bathrooms--unlimited ::ng-deep .mat-button-toggle-label-content{line-height:16px;padding:8px;font-size:12px}.filters .features .features__parking-places--unlimited ::ng-deep .mat-button-toggle-label-content{line-height:16px;padding:8px;font-size:12px}.filters .features .features__surface mat-button-toggle-group{margin-top:6px;margin-right:16px;border:24px}.filters .amenities-container{width:100%;-ms-grid-column:1;grid-column-start:1;-ms-grid-column-span:2;grid-column-end:3;display:flex}.filters .amenities{width:50%}@media screen and (max-width:600px){.filters .amenities{width:100%}}.filters .amenities__amenity{width:calc(100% / 3 - 24px);height:120px;border-radius:8px;padding:8px;display:inline-flex;flex-direction:column;align-items:center;box-sizing:border-box;margin:0 8px 8px 0;cursor:pointer}.filters .amenity__icon{display:block;width:24px;height:24px;margin:8px auto;font-size:24px;padding:8px;border-radius:50%}.filters .amenity__label{width:100%;display:block;text-align:center;font-size:12px;margin:auto}.filters .actions{display:flex;position:absolute;bottom:16px;width:100%;justify-content:space-around}.filters .actions .action__button{width:45%;border-radius:28px;height:40px;font-size:18px;font-weight:500}"]
                 }] }
     ];
     /** @nocollapse */
@@ -3500,7 +3500,8 @@ var FiltersModule = /** @class */ (function () {
                         MatDividerModule,
                         MatInputModule,
                         MarkerPriceModule.forChild(),
-                        CurrencyConverterModule.forChild()
+                        CurrencyConverterModule.forChild(),
+                        FormatPriceModule.forChild()
                     ],
                     declarations: [
                         FiltersComponent
@@ -6658,7 +6659,7 @@ var SlideShowComponent = /** @class */ (function () {
     SlideShowComponent.decorators = [
         { type: Component, args: [{
                     selector: 'lib-property-slide-show',
-                    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()\">\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)\">\r\n    <mat-icon>keyboard_arrow_right</mat-icon>\r\n  </button>\r\n</div>\r\n",
+                    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",
                     styles: [":host{display:block;position:relative;width:100%;padding-bottom:calc(100% / 4 * 3)}.slide-show{width:100%;height:100%;overflow:hidden;position:absolute}.slide-show__actions{position:absolute;bottom:0;left:0;right:0;width:100%;color:#fff;padding:8px 24px;z-index:2;display:flex;align-items:center;justify-content:flex-end;box-sizing:border-box;background:linear-gradient(transparent,rgba(0,0,0,.4))}.actions__count{margin:4px 0 0 8px;font-size:14px}.images-list{width:100%;height:100%;list-style:none;padding:0;margin:0;display:flex;overflow:hidden;transition:250ms}.images-item{width:100%;height:100%}.images-item__img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;border-radius:8px}.images-item__panorama,.images-item__video{width:100%;height:100%;border:0;border-radius:8px}.button-next,.button-previous{position:absolute;min-width:30px;width:30px;height:80px;padding:0;z-index:1;color:#fff;top:calc(50% - 40px);background:rgba(0,0,0,.3)}.button-next mat-icon,.button-previous mat-icon{width:30px;height:30px;font-size:30px}.button-next:hover,.button-previous:hover{color:#000;background:#fff}.disabled{color:#d3d3d3}.button-previous{left:0;border-radius:0 16px 16px 0}.button-next{right:0;border-radius:16px 0 0 16px}.no-items{width:100%;height:100%;border-radius:8px}"]
                 }] }
     ];