@rolatech/angular-property 20.1.0 → 20.1.2

package/fesm2022/{rolatech-angular-property-rolatech-angular-property-NsV_zGlO.mjs → rolatech-angular-property-rolatech-angular-property-DlDjmR4a.mjs}

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, booleanAttribute, effect, HostBinding, ViewEncapsulation, Component, viewChild, PLATFORM_ID, output, computed, EventEmitter, Injectable, signal, Pipe, DestroyRef, model, ViewChild } from '@angular/core';
+import { inject, ElementRef, input, booleanAttribute, effect, HostBinding, ViewEncapsulation, Component, viewChild, PLATFORM_ID, output, computed, EventEmitter, Injectable, model, signal, Pipe, DestroyRef, ViewChild } from '@angular/core';
 import * as i1$4 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i4 from '@angular/material/menu';
@@ -9,16 +9,16 @@ import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
 import * as i1$1 from '@angular/router';
-import { RouterLink, RouterModule, Router, ActivatedRoute, RouterLinkActive, RouterOutlet } from '@angular/router';
-import { ThumbnailComponent, ImagePlaceholderComponent, ToolbarComponent, SpinnerComponent, ImagePreviewDialogComponent, BaseComponent, AcceptDialogComponent, RejectDialogComponent, RichLabelComponent, AngularComponentsModule, ConfirmationDialogComponent, TabsComponent, TabComponent, EmptyComponent, ContainerComponent, SearchBar, ListComponent, MediaListComponent, MediaListItemComponent, InputComponent } from '@rolatech/angular-components';
-import { PropertyService, FeatureService, TimeZoneService, PropertySearchService, DialogService } from '@rolatech/angular-services';
+import { RouterLink, RouterModule, ActivatedRoute, Router, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { ThumbnailComponent, ImagePlaceholderComponent, ToolbarComponent, SpinnerComponent, ImagePreviewDialogComponent, BaseComponent, AcceptDialogComponent, RejectDialogComponent, RichLabelComponent, AngularComponentsModule, ConfirmationDialogComponent, TabsComponent, TabComponent, EmptyComponent, ListComponent, ContainerComponent, SearchBar, MediaListComponent, MediaListItemComponent, InputComponent } from '@rolatech/angular-components';
+import { PropertyService, FeatureService, InvoiceService, PropertyHighlightsService, TimeZoneService, PropertySearchService, DialogService } from '@rolatech/angular-services';
 import * as i1 from '@angular/common';
 import { CommonModule, NgClass, isPlatformBrowser, ViewportScroller, KeyValuePipe, Location } from '@angular/common';
-import { FixedPipe, AngularCommonModule, OptionsFormatPipe, APP_CONFIG, DecimalDirective, DurationPipe } from '@rolatech/angular-common';
 import * as i2 from '@angular/material/icon';
 import { MatIconModule, MatIcon } from '@angular/material/icon';
 import { MatDialog } from '@angular/material/dialog';
 import { AuthUserService, AuthService, AuthGuard } from '@rolatech/angular-auth';
+import { APP_CONFIG, AngularCommonModule, OptionsFormatPipe, DecimalDirective, DurationPipe } from '@rolatech/angular-common';
 import * as i1$3 from '@angular/forms';
 import { FormsModule, FormControl, ReactiveFormsModule } from '@angular/forms';
 import * as i1$2 from '@angular/material/form-field';
@@ -29,30 +29,32 @@ import * as i5 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i1$5 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
-import { startWith, map, defer, distinctUntilChanged, switchMap, finalize, forkJoin, from, concatMap, take, Observable } from 'rxjs';
+import { startWith, map, distinctUntilChanged, switchMap, finalize, forkJoin, from, concatMap, take, Observable } from 'rxjs';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
 import * as i4$2 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatOptionModule, MAT_DATE_LOCALE, DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
 import _, { findIndex, findLastIndex, first, remove } from 'lodash';
 import * as i2$1 from '@angular/material/divider';
-import { MatDividerModule, MatDivider } from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
+import { MomentDateAdapter } from '@angular/material-moment-adapter';
+import * as i6 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
 import { CommentsComponent } from '@rolatech/angular-comment';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i4$1 from '@angular/cdk/text-field';
 import { TextFieldModule } from '@angular/cdk/text-field';
-import * as i7$1 from '@angular/material/radio';
+import * as i7 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
-import { MomentDateAdapter } from '@angular/material-moment-adapter';
-import * as i7 from '@angular/material/datepicker';
-import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i3$1 from '@angular/material/progress-spinner';
 import { MatProgressSpinner, MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { trigger, state, transition, style, animate } from '@angular/animations';
 import * as i8 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import * as i1$6 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i4$3 from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import { MatListModule } from '@angular/material/list';
 
 var RentFrequency;
 (function (RentFrequency) {
@@ -155,8 +157,9 @@ var PropertyOfferTimelineStatus;
 })(PropertyOfferTimelineStatus || (PropertyOfferTimelineStatus = {}));
 var PropertyOfferType;
 (function (PropertyOfferType) {
-    PropertyOfferType["RENT"] = "Rent";
-    PropertyOfferType["BUY"] = "Buy";
+    PropertyOfferType["SALES"] = "Sales";
+    PropertyOfferType["LETTINGS"] = "Lettings";
+    PropertyOfferType["NOT_SPECIFIED"] = "Not specified";
 })(PropertyOfferType || (PropertyOfferType = {}));
 var PropertyOfferStatus;
 (function (PropertyOfferStatus) {
@@ -297,6 +300,64 @@ const ViewingTime = [
     '23:30',
     '23:45',
 ];
+const BedroomRange = [
+    { label: 'No min', value: '0' },
+    { label: 'No max', value: null },
+    { label: '1', value: '1' },
+    { label: '2', value: '2' },
+    { label: '3', value: '3' },
+    { label: '4', value: '4' },
+    { label: '5', value: '5' },
+];
+const PriceRange = [
+    { label: 'No min', value: 0 },
+    { label: 'No max', value: null },
+    { label: '£100 PCM', value: 100 },
+    { label: '£150 PCM', value: 150 },
+    { label: '£200 PCM', value: 200 },
+    { label: '£250 PCM', value: 250 },
+    { label: '£300 PCM', value: 300 },
+    { label: '£350 PCM', value: 350 },
+    { label: '£400 PCM', value: 400 },
+    { label: '£450 PCM', value: 450 },
+    { label: '£500 PCM', value: 500 },
+    { label: '£600 PCM', value: 600 },
+    { label: '£700 PCM', value: 700 },
+    { label: '£800 PCM', value: 800 },
+    { label: '£900 PCM', value: 900 },
+    { label: '£1,000 PCM', value: 1000 },
+    { label: '£1,100 PCM', value: 1100 },
+    { label: '£1,200 PCM', value: 1200 },
+    { label: '£1,250 PCM', value: 1250 },
+    { label: '£1,300 PCM', value: 1300 },
+    { label: '£1,400 PCM', value: 1400 },
+    { label: '£1,500 PCM', value: 1500 },
+    { label: '£1,750 PCM', value: 1750 },
+    { label: '£2,000 PCM', value: 2000 },
+    { label: '£2,250 PCM', value: 2250 },
+    { label: '£2,500 PCM', value: 2500 },
+    { label: '£2,750 PCM', value: 2750 },
+    { label: '£3,000 PCM', value: 3000 },
+    { label: '£3,500 PCM', value: 3500 },
+    { label: '£4,000 PCM', value: 4000 },
+    { label: '£4,500 PCM', value: 4500 },
+    { label: '£5,000 PCM', value: 5000 },
+    { label: '£5,500 PCM', value: 5500 },
+    { label: '£6,000 PCM', value: 6000 },
+    { label: '£6,500 PCM', value: 6500 },
+    { label: '£7,000 PCM', value: 7000 },
+    { label: '£8,000 PCM', value: 8000 },
+    { label: '£9,000 PCM', value: 9000 },
+    { label: '£10,000 PCM', value: 10000 },
+    { label: '£12,500 PCM', value: 12500 },
+    { label: '£15,000 PCM', value: 15000 },
+    { label: '£17,500 PCM', value: 17500 },
+    { label: '£20,000 PCM', value: 20000 },
+    { label: '£25,000 PCM', value: 25000 },
+    { label: '£30,000 PCM', value: 30000 },
+    { label: '£35,000 PCM', value: 35000 },
+    { label: '£40,000 PCM', value: 40000 },
+];
 
 class PropertyManageItemComponent {
     hasClass = true;
@@ -318,12 +379,12 @@ class PropertyManageItemComponent {
     publish() { }
     archived() { }
     delete() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyManageItemComponent, isStandalone: true, selector: "rolatech-property-manage-item", inputs: { property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null }, thumbnail: { classPropertyName: "thumbnail", publicName: "thumbnail", isSignal: true, isRequired: false, transformFunction: null }, list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rolatech-property-manage-item": "this.hasClass" } }, ngImport: i0, template: "<div\n  class=\"flex p-3 bg-[--rt-raised-background] hover:bg-[--rt-raised-background] cursor-pointer rounded-md\"\n  [ngClass]=\"list() ? 'w-full flex-row' : 'flex-col h-full'\"\n>\n  <div>\n    @if (property().media) {\n      <div class=\"object-cover aspect-video rounded-lg\" [ngClass]=\"list() ? 'w-32 mr-3' : ''\">\n        @defer {\n          <rolatech-thumbnail [src]=\"property().media ? property().media[0].url : ''\" size=\"medium\" mode=\"full\">\n          </rolatech-thumbnail>\n        } @placeholder {\n          <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n        }\n      </div>\n    } @else {\n      <div class=\"object-cover aspect-video rounded-lg\" [ngClass]=\"list() ? 'w-32 mr-3' : ''\">\n        <rolatech-image-placeholder></rolatech-image-placeholder>\n      </div>\n    }\n  </div>\n\n  <div class=\"py-2\">\n    <div class=\"text-lg font-bold\">\n      {{ property().title }}\n    </div>\n  </div>\n  <div class=\"flex-1\"></div>\n  <div class=\"\">\u00A3{{ property().price | fixed }}</div>\n</div>\n", styles: ["rolatech-property-manage-item{--rt-property-view-item-margin: 16px;width:calc(100% / var(--rt-property-view-items-per-row) - var(--rt-property-view-item-margin) - .01px)}rolatech-property-manage-item[list]{--rt-property-view-items-per-row: 1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ImagePlaceholderComponent, selector: "rolatech-image-placeholder", inputs: ["ratio"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "pipe", type: FixedPipe, name: "fixed" }], encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [ThumbnailComponent]] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyManageItemComponent, isStandalone: true, selector: "rolatech-property-manage-item", inputs: { property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null }, thumbnail: { classPropertyName: "thumbnail", publicName: "thumbnail", isSignal: true, isRequired: false, transformFunction: null }, list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rolatech-property-manage-item": "this.hasClass" } }, ngImport: i0, template: "<div\n  class=\"flex p-3 bg-[--rt-raised-background] hover:bg-[--rt-raised-background] cursor-pointer rounded-md\"\n  [ngClass]=\"list() ? 'w-full flex-row' : 'flex-col h-full'\"\n>\n  <div>\n    @if (property().media) {\n      <div class=\"object-cover aspect-video rounded-lg\" [ngClass]=\"list() ? 'w-32 mr-3' : ''\">\n        @defer {\n          <rolatech-thumbnail [src]=\"property().media ? property().media[0].url : ''\" size=\"medium\" mode=\"full\">\n          </rolatech-thumbnail>\n        } @placeholder {\n          <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n        }\n      </div>\n    } @else {\n      <div class=\"object-cover aspect-video rounded-lg\" [ngClass]=\"list() ? 'w-32 mr-3' : ''\">\n        <rolatech-image-placeholder></rolatech-image-placeholder>\n      </div>\n    }\n  </div>\n\n  <div class=\"py-2\">\n    <div class=\"text-lg font-bold\">\n      {{ property().title }}\n    </div>\n  </div>\n  <div class=\"flex-1\"></div>\n  <div class=\"\">\u00A3{{ property().price.toFixed(2) }}</div>\n</div>\n", styles: ["rolatech-property-manage-item{--rt-property-view-item-margin: 16px;width:calc(100% / var(--rt-property-view-items-per-row) - var(--rt-property-view-item-margin) - .01px)}rolatech-property-manage-item[list]{--rt-property-view-items-per-row: 1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ImagePlaceholderComponent, selector: "rolatech-image-placeholder", inputs: ["ratio"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatMenuModule }], encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [ThumbnailComponent]] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-property-manage-item', imports: [CommonModule, ThumbnailComponent, ImagePlaceholderComponent, MatButtonModule, MatMenuModule, FixedPipe], encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"flex p-3 bg-[--rt-raised-background] hover:bg-[--rt-raised-background] cursor-pointer rounded-md\"\n  [ngClass]=\"list() ? 'w-full flex-row' : 'flex-col h-full'\"\n>\n  <div>\n    @if (property().media) {\n      <div class=\"object-cover aspect-video rounded-lg\" [ngClass]=\"list() ? 'w-32 mr-3' : ''\">\n        @defer {\n          <rolatech-thumbnail [src]=\"property().media ? property().media[0].url : ''\" size=\"medium\" mode=\"full\">\n          </rolatech-thumbnail>\n        } @placeholder {\n          <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n        }\n      </div>\n    } @else {\n      <div class=\"object-cover aspect-video rounded-lg\" [ngClass]=\"list() ? 'w-32 mr-3' : ''\">\n        <rolatech-image-placeholder></rolatech-image-placeholder>\n      </div>\n    }\n  </div>\n\n  <div class=\"py-2\">\n    <div class=\"text-lg font-bold\">\n      {{ property().title }}\n    </div>\n  </div>\n  <div class=\"flex-1\"></div>\n  <div class=\"\">\u00A3{{ property().price | fixed }}</div>\n</div>\n", styles: ["rolatech-property-manage-item{--rt-property-view-item-margin: 16px;width:calc(100% / var(--rt-property-view-items-per-row) - var(--rt-property-view-item-margin) - .01px)}rolatech-property-manage-item[list]{--rt-property-view-items-per-row: 1}\n"] }]
+            args: [{ selector: 'rolatech-property-manage-item', imports: [CommonModule, ThumbnailComponent, ImagePlaceholderComponent, MatButtonModule, MatMenuModule], encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"flex p-3 bg-[--rt-raised-background] hover:bg-[--rt-raised-background] cursor-pointer rounded-md\"\n  [ngClass]=\"list() ? 'w-full flex-row' : 'flex-col h-full'\"\n>\n  <div>\n    @if (property().media) {\n      <div class=\"object-cover aspect-video rounded-lg\" [ngClass]=\"list() ? 'w-32 mr-3' : ''\">\n        @defer {\n          <rolatech-thumbnail [src]=\"property().media ? property().media[0].url : ''\" size=\"medium\" mode=\"full\">\n          </rolatech-thumbnail>\n        } @placeholder {\n          <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n        }\n      </div>\n    } @else {\n      <div class=\"object-cover aspect-video rounded-lg\" [ngClass]=\"list() ? 'w-32 mr-3' : ''\">\n        <rolatech-image-placeholder></rolatech-image-placeholder>\n      </div>\n    }\n  </div>\n\n  <div class=\"py-2\">\n    <div class=\"text-lg font-bold\">\n      {{ property().title }}\n    </div>\n  </div>\n  <div class=\"flex-1\"></div>\n  <div class=\"\">\u00A3{{ property().price.toFixed(2) }}</div>\n</div>\n", styles: ["rolatech-property-manage-item{--rt-property-view-item-margin: 16px;width:calc(100% / var(--rt-property-view-items-per-row) - var(--rt-property-view-item-margin) - .01px)}rolatech-property-manage-item[list]{--rt-property-view-items-per-row: 1}\n"] }]
         }], ctorParameters: () => [], propDecorators: { hasClass: [{
                 type: HostBinding,
                 args: ['class.rolatech-property-manage-item']
@@ -348,10 +409,10 @@ class PropertyReviewIndexComponent {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyReviewIndexComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyReviewIndexComponent, isStandalone: true, selector: "rolatech-property-review-index", host: { properties: { "class.rolatech-property-manage-index": "this.hasClass" } }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "<rolatech-toolbar title=\"Properties\"> </rolatech-toolbar>\n@if (isLoading) {\n  <div class=\"flex justify-center items-center\">\n    <rolatech-spinner></rolatech-spinner>\n  </div>\n} @else {\n  <div class=\"bg-[--rt-rasised-background] h-full\">\n    <div class=\"flex flex-wrap p-3 gap-3\">\n      @for (item of properties; track $index) {\n        <rolatech-property-manage-item\n          list\n          [property]=\"item\"\n          routerLink=\"./properties/{{ item.id }}\"\n        ></rolatech-property-manage-item>\n      }\n    </div>\n  </div>\n\n  <!-- <mat-paginator\n    #paginator\n    [length]=\"length\"\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"pageEvent = find($event)\"\n    hidePageSize\n    showFirstLastButtons\n  >\n  </mat-paginator> -->\n}\n", styles: ["mat-form-field{width:100%}table{width:100%}td.mat-column-actions{text-align:right;max-width:64px;font-size:.8rem;padding:0 8px}.mat-mdc-header-cell.actions{text-align:right;max-width:64px;width:64px}.mat-mdc-cell:nth-last-child(2),.mat-mdc-header-cell:nth-last-child(2),.mat-mdc-footer-cell:nth-last-child(2){text-align:right;max-width:180px;width:180px}mat-cell:last-of-type,mat-header-cell:last-of-type,mat-footer-cell:last-of-type{text-align:right;padding-right:8px!important}rolatech-property-manage-index{--rt-property-view-items-per-row: 1}@media (min-width: 600px){rolatech-property-manage-index{--rt-property-view-items-per-row: 2}}@media (min-width: 768px){rolatech-property-manage-index{--rt-property-view-items-per-row: 3}}@media (min-width: 1280px){rolatech-property-manage-index{--rt-property-view-items-per-row: 3}}@media (min-width: 1536px){rolatech-property-manage-index{--rt-property-view-items-per-row: 4}}@media (min-width: 1920px){rolatech-property-manage-index{--rt-property-view-items-per-row: 5}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: SpinnerComponent, selector: "rolatech-spinner", inputs: ["title"] }, { kind: "component", type: PropertyManageItemComponent, selector: "rolatech-property-manage-item", inputs: ["property", "thumbnail", "list"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyReviewIndexComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyReviewIndexComponent, isStandalone: true, selector: "rolatech-property-review-index", host: { properties: { "class.rolatech-property-manage-index": "this.hasClass" } }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "<rolatech-toolbar title=\"Properties\"> </rolatech-toolbar>\n@if (isLoading) {\n  <div class=\"flex justify-center items-center\">\n    <rolatech-spinner></rolatech-spinner>\n  </div>\n} @else {\n  <div class=\"bg-[--rt-rasised-background] h-full\">\n    <div class=\"flex flex-wrap p-3 gap-3\">\n      @for (item of properties; track $index) {\n        <rolatech-property-manage-item\n          list\n          [property]=\"item\"\n          routerLink=\"./properties/{{ item.id }}\"\n        ></rolatech-property-manage-item>\n      }\n    </div>\n  </div>\n\n  <!-- <mat-paginator\n    #paginator\n    [length]=\"length\"\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"pageEvent = find($event)\"\n    hidePageSize\n    showFirstLastButtons\n  >\n  </mat-paginator> -->\n}\n", styles: ["mat-form-field{width:100%}table{width:100%}td.mat-column-actions{text-align:right;max-width:64px;font-size:.8rem;padding:0 8px}.mat-mdc-header-cell.actions{text-align:right;max-width:64px;width:64px}.mat-mdc-cell:nth-last-child(2),.mat-mdc-header-cell:nth-last-child(2),.mat-mdc-footer-cell:nth-last-child(2){text-align:right;max-width:180px;width:180px}mat-cell:last-of-type,mat-header-cell:last-of-type,mat-footer-cell:last-of-type{text-align:right;padding-right:8px!important}rolatech-property-manage-index{--rt-property-view-items-per-row: 1}@media (min-width: 600px){rolatech-property-manage-index{--rt-property-view-items-per-row: 2}}@media (min-width: 768px){rolatech-property-manage-index{--rt-property-view-items-per-row: 3}}@media (min-width: 1280px){rolatech-property-manage-index{--rt-property-view-items-per-row: 3}}@media (min-width: 1536px){rolatech-property-manage-index{--rt-property-view-items-per-row: 4}}@media (min-width: 1920px){rolatech-property-manage-index{--rt-property-view-items-per-row: 5}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: SpinnerComponent, selector: "rolatech-spinner", inputs: ["title"] }, { kind: "component", type: PropertyManageItemComponent, selector: "rolatech-property-manage-item", inputs: ["property", "thumbnail", "list"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyReviewIndexComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyReviewIndexComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-review-index', imports: [
                         MatButtonModule,
@@ -390,10 +451,10 @@ class PropertyMediaComponent {
         });
         dialogRef.afterClosed().subscribe((result) => { });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyMediaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyMediaComponent, isStandalone: true, selector: "rolatech-property-media", inputs: { media: { classPropertyName: "media", publicName: "media", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rolatech-property-medi": "this.hasClass", "class.scrollbar-hide": "this.disableScrollbar" } }, ngImport: i0, template: "<div>\n  <div class=\"object-cover aspect-video bg-[--rt-raised-background]\">\n    <rolatech-thumbnail [src]=\"media() ? media()[mediaIndex].url : ''\" size=\"small\"></rolatech-thumbnail>\n  </div>\n  <div class=\"flex overflow-y-hidden overflow-x-scroll scrollbar-hide pb-4\">\n    @for (media of media(); track media; let index = $index) {\n      <div\n        class=\"flex flex-row mt-3 mr-3 cursor-pointer rounded-md min-w-32\"\n        (click)=\"mediaIndex = index\"\n        [ngClass]=\"mediaIndex === index ? '' : 'opacity-30'\"\n      >\n        <rolatech-thumbnail [src]=\"media.url\" size=\"small\"></rolatech-thumbnail>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}rolatech-rich-item{display:flex;position:relative;cursor:pointer;flex-direction:column}#details.rolatech-rich-item{display:flex;flex-direction:column;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThumbnailComponent, selector: "rolatech-thumbnail", inputs: ["src", "size", "mode", "ratio", "width", "height"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyMediaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyMediaComponent, isStandalone: true, selector: "rolatech-property-media", inputs: { media: { classPropertyName: "media", publicName: "media", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rolatech-property-medi": "this.hasClass", "class.scrollbar-hide": "this.disableScrollbar" } }, ngImport: i0, template: "<div>\n  <div class=\"object-cover aspect-video bg-[--rt-raised-background]\">\n    <rolatech-thumbnail [src]=\"media() ? media()[mediaIndex].url : ''\" size=\"small\"></rolatech-thumbnail>\n  </div>\n  <div class=\"flex overflow-y-hidden overflow-x-scroll scrollbar-hide pb-4\">\n    @for (media of media(); track media; let index = $index) {\n      <div\n        class=\"flex flex-row mt-3 mr-3 cursor-pointer rounded-md min-w-32\"\n        (click)=\"mediaIndex = index\"\n        [ngClass]=\"mediaIndex === index ? '' : 'opacity-30'\"\n      >\n        <rolatech-thumbnail [src]=\"media.url\" size=\"small\"></rolatech-thumbnail>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}rolatech-rich-item{display:flex;position:relative;cursor:pointer;flex-direction:column}#details.rolatech-rich-item{display:flex;flex-direction:column;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThumbnailComponent, selector: "rolatech-thumbnail", inputs: ["src", "size", "mode", "ratio", "width", "height"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyMediaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyMediaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-media', imports: [NgClass, ThumbnailComponent], encapsulation: ViewEncapsulation.None, template: "<div>\n  <div class=\"object-cover aspect-video bg-[--rt-raised-background]\">\n    <rolatech-thumbnail [src]=\"media() ? media()[mediaIndex].url : ''\" size=\"small\"></rolatech-thumbnail>\n  </div>\n  <div class=\"flex overflow-y-hidden overflow-x-scroll scrollbar-hide pb-4\">\n    @for (media of media(); track media; let index = $index) {\n      <div\n        class=\"flex flex-row mt-3 mr-3 cursor-pointer rounded-md min-w-32\"\n        (click)=\"mediaIndex = index\"\n        [ngClass]=\"mediaIndex === index ? '' : 'opacity-30'\"\n      >\n        <rolatech-thumbnail [src]=\"media.url\" size=\"small\"></rolatech-thumbnail>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}rolatech-rich-item{display:flex;position:relative;cursor:pointer;flex-direction:column}#details.rolatech-rich-item{display:flex;flex-direction:column;justify-content:space-between}\n"] }]
         }], propDecorators: { hasClass: [{
@@ -406,17 +467,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
 
 class PropertyFeaturesComponent {
     features = input.required(...(ngDevMode ? [{ debugName: "features" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyFeaturesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyFeaturesComponent, isStandalone: true, selector: "rolatech-property-features", inputs: { features: { classPropertyName: "features", publicName: "features", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"\">\n  <div class=\"text-2xl font-bold py-3\" i18n>Features</div>\n  <div class=\"flex flex-row flex-wrap items-center font-thin text-sm\">\n    @for (feature of features(); track feature) {\n      <div class=\"flex items-center mr-2\">\n        <mat-icon>check</mat-icon>\n        <span>{{ feature.value.name }}</span>\n      </div>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyFeaturesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyFeaturesComponent, isStandalone: true, selector: "rolatech-property-features", inputs: { features: { classPropertyName: "features", publicName: "features", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"\">\n  <div class=\"text-2xl font-bold py-3\" i18n>Features</div>\n  <div class=\"flex flex-row flex-wrap items-center\">\n    @for (feature of features(); track feature) {\n      <div class=\"flex items-center mr-2\">\n        <mat-icon>check</mat-icon>\n        <span>{{ feature.label }}</span>\n      </div>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyFeaturesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyFeaturesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-property-features', imports: [CommonModule, MatIconModule], template: "<div class=\"\">\n  <div class=\"text-2xl font-bold py-3\" i18n>Features</div>\n  <div class=\"flex flex-row flex-wrap items-center font-thin text-sm\">\n    @for (feature of features(); track feature) {\n      <div class=\"flex items-center mr-2\">\n        <mat-icon>check</mat-icon>\n        <span>{{ feature.value.name }}</span>\n      </div>\n    }\n  </div>\n</div>\n" }]
+            args: [{ selector: 'rolatech-property-features', imports: [CommonModule, MatIconModule], template: "<div class=\"\">\n  <div class=\"text-2xl font-bold py-3\" i18n>Features</div>\n  <div class=\"flex flex-row flex-wrap items-center\">\n    @for (feature of features(); track feature) {\n      <div class=\"flex items-center mr-2\">\n        <mat-icon>check</mat-icon>\n        <span>{{ feature.label }}</span>\n      </div>\n    }\n  </div>\n</div>\n" }]
         }] });
 
 // src/app/utils/load-google-maps.ts
 let mapsLoadingPromise = null;
-function loadGoogleMaps({ host = 'https://maps.primecasa.co.uk', key, libraries = [], version = 'weekly', language, region, mapIds, // <-- NEW
+function loadGoogleMaps({ host = 'https://maps.google.com', key, libraries = [], version = 'weekly', language, region, mapIds, // <-- NEW
 nonceSelector, }) {
     if (typeof window === 'undefined' || typeof document === 'undefined')
         return Promise.resolve();
@@ -461,22 +522,23 @@ class PropertyLocationComponent {
     platformId = inject(PLATFORM_ID);
     location = input.required(...(ngDevMode ? [{ debugName: "location" }] : []));
     mapElementRef = viewChild.required('mapElement');
+    environment = inject(APP_CONFIG);
     async ngOnInit() {
         if (!isPlatformBrowser(this.platformId))
             return;
         await loadGoogleMaps({
-            host: 'https://maps.primecasa.co.uk',
+            host: this.environment.mapsUrl,
             key: 'AIzaSyAeV09t2sHyceSpInkj63wl5t1rM_YV78M',
             libraries: ['marker', 'places'],
             language: 'en-GB',
             region: 'GB',
-            mapIds: ["6a8f7b7d56282c69"],
+            mapIds: ['6a8f7b7d56282c69'],
         });
-        const { Map } = await google.maps.importLibrary('maps');
-        const { AdvancedMarkerElement } = await google.maps.importLibrary('marker');
+        const { Map } = (await google.maps.importLibrary('maps'));
+        const { AdvancedMarkerElement } = (await google.maps.importLibrary('marker'));
         const center = {
             lat: parseFloat(this.location().latitude) || 51.509865,
-            lng: parseFloat(this.location().longitude) || -0.118092
+            lng: parseFloat(this.location().longitude) || -0.118092,
         };
         const options = {
             mapId: '6a8f7b7d56282c69',
@@ -486,10 +548,10 @@ class PropertyLocationComponent {
         const map = new Map(this.mapElementRef().nativeElement, options);
         new AdvancedMarkerElement({ map, position: map.getCenter() });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyLocationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.2", type: PropertyLocationComponent, isStandalone: true, selector: "rolatech-property-location", inputs: { location: { classPropertyName: "location", publicName: "location", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "mapElementRef", first: true, predicate: ["mapElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"\">\n  <div class=\"text-2xl font-bold py-4\" i18n>Location</div>\n  <div class=\"bg-[--rt-raised-background]\">\n    <div class=\"map-container\">\n      <div #mapElement id=\"map\"></div>\n    </div>\n  </div>\n</div>\n", styles: [".aspect-ratio-16-9{position:relative;width:100%;padding-bottom:56.25%;height:0}.map-container{position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden}#map{position:absolute;top:0;left:0;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyLocationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.4", type: PropertyLocationComponent, isStandalone: true, selector: "rolatech-property-location", inputs: { location: { classPropertyName: "location", publicName: "location", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "mapElementRef", first: true, predicate: ["mapElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"\">\n  <div class=\"text-2xl font-bold py-4\" i18n>Location</div>\n  <div class=\"bg-[--rt-raised-background]\">\n    <div class=\"map-container\">\n      <div #mapElement id=\"map\"></div>\n    </div>\n  </div>\n</div>\n", styles: [".aspect-ratio-16-9{position:relative;width:100%;padding-bottom:56.25%;height:0}.map-container{position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden}#map{position:absolute;top:0;left:0;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyLocationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyLocationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-location', imports: [CommonModule], template: "<div class=\"\">\n  <div class=\"text-2xl font-bold py-4\" i18n>Location</div>\n  <div class=\"bg-[--rt-raised-background]\">\n    <div class=\"map-container\">\n      <div #mapElement id=\"map\"></div>\n    </div>\n  </div>\n</div>\n", styles: [".aspect-ratio-16-9{position:relative;width:100%;padding-bottom:56.25%;height:0}.map-container{position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden}#map{position:absolute;top:0;left:0;width:100%;height:100%}\n"] }]
         }] });
@@ -499,10 +561,10 @@ class PropertyOwnerRendererComponent {
     avatar = input(...(ngDevMode ? [undefined, { debugName: "avatar" }] : []));
     username = input(...(ngDevMode ? [undefined, { debugName: "username" }] : []));
     subtitle = input(...(ngDevMode ? [undefined, { debugName: "subtitle" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyOwnerRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyOwnerRendererComponent, isStandalone: true, selector: "rolatech-property-owner-renderer", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, username: { classPropertyName: "username", publicName: "username", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col\">\n  <div class=\"flex flex-row items-center py-3\">\n    <div class=\"flex mr-3 gap-2 items-center\">\n      @if (avatar()) {\n        <div class=\"cursor-pointer\" [routerLink]=\"['/', '@' + username()]\">\n          <img [src]=\"avatar()\" class=\"w-14 h-14 rounded-full\" alt />\n        </div>\n      } @else {\n        <div class=\"w-14 h-14 rounded-full bg-[--rt-brand-color]\"></div>\n      }\n      <div class=\"flex flex-col\">\n        <div class=\"flex items-center text-lg font-bold cursor-pointer\">\n          <a [routerLink]=\"['/', '@' + username()]\">\n            <span>{{ name() }}</span>\n          </a>\n          <mat-icon class=\"verified-icon\">verified</mat-icon>\n        </div>\n        <div class=\"text-lg font-bold text-[--rt-brand-color]\">{{ subtitle() }}</div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["mat-icon{transform:scale(.8);color:var(--rt-brand-color)}\n"], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyOwnerRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyOwnerRendererComponent, isStandalone: true, selector: "rolatech-property-owner-renderer", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, username: { classPropertyName: "username", publicName: "username", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col\">\n  <div class=\"flex flex-row items-center py-3\">\n    <div class=\"flex mr-3 gap-2 items-center\">\n      @if (avatar()) {\n        <div class=\"cursor-pointer\" [routerLink]=\"['/', '@' + username()]\">\n          <img [src]=\"avatar()\" class=\"w-14 h-14 rounded-full\" alt />\n        </div>\n      } @else {\n        <div class=\"w-14 h-14 rounded-full bg-[--rt-brand-color]\"></div>\n      }\n      <div class=\"flex flex-col\">\n        <div class=\"flex items-center text-lg font-bold cursor-pointer\">\n          <a [routerLink]=\"['/', '@' + username()]\">\n            <span>{{ name() }}</span>\n          </a>\n          <mat-icon class=\"verified-icon\">verified</mat-icon>\n        </div>\n        <div class=\"text-lg font-bold text-[--rt-brand-color]\">{{ subtitle() }}</div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["mat-icon{transform:scale(.8);color:var(--rt-brand-color)}\n"], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyOwnerRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyOwnerRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-owner-renderer', imports: [AngularCommonModule, MatIconModule], template: "<div class=\"flex flex-col\">\n  <div class=\"flex flex-row items-center py-3\">\n    <div class=\"flex mr-3 gap-2 items-center\">\n      @if (avatar()) {\n        <div class=\"cursor-pointer\" [routerLink]=\"['/', '@' + username()]\">\n          <img [src]=\"avatar()\" class=\"w-14 h-14 rounded-full\" alt />\n        </div>\n      } @else {\n        <div class=\"w-14 h-14 rounded-full bg-[--rt-brand-color]\"></div>\n      }\n      <div class=\"flex flex-col\">\n        <div class=\"flex items-center text-lg font-bold cursor-pointer\">\n          <a [routerLink]=\"['/', '@' + username()]\">\n            <span>{{ name() }}</span>\n          </a>\n          <mat-icon class=\"verified-icon\">verified</mat-icon>\n        </div>\n        <div class=\"text-lg font-bold text-[--rt-brand-color]\">{{ subtitle() }}</div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["mat-icon{transform:scale(.8);color:var(--rt-brand-color)}\n"] }]
         }] });
@@ -527,10 +589,10 @@ class PropertyAgentUpdate {
     ngDoCheck() {
         this.output.emit(this.selectedAgentId);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyAgentUpdate, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyAgentUpdate, isStandalone: true, selector: "rolatech-property-agent-update", outputs: { output: "output" }, ngImport: i0, template: "@if (!loading) {\n<mat-form-field appearance=\"fill\">\n  <mat-label>Select tenant</mat-label>\n  <mat-select [(ngModel)]=\"selectedAgentId\">\n    @for (item of agents; track $index) {\n    <mat-option [value]=\"item.id\">\n      <div class=\"flex justify-between items-center\">\n        <span class=\"mr-3\">{{ item.firstName }}, {{item.lastName}}</span>\n        <span>{{item.email}}</span>\n      </div>\n    </mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n\n}\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyAgentUpdate, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyAgentUpdate, isStandalone: true, selector: "rolatech-property-agent-update", outputs: { output: "output" }, ngImport: i0, template: "@if (!loading) {\n<mat-form-field appearance=\"fill\">\n  <mat-label>Select tenant</mat-label>\n  <mat-select [(ngModel)]=\"selectedAgentId\">\n    @for (item of agents; track $index) {\n    <mat-option [value]=\"item.id\">\n      <div class=\"flex justify-between items-center\">\n        <span class=\"mr-3\">{{ item.firstName }}, {{item.lastName}}</span>\n        <span>{{item.email}}</span>\n      </div>\n    </mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n\n}\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyAgentUpdate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyAgentUpdate, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-agent-update', imports: [
                         CommonModule,
@@ -641,28 +703,27 @@ class PropertyReviewDetailComponent extends BaseComponent {
                         next: (res) => {
                             console.log(res);
                             this.getAgentPublicInfo(res.data.agentId);
-                        }
+                        },
                     });
                 }
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyReviewDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyReviewDetailComponent, isStandalone: true, selector: "rolatech-property-review-detail", usesInheritance: true, ngImport: i0, template: "@if (property) {\n  <rolatech-toolbar [title]=\"status[property.status]\" large link=\"../../\">\n    <button mat-flat-button (click)=\"approve()\" i18n>Approve</button>\n    <button mat-button (click)=\"reject()\" i18n>Reject</button>\n  </rolatech-toolbar>\n  <div class=\"px-4\">\n    <div class=\"flex flex-col md:flex-row mb-32\">\n      <div class=\"w-full md:w-2/3 p-3\">\n        <div class=\"text-lg font-bold py-2\">{{ property.title }}</div>\n        <hr class=\"mb-2\" />\n        <div class=\"flex items-center py-2\">\n          <div class=\"flex w-full justify-between\">\n            <div class=\"flex justify-between w-full\">\n              <div class=\"flex flex-col\">\n                <div class=\"inline-flex gap-1\">\n                  <div>\n                    <span class=\"mr-1\">{{ property.bedrooms }}</span>\n                    <span i18n>Bedrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ property.bathrooms }}</span>\n                    <span i18n>Bathrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ property.receptions }}</span>\n                    <span i18n>Receptions</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"text-right\">\n                <div class=\"text-sm\">\u00A3{{ property.price | fixed }}</div>\n              </div>\n            </div>\n          </div>\n          <div class=\"hidden md:flex flex-col px-3\"></div>\n        </div>\n        <rolatech-property-media [media]=\"property.media\"></rolatech-property-media>\n        <rolatech-property-owner-renderer\n          [name]=\"userFullName\"\n          [avatar]=\"user?.avatar\"\n          [username]=\"user?.username\"\n        ></rolatech-property-owner-renderer>\n        <rolatech-property-features [features]=\"property.features\"></rolatech-property-features>\n        <rolatech-property-location [location]=\"property.location\"></rolatech-property-location>\n      </div>\n      <div class=\"w-full md:w-1/3 p-3\">\n        <div class=\"flex items-center justify-between h-14\">\n          <div class=\"text-lg font-bold py-2\" i18n>Agent</div>\n          <button mat-flat-button (click)=\"updateAgent()\" i18n>Update Agent</button>\n        </div>\n        @if (agent) {\n          <div class=\"flex flex-col gap-1 mt-3\">\n            <rolatech-rich-label label=\"First Name\" [title]=\"agent.firstName\"></rolatech-rich-label>\n            <rolatech-rich-label label=\"Last Name\" [title]=\"agent.lastName\"></rolatech-rich-label>\n            <rolatech-rich-label label=\"Email\" [title]=\"agent.email\"></rolatech-rich-label>\n            <rolatech-rich-label label=\"Phone\" [title]=\"agent.phone\"></rolatech-rich-label>\n          </div>\n        } @else {\n          <div>Agent not set</div>\n        }\n      </div>\n    </div>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: RichLabelComponent, selector: "rolatech-rich-label", inputs: ["label", "title"] }, { kind: "component", type: PropertyMediaComponent, selector: "rolatech-property-media", inputs: ["media", "min"] }, { kind: "component", type: PropertyFeaturesComponent, selector: "rolatech-property-features", inputs: ["features"] }, { kind: "component", type: PropertyLocationComponent, selector: "rolatech-property-location", inputs: ["location"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: PropertyOwnerRendererComponent, selector: "rolatech-property-owner-renderer", inputs: ["name", "avatar", "username", "subtitle"] }, { kind: "pipe", type: FixedPipe, name: "fixed" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyReviewDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyReviewDetailComponent, isStandalone: true, selector: "rolatech-property-review-detail", usesInheritance: true, ngImport: i0, template: "@if (property) {\n  <rolatech-toolbar [title]=\"status[property.status]\" large link=\"../../\">\n    <button mat-flat-button (click)=\"approve()\" i18n>Approve</button>\n    <button mat-button (click)=\"reject()\" i18n>Reject</button>\n  </rolatech-toolbar>\n  <div class=\"px-4\">\n    <div class=\"flex flex-col md:flex-row mb-32\">\n      <div class=\"w-full md:w-2/3 p-3\">\n        <div class=\"text-lg font-bold py-2\">{{ property.title }}</div>\n        <hr class=\"mb-2\" />\n        <div class=\"flex items-center py-2\">\n          <div class=\"flex w-full justify-between\">\n            <div class=\"flex justify-between w-full\">\n              <div class=\"flex flex-col\">\n                <div class=\"inline-flex gap-1\">\n                  <div>\n                    <span class=\"mr-1\">{{ property.bedrooms }}</span>\n                    <span i18n>Bedrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ property.bathrooms }}</span>\n                    <span i18n>Bathrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ property.receptions }}</span>\n                    <span i18n>Receptions</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"text-right\">\n                <div class=\"text-sm\">\u00A3{{ property.price.toFixed(2) }}</div>\n              </div>\n            </div>\n          </div>\n          <div class=\"hidden md:flex flex-col px-3\"></div>\n        </div>\n        <rolatech-property-media [media]=\"property.media\"></rolatech-property-media>\n        <rolatech-property-owner-renderer\n          [name]=\"userFullName\"\n          [avatar]=\"user?.avatar\"\n          [username]=\"user?.username\"\n        ></rolatech-property-owner-renderer>\n        <rolatech-property-features [features]=\"property.features\"></rolatech-property-features>\n        <rolatech-property-location [location]=\"property.location\"></rolatech-property-location>\n      </div>\n      <div class=\"w-full md:w-1/3 p-3\">\n        <div class=\"flex items-center justify-between h-14\">\n          <div class=\"text-lg font-bold py-2\" i18n>Agent</div>\n          <button mat-flat-button (click)=\"updateAgent()\" i18n>Update Agent</button>\n        </div>\n        @if (agent) {\n          <div class=\"flex flex-col gap-1 mt-3\">\n            <rolatech-rich-label label=\"First Name\" [title]=\"agent.firstName\"></rolatech-rich-label>\n            <rolatech-rich-label label=\"Last Name\" [title]=\"agent.lastName\"></rolatech-rich-label>\n            <rolatech-rich-label label=\"Email\" [title]=\"agent.email\"></rolatech-rich-label>\n            <rolatech-rich-label label=\"Phone\" [title]=\"agent.phone\"></rolatech-rich-label>\n          </div>\n        } @else {\n          <div>Agent not set</div>\n        }\n      </div>\n    </div>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: RichLabelComponent, selector: "rolatech-rich-label", inputs: ["label", "title"] }, { kind: "component", type: PropertyMediaComponent, selector: "rolatech-property-media", inputs: ["media", "min"] }, { kind: "component", type: PropertyFeaturesComponent, selector: "rolatech-property-features", inputs: ["features"] }, { kind: "component", type: PropertyLocationComponent, selector: "rolatech-property-location", inputs: ["location"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: PropertyOwnerRendererComponent, selector: "rolatech-property-owner-renderer", inputs: ["name", "avatar", "username", "subtitle"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyReviewDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyReviewDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-review-detail', imports: [
                         CommonModule,
                         ToolbarComponent,
                         RichLabelComponent,
-                        FixedPipe,
                         PropertyMediaComponent,
                         PropertyFeaturesComponent,
                         PropertyLocationComponent,
                         MatButtonModule,
-                        PropertyOwnerRendererComponent
-                    ], template: "@if (property) {\n  <rolatech-toolbar [title]=\"status[property.status]\" large link=\"../../\">\n    <button mat-flat-button (click)=\"approve()\" i18n>Approve</button>\n    <button mat-button (click)=\"reject()\" i18n>Reject</button>\n  </rolatech-toolbar>\n  <div class=\"px-4\">\n    <div class=\"flex flex-col md:flex-row mb-32\">\n      <div class=\"w-full md:w-2/3 p-3\">\n        <div class=\"text-lg font-bold py-2\">{{ property.title }}</div>\n        <hr class=\"mb-2\" />\n        <div class=\"flex items-center py-2\">\n          <div class=\"flex w-full justify-between\">\n            <div class=\"flex justify-between w-full\">\n              <div class=\"flex flex-col\">\n                <div class=\"inline-flex gap-1\">\n                  <div>\n                    <span class=\"mr-1\">{{ property.bedrooms }}</span>\n                    <span i18n>Bedrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ property.bathrooms }}</span>\n                    <span i18n>Bathrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ property.receptions }}</span>\n                    <span i18n>Receptions</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"text-right\">\n                <div class=\"text-sm\">\u00A3{{ property.price | fixed }}</div>\n              </div>\n            </div>\n          </div>\n          <div class=\"hidden md:flex flex-col px-3\"></div>\n        </div>\n        <rolatech-property-media [media]=\"property.media\"></rolatech-property-media>\n        <rolatech-property-owner-renderer\n          [name]=\"userFullName\"\n          [avatar]=\"user?.avatar\"\n          [username]=\"user?.username\"\n        ></rolatech-property-owner-renderer>\n        <rolatech-property-features [features]=\"property.features\"></rolatech-property-features>\n        <rolatech-property-location [location]=\"property.location\"></rolatech-property-location>\n      </div>\n      <div class=\"w-full md:w-1/3 p-3\">\n        <div class=\"flex items-center justify-between h-14\">\n          <div class=\"text-lg font-bold py-2\" i18n>Agent</div>\n          <button mat-flat-button (click)=\"updateAgent()\" i18n>Update Agent</button>\n        </div>\n        @if (agent) {\n          <div class=\"flex flex-col gap-1 mt-3\">\n            <rolatech-rich-label label=\"First Name\" [title]=\"agent.firstName\"></rolatech-rich-label>\n            <rolatech-rich-label label=\"Last Name\" [title]=\"agent.lastName\"></rolatech-rich-label>\n            <rolatech-rich-label label=\"Email\" [title]=\"agent.email\"></rolatech-rich-label>\n            <rolatech-rich-label label=\"Phone\" [title]=\"agent.phone\"></rolatech-rich-label>\n          </div>\n        } @else {\n          <div>Agent not set</div>\n        }\n      </div>\n    </div>\n  </div>\n}\n" }]
+                        PropertyOwnerRendererComponent,
+                    ], template: "@if (property) {\n  <rolatech-toolbar [title]=\"status[property.status]\" large link=\"../../\">\n    <button mat-flat-button (click)=\"approve()\" i18n>Approve</button>\n    <button mat-button (click)=\"reject()\" i18n>Reject</button>\n  </rolatech-toolbar>\n  <div class=\"px-4\">\n    <div class=\"flex flex-col md:flex-row mb-32\">\n      <div class=\"w-full md:w-2/3 p-3\">\n        <div class=\"text-lg font-bold py-2\">{{ property.title }}</div>\n        <hr class=\"mb-2\" />\n        <div class=\"flex items-center py-2\">\n          <div class=\"flex w-full justify-between\">\n            <div class=\"flex justify-between w-full\">\n              <div class=\"flex flex-col\">\n                <div class=\"inline-flex gap-1\">\n                  <div>\n                    <span class=\"mr-1\">{{ property.bedrooms }}</span>\n                    <span i18n>Bedrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ property.bathrooms }}</span>\n                    <span i18n>Bathrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ property.receptions }}</span>\n                    <span i18n>Receptions</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"text-right\">\n                <div class=\"text-sm\">\u00A3{{ property.price.toFixed(2) }}</div>\n              </div>\n            </div>\n          </div>\n          <div class=\"hidden md:flex flex-col px-3\"></div>\n        </div>\n        <rolatech-property-media [media]=\"property.media\"></rolatech-property-media>\n        <rolatech-property-owner-renderer\n          [name]=\"userFullName\"\n          [avatar]=\"user?.avatar\"\n          [username]=\"user?.username\"\n        ></rolatech-property-owner-renderer>\n        <rolatech-property-features [features]=\"property.features\"></rolatech-property-features>\n        <rolatech-property-location [location]=\"property.location\"></rolatech-property-location>\n      </div>\n      <div class=\"w-full md:w-1/3 p-3\">\n        <div class=\"flex items-center justify-between h-14\">\n          <div class=\"text-lg font-bold py-2\" i18n>Agent</div>\n          <button mat-flat-button (click)=\"updateAgent()\" i18n>Update Agent</button>\n        </div>\n        @if (agent) {\n          <div class=\"flex flex-col gap-1 mt-3\">\n            <rolatech-rich-label label=\"First Name\" [title]=\"agent.firstName\"></rolatech-rich-label>\n            <rolatech-rich-label label=\"Last Name\" [title]=\"agent.lastName\"></rolatech-rich-label>\n            <rolatech-rich-label label=\"Email\" [title]=\"agent.email\"></rolatech-rich-label>\n            <rolatech-rich-label label=\"Phone\" [title]=\"agent.phone\"></rolatech-rich-label>\n          </div>\n        } @else {\n          <div>Agent not set</div>\n        }\n      </div>\n    </div>\n  </div>\n}\n" }]
         }] });
 
 const propertyReviewRoutes = [
@@ -691,10 +752,10 @@ class FeatureManageItemComponent {
     onEdit() {
         this.edit.emit(this.feature());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: FeatureManageItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.2", type: FeatureManageItemComponent, isStandalone: true, selector: "rolatech-feature-manage-item", inputs: { feature: { classPropertyName: "feature", publicName: "feature", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { delete: "delete", save: "save", edit: "edit" }, ngImport: i0, template: "<div class=\"group flex justify-between items-center h-14 hover:bg-[--rt-raised-background] cursor-pointer px-2\">\n  <div class=\"flex\">\n    <div class=\"min-w-[150px] mr-3\">{{ feature().name }}</div>\n    <div class=\"overflow-hidden line-clamp-1\">\n      {{ feature().values! | options }}\n    </div>\n  </div>\n  <div class=\"flex justify-end max-w-24 w-24 invisible group-hover:visible\">\n    <button mat-icon-button (click)=\"onEdit()\">\n      <mat-icon>edit</mat-icon>\n    </button>\n    <button mat-icon-button (click)=\"onDelete()\">\n      <mat-icon>delete</mat-icon>\n    </button>\n  </div>\n</div>\n<mat-divider></mat-divider>\n", styles: ["mat-icon{scale:.9}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "pipe", type: OptionsFormatPipe, name: "options" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FeatureManageItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", type: FeatureManageItemComponent, isStandalone: true, selector: "rolatech-feature-manage-item", inputs: { feature: { classPropertyName: "feature", publicName: "feature", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { delete: "delete", save: "save", edit: "edit" }, ngImport: i0, template: "<div class=\"group flex justify-between items-center h-14 hover:bg-[--rt-raised-background] cursor-pointer px-2\">\n  <div class=\"flex\">\n    <div class=\"min-w-[150px] mr-3\">{{ feature().name }}</div>\n    <div class=\"overflow-hidden line-clamp-1\">\n      {{ feature().values! | options }}\n    </div>\n  </div>\n  <div class=\"flex justify-end max-w-24 w-24 invisible group-hover:visible\">\n    <button mat-icon-button (click)=\"onEdit()\">\n      <mat-icon>edit</mat-icon>\n    </button>\n    <button mat-icon-button (click)=\"onDelete()\">\n      <mat-icon>delete</mat-icon>\n    </button>\n  </div>\n</div>\n<mat-divider></mat-divider>\n", styles: ["mat-icon{scale:.9}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "pipe", type: OptionsFormatPipe, name: "options" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: FeatureManageItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FeatureManageItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-feature-manage-item', imports: [
                         MatChipsModule,
@@ -742,10 +803,10 @@ class FeatureManageItemAddComponent {
     ngDoCheck() {
         this.output.emit(this.feature);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: FeatureManageItemAddComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: FeatureManageItemAddComponent, isStandalone: true, selector: "rolatech-feature-manage-item-add", outputs: { cancel: "cancel", save: "save", output: "output" }, ngImport: i0, template: "<div class=\"flex flex-col\">\n  <div class=\"p-1\" i18n>Feature</div>\n  <form>\n    <mat-form-field appearance=\"fill\">\n      <input matInput placeholder=\"Name\" type=\"text\" [(ngModel)]=\"feature.name\" [ngModelOptions]=\"{ standalone: true }\" i18n />\n    </mat-form-field>\n    <mat-form-field>\n      <mat-chip-grid #chipGrid aria-label=\"Enter values\">\n        @for (value of feature.values; track value) {\n          <mat-chip-row\n            (removed)=\"removeValue(value)\"\n            [editable]=\"true\"\n            [aria-description]=\"'press enter to edit ' + value.name\"\n          >\n            {{ value.name }}\n            <button matChipRemove [attr.aria-label]=\"'remove ' + value.name\">\n              <mat-icon>cancel</mat-icon>\n            </button>\n          </mat-chip-row>\n        }\n        <input\n          placeholder=\"Value\"\n          [matChipInputFor]=\"chipGrid\"\n          [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n          [matChipInputAddOnBlur]=\"addOnBlur\"\n          (matChipInputTokenEnd)=\"addFeatureValues($event)\"\n          i18n\n        />\n      </mat-chip-grid>\n    </mat-form-field>\n  </form>\n</div>\n@if (action) {\n  <div class=\"flex items-center justify-end\">\n    <button mat-button (click)=\"onCancel()\" i18n>Cancel</button>\n    <button mat-flat-button (click)=\"onSave()\" i18n>Save</button>\n  </div>\n}\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1$5.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i1$5.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i1$5.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1$5.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FeatureManageItemAddComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: FeatureManageItemAddComponent, isStandalone: true, selector: "rolatech-feature-manage-item-add", outputs: { cancel: "cancel", save: "save", output: "output" }, ngImport: i0, template: "<div class=\"flex flex-col\">\n  <div class=\"p-1\" i18n>Feature</div>\n  <form>\n    <mat-form-field appearance=\"fill\">\n      <input matInput placeholder=\"Name\" type=\"text\" [(ngModel)]=\"feature.name\" [ngModelOptions]=\"{ standalone: true }\" i18n />\n    </mat-form-field>\n    <mat-form-field>\n      <mat-chip-grid #chipGrid aria-label=\"Enter values\">\n        @for (value of feature.values; track value) {\n          <mat-chip-row\n            (removed)=\"removeValue(value)\"\n            [editable]=\"true\"\n            [aria-description]=\"'press enter to edit ' + value.name\"\n          >\n            {{ value.name }}\n            <button matChipRemove [attr.aria-label]=\"'remove ' + value.name\">\n              <mat-icon>cancel</mat-icon>\n            </button>\n          </mat-chip-row>\n        }\n        <input\n          placeholder=\"Value\"\n          [matChipInputFor]=\"chipGrid\"\n          [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n          [matChipInputAddOnBlur]=\"addOnBlur\"\n          (matChipInputTokenEnd)=\"addFeatureValues($event)\"\n          i18n\n        />\n      </mat-chip-grid>\n    </mat-form-field>\n  </form>\n</div>\n@if (action) {\n  <div class=\"flex items-center justify-end\">\n    <button mat-button (click)=\"onCancel()\" i18n>Cancel</button>\n    <button mat-flat-button (click)=\"onSave()\" i18n>Save</button>\n  </div>\n}\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1$5.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i1$5.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i1$5.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1$5.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: FeatureManageItemAddComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FeatureManageItemAddComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-feature-manage-item-add', imports: [MatChipsModule, MatButtonModule, MatFormFieldModule, AngularCommonModule, AngularComponentsModule, MatIconModule], template: "<div class=\"flex flex-col\">\n  <div class=\"p-1\" i18n>Feature</div>\n  <form>\n    <mat-form-field appearance=\"fill\">\n      <input matInput placeholder=\"Name\" type=\"text\" [(ngModel)]=\"feature.name\" [ngModelOptions]=\"{ standalone: true }\" i18n />\n    </mat-form-field>\n    <mat-form-field>\n      <mat-chip-grid #chipGrid aria-label=\"Enter values\">\n        @for (value of feature.values; track value) {\n          <mat-chip-row\n            (removed)=\"removeValue(value)\"\n            [editable]=\"true\"\n            [aria-description]=\"'press enter to edit ' + value.name\"\n          >\n            {{ value.name }}\n            <button matChipRemove [attr.aria-label]=\"'remove ' + value.name\">\n              <mat-icon>cancel</mat-icon>\n            </button>\n          </mat-chip-row>\n        }\n        <input\n          placeholder=\"Value\"\n          [matChipInputFor]=\"chipGrid\"\n          [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n          [matChipInputAddOnBlur]=\"addOnBlur\"\n          (matChipInputTokenEnd)=\"addFeatureValues($event)\"\n          i18n\n        />\n      </mat-chip-grid>\n    </mat-form-field>\n  </form>\n</div>\n@if (action) {\n  <div class=\"flex items-center justify-end\">\n    <button mat-button (click)=\"onCancel()\" i18n>Cancel</button>\n    <button mat-flat-button (click)=\"onSave()\" i18n>Save</button>\n  </div>\n}\n", styles: ["mat-form-field{width:100%}\n"] }]
         }] });
@@ -763,9 +824,9 @@ class FeatureManageIndexComponent extends BaseComponent {
     featureInput = viewChild.required('featureInput');
     matAutocomplete = viewChild('auto', ...(ngDevMode ? [{ debugName: "matAutocomplete" }] : []));
     ngOnInit() {
-        this.findFeatures();
+        this.findUserFeatures();
     }
-    findFeatures() {
+    findUserFeatures() {
         this.featureService.find({}).subscribe({
             next: (res) => {
                 this.features = res.data || [];
@@ -872,10 +933,10 @@ class FeatureManageIndexComponent extends BaseComponent {
         this.featureInput().nativeElement.value = '';
         this.featureControl.setValue(null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: FeatureManageIndexComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: FeatureManageIndexComponent, isStandalone: true, selector: "rolatech-feature-manage-index", viewQueries: [{ propertyName: "featureInput", first: true, predicate: ["featureInput"], descendants: true, isSignal: true }, { propertyName: "matAutocomplete", first: true, predicate: ["auto"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<rolatech-toolbar title=\"Features\">\n  <div class=\"flex items-center gap-2\">\n    <button mat-flat-button routerLink=\"./create\">\n      <mat-icon>add</mat-icon>\n      <span i18n>Add Feature</span>\n    </button>\n  </div>\n</rolatech-toolbar>\n<div class=\"p-3\">\n  @for (item of features; track $index) {\n    <rolatech-feature-manage-item\n      [feature]=\"item\"\n      (delete)=\"onDeleteFeature($event)\"\n      (edit)=\"onUpdateFeature($event)\"\n    ></rolatech-feature-manage-item>\n  }\n  <div class=\"mt-3\">\n    @if (add) {\n      <rolatech-feature-manage-item-add (save)=\"saveFeature($event)\" (cancel)=\"add = false\"></rolatech-feature-manage-item-add>\n    } @else {\n      <button mat-stroked-button (click)=\"add = true\">\n        <mat-icon>add</mat-icon>\n        <span i18n>Add</span>\n      </button>\n    }\n  </div>\n</div>\n", styles: [".features-chip-list{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: FeatureManageItemComponent, selector: "rolatech-feature-manage-item", inputs: ["feature"], outputs: ["delete", "save", "edit"] }, { kind: "component", type: FeatureManageItemAddComponent, selector: "rolatech-feature-manage-item-add", outputs: ["cancel", "save", "output"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FeatureManageIndexComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: FeatureManageIndexComponent, isStandalone: true, selector: "rolatech-feature-manage-index", viewQueries: [{ propertyName: "featureInput", first: true, predicate: ["featureInput"], descendants: true, isSignal: true }, { propertyName: "matAutocomplete", first: true, predicate: ["auto"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<rolatech-toolbar title=\"Features\">\n  <div class=\"flex items-center gap-2\">\n    <button mat-flat-button routerLink=\"./create\">\n      <mat-icon>add</mat-icon>\n      <span i18n>Add Feature</span>\n    </button>\n  </div>\n</rolatech-toolbar>\n<div class=\"p-3\">\n  @for (item of features; track $index) {\n    <rolatech-feature-manage-item\n      [feature]=\"item\"\n      (delete)=\"onDeleteFeature($event)\"\n      (edit)=\"onUpdateFeature($event)\"\n    ></rolatech-feature-manage-item>\n  }\n  <div class=\"mt-3\">\n    @if (add) {\n      <rolatech-feature-manage-item-add (save)=\"saveFeature($event)\" (cancel)=\"add = false\"></rolatech-feature-manage-item-add>\n    } @else {\n      <button mat-stroked-button (click)=\"add = true\">\n        <mat-icon>add</mat-icon>\n        <span i18n>Add</span>\n      </button>\n    }\n  </div>\n</div>\n", styles: [".features-chip-list{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: FeatureManageItemComponent, selector: "rolatech-feature-manage-item", inputs: ["feature"], outputs: ["delete", "save", "edit"] }, { kind: "component", type: FeatureManageItemAddComponent, selector: "rolatech-feature-manage-item-add", outputs: ["cancel", "save", "output"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: FeatureManageIndexComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FeatureManageIndexComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-feature-manage-index', imports: [
                         MatDividerModule,
@@ -894,10 +955,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
         }] });
 
 class FeatureManageDetailComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: FeatureManageDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: FeatureManageDetailComponent, isStandalone: true, selector: "rolatech-feature-manage-detail", ngImport: i0, template: "<p>feature-manage-detail works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FeatureManageDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: FeatureManageDetailComponent, isStandalone: true, selector: "rolatech-feature-manage-detail", ngImport: i0, template: "<p>feature-manage-detail works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: FeatureManageDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FeatureManageDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-feature-manage-detail', imports: [CommonModule], template: "<p>feature-manage-detail works!</p>\n" }]
         }] });
@@ -917,14 +978,14 @@ class PropertyOfferItemComponent {
     offer = input.required(...(ngDevMode ? [{ debugName: "offer" }] : []));
     status = PropertyOfferStatus;
     total = computed(() => {
-        return (this.offer().amount / 100).toFixed(2);
+        return this.offer().amount.toFixed(2);
     }, ...(ngDevMode ? [{ debugName: "total" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyOfferItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyOfferItemComponent, isStandalone: true, selector: "rolatech-property-offer-item", inputs: { offer: { classPropertyName: "offer", publicName: "offer", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col hover:bg-[--rt-raised-background] cursor-pointer p-3\">\n  <div>\n    <div class=\"flex justify-between w-full mb-2\">\n      <a class=\"flex items-center gap-3\">\n        <span>Offer ID: {{ offer().id }}</span>\n      </a>\n      <span class=\"font-medium text-sm\">{{ status[offer().status] }}</span>\n    </div>\n    <div class=\"flex flex-col overflow-x-scroll scrollbar-hide\">\n      <div class=\"flex flex-row py-2\">\n        @if (offer().property.media) {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            @defer {\n              <rolatech-thumbnail [src]=\"offer().property.media[0].url\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n        } @else {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            <rolatech-image-placeholder></rolatech-image-placeholder>\n          </div>\n        }\n        <div class=\"flex w-full justify-between\">\n          <div class=\"flex justify-between w-full\">\n            <div class=\"flex flex-col\">\n              <div>{{ offer().property.title }}</div>\n              <div class=\"inline-flex gap-1 mt-2\">\n                <div>\n                  <span class=\"mr-1\">{{ offer().property.bedrooms }}</span>\n                  <span i18n>Bedrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ offer().property.bathrooms }}</span>\n                  <span i18n>Bathrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ offer().property.receptions }}</span>\n                  <span i18n>Receptions</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"text-right\">\n              <div class=\"text-sm\">\u00A3{{ offer().property.price | fixed }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: ImagePlaceholderComponent, selector: "rolatech-image-placeholder", inputs: ["ratio"] }, { kind: "pipe", type: FixedPipe, name: "fixed" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyOfferItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyOfferItemComponent, isStandalone: true, selector: "rolatech-property-offer-item", inputs: { offer: { classPropertyName: "offer", publicName: "offer", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col hover:bg-[--rt-raised-background] cursor-pointer p-3\">\n  <div>\n    <div class=\"flex justify-between w-full mb-2\">\n      <a class=\"flex items-center gap-3\">\n        <span>Offer ID: {{ offer().id }}</span>\n      </a>\n      <span class=\"font-medium text-sm\">{{ status[offer().status] }}</span>\n    </div>\n    @if (offer().item) {\n      <div class=\"flex flex-row py-2\">\n        @if (offer().item.media) {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            @defer {\n              <rolatech-thumbnail [src]=\"offer().item.media ? offer().item.media[0].url : ''\" size=\"medium\" mode=\"clip\">\n              </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n        } @else {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            <rolatech-image-placeholder></rolatech-image-placeholder>\n          </div>\n        }\n        <div class=\"flex w-full justify-between\">\n          <div class=\"flex justify-between w-full\">\n            <div class=\"flex flex-col\">\n              <div class=\"font-bold\">{{ offer().item.propertyTitle }}</div>\n              <div class=\"inline-flex gap-1 mt-2\">\n                <div>\n                  <span class=\"mr-1\">{{ offer().item.bedrooms }}</span>\n                  <span i18n>Bedrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ offer().item.bathrooms }}</span>\n                  <span i18n>Bathrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ offer().item.receptions }}</span>\n                  <span i18n>Receptions</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"text-right\">\n              <div class=\"text-sm\">\u00A3{{ offer().item.amount.toFixed(2) }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: ImagePlaceholderComponent, selector: "rolatech-image-placeholder", inputs: ["ratio"] }], deferBlockDependencies: [() => [ThumbnailComponent]] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyOfferItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyOfferItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-property-offer-item', imports: [MatIconModule, ThumbnailComponent, ImagePlaceholderComponent, FixedPipe], template: "<div class=\"flex flex-col hover:bg-[--rt-raised-background] cursor-pointer p-3\">\n  <div>\n    <div class=\"flex justify-between w-full mb-2\">\n      <a class=\"flex items-center gap-3\">\n        <span>Offer ID: {{ offer().id }}</span>\n      </a>\n      <span class=\"font-medium text-sm\">{{ status[offer().status] }}</span>\n    </div>\n    <div class=\"flex flex-col overflow-x-scroll scrollbar-hide\">\n      <div class=\"flex flex-row py-2\">\n        @if (offer().property.media) {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            @defer {\n              <rolatech-thumbnail [src]=\"offer().property.media[0].url\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n        } @else {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            <rolatech-image-placeholder></rolatech-image-placeholder>\n          </div>\n        }\n        <div class=\"flex w-full justify-between\">\n          <div class=\"flex justify-between w-full\">\n            <div class=\"flex flex-col\">\n              <div>{{ offer().property.title }}</div>\n              <div class=\"inline-flex gap-1 mt-2\">\n                <div>\n                  <span class=\"mr-1\">{{ offer().property.bedrooms }}</span>\n                  <span i18n>Bedrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ offer().property.bathrooms }}</span>\n                  <span i18n>Bathrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ offer().property.receptions }}</span>\n                  <span i18n>Receptions</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"text-right\">\n              <div class=\"text-sm\">\u00A3{{ offer().property.price | fixed }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'rolatech-property-offer-item', imports: [MatIconModule, ThumbnailComponent, ImagePlaceholderComponent], template: "<div class=\"flex flex-col hover:bg-[--rt-raised-background] cursor-pointer p-3\">\n  <div>\n    <div class=\"flex justify-between w-full mb-2\">\n      <a class=\"flex items-center gap-3\">\n        <span>Offer ID: {{ offer().id }}</span>\n      </a>\n      <span class=\"font-medium text-sm\">{{ status[offer().status] }}</span>\n    </div>\n    @if (offer().item) {\n      <div class=\"flex flex-row py-2\">\n        @if (offer().item.media) {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            @defer {\n              <rolatech-thumbnail [src]=\"offer().item.media ? offer().item.media[0].url : ''\" size=\"medium\" mode=\"clip\">\n              </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n        } @else {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            <rolatech-image-placeholder></rolatech-image-placeholder>\n          </div>\n        }\n        <div class=\"flex w-full justify-between\">\n          <div class=\"flex justify-between w-full\">\n            <div class=\"flex flex-col\">\n              <div class=\"font-bold\">{{ offer().item.propertyTitle }}</div>\n              <div class=\"inline-flex gap-1 mt-2\">\n                <div>\n                  <span class=\"mr-1\">{{ offer().item.bedrooms }}</span>\n                  <span i18n>Bedrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ offer().item.bathrooms }}</span>\n                  <span i18n>Bathrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ offer().item.receptions }}</span>\n                  <span i18n>Receptions</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"text-right\">\n              <div class=\"text-sm\">\u00A3{{ offer().item.amount.toFixed(2) }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n" }]
         }] });
 
 class PropertyManageOfferIndexComponent extends BaseComponent {
@@ -995,10 +1056,10 @@ class PropertyManageOfferIndexComponent extends BaseComponent {
         })
             .join(',');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageOfferIndexComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyManageOfferIndexComponent, isStandalone: true, selector: "rolatech-property-manage-offer-index", usesInheritance: true, ngImport: i0, template: "<rolatech-toolbar title=\"Offers\">\n  <div class=\"flex items-center gap-2\"></div>\n</rolatech-toolbar>\n<rolatech-tabs [select]=\"select\">\n  @for (item of links; track item) {\n    @if (item.status) {\n      <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n    } @else {\n      <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n    }\n  }\n</rolatech-tabs>\n<div>\n  @if (offers) {\n    @for (item of offers; track $index) {\n      <rolatech-property-offer-item [routerLink]=\"['./', item.id]\" [offer]=\"item\"></rolatech-property-offer-item>\n    }\n  } @else {\n    <rolatech-empty></rolatech-empty>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: TabsComponent, selector: "rolatech-tabs", inputs: ["select", "loading"], outputs: ["selectChange"] }, { kind: "component", type: TabComponent, selector: "rolatech-tab", inputs: ["label"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: PropertyOfferItemComponent, selector: "rolatech-property-offer-item", inputs: ["offer"] }, { kind: "component", type: EmptyComponent, selector: "rolatech-empty" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageOfferIndexComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyManageOfferIndexComponent, isStandalone: true, selector: "rolatech-property-manage-offer-index", usesInheritance: true, ngImport: i0, template: "<rolatech-toolbar title=\"Offers\">\n  <div class=\"flex items-center gap-2\"></div>\n</rolatech-toolbar>\n<rolatech-tabs [select]=\"select\">\n  @for (item of links; track item) {\n    @if (item.status) {\n      <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n    } @else {\n      <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n    }\n  }\n</rolatech-tabs>\n<rolatech-list>\n  @if (offers) {\n    @for (item of offers; track item) {\n      <rolatech-property-offer-item [routerLink]=\"['./', item.id]\" [offer]=\"item\"></rolatech-property-offer-item>\n    }\n  } @else {\n    <rolatech-empty></rolatech-empty>\n  }\n</rolatech-list>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: TabsComponent, selector: "rolatech-tabs", inputs: ["select", "loading"], outputs: ["selectChange"] }, { kind: "component", type: TabComponent, selector: "rolatech-tab", inputs: ["label"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: PropertyOfferItemComponent, selector: "rolatech-property-offer-item", inputs: ["offer"] }, { kind: "component", type: EmptyComponent, selector: "rolatech-empty" }, { kind: "component", type: ListComponent, selector: "rolatech-list" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageOfferIndexComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageOfferIndexComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-manage-offer-index', imports: [
                         CommonModule,
@@ -1008,12 +1069,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                         RouterModule,
                         PropertyOfferItemComponent,
                         EmptyComponent,
-                    ], template: "<rolatech-toolbar title=\"Offers\">\n  <div class=\"flex items-center gap-2\"></div>\n</rolatech-toolbar>\n<rolatech-tabs [select]=\"select\">\n  @for (item of links; track item) {\n    @if (item.status) {\n      <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n    } @else {\n      <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n    }\n  }\n</rolatech-tabs>\n<div>\n  @if (offers) {\n    @for (item of offers; track $index) {\n      <rolatech-property-offer-item [routerLink]=\"['./', item.id]\" [offer]=\"item\"></rolatech-property-offer-item>\n    }\n  } @else {\n    <rolatech-empty></rolatech-empty>\n  }\n</div>\n" }]
+                        ListComponent
+                    ], template: "<rolatech-toolbar title=\"Offers\">\n  <div class=\"flex items-center gap-2\"></div>\n</rolatech-toolbar>\n<rolatech-tabs [select]=\"select\">\n  @for (item of links; track item) {\n    @if (item.status) {\n      <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n    } @else {\n      <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n    }\n  }\n</rolatech-tabs>\n<rolatech-list>\n  @if (offers) {\n    @for (item of offers; track item) {\n      <rolatech-property-offer-item [routerLink]=\"['./', item.id]\" [offer]=\"item\"></rolatech-property-offer-item>\n    }\n  } @else {\n    <rolatech-empty></rolatech-empty>\n  }\n</rolatech-list>\n" }]
         }] });
 
 class PropertyManageOfferDetailComponent extends BaseComponent {
     propertyService = inject(PropertyService);
     authUserService = inject(AuthUserService);
+    invoiceService = inject(InvoiceService);
     offer;
     name = '';
     property;
@@ -1090,12 +1153,20 @@ class PropertyManageOfferDetailComponent extends BaseComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageOfferDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyManageOfferDetailComponent, isStandalone: true, selector: "rolatech-property-manage-offer-detail", usesInheritance: true, ngImport: i0, template: "@if (offer) {\n  <rolatech-toolbar [title]=\"status[offer.status]\" large link=\"../\">\n    @if (offer.status.toString() === 'PENDING') {\n      <button mat-flat-button (click)=\"accept()\" i18n>Accept</button>\n      <button mat-button (click)=\"reject()\" i18n>Reject</button>\n    }\n  </rolatech-toolbar>\n  <div class=\"px-4\">\n    <div>\n      <div class=\"text-lg font-bold py-2\">Viewer</div>\n      <hr class=\"mb-2\" />\n      <div class=\"flex flex-col md:flex-row gap-1 md:gap-4\">\n        <rolatech-rich-label label=\"Name\" [title]=\"name\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Email\" [title]=\"offer.email\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Phone\" [title]=\"offer.phone\"></rolatech-rich-label>\n      </div>\n    </div>\n    <div>\n      <div class=\"text-lg font-bold py-2\">Qualification</div>\n      <hr class=\"mb-2\" />\n      <div class=\"flex flex-col md:flex-row gap-1 md:gap-4\">\n        <rolatech-rich-label label=\"Move-in date\" [title]=\"offer.startDate\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Tenancy duration\" [title]=\"offer.tenancyDuration\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Number of tenants\" [title]=\"offer.numberOfTenants\"></rolatech-rich-label>\n      </div>\n      <div class=\"flex flex-col md:flex-row gap-1 md:gap-4\">\n        <rolatech-rich-label label=\"Employment status\" [title]=\"employmentStatus[offer.employmentStatus]\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Employer\" [title]=\"offer.startDate\"></rolatech-rich-label>\n        @if (offer.income) {\n          <rolatech-rich-label label=\"Annual income\" [title]=\"offer.income\"></rolatech-rich-label>\n        }\n      </div>\n    </div>\n    <div>\n      <div class=\"text-lg font-bold py-2\">Property details</div>\n      <hr class=\"mb-2\" />\n      <div class=\"flex items-center py-2\">\n        <div class=\"min-w-16 w-24 object-cover aspect-video rounded-md mr-3\">\n          @defer {\n            <rolatech-thumbnail [src]=\"offer.item.media[0].url\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n          } @placeholder {\n            <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n          }\n        </div>\n        <div class=\"flex w-full justify-between\">\n          <div class=\"flex justify-between w-full\">\n            <div class=\"flex flex-col\">\n              <div>{{ offer.item.propertyTitle }}</div>\n              <div class=\"inline-flex gap-1 mt-2\">\n                <div>\n                  <span class=\"mr-1\">{{ offer.item.bedrooms }}</span>\n                  <span i18n>Bedrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ offer.item.bathrooms }}</span>\n                  <span i18n>Bathrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ offer.item.receptions }}</span>\n                  <span i18n>Receptions</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"text-right\">\n              <div class=\"text-sm\">\u00A3{{ offer.item.price | fixed }}</div>\n            </div>\n          </div>\n        </div>\n        <div class=\"hidden md:flex flex-col px-3\"></div>\n      </div>\n    </div>\n\n    <div>\n      <div class=\"text-lg font-bold py-2\">Viewing agent</div>\n      <hr class=\"mb-2\" />\n      @if (agent) {\n        <div>\n          <rolatech-rich-label label=\"Move-in date\" [title]=\"offer.startDate\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Tenancy duration\" [title]=\"offer.tenancyDuration\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Phone\" [title]=\"agent.phone\"></rolatech-rich-label>\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: RichLabelComponent, selector: "rolatech-rich-label", inputs: ["label", "title"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: FixedPipe, name: "fixed" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
+    counter() { }
+    createInvoice() {
+        this.invoiceService.create({ itemId: this.id }).subscribe({
+            next: (res) => {
+                console.log(res);
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageOfferDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyManageOfferDetailComponent, isStandalone: true, selector: "rolatech-property-manage-offer-detail", usesInheritance: true, ngImport: i0, template: "@if (offer) {\n  <rolatech-toolbar [title]=\"status[offer.status]\" large link=\"../\">\n    @if (offer.status.toString() === 'CREATED') {\n      <button mat-flat-button (click)=\"accept()\" i18n>Accept</button>\n      <button mat-flat-button (click)=\"counter()\" i18n>Counter offer</button>\n      <button mat-button (click)=\"reject()\" i18n>Reject</button>\n    }\n    <button mat-flat-button (click)=\"createInvoice()\" i18n>Create invoice</button>\n\n    <!-- create invoice -->\n    @if (offer.status.toString() === 'ACCEPTED') {\n      <button mat-flat-button (click)=\"createInvoice()\" i18n>Create invoice</button>\n    }\n    <!-- References -->\n    @if (offer.status.toString() === 'REFERENCES_PASSED') {\n      <button mat-flat-button (click)=\"createInvoice()\" i18n>Create invoice</button>\n    }\n    @if (offer.status.toString() === 'REFERENCES_FAILED') {\n      <button mat-flat-button (click)=\"createInvoice()\" i18n>Create invoice</button>\n    }\n  </rolatech-toolbar>\n  <div class=\"px-4\">\n    <div>\n      <div class=\"text-lg font-bold py-2\">Viewer</div>\n      <hr class=\"mb-2\" />\n      <div class=\"flex flex-col md:flex-row gap-1 md:gap-4\">\n        <rolatech-rich-label label=\"Name\" [title]=\"name\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Email\" [title]=\"offer.email\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Phone\" [title]=\"offer.phone\"></rolatech-rich-label>\n      </div>\n    </div>\n    <div>\n      <div class=\"text-lg font-bold py-2\">Qualification</div>\n      <hr class=\"mb-2\" />\n      <div class=\"flex flex-col md:flex-row gap-1 md:gap-4\">\n        <rolatech-rich-label label=\"Move-in date\" [title]=\"offer.startDate\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Tenancy duration\" [title]=\"offer.tenancyDuration\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Number of tenants\" [title]=\"offer.numberOfTenants\"></rolatech-rich-label>\n      </div>\n      <div class=\"flex flex-col md:flex-row gap-1 md:gap-4\">\n        <rolatech-rich-label label=\"Employment status\" [title]=\"employmentStatus[offer.employmentStatus]\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Employer\" [title]=\"offer.startDate\"></rolatech-rich-label>\n        @if (offer.income) {\n          <rolatech-rich-label label=\"Annual income\" [title]=\"offer.income\"></rolatech-rich-label>\n        }\n      </div>\n    </div>\n    <div>\n      <div class=\"text-lg font-bold py-2\">Property details</div>\n      <hr class=\"mb-2\" />\n      <div class=\"flex items-center py-2\">\n        <div class=\"min-w-24 w-24 object-cover aspect-video rounded-md mr-3\">\n          @defer {\n            <rolatech-thumbnail [src]=\"offer.item.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n          } @placeholder {\n            <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n          }\n        </div>\n        <div class=\"flex w-full justify-between\">\n          <div class=\"flex justify-between w-full\">\n            <div class=\"flex flex-col\">\n              <div>{{ offer.item.propertyTitle }}</div>\n              <div class=\"inline-flex gap-1 mt-2\">\n                <div>\n                  <span class=\"mr-1\">{{ offer.item.bedrooms }}</span>\n                  <span i18n>Bedrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ offer.item.bathrooms }}</span>\n                  <span i18n>Bathrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ offer.item.receptions }}</span>\n                  <span i18n>Receptions</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"text-right\">\n              <div class=\"text-sm\">\u00A3{{ offer.item.amount.toFixed(2) }}</div>\n            </div>\n          </div>\n        </div>\n        <div class=\"hidden md:flex flex-col px-3\"></div>\n      </div>\n    </div>\n\n    <div>\n      <div class=\"text-lg font-bold py-2\">Viewing agent</div>\n      <hr class=\"mb-2\" />\n      @if (agent) {\n        <div>\n          <rolatech-rich-label label=\"Move-in date\" [title]=\"offer.startDate\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Tenancy duration\" [title]=\"offer.tenancyDuration\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Phone\" [title]=\"agent.phone\"></rolatech-rich-label>\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: RichLabelComponent, selector: "rolatech-rich-label", inputs: ["label", "title"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], deferBlockDependencies: [() => [ThumbnailComponent]] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageOfferDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageOfferDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-property-manage-offer-detail', imports: [CommonModule, ToolbarComponent, RichLabelComponent, ThumbnailComponent, FixedPipe, MatButtonModule], template: "@if (offer) {\n  <rolatech-toolbar [title]=\"status[offer.status]\" large link=\"../\">\n    @if (offer.status.toString() === 'PENDING') {\n      <button mat-flat-button (click)=\"accept()\" i18n>Accept</button>\n      <button mat-button (click)=\"reject()\" i18n>Reject</button>\n    }\n  </rolatech-toolbar>\n  <div class=\"px-4\">\n    <div>\n      <div class=\"text-lg font-bold py-2\">Viewer</div>\n      <hr class=\"mb-2\" />\n      <div class=\"flex flex-col md:flex-row gap-1 md:gap-4\">\n        <rolatech-rich-label label=\"Name\" [title]=\"name\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Email\" [title]=\"offer.email\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Phone\" [title]=\"offer.phone\"></rolatech-rich-label>\n      </div>\n    </div>\n    <div>\n      <div class=\"text-lg font-bold py-2\">Qualification</div>\n      <hr class=\"mb-2\" />\n      <div class=\"flex flex-col md:flex-row gap-1 md:gap-4\">\n        <rolatech-rich-label label=\"Move-in date\" [title]=\"offer.startDate\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Tenancy duration\" [title]=\"offer.tenancyDuration\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Number of tenants\" [title]=\"offer.numberOfTenants\"></rolatech-rich-label>\n      </div>\n      <div class=\"flex flex-col md:flex-row gap-1 md:gap-4\">\n        <rolatech-rich-label label=\"Employment status\" [title]=\"employmentStatus[offer.employmentStatus]\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Employer\" [title]=\"offer.startDate\"></rolatech-rich-label>\n        @if (offer.income) {\n          <rolatech-rich-label label=\"Annual income\" [title]=\"offer.income\"></rolatech-rich-label>\n        }\n      </div>\n    </div>\n    <div>\n      <div class=\"text-lg font-bold py-2\">Property details</div>\n      <hr class=\"mb-2\" />\n      <div class=\"flex items-center py-2\">\n        <div class=\"min-w-16 w-24 object-cover aspect-video rounded-md mr-3\">\n          @defer {\n            <rolatech-thumbnail [src]=\"offer.item.media[0].url\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n          } @placeholder {\n            <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n          }\n        </div>\n        <div class=\"flex w-full justify-between\">\n          <div class=\"flex justify-between w-full\">\n            <div class=\"flex flex-col\">\n              <div>{{ offer.item.propertyTitle }}</div>\n              <div class=\"inline-flex gap-1 mt-2\">\n                <div>\n                  <span class=\"mr-1\">{{ offer.item.bedrooms }}</span>\n                  <span i18n>Bedrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ offer.item.bathrooms }}</span>\n                  <span i18n>Bathrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ offer.item.receptions }}</span>\n                  <span i18n>Receptions</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"text-right\">\n              <div class=\"text-sm\">\u00A3{{ offer.item.price | fixed }}</div>\n            </div>\n          </div>\n        </div>\n        <div class=\"hidden md:flex flex-col px-3\"></div>\n      </div>\n    </div>\n\n    <div>\n      <div class=\"text-lg font-bold py-2\">Viewing agent</div>\n      <hr class=\"mb-2\" />\n      @if (agent) {\n        <div>\n          <rolatech-rich-label label=\"Move-in date\" [title]=\"offer.startDate\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Tenancy duration\" [title]=\"offer.tenancyDuration\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Phone\" [title]=\"agent.phone\"></rolatech-rich-label>\n        </div>\n      }\n    </div>\n  </div>\n}\n" }]
+            args: [{ selector: 'rolatech-property-manage-offer-detail', imports: [CommonModule, ToolbarComponent, RichLabelComponent, ThumbnailComponent, MatButtonModule], template: "@if (offer) {\n  <rolatech-toolbar [title]=\"status[offer.status]\" large link=\"../\">\n    @if (offer.status.toString() === 'CREATED') {\n      <button mat-flat-button (click)=\"accept()\" i18n>Accept</button>\n      <button mat-flat-button (click)=\"counter()\" i18n>Counter offer</button>\n      <button mat-button (click)=\"reject()\" i18n>Reject</button>\n    }\n    <button mat-flat-button (click)=\"createInvoice()\" i18n>Create invoice</button>\n\n    <!-- create invoice -->\n    @if (offer.status.toString() === 'ACCEPTED') {\n      <button mat-flat-button (click)=\"createInvoice()\" i18n>Create invoice</button>\n    }\n    <!-- References -->\n    @if (offer.status.toString() === 'REFERENCES_PASSED') {\n      <button mat-flat-button (click)=\"createInvoice()\" i18n>Create invoice</button>\n    }\n    @if (offer.status.toString() === 'REFERENCES_FAILED') {\n      <button mat-flat-button (click)=\"createInvoice()\" i18n>Create invoice</button>\n    }\n  </rolatech-toolbar>\n  <div class=\"px-4\">\n    <div>\n      <div class=\"text-lg font-bold py-2\">Viewer</div>\n      <hr class=\"mb-2\" />\n      <div class=\"flex flex-col md:flex-row gap-1 md:gap-4\">\n        <rolatech-rich-label label=\"Name\" [title]=\"name\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Email\" [title]=\"offer.email\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Phone\" [title]=\"offer.phone\"></rolatech-rich-label>\n      </div>\n    </div>\n    <div>\n      <div class=\"text-lg font-bold py-2\">Qualification</div>\n      <hr class=\"mb-2\" />\n      <div class=\"flex flex-col md:flex-row gap-1 md:gap-4\">\n        <rolatech-rich-label label=\"Move-in date\" [title]=\"offer.startDate\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Tenancy duration\" [title]=\"offer.tenancyDuration\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Number of tenants\" [title]=\"offer.numberOfTenants\"></rolatech-rich-label>\n      </div>\n      <div class=\"flex flex-col md:flex-row gap-1 md:gap-4\">\n        <rolatech-rich-label label=\"Employment status\" [title]=\"employmentStatus[offer.employmentStatus]\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Employer\" [title]=\"offer.startDate\"></rolatech-rich-label>\n        @if (offer.income) {\n          <rolatech-rich-label label=\"Annual income\" [title]=\"offer.income\"></rolatech-rich-label>\n        }\n      </div>\n    </div>\n    <div>\n      <div class=\"text-lg font-bold py-2\">Property details</div>\n      <hr class=\"mb-2\" />\n      <div class=\"flex items-center py-2\">\n        <div class=\"min-w-24 w-24 object-cover aspect-video rounded-md mr-3\">\n          @defer {\n            <rolatech-thumbnail [src]=\"offer.item.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n          } @placeholder {\n            <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n          }\n        </div>\n        <div class=\"flex w-full justify-between\">\n          <div class=\"flex justify-between w-full\">\n            <div class=\"flex flex-col\">\n              <div>{{ offer.item.propertyTitle }}</div>\n              <div class=\"inline-flex gap-1 mt-2\">\n                <div>\n                  <span class=\"mr-1\">{{ offer.item.bedrooms }}</span>\n                  <span i18n>Bedrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ offer.item.bathrooms }}</span>\n                  <span i18n>Bathrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ offer.item.receptions }}</span>\n                  <span i18n>Receptions</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"text-right\">\n              <div class=\"text-sm\">\u00A3{{ offer.item.amount.toFixed(2) }}</div>\n            </div>\n          </div>\n        </div>\n        <div class=\"hidden md:flex flex-col px-3\"></div>\n      </div>\n    </div>\n\n    <div>\n      <div class=\"text-lg font-bold py-2\">Viewing agent</div>\n      <hr class=\"mb-2\" />\n      @if (agent) {\n        <div>\n          <rolatech-rich-label label=\"Move-in date\" [title]=\"offer.startDate\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Tenancy duration\" [title]=\"offer.tenancyDuration\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Phone\" [title]=\"agent.phone\"></rolatech-rich-label>\n        </div>\n      }\n    </div>\n  </div>\n}\n" }]
         }] });
 
 const propertyManageOffersRoutes = [
@@ -1116,35 +1187,179 @@ var PropertyViewType;
 })(PropertyViewType || (PropertyViewType = {}));
 class PropertyUtil {
     viewEvent = new EventEmitter();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyUtil, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyUtil, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyUtil, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyUtil, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyUtil, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyUtil, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }] });
 
+const MY_FORMATS$6 = {
+    parse: {
+        dateInput: 'YYYY-MM-DD',
+    },
+    display: {
+        dateInput: 'YYYY-MM-DD',
+        monthYearLabel: 'MMM YYYY',
+        dateA11yLabel: 'YYYY-MM-DD',
+        monthYearA11yLabel: 'MMMM YYYY',
+    },
+};
+class PropertyFilterBar {
+    route = inject(ActivatedRoute);
+    router = inject(Router);
+    search = output();
+    reset = output();
+    show = model(true, ...(ngDevMode ? [{ debugName: "show" }] : []));
+    priceOptions = PriceRange;
+    bedroomOptions = BedroomRange;
+    minOptions = computed(() => {
+        return this.priceOptions.filter((o) => o.value !== null);
+    }, ...(ngDevMode ? [{ debugName: "minOptions" }] : []));
+    maxOptions = computed(() => {
+        return this.priceOptions.filter((o) => o.value !== 0);
+    }, ...(ngDevMode ? [{ debugName: "maxOptions" }] : []));
+    minBedroom = computed(() => {
+        return this.bedroomOptions.filter((o) => o.value !== null);
+    }, ...(ngDevMode ? [{ debugName: "minBedroom" }] : []));
+    maxBedRoom = computed(() => {
+        return this.bedroomOptions.filter((o) => o.value !== '0');
+    }, ...(ngDevMode ? [{ debugName: "maxBedRoom" }] : []));
+    towns = ['London'];
+    market = ['Sales', 'Lettings'];
+    options = model({
+        market: '',
+        town: '',
+        availableFrom: '',
+        minBedrooms: '',
+        maxBedrooms: '',
+        minPrice: 0,
+        maxPrice: null,
+        location: '',
+        radius: '',
+    }, ...(ngDevMode ? [{ debugName: "options" }] : []));
+    minDate = new Date();
+    constructor() {
+        // Reflect model changes back to URL
+        effect(() => {
+            const opts = this.options();
+            this.router.navigate([], {
+                queryParams: {
+                    market: opts.market || null,
+                    town: opts.town || null,
+                    minBedrooms: opts.minBedrooms || null,
+                    maxBedrooms: opts.maxBedrooms || null,
+                    minPrice: opts.minPrice || null,
+                    maxPrice: opts.maxPrice || null,
+                },
+                queryParamsHandling: 'merge',
+            });
+        });
+    }
+    ngOnInit() {
+        this.route.queryParams.subscribe((params) => {
+            this.options.set({
+                market: params['market'] || '',
+                town: params['town'] || '',
+                availableFrom: params['availableFrom'] || '',
+                minBedrooms: params['minBedrooms'] || '',
+                maxBedrooms: params['maxBedrooms'] || '',
+                minPrice: params['minPrice'] ? +params['minPrice'] : 0,
+                maxPrice: params['maxPrice'] ? +params['maxPrice'] : null,
+                location: params['location'] || '',
+                page: params['page'] ? +params['page'] : 1,
+                limit: params['limit'] ? +params['limit'] : 15,
+            });
+        });
+    }
+    onReset() {
+        this.reset.emit({});
+        this.options.update(() => {
+            return {
+                market: '',
+                town: '',
+                availableFrom: '',
+                minBedrooms: '',
+                maxBedrooms: '',
+                minPrice: 0,
+                maxPrice: null,
+                location: '',
+                radius: '',
+                page: 1,
+                limit: 15,
+            };
+        });
+    }
+    onSearch() {
+        const filteredOptions = Object.fromEntries(Object.entries(this.options()).filter(([_, v]) => v != null && v !== ''));
+        this.search.emit(filteredOptions);
+        this.router.navigate([], {
+            queryParams: filteredOptions,
+            queryParamsHandling: 'merge', // keep other params like sort, etc.
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyFilterBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyFilterBar, isStandalone: true, selector: "rolatech-property-filter-bar", inputs: { show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { search: "search", reset: "reset", show: "showChange", options: "optionsChange" }, providers: [
+            {
+                provide: DateAdapter,
+                useClass: MomentDateAdapter,
+                deps: [MAT_DATE_LOCALE],
+            },
+            { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$6 },
+        ], ngImport: i0, template: "<div class=\"px-2 mb-3 close\" [class.open]=\"show()\">\n  <div class=\"flex flex-col h-min justify-center items-center gap-3\">\n    <div class=\"flex flex-col md:flex-row gap-3 w-full items-center\">\n      <div class=\"flex flex-col w-full md:w-1/3\">\n        <div class=\"py-1\">Market</div>\n        <div>\n          <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n            <mat-select #select=\"matSelect\" placeholder=\"Market\" [(ngModel)]=\"options().market\">\n              @for (m of market; track m) {\n              <mat-option [value]=\"m\"> {{ m }} </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </div>\n      <div class=\"flex flex-col w-full md:w-1/3\">\n        <div class=\"py-1\">Town</div>\n        <div>\n          <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n            <mat-select #select=\"matSelect\" placeholder=\"Town\" [(ngModel)]=\"options().town\">\n              @for (town of towns; track town) {\n              <mat-option [value]=\"town\"> {{ town }} </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </div>\n      <div class=\"flex flex-col w-full md:w-1/3\">\n        <div class=\"py-1\">Available date</div>\n        <div>\n          <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\" class=\"z-[1000]\">\n            <input\n              matInput\n              placeholder=\"Available\"\n              [matDatepicker]=\"startDatePicker\"\n              [min]=\"minDate\"\n              (focus)=\"startDatePicker.open()\"\n              name=\"available\"\n              [(ngModel)]=\"options().availableFrom\"\n              (dateInput)=\"options().availableFrom = $event.value.format('YYYY-MM-DD')\"\n              readonly\n            />\n            <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n            <mat-datepicker panelClass=\"datepicker-on-top\" #startDatePicker></mat-datepicker>\n          </mat-form-field>\n        </div>\n      </div>\n    </div>\n    <div class=\"flex flex-col md:flex-row gap-3 w-full items-center\">\n      <div class=\"flex flex-col w-full md:w-1/3 overflow-hidden\">\n        <div class=\"py-1\">Price range (\u00A3)</div>\n        <div class=\"flex flex-row items-center\">\n          <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n            <mat-label>Min (PCM)</mat-label>\n            <mat-select [(ngModel)]=\"options().minPrice\">\n              @for (opt of minOptions(); track opt.value) {\n              <mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          <div class=\"px-2\">-</div>\n          <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n            <mat-label>Max (PCM)</mat-label>\n            <mat-select [(ngModel)]=\"options().maxPrice\">\n              @for (opt of maxOptions(); track opt.value) {\n              <mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </div>\n      <div class=\"flex flex-col w-full md:w-1/3\">\n        <div class=\"py-1\">No. of bedrooms</div>\n        <div class=\"flex flex-row items-center\">\n          <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n            <mat-label>Min</mat-label>\n            <mat-select [(ngModel)]=\"options().minBedrooms\">\n              @for (opt of minBedroom(); track opt.value) {\n              <mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          <div class=\"px-2\">-</div>\n          <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n            <mat-label>Max</mat-label>\n            <mat-select [(ngModel)]=\"options().maxBedrooms\">\n              @for (opt of maxBedRoom(); track opt.value) {\n              <mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </div>\n      <div class=\"h-14 md:w-1/3 self-end w-full\">\n        <button mat-flat-button (click)=\"onSearch()\" class=\"w-full min-h-14\">\n          <a i18n>Search</a>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["mat-form-field{width:100%}.close{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.4,0,.2,1)}.open{max-height:1000px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyFilterBar, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-filter-bar', imports: [
+                        CommonModule,
+                        MatButtonModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatOptionModule,
+                        FormsModule,
+                        MatDatepickerModule,
+                    ], providers: [
+                        {
+                            provide: DateAdapter,
+                            useClass: MomentDateAdapter,
+                            deps: [MAT_DATE_LOCALE],
+                        },
+                        { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$6 },
+                    ], encapsulation: ViewEncapsulation.None, template: "<div class=\"px-2 mb-3 close\" [class.open]=\"show()\">\n  <div class=\"flex flex-col h-min justify-center items-center gap-3\">\n    <div class=\"flex flex-col md:flex-row gap-3 w-full items-center\">\n      <div class=\"flex flex-col w-full md:w-1/3\">\n        <div class=\"py-1\">Market</div>\n        <div>\n          <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n            <mat-select #select=\"matSelect\" placeholder=\"Market\" [(ngModel)]=\"options().market\">\n              @for (m of market; track m) {\n              <mat-option [value]=\"m\"> {{ m }} </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </div>\n      <div class=\"flex flex-col w-full md:w-1/3\">\n        <div class=\"py-1\">Town</div>\n        <div>\n          <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n            <mat-select #select=\"matSelect\" placeholder=\"Town\" [(ngModel)]=\"options().town\">\n              @for (town of towns; track town) {\n              <mat-option [value]=\"town\"> {{ town }} </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </div>\n      <div class=\"flex flex-col w-full md:w-1/3\">\n        <div class=\"py-1\">Available date</div>\n        <div>\n          <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\" class=\"z-[1000]\">\n            <input\n              matInput\n              placeholder=\"Available\"\n              [matDatepicker]=\"startDatePicker\"\n              [min]=\"minDate\"\n              (focus)=\"startDatePicker.open()\"\n              name=\"available\"\n              [(ngModel)]=\"options().availableFrom\"\n              (dateInput)=\"options().availableFrom = $event.value.format('YYYY-MM-DD')\"\n              readonly\n            />\n            <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n            <mat-datepicker panelClass=\"datepicker-on-top\" #startDatePicker></mat-datepicker>\n          </mat-form-field>\n        </div>\n      </div>\n    </div>\n    <div class=\"flex flex-col md:flex-row gap-3 w-full items-center\">\n      <div class=\"flex flex-col w-full md:w-1/3 overflow-hidden\">\n        <div class=\"py-1\">Price range (\u00A3)</div>\n        <div class=\"flex flex-row items-center\">\n          <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n            <mat-label>Min (PCM)</mat-label>\n            <mat-select [(ngModel)]=\"options().minPrice\">\n              @for (opt of minOptions(); track opt.value) {\n              <mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          <div class=\"px-2\">-</div>\n          <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n            <mat-label>Max (PCM)</mat-label>\n            <mat-select [(ngModel)]=\"options().maxPrice\">\n              @for (opt of maxOptions(); track opt.value) {\n              <mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </div>\n      <div class=\"flex flex-col w-full md:w-1/3\">\n        <div class=\"py-1\">No. of bedrooms</div>\n        <div class=\"flex flex-row items-center\">\n          <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n            <mat-label>Min</mat-label>\n            <mat-select [(ngModel)]=\"options().minBedrooms\">\n              @for (opt of minBedroom(); track opt.value) {\n              <mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          <div class=\"px-2\">-</div>\n          <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n            <mat-label>Max</mat-label>\n            <mat-select [(ngModel)]=\"options().maxBedrooms\">\n              @for (opt of maxBedRoom(); track opt.value) {\n              <mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </div>\n      <div class=\"h-14 md:w-1/3 self-end w-full\">\n        <button mat-flat-button (click)=\"onSearch()\" class=\"w-full min-h-14\">\n          <a i18n>Search</a>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["mat-form-field{width:100%}.close{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.4,0,.2,1)}.open{max-height:1000px}\n"] }]
+        }], ctorParameters: () => [] });
+
 class PropertyLayoutComponent extends BaseComponent {
     propertyService = inject(PropertyService);
     util = inject(PropertyUtil);
     open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    showFilter = signal(true, ...(ngDevMode ? [{ debugName: "showFilter" }] : []));
     model = {};
     gridView = true;
     searchBar = viewChild('searchBar', ...(ngDevMode ? [{ debugName: "searchBar" }] : []));
     selectIndex = 0;
     filter = false;
-    propertyFilterIconComponent = defer(() => import('./rolatech-angular-property-property-filter-icon.component-QFg-Ph-F.mjs').then((m) => m.PropertyFilterIconComponent));
-    ngOnInit() {
-    }
+    options = signal({
+        market: '',
+        town: '',
+        availableFrom: '',
+        minBedrooms: '',
+        maxBedrooms: '',
+        minPrice: 0,
+        maxPrice: null,
+        location: '',
+    }, ...(ngDevMode ? [{ debugName: "options" }] : []));
+    ngOnInit() { }
     toggleSearch() {
-        this.open.update(v => !v);
+        this.open.update((v) => !v);
     }
     onCloseSearch() {
         // this.open.set(false);
         // this.router.navigate([], { queryParams: {}, queryParamsHandling: 'merge' });
-        this.router.navigate(["/properties"]);
+        this.router.navigate(['/properties']);
     }
     toggleView() {
         if (this.gridView) {
@@ -1156,8 +1371,12 @@ class PropertyLayoutComponent extends BaseComponent {
             this.util.viewEvent.emit(PropertyViewType.GRID);
         }
     }
+    toggleFilter() {
+        this.showFilter.update((v) => !v);
+    }
     onSearch(event) {
         const qp = Object.fromEntries(Object.entries(event).filter(([_, v]) => v !== undefined && v !== null && !(Array.isArray(v) && v.length === 0) && v !== ''));
+        console.log(qp);
         this.router.navigate([], {
             queryParams: qp,
             queryParamsHandling: 'merge', // keep other params like sort, etc.
@@ -1175,12 +1394,12 @@ class PropertyLayoutComponent extends BaseComponent {
             // omit queryParamsHandling so it REPLACES (not merges) → clears everything
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyLayoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.2", type: PropertyLayoutComponent, isStandalone: true, selector: "rolatech-property-layout", viewQueries: [{ propertyName: "searchBar", first: true, predicate: ["searchBar"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  <div class=\"flex flex-col min-w-[320px] max-w-[1280px] m-auto\">\n    <div class=\"flex justify-between items-center h-16\">\n      <div class=\"flex justify-between items-center w-full\">\n        <div class=\"p-3 text-2xl font-medium cursor-pointer\" routerLink=\"/properties\" i18n>Properties</div>\n        <div class=\"flex flex-row\">\n          <button mat-icon-button (click)=\"toggleSearch()\">\n            <mat-icon>search</mat-icon>\n          </button>\n          <button mat-icon-button (click)=\"toggleView()\">\n            <mat-icon>{{ gridView ? 'view_list' : 'grid_on' }}</mat-icon>\n          </button>\n          <ng-container *ngComponentOutlet=\"propertyFilterIconComponent | async\"></ng-container>\n        </div>\n      </div>\n    </div>\n    <rolatech-search-bar\n      [(show)]=\"open\"\n      #searchBar\n      (search)=\"searchByText($event)\"\n      (close)=\"onCloseSearch()\"\n    ></rolatech-search-bar>\n    <div class=\"w-full\">\n      <router-outlet></router-outlet>\n    </div>\n  </div>\n</rolatech-container>\n", styles: [".property-layout-active{border-radius:var(--rt-rounded-base, 8px);background-color:var(-rt-base-background, #fff);color:var(--rt-brand-color, #000)}@media (max-width: 768px){.property-layout-active{background-color:var(--rt-text-primary, #000);color:var(--rt-text-primary-inverse, #000)}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: SearchBar, selector: "rolatech-search-bar", inputs: ["show"], outputs: ["showChange", "search", "close"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyLayoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.4", type: PropertyLayoutComponent, isStandalone: true, selector: "rolatech-property-layout", viewQueries: [{ propertyName: "searchBar", first: true, predicate: ["searchBar"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  <div class=\"flex flex-col min-w-[320px] max-w-[1280px] m-auto\">\n    <div class=\"flex justify-between items-center h-16\">\n      <div class=\"flex justify-between items-center w-full\">\n        <div class=\"p-3 text-2xl font-medium cursor-pointer\" routerLink=\"/properties\" i18n>Properties</div>\n        <div class=\"flex flex-row\">\n          <button mat-icon-button (click)=\"toggleSearch()\">\n            <mat-icon>search</mat-icon>\n          </button>\n          <button mat-icon-button (click)=\"toggleView()\">\n            <mat-icon>{{ gridView ? 'view_list' : 'grid_on' }}</mat-icon>\n          </button>\n          <button mat-icon-button (click)=\"toggleFilter()\">\n            <mat-icon>tune</mat-icon>\n          </button>\n        </div>\n      </div>\n    </div>\n    <rolatech-property-filter-bar\n      [(show)]=\"showFilter\"\n      (search)=\"onSearch($event)\"\n      [(options)]=\"options\"\n    ></rolatech-property-filter-bar>\n    <rolatech-search-bar\n      [(show)]=\"open\"\n      #searchBar\n      (search)=\"searchByText($event)\"\n      (close)=\"onCloseSearch()\"\n    ></rolatech-search-bar>\n    <div class=\"w-full\">\n      <router-outlet></router-outlet>\n    </div>\n  </div>\n</rolatech-container>\n", styles: [".property-layout-active{border-radius:var(--rt-rounded-base, 8px);background-color:var(-rt-base-background, #fff);color:var(--rt-brand-color, #000)}@media (max-width: 768px){.property-layout-active{background-color:var(--rt-text-primary, #000);color:var(--rt-text-primary-inverse, #000)}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: SearchBar, selector: "rolatech-search-bar", inputs: ["show"], outputs: ["showChange", "search", "close"] }, { kind: "component", type: PropertyFilterBar, selector: "rolatech-property-filter-bar", inputs: ["show", "options"], outputs: ["search", "reset", "showChange", "optionsChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-property-layout', imports: [AngularCommonModule, AngularComponentsModule, ContainerComponent, SearchBar], template: "<rolatech-container>\n  <div class=\"flex flex-col min-w-[320px] max-w-[1280px] m-auto\">\n    <div class=\"flex justify-between items-center h-16\">\n      <div class=\"flex justify-between items-center w-full\">\n        <div class=\"p-3 text-2xl font-medium cursor-pointer\" routerLink=\"/properties\" i18n>Properties</div>\n        <div class=\"flex flex-row\">\n          <button mat-icon-button (click)=\"toggleSearch()\">\n            <mat-icon>search</mat-icon>\n          </button>\n          <button mat-icon-button (click)=\"toggleView()\">\n            <mat-icon>{{ gridView ? 'view_list' : 'grid_on' }}</mat-icon>\n          </button>\n          <ng-container *ngComponentOutlet=\"propertyFilterIconComponent | async\"></ng-container>\n        </div>\n      </div>\n    </div>\n    <rolatech-search-bar\n      [(show)]=\"open\"\n      #searchBar\n      (search)=\"searchByText($event)\"\n      (close)=\"onCloseSearch()\"\n    ></rolatech-search-bar>\n    <div class=\"w-full\">\n      <router-outlet></router-outlet>\n    </div>\n  </div>\n</rolatech-container>\n", styles: [".property-layout-active{border-radius:var(--rt-rounded-base, 8px);background-color:var(-rt-base-background, #fff);color:var(--rt-brand-color, #000)}@media (max-width: 768px){.property-layout-active{background-color:var(--rt-text-primary, #000);color:var(--rt-text-primary-inverse, #000)}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"] }]
+            args: [{ selector: 'rolatech-property-layout', imports: [AngularCommonModule, AngularComponentsModule, ContainerComponent, SearchBar, PropertyFilterBar], template: "<rolatech-container>\n  <div class=\"flex flex-col min-w-[320px] max-w-[1280px] m-auto\">\n    <div class=\"flex justify-between items-center h-16\">\n      <div class=\"flex justify-between items-center w-full\">\n        <div class=\"p-3 text-2xl font-medium cursor-pointer\" routerLink=\"/properties\" i18n>Properties</div>\n        <div class=\"flex flex-row\">\n          <button mat-icon-button (click)=\"toggleSearch()\">\n            <mat-icon>search</mat-icon>\n          </button>\n          <button mat-icon-button (click)=\"toggleView()\">\n            <mat-icon>{{ gridView ? 'view_list' : 'grid_on' }}</mat-icon>\n          </button>\n          <button mat-icon-button (click)=\"toggleFilter()\">\n            <mat-icon>tune</mat-icon>\n          </button>\n        </div>\n      </div>\n    </div>\n    <rolatech-property-filter-bar\n      [(show)]=\"showFilter\"\n      (search)=\"onSearch($event)\"\n      [(options)]=\"options\"\n    ></rolatech-property-filter-bar>\n    <rolatech-search-bar\n      [(show)]=\"open\"\n      #searchBar\n      (search)=\"searchByText($event)\"\n      (close)=\"onCloseSearch()\"\n    ></rolatech-search-bar>\n    <div class=\"w-full\">\n      <router-outlet></router-outlet>\n    </div>\n  </div>\n</rolatech-container>\n", styles: [".property-layout-active{border-radius:var(--rt-rounded-base, 8px);background-color:var(-rt-base-background, #fff);color:var(--rt-brand-color, #000)}@media (max-width: 768px){.property-layout-active{background-color:var(--rt-text-primary, #000);color:var(--rt-text-primary-inverse, #000)}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"] }]
         }] });
 
 class PropertyActionsComponent {
@@ -1189,7 +1408,7 @@ class PropertyActionsComponent {
     offer = output();
     deposit = output();
     displayDeposit = computed(() => {
-        return (this.property().deposit / 100).toFixed(2);
+        return this.property().deposit.toFixed(2);
     }, ...(ngDevMode ? [{ debugName: "displayDeposit" }] : []));
     onRequestViewing(property) {
         this.requestViewing.emit(property);
@@ -1200,22 +1419,52 @@ class PropertyActionsComponent {
     onDeposit(property) {
         this.deposit.emit(property);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyActionsComponent, isStandalone: true, selector: "rolatech-property-actions", inputs: { property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { requestViewing: "requestViewing", offer: "offer", deposit: "deposit" }, ngImport: i0, template: "<div class=\"flex flex-col gap-3\">\n  <a mat-stroked-button class=\"\" (click)=\"onRequestViewing(property())\" i18n>Request viewing</a>\n  @if (property().priceType && property().priceType.toString() === 'PARTIAL') {\n    <a mat-flat-button class=\"\" (click)=\"onDeposit(property())\" i18n>Pay deposit \u00A3{{ displayDeposit() }}</a>\n  } @else {\n    <a mat-flat-button class=\"\" (click)=\"onOffer(property())\" i18n>Make an offer</a>\n  }\n  <ng-content select=\"rolatech-property-action-contact\"></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatMenuModule }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyActionsComponent, isStandalone: true, selector: "rolatech-property-actions", inputs: { property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { requestViewing: "requestViewing", offer: "offer", deposit: "deposit" }, ngImport: i0, template: "<div class=\"flex flex-col gap-3\">\n  <a mat-stroked-button class=\"\" (click)=\"onRequestViewing(property())\" i18n>Request viewing</a>\n  @if (property().priceType && property().priceType.toString() === 'PARTIAL') {\n    <a mat-flat-button class=\"\" (click)=\"onDeposit(property())\" i18n>Pay deposit \u00A3{{ displayDeposit() }}</a>\n  } @else {\n    <a mat-flat-button class=\"\" (click)=\"onOffer(property())\" i18n>Make an offer</a>\n  }\n  <ng-content select=\"rolatech-property-action-contact\"></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatMenuModule }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyActionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-actions', imports: [CommonModule, MatButtonModule, MatIconModule, MatMenuModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"flex flex-col gap-3\">\n  <a mat-stroked-button class=\"\" (click)=\"onRequestViewing(property())\" i18n>Request viewing</a>\n  @if (property().priceType && property().priceType.toString() === 'PARTIAL') {\n    <a mat-flat-button class=\"\" (click)=\"onDeposit(property())\" i18n>Pay deposit \u00A3{{ displayDeposit() }}</a>\n  } @else {\n    <a mat-flat-button class=\"\" (click)=\"onOffer(property())\" i18n>Make an offer</a>\n  }\n  <ng-content select=\"rolatech-property-action-contact\"></ng-content>\n</div>\n" }]
         }] });
 
 class PropertyItemComponent {
     property = input.required(...(ngDevMode ? [{ debugName: "property" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyItemComponent, isStandalone: true, selector: "rolatech-property-item", inputs: { property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col hover:bg-[--rt-raised-background] cursor-pointer p-3\">\n  <div>\n    <div class=\"flex justify-between w-full mb-2\">\n      <a class=\"flex items-center gap-3\">\n        <span>ID: {{ property().id }}</span>\n      </a>\n    </div>\n    <div class=\"flex flex-col overflow-x-scroll scrollbar-hide\">\n      <div class=\"flex flex-row py-2\">\n        @if (property().media) {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            @defer {\n              <rolatech-thumbnail [src]=\"property().media[0].url\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n        } @else {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            <rolatech-image-placeholder></rolatech-image-placeholder>\n          </div>\n        }\n        <div class=\"flex w-full justify-between\">\n          <div class=\"flex justify-between w-full\">\n            <div class=\"flex flex-col\">\n              <div>{{ property().title }}</div>\n              <div class=\"inline-flex gap-1 mt-2\">\n                <div>\n                  <span class=\"mr-1\">{{ property().bedrooms }}</span>\n                  <span i18n>Bedrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ property().bathrooms }}</span>\n                  <span i18n>Bathrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ property().receptions }}</span>\n                  <span i18n>Receptions</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"text-right\">\n              <div class=\"text-sm\">\u00A3{{ property().price | fixed }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ImagePlaceholderComponent, selector: "rolatech-image-placeholder", inputs: ["ratio"] }, { kind: "pipe", type: FixedPipe, name: "fixed" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyItemComponent, isStandalone: true, selector: "rolatech-property-item", inputs: { property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col hover:bg-[--rt-raised-background] cursor-pointer p-3\">\n  <div>\n    <div class=\"flex justify-between w-full mb-2\">\n      <a class=\"flex items-center gap-3\">\n        <span>ID: {{ property().id }}</span>\n      </a>\n    </div>\n    <div class=\"flex flex-col overflow-x-scroll scrollbar-hide\">\n      <div class=\"flex flex-row py-2\">\n        @if (property().media) {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            @defer {\n              <rolatech-thumbnail [src]=\"property().media[0].url\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n        } @else {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            <rolatech-image-placeholder></rolatech-image-placeholder>\n          </div>\n        }\n        <div class=\"flex w-full justify-between\">\n          <div class=\"flex justify-between w-full\">\n            <div class=\"flex flex-col\">\n              <div>{{ property().title }}</div>\n              <div class=\"inline-flex gap-1 mt-2\">\n                <div>\n                  <span class=\"mr-1\">{{ property().bedrooms }}</span>\n                  <span i18n>Bedrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ property().bathrooms }}</span>\n                  <span i18n>Bathrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ property().receptions }}</span>\n                  <span i18n>Receptions</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"text-right\">\n              <div class=\"text-sm\">\u00A3{{ property().price.toFixed(2) }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ImagePlaceholderComponent, selector: "rolatech-image-placeholder", inputs: ["ratio"] }], deferBlockDependencies: [() => [ThumbnailComponent]] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-property-item', imports: [CommonModule, ThumbnailComponent, ImagePlaceholderComponent, FixedPipe], template: "<div class=\"flex flex-col hover:bg-[--rt-raised-background] cursor-pointer p-3\">\n  <div>\n    <div class=\"flex justify-between w-full mb-2\">\n      <a class=\"flex items-center gap-3\">\n        <span>ID: {{ property().id }}</span>\n      </a>\n    </div>\n    <div class=\"flex flex-col overflow-x-scroll scrollbar-hide\">\n      <div class=\"flex flex-row py-2\">\n        @if (property().media) {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            @defer {\n              <rolatech-thumbnail [src]=\"property().media[0].url\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n        } @else {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            <rolatech-image-placeholder></rolatech-image-placeholder>\n          </div>\n        }\n        <div class=\"flex w-full justify-between\">\n          <div class=\"flex justify-between w-full\">\n            <div class=\"flex flex-col\">\n              <div>{{ property().title }}</div>\n              <div class=\"inline-flex gap-1 mt-2\">\n                <div>\n                  <span class=\"mr-1\">{{ property().bedrooms }}</span>\n                  <span i18n>Bedrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ property().bathrooms }}</span>\n                  <span i18n>Bathrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ property().receptions }}</span>\n                  <span i18n>Receptions</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"text-right\">\n              <div class=\"text-sm\">\u00A3{{ property().price | fixed }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'rolatech-property-item', imports: [CommonModule, ThumbnailComponent, ImagePlaceholderComponent], template: "<div class=\"flex flex-col hover:bg-[--rt-raised-background] cursor-pointer p-3\">\n  <div>\n    <div class=\"flex justify-between w-full mb-2\">\n      <a class=\"flex items-center gap-3\">\n        <span>ID: {{ property().id }}</span>\n      </a>\n    </div>\n    <div class=\"flex flex-col overflow-x-scroll scrollbar-hide\">\n      <div class=\"flex flex-row py-2\">\n        @if (property().media) {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            @defer {\n              <rolatech-thumbnail [src]=\"property().media[0].url\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n        } @else {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            <rolatech-image-placeholder></rolatech-image-placeholder>\n          </div>\n        }\n        <div class=\"flex w-full justify-between\">\n          <div class=\"flex justify-between w-full\">\n            <div class=\"flex flex-col\">\n              <div>{{ property().title }}</div>\n              <div class=\"inline-flex gap-1 mt-2\">\n                <div>\n                  <span class=\"mr-1\">{{ property().bedrooms }}</span>\n                  <span i18n>Bedrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ property().bathrooms }}</span>\n                  <span i18n>Bathrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ property().receptions }}</span>\n                  <span i18n>Receptions</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"text-right\">\n              <div class=\"text-sm\">\u00A3{{ property().price.toFixed(2) }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+        }] });
+
+// property-available.pipe.ts
+class AvailableDatePipe {
+    transform(value) {
+        if (!value)
+            return '';
+        const date = new Date(value);
+        const today = new Date();
+        // strip time for comparison
+        today.setHours(0, 0, 0, 0);
+        date.setHours(0, 0, 0, 0);
+        if (date <= today) {
+            return 'Now';
+        }
+        return new Intl.DateTimeFormat('en-GB', {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+        }).format(date);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AvailableDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: AvailableDatePipe, isStandalone: true, name: "availableDate" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AvailableDatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'availableDate',
+                    standalone: true,
+                }]
         }] });
 
 class PropertyPricingComponent {
@@ -1227,7 +1476,7 @@ class PropertyPricingComponent {
     holdingDeposit;
     securityDeposit;
     displayPrice = computed(() => {
-        return (this.property().price / 100).toFixed(2);
+        return this.property().price.toFixed(2);
     }, ...(ngDevMode ? [{ debugName: "displayPrice" }] : []));
     market = computed(() => {
         return this.property().market.toString();
@@ -1237,15 +1486,21 @@ class PropertyPricingComponent {
     }, ...(ngDevMode ? [{ debugName: "rentFrequency" }] : []));
     calculateDeposit() {
         const price = this.property().price;
-        this.holdingDeposit = ((price * 12) / 52 / 100).toFixed(2);
-        this.securityDeposit = (((price * 12) / 52 / 100) * 5).toFixed(2);
+        if (this.rentFrequency() === 'MONTHLY') {
+            this.holdingDeposit = ((price * 12) / 52).toFixed(2);
+            this.securityDeposit = (((price * 12) / 52) * 5).toFixed(2);
+        }
+        if (this.rentFrequency() === 'WEEKLY') {
+            this.holdingDeposit = price.toFixed(2);
+            this.securityDeposit = (price * 5).toFixed(2);
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyPricingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyPricingComponent, isStandalone: true, selector: "rolatech-property-pricing", inputs: { property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null }, price: { classPropertyName: "price", publicName: "price", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"py-3\">\n  <div class=\"flex justify-between items-center\">\n    @if (market() === 'LETTINGS' && rentFrequency() === 'MONTHLY') {\n      <div class=\"text-lg font-bold\" i18n>Rent per month</div>\n    }\n    @if (market() === 'LETTINGS' && rentFrequency() === 'NOT_SPECIFIED') {\n      <div class=\"text-lg font-bold\" i18n>Rent price</div>\n    }\n    @if (market() === 'SALES') {\n      <div class=\"text-lg font-bold\" i18n>Price</div>\n    }\n    <div class=\"text-xl font-bold py-3\">\u00A3{{ displayPrice() }}</div>\n  </div>\n  <mat-divider></mat-divider>\n  @if (market() === 'LETTINGS') {\n    <div class=\"py-3\">\n      <div class=\"flex justify-between items-center py-2\">\n        <span i18n>Holding Deposit</span>\n        <span>\u00A3{{ holdingDeposit }}</span>\n      </div>\n      <div class=\"flex justify-between items-center py-2 font-bold\">\n        <span i18n>Security Deposit</span>\n        <span>\u00A3{{ securityDeposit }}</span>\n      </div>\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyPricingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyPricingComponent, isStandalone: true, selector: "rolatech-property-pricing", inputs: { property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null }, price: { classPropertyName: "price", publicName: "price", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"py-3 flex flex-col gap-3\">\n  <div class=\"flex justify-between items-center\">\n    @if (market() === 'LETTINGS' && rentFrequency() === 'MONTHLY') {\n      <div class=\"text-lg font-bold\" i18n>Rent per month</div>\n    }\n    @if (market() === 'LETTINGS' && rentFrequency() === 'WEEKLY') {\n      <div class=\"text-lg font-bold\" i18n>Rent per week</div>\n    }\n    @if (market() === 'LETTINGS' && rentFrequency() === 'NOT_SPECIFIED') {\n      <div class=\"text-lg font-bold\" i18n>Rent price</div>\n    }\n    @if (market() === 'SALES') {\n      <div class=\"text-lg font-bold\" i18n>Price</div>\n    }\n    <div class=\"text-xl font-bold\">\u00A3{{ displayPrice() }}</div>\n  </div>\n  <div class=\"flex justify-between items-center\">\n    <div>Available</div>\n    <div>{{ property().availableDate | availableDate }}</div>\n  </div>\n  @if (market() === 'LETTINGS') {\n    <div class=\"flex justify-between items-center\">\n      <span i18n>Holding Deposit</span>\n      <span>\u00A3{{ holdingDeposit }}</span>\n    </div>\n    <div class=\"flex justify-between items-center font-bold\">\n      <span i18n>Security Deposit</span>\n      <span>\u00A3{{ securityDeposit }}</span>\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "pipe", type: AvailableDatePipe, name: "availableDate" }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyPricingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyPricingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-property-pricing', imports: [CommonModule, MatButtonModule, MatDivider], encapsulation: ViewEncapsulation.None, template: "<div class=\"py-3\">\n  <div class=\"flex justify-between items-center\">\n    @if (market() === 'LETTINGS' && rentFrequency() === 'MONTHLY') {\n      <div class=\"text-lg font-bold\" i18n>Rent per month</div>\n    }\n    @if (market() === 'LETTINGS' && rentFrequency() === 'NOT_SPECIFIED') {\n      <div class=\"text-lg font-bold\" i18n>Rent price</div>\n    }\n    @if (market() === 'SALES') {\n      <div class=\"text-lg font-bold\" i18n>Price</div>\n    }\n    <div class=\"text-xl font-bold py-3\">\u00A3{{ displayPrice() }}</div>\n  </div>\n  <mat-divider></mat-divider>\n  @if (market() === 'LETTINGS') {\n    <div class=\"py-3\">\n      <div class=\"flex justify-between items-center py-2\">\n        <span i18n>Holding Deposit</span>\n        <span>\u00A3{{ holdingDeposit }}</span>\n      </div>\n      <div class=\"flex justify-between items-center py-2 font-bold\">\n        <span i18n>Security Deposit</span>\n        <span>\u00A3{{ securityDeposit }}</span>\n      </div>\n    </div>\n  }\n</div>\n" }]
+            args: [{ selector: 'rolatech-property-pricing', imports: [CommonModule, MatButtonModule, AvailableDatePipe], encapsulation: ViewEncapsulation.None, template: "<div class=\"py-3 flex flex-col gap-3\">\n  <div class=\"flex justify-between items-center\">\n    @if (market() === 'LETTINGS' && rentFrequency() === 'MONTHLY') {\n      <div class=\"text-lg font-bold\" i18n>Rent per month</div>\n    }\n    @if (market() === 'LETTINGS' && rentFrequency() === 'WEEKLY') {\n      <div class=\"text-lg font-bold\" i18n>Rent per week</div>\n    }\n    @if (market() === 'LETTINGS' && rentFrequency() === 'NOT_SPECIFIED') {\n      <div class=\"text-lg font-bold\" i18n>Rent price</div>\n    }\n    @if (market() === 'SALES') {\n      <div class=\"text-lg font-bold\" i18n>Price</div>\n    }\n    <div class=\"text-xl font-bold\">\u00A3{{ displayPrice() }}</div>\n  </div>\n  <div class=\"flex justify-between items-center\">\n    <div>Available</div>\n    <div>{{ property().availableDate | availableDate }}</div>\n  </div>\n  @if (market() === 'LETTINGS') {\n    <div class=\"flex justify-between items-center\">\n      <span i18n>Holding Deposit</span>\n      <span>\u00A3{{ holdingDeposit }}</span>\n    </div>\n    <div class=\"flex justify-between items-center font-bold\">\n      <span i18n>Security Deposit</span>\n      <span>\u00A3{{ securityDeposit }}</span>\n    </div>\n  }\n</div>\n" }]
         }] });
 
 class PropertyInfoComponent {
@@ -1257,10 +1512,10 @@ class PropertyInfoComponent {
     }
     onShare() { }
     onMore() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyInfoComponent, isStandalone: true, selector: "rolatech-property-info", inputs: { property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null }, inWishList: { classPropertyName: "inWishList", publicName: "inWishList", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { wish: "wish" }, host: { attributes: { "id": "rolatech-property-info" } }, ngImport: i0, template: "<div>\n  <div class=\"flex justify-between items-center\">\n    <div class=\"text-2xl font-medium\">{{ property().title }}</div>\n    <div class=\"flex items-center px-3\">\n      <button mat-icon-button (click)=\"onWish(property())\">\n        @if (inWishList()) {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#5f6368\">\n            <path\n              d=\"m293-203.08 49.62-212.54-164.93-142.84 217.23-18.85L480-777.69l85.08 200.38 217.23 18.85-164.93 142.84L667-203.08 480-315.92 293-203.08Z\"\n            />\n          </svg>\n        } @else {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#5f6368\">\n            <path\n              d=\"m354-287 126-76 126 77-33-144 111-96-146-13-58-136-58 135-146 13 111 97-33 143Zm-61 83.92 49.62-212.54-164.93-142.84 217.23-18.85L480-777.69l85.08 200.38 217.23 18.85-164.93 142.84L667-203.08 480-315.92 293-203.08ZM480-470Z\"\n            />\n          </svg>\n        }\n      </button>\n      <button mat-icon-button (click)=\"onShare()\">\n        <mat-icon>share</mat-icon>\n      </button>\n      <button mat-icon-button (click)=\"onMore()\">\n        <mat-icon>more_vert</mat-icon>\n      </button>\n    </div>\n  </div>\n  <div [innerHTML]=\"property().description\">\n    <!-- {{ property().description }} -->\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: RouterModule }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyInfoComponent, isStandalone: true, selector: "rolatech-property-info", inputs: { property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null }, inWishList: { classPropertyName: "inWishList", publicName: "inWishList", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { wish: "wish" }, host: { attributes: { "id": "rolatech-property-info" } }, ngImport: i0, template: "<div>\n  <div class=\"flex justify-between items-center\">\n    <div class=\"text-2xl font-medium\">{{ property().title }}</div>\n    <div class=\"flex items-center px-3\">\n      <button mat-icon-button (click)=\"onWish(property())\">\n        @if (inWishList()) {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#5f6368\">\n            <path\n              d=\"m293-203.08 49.62-212.54-164.93-142.84 217.23-18.85L480-777.69l85.08 200.38 217.23 18.85-164.93 142.84L667-203.08 480-315.92 293-203.08Z\"\n            />\n          </svg>\n        } @else {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#5f6368\">\n            <path\n              d=\"m354-287 126-76 126 77-33-144 111-96-146-13-58-136-58 135-146 13 111 97-33 143Zm-61 83.92 49.62-212.54-164.93-142.84 217.23-18.85L480-777.69l85.08 200.38 217.23 18.85-164.93 142.84L667-203.08 480-315.92 293-203.08ZM480-470Z\"\n            />\n          </svg>\n        }\n      </button>\n      <button mat-icon-button (click)=\"onShare()\">\n        <mat-icon>share</mat-icon>\n      </button>\n      <button mat-icon-button (click)=\"onMore()\">\n        <mat-icon>more_vert</mat-icon>\n      </button>\n    </div>\n  </div>\n  <div [innerHTML]=\"property().description\">\n    <!-- {{ property().description }} -->\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: RouterModule }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyInfoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyInfoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-info', imports: [MatButtonModule, MatIconModule, RouterModule], encapsulation: ViewEncapsulation.None, host: {
                         id: 'rolatech-property-info',
@@ -1275,10 +1530,10 @@ class PropertySectionComponent {
     onClickScroller(id) {
         this.viewportScroller.scrollToAnchor(id);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertySectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertySectionComponent, isStandalone: true, selector: "rolatech-property-section", inputs: { section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: true, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, username: { classPropertyName: "username", publicName: "username", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (section(); as section) {\n  <div>\n    @if (section.title) {\n      <div class=\"py-3 flex items-center gap-3\">\n        <span class=\"h-4 w-1 bg-[--rt-brand-color] inline-block\"></span>\n        <span class=\"text-lg font-medium py-1\"> {{ section.title }}</span>\n      </div>\n    }\n    @if (section.description) {\n      <div>\n        {{ section.description }}\n      </div>\n    }\n    @if (section.media) {\n      <div class=\"w-80%\">\n        @for (item of section.media; track item) {\n          <div class=\"py-3\">\n            <rolatech-thumbnail\n              [src]=\"item.url\"\n              size=\"small\"\n              mode=\"full\"\n              [width]=\"item.width\"\n              [height]=\"item.height\"\n            ></rolatech-thumbnail>\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ThumbnailComponent, selector: "rolatech-thumbnail", inputs: ["src", "size", "mode", "ratio", "width", "height"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertySectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertySectionComponent, isStandalone: true, selector: "rolatech-property-section", inputs: { section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: true, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, username: { classPropertyName: "username", publicName: "username", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (section(); as section) {\n  <div>\n    @if (section.title) {\n      <div class=\"py-3 flex items-center gap-3\">\n        <span class=\"h-4 w-1 bg-[--rt-brand-color] inline-block\"></span>\n        <span class=\"text-lg font-medium py-1\"> {{ section.title }}</span>\n      </div>\n    }\n    @if (section.description) {\n      <div>\n        {{ section.description }}\n      </div>\n    }\n    @if (section.media) {\n      <div class=\"w-80%\">\n        @for (item of section.media; track item) {\n          <div class=\"py-3\">\n            <rolatech-thumbnail\n              [src]=\"item.url\"\n              size=\"small\"\n              mode=\"full\"\n              [width]=\"item.width\"\n              [height]=\"item.height\"\n            ></rolatech-thumbnail>\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ThumbnailComponent, selector: "rolatech-thumbnail", inputs: ["src", "size", "mode", "ratio", "width", "height"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertySectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertySectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-section', imports: [CommonModule, ThumbnailComponent], encapsulation: ViewEncapsulation.None, template: "@if (section(); as section) {\n  <div>\n    @if (section.title) {\n      <div class=\"py-3 flex items-center gap-3\">\n        <span class=\"h-4 w-1 bg-[--rt-brand-color] inline-block\"></span>\n        <span class=\"text-lg font-medium py-1\"> {{ section.title }}</span>\n      </div>\n    }\n    @if (section.description) {\n      <div>\n        {{ section.description }}\n      </div>\n    }\n    @if (section.media) {\n      <div class=\"w-80%\">\n        @for (item of section.media; track item) {\n          <div class=\"py-3\">\n            <rolatech-thumbnail\n              [src]=\"item.url\"\n              size=\"small\"\n              mode=\"full\"\n              [width]=\"item.width\"\n              [height]=\"item.height\"\n            ></rolatech-thumbnail>\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n" }]
         }] });
@@ -1298,10 +1553,10 @@ class PropertyVideoComponent {
     youtube = computed(() => {
         return this.video().provider === PropertyVideoProvider.YOUTUBE;
     }, ...(ngDevMode ? [{ debugName: "youtube" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyVideoComponent, isStandalone: true, selector: "rolatech-property-video", inputs: { video: { classPropertyName: "video", publicName: "video", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"\">\n  <div class=\"text-2xl font-bold py-4\" i18n>Videos</div>\n  @if (youtube()) {\n    <iframe [src]=\"videoUrl()\" frameborder=\"0\" allowfullscreen class=\"w-full aspect-video\"></iframe>\n  } @else {\n    <video controls #videoContainer [src]=\"video().url\" class=\"w-full aspect-video\" [poster]=\"video().thumbnail\">\n      <!-- <source [src]=\"video().url\" type=\"video/mp4\" /> -->\n    </video>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyVideoComponent, isStandalone: true, selector: "rolatech-property-video", inputs: { video: { classPropertyName: "video", publicName: "video", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"\">\n  <div class=\"text-2xl font-bold py-4\" i18n>Videos</div>\n  @if (youtube()) {\n    <iframe [src]=\"videoUrl()\" frameborder=\"0\" allowfullscreen class=\"w-full aspect-video\"></iframe>\n  } @else {\n    <video controls #videoContainer [src]=\"video().url\" class=\"w-full aspect-video\" [poster]=\"video().thumbnail\">\n      <!-- <source [src]=\"video().url\" type=\"video/mp4\" /> -->\n    </video>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyVideoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyVideoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-video', imports: [CommonModule], template: "<div class=\"\">\n  <div class=\"text-2xl font-bold py-4\" i18n>Videos</div>\n  @if (youtube()) {\n    <iframe [src]=\"videoUrl()\" frameborder=\"0\" allowfullscreen class=\"w-full aspect-video\"></iframe>\n  } @else {\n    <video controls #videoContainer [src]=\"video().url\" class=\"w-full aspect-video\" [poster]=\"video().thumbnail\">\n      <!-- <source [src]=\"video().url\" type=\"video/mp4\" /> -->\n    </video>\n  }\n</div>\n" }]
         }] });
@@ -1316,10 +1571,10 @@ class PropertyActionContactComponent {
     onEmailAgent(property) {
         this.emailAgent.emit(property);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyActionContactComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.2", type: PropertyActionContactComponent, isStandalone: true, selector: "rolatech-property-action-contact", inputs: { email: { classPropertyName: "email", publicName: "email", isSignal: true, isRequired: false, transformFunction: null }, phone: { classPropertyName: "phone", publicName: "phone", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { callAgent: "callAgent", emailAgent: "emailAgent" }, viewQueries: [{ propertyName: "btnRef", first: true, predicate: ["btnEl"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<a\n  mat-stroked-button\n  class=\"w-full\"\n  #btnEl\n  [matMenuTriggerFor]=\"callMenu\"\n  [matMenuTriggerData]=\"{ width: btnRef()?.nativeElement.offsetWidth }\"\n  (click)=\"onCallAgent()\"\n>\n  <span i18n>Ask a question</span>\n</a>\n<mat-menu #callMenu=\"matMenu\" [overlapTrigger]=\"false\" class=\"custom-menu-panel\">\n  <ng-template matMenuContent let-width=\"width\">\n    <div class=\"menu-content\" [ngStyle]=\"{ width: width + 'px' }\">\n      <a mat-menu-item href=\"mailto:hello@gmail.com\">\n        <span class=\"flex items-center\">\n          <span class=\"flex items-center\">\n            <mat-icon class=\"mr-3\">email</mat-icon>\n          </span>\n          <span i18n>Email</span>\n        </span>\n        <span class=\"pl-9\" i18n>{{ email() }}</span>\n      </a>\n      <hr />\n      <a mat-menu-item [href]=\"'https://wa.me/' + phone()\" target=\"_blank\">\n        <span class=\"flex items-center\">\n          <span class=\"flex items-center\">\n            <mat-icon class=\"mr-3\">call</mat-icon>\n          </span>\n          <span i18n>WhatsApp</span>\n        </span>\n        <span class=\"pl-9\" i18n>{{ phone() }}</span>\n      </a>\n    </div>\n  </ng-template>\n</mat-menu>\n", styles: [".mat-mdc-menu-panel,.custom-menu-panel{max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyActionContactComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.4", type: PropertyActionContactComponent, isStandalone: true, selector: "rolatech-property-action-contact", inputs: { email: { classPropertyName: "email", publicName: "email", isSignal: true, isRequired: false, transformFunction: null }, phone: { classPropertyName: "phone", publicName: "phone", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { callAgent: "callAgent", emailAgent: "emailAgent" }, viewQueries: [{ propertyName: "btnRef", first: true, predicate: ["btnEl"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<a\n  mat-stroked-button\n  class=\"w-full\"\n  #btnEl\n  [matMenuTriggerFor]=\"callMenu\"\n  [matMenuTriggerData]=\"{ width: btnRef()?.nativeElement.offsetWidth }\"\n  (click)=\"onCallAgent()\"\n>\n  <span i18n>Ask a question</span>\n</a>\n<mat-menu #callMenu=\"matMenu\" [overlapTrigger]=\"false\" class=\"custom-menu-panel\">\n  <ng-template matMenuContent let-width=\"width\">\n    <div class=\"menu-content\" [ngStyle]=\"{ width: width + 'px' }\">\n      <a mat-menu-item href=\"mailto:hello@gmail.com\">\n        <span class=\"flex items-center\">\n          <span class=\"flex items-center\">\n            <mat-icon class=\"mr-3\">email</mat-icon>\n          </span>\n          <span i18n>Email</span>\n        </span>\n        <span class=\"pl-9\" i18n>{{ email() }}</span>\n      </a>\n      <hr />\n      <a mat-menu-item [href]=\"'https://wa.me/' + phone()\" target=\"_blank\">\n        <span class=\"flex items-center\">\n          <span class=\"flex items-center\">\n            <mat-icon class=\"mr-3\">call</mat-icon>\n          </span>\n          <span i18n>WhatsApp</span>\n        </span>\n        <span class=\"pl-9\" i18n>{{ phone() }}</span>\n      </a>\n    </div>\n  </ng-template>\n</mat-menu>\n", styles: [".mat-mdc-menu-panel,.custom-menu-panel{max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyActionContactComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyActionContactComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-action-contact', imports: [CommonModule, MatButtonModule, MatIconModule, MatMenuModule], encapsulation: ViewEncapsulation.None, template: "<a\n  mat-stroked-button\n  class=\"w-full\"\n  #btnEl\n  [matMenuTriggerFor]=\"callMenu\"\n  [matMenuTriggerData]=\"{ width: btnRef()?.nativeElement.offsetWidth }\"\n  (click)=\"onCallAgent()\"\n>\n  <span i18n>Ask a question</span>\n</a>\n<mat-menu #callMenu=\"matMenu\" [overlapTrigger]=\"false\" class=\"custom-menu-panel\">\n  <ng-template matMenuContent let-width=\"width\">\n    <div class=\"menu-content\" [ngStyle]=\"{ width: width + 'px' }\">\n      <a mat-menu-item href=\"mailto:hello@gmail.com\">\n        <span class=\"flex items-center\">\n          <span class=\"flex items-center\">\n            <mat-icon class=\"mr-3\">email</mat-icon>\n          </span>\n          <span i18n>Email</span>\n        </span>\n        <span class=\"pl-9\" i18n>{{ email() }}</span>\n      </a>\n      <hr />\n      <a mat-menu-item [href]=\"'https://wa.me/' + phone()\" target=\"_blank\">\n        <span class=\"flex items-center\">\n          <span class=\"flex items-center\">\n            <mat-icon class=\"mr-3\">call</mat-icon>\n          </span>\n          <span i18n>WhatsApp</span>\n        </span>\n        <span class=\"pl-9\" i18n>{{ phone() }}</span>\n      </a>\n    </div>\n  </ng-template>\n</mat-menu>\n", styles: [".mat-mdc-menu-panel,.custom-menu-panel{max-width:100%}\n"] }]
         }] });
@@ -1329,28 +1584,33 @@ class PropertyAgentRenderer {
     avatar = input(...(ngDevMode ? [undefined, { debugName: "avatar" }] : []));
     username = input(...(ngDevMode ? [undefined, { debugName: "username" }] : []));
     subtitle = input(...(ngDevMode ? [undefined, { debugName: "subtitle" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyAgentRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyAgentRenderer, isStandalone: true, selector: "rolatech-property-agent-renderer", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, username: { classPropertyName: "username", publicName: "username", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col\">\n  <div class=\"flex flex-row items-center py-3\">\n    <div class=\"flex mr-3 gap-2 items-center\">\n      @if (avatar()) {\n      <div class=\"cursor-pointer\" [routerLink]=\"['/', '@' + username()]\">\n        <img [src]=\"avatar()\" class=\"w-14 h-14 rounded-full\" alt />\n      </div>\n      } @else {\n      <div class=\"w-14 h-14 rounded-full bg-[--rt-brand-color]\"></div>\n      }\n      <div class=\"flex flex-col\">\n        <div class=\"flex items-center text-lg font-bold cursor-pointer\">\n          <a [routerLink]=\"['/', '@' + username()]\">\n            <span>{{ name() }}</span>\n          </a>\n          <mat-icon class=\"verified-icon\">verified</mat-icon>\n        </div>\n        <div class=\"text-lg font-bold text-[--rt-brand-color]\">{{ subtitle() }}</div>\n      </div>\n    </div>\n  </div>\n  <div class=\"text-sm opacity-70\">This listing is verified and managed by an Primecase agent</div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyAgentRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyAgentRenderer, isStandalone: true, selector: "rolatech-property-agent-renderer", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, username: { classPropertyName: "username", publicName: "username", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col\">\n  <div class=\"flex flex-row items-center py-3\">\n    <div class=\"flex mr-3 gap-2 items-center\">\n      @if (avatar()) {\n      <div class=\"cursor-pointer\" [routerLink]=\"['/', '@' + username()]\">\n        <img [src]=\"avatar()\" class=\"w-14 h-14 rounded-full\" alt />\n      </div>\n      } @else {\n      <div class=\"w-14 h-14 rounded-full bg-[--rt-brand-color]\"></div>\n      }\n      <div class=\"flex flex-col\">\n        <div class=\"flex items-center text-lg font-bold cursor-pointer\">\n          <a [routerLink]=\"['/', '@' + username()]\">\n            <span>{{ name() }}</span>\n          </a>\n          <mat-icon class=\"verified-icon\">verified</mat-icon>\n        </div>\n        <div class=\"text-lg font-bold text-[--rt-brand-color]\">{{ subtitle() }}</div>\n      </div>\n    </div>\n  </div>\n  <div class=\"text-sm opacity-70\">This listing is verified and managed by an Primecase agent</div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyAgentRenderer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyAgentRenderer, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-agent-renderer', imports: [AngularCommonModule, MatIconModule], template: "<div class=\"flex flex-col\">\n  <div class=\"flex flex-row items-center py-3\">\n    <div class=\"flex mr-3 gap-2 items-center\">\n      @if (avatar()) {\n      <div class=\"cursor-pointer\" [routerLink]=\"['/', '@' + username()]\">\n        <img [src]=\"avatar()\" class=\"w-14 h-14 rounded-full\" alt />\n      </div>\n      } @else {\n      <div class=\"w-14 h-14 rounded-full bg-[--rt-brand-color]\"></div>\n      }\n      <div class=\"flex flex-col\">\n        <div class=\"flex items-center text-lg font-bold cursor-pointer\">\n          <a [routerLink]=\"['/', '@' + username()]\">\n            <span>{{ name() }}</span>\n          </a>\n          <mat-icon class=\"verified-icon\">verified</mat-icon>\n        </div>\n        <div class=\"text-lg font-bold text-[--rt-brand-color]\">{{ subtitle() }}</div>\n      </div>\n    </div>\n  </div>\n  <div class=\"text-sm opacity-70\">This listing is verified and managed by an Primecase agent</div>\n</div>\n" }]
         }] });
 
 class PropertyHighlights {
     highlights = input.required(...(ngDevMode ? [{ debugName: "highlights" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyHighlights, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyHighlights, isStandalone: true, selector: "rolatech-property-highlights", inputs: { highlights: { classPropertyName: "highlights", publicName: "highlights", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"\">\n  <div class=\"text-2xl font-bold py-3\" i18n>Highlights</div>\n  <div class=\"flex flex-col flex-wrap\">\n    @for (item of highlights(); track $index) {\n    <div class=\"flex items-center py-1\">\n      <!-- <mat-icon>check</mat-icon> -->\n      <span>{{ item }}</span>\n    </div>\n    }\n  </div>\n</div>\n", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyHighlights, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyHighlights, isStandalone: true, selector: "rolatech-property-highlights", inputs: { highlights: { classPropertyName: "highlights", publicName: "highlights", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"\">\n  <div class=\"text-2xl font-bold py-3\" i18n>Highlights</div>\n  <div class=\"flex flex-col flex-wrap\">\n    @for (item of highlights(); track $index) {\n    <div class=\"flex items-center py-1\">\n      <!-- <mat-icon>check</mat-icon> -->\n      <span>{{ item }}</span>\n    </div>\n    }\n  </div>\n</div>\n", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyHighlights, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyHighlights, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-highlights', template: "<div class=\"\">\n  <div class=\"text-2xl font-bold py-3\" i18n>Highlights</div>\n  <div class=\"flex flex-col flex-wrap\">\n    @for (item of highlights(); track $index) {\n    <div class=\"flex items-center py-1\">\n      <!-- <mat-icon>check</mat-icon> -->\n      <span>{{ item }}</span>\n    </div>\n    }\n  </div>\n</div>\n" }]
         }] });
 
 const BANDS = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
 const RANGES = {
-    A: '(92+)', B: '(81-91)', C: '(69-80)', D: '(55-68)',
-    E: '(39-54)', F: '(21-38)', G: '(1-20)',
+    A: '(92+)',
+    B: '(81-91)',
+    C: '(69-80)',
+    D: '(55-68)',
+    E: '(39-54)',
+    F: '(21-38)',
+    G: '(1-20)',
 };
 const COLORS = {
     A: '#0E9F6E', // green
@@ -1359,7 +1619,7 @@ const COLORS = {
     D: '#F59E0B',
     E: '#F97316',
     F: '#FB7185',
-    G: '#DC2626'
+    G: '#DC2626',
 };
 function bandFromScore(s) {
     const v = s ?? 0;
@@ -1405,7 +1665,9 @@ class EpcChart {
     potentialColX = this.currentColX + this.colGap;
     // captions
     topCaptionY = this.topY - 22;
-    get bottomCaptionY() { return this.topY + this.rows * (this.rowH + this.gapY) + 22; }
+    get bottomCaptionY() {
+        return this.topY + this.rows * (this.rowH + this.gapY) + 22;
+    }
     // overall height
     get height() {
         return this.bottomCaptionY + 56;
@@ -1414,16 +1676,24 @@ class EpcChart {
     bands = BANDS;
     RANGES = RANGES;
     COLORS = COLORS;
-    get rangeX() { return this.leftPadding; }
-    get maxW() { return this.wedgeMinW + 6 * this.wedgeDelta; } // width of G (widest)
+    get rangeX() {
+        return this.leftPadding;
+    }
+    get maxW() {
+        return this.wedgeMinW + 6 * this.wedgeDelta;
+    } // width of G (widest)
     // helpers
-    wedgeX(i) { return this.leftPadding + this.rangeColW + 12; }
+    wedgeX(i) {
+        return this.leftPadding + this.rangeColW + 12;
+    }
     // private wedgeW(i: number) { return this.wedgeMaxW - (i * this.wedgeDelta); }
     wedgeW(i) {
         // A..G => 0..6 → widths increase downward
         return this.wedgeMinW + i * this.wedgeDelta;
     }
-    rowY(i) { return this.topY + i * (this.rowH + this.gapY); }
+    rowY(i) {
+        return this.topY + i * (this.rowH + this.gapY);
+    }
     wedgePoints1(i) {
         const x = this.wedgeX(i), y = this.rowY(i), w = this.wedgeW(i), h = this.rowH, c = this.cut;
         // rectangle with right chevron tip
@@ -1452,10 +1722,16 @@ class EpcChart {
         const y = this.rowY(rowIndex) + (this.rowH - this.arrowH) / 2;
         return Math.max(y, this.topY); // safety
     }
-    clampScore(s) { return Math.max(1, Math.min(100, Math.round(s))); }
+    clampScore(s) {
+        return Math.max(1, Math.min(100, Math.round(s)));
+    }
     // add below COLORS, bandFromScore...
-    colorForBand(b) { return COLORS[b]; }
-    colorForScore(s) { return this.colorForBand(bandFromScore(s)); }
+    colorForBand(b) {
+        return COLORS[b];
+    }
+    colorForScore(s) {
+        return this.colorForBand(bandFromScore(s));
+    }
     // simple contrast so numbers stay readable
     textColorForBand(b) {
         const hex = this.colorForBand(b).replace('#', '');
@@ -1465,21 +1741,23 @@ class EpcChart {
         const yiq = (r * 299 + g * 587 + bl * 114) / 1000;
         return yiq >= 170 ? '#111' : '#fff'; // light bg → dark text, else white
     }
-    textColorForScore(s) { return this.textColorForBand(bandFromScore(s)); }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: EpcChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: EpcChart, isStandalone: true, selector: "rolatech-epc-chart", inputs: { currentScore: { classPropertyName: "currentScore", publicName: "currentScore", isSignal: true, isRequired: false, transformFunction: null }, potentialScore: { classPropertyName: "potentialScore", publicName: "potentialScore", isSignal: true, isRequired: false, transformFunction: null }, showCaptions: { classPropertyName: "showCaptions", publicName: "showCaptions", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "w-full" }, ngImport: i0, template: "<svg [attr.viewBox]=\"'0 0 ' + width + ' ' + height\" class=\"w-full h-auto\">\n  <!-- outer border -->\n  <rect x=\"0\" y=\"0\" [attr.width]=\"width\" [attr.height]=\"height\" fill=\"none\" stroke=\"var(--rt-text-primary)\" stroke-width=\"2\" />\n\n  <!-- header row -->\n  <text [attr.x]=\"leftPadding\" [attr.y]=\"headerY\" font-weight=\"700\" font-size=\"16\" fill=\"var(--rt-text-primary)\">\n    Energy Rating\n  </text>\n  <text\n    [attr.x]=\"currentColX + arrowW/2\"\n    [attr.y]=\"headerY\"\n    text-anchor=\"middle\"\n    font-weight=\"700\"\n    font-size=\"16\"\n    fill=\"var(--rt-text-primary)\"\n  >\n    Current\n  </text>\n  <text\n    [attr.x]=\"potentialColX + arrowW/2\"\n    [attr.y]=\"headerY\"\n    text-anchor=\"middle\"\n    font-weight=\"700\"\n    font-size=\"16\"\n    fill=\"var(--rt-text-primary)\"\n  >\n    Potential\n  </text>\n  <line\n    x1=\"0\"\n    [attr.y1]=\"headerY+10\"\n    [attr.x2]=\"width - 16\"\n    [attr.y2]=\"headerY+10\"\n    stroke=\"var(--rt-text-primary)\"\n    stroke-width=\"2\"\n  />\n\n  <!-- top/bottom captions -->\n  @if (showCaptions()) {\n  <text [attr.x]=\"leftPadding\" [attr.y]=\"topCaptionY\" fill=\"#9CA3AF\" font-size=\"20\">\n    very energy efficient - lower running costs\n  </text>\n  <text [attr.x]=\"leftPadding\" [attr.y]=\"bottomCaptionY\" fill=\"#9CA3AF\" font-size=\"20\">\n    not energy efficient - higher running costs\n  </text>\n  }\n\n  <!-- Wedges (A..G) -->\n  @for (b of bands; track b; let i = $index) {\n  <!-- range text column -->\n  <text [attr.x]=\"rangeX\" [attr.y]=\"rowY(i) + rowH/2 + 5\" fill=\"#6B7280\" font-size=\"16\">{{ RANGES[b] }}</text>\n\n  <!-- colored wedge -->\n  <polygon [attr.points]=\"wedgePoints(i)\" [attr.fill]=\"COLORS[b]\" stroke=\"none\" />\n\n  <!-- band letter -->\n  <text\n    [attr.x]=\"wedgeLetterX(i)\"\n    [attr.y]=\"rowY(i) + rowH/2 + 8\"\n    fill=\"white\"\n    font-size=\"28\"\n    font-weight=\"700\"\n    text-anchor=\"end\"\n  >\n    {{ b }}\n  </text>\n  }\n\n  <!-- Current arrow badge -->\n  @if (currentScore() !== null) {\n  <g [attr.transform]=\"'translate(' + currentColX + ',' + arrowY(currentScore()!) + ')'\">\n    <polygon [attr.points]=\"arrowPoints()\" [attr.fill]=\"colorForScore(currentScore()!)\"></polygon>\n    <text\n      [attr.x]=\"arrowW/2 + 6\"\n      [attr.y]=\"arrowH/2 + 9\"\n      text-anchor=\"middle\"\n      font-size=\"24\"\n      font-weight=\"800\"\n      [attr.fill]=\"textColorForScore(currentScore()!)\"\n    >\n      {{ clampScore(currentScore()!) }}\n    </text>\n    <!-- underline (optional) -->\n    <rect\n      [attr.x]=\"arrowW/2 - 12\"\n      [attr.y]=\"arrowH/2 + 12\"\n      width=\"36\"\n      height=\"3\"\n      [attr.fill]=\"textColorForScore(currentScore()!)\"\n      opacity=\"0.8\"\n    />\n  </g>\n  }\n\n  <!-- Potential arrow badge -->\n  @if (potentialScore() !== null) {\n  <g [attr.transform]=\"'translate(' + potentialColX + ',' + arrowY(potentialScore()!) + ')'\">\n    <polygon [attr.points]=\"arrowPoints()\" [attr.fill]=\"colorForScore(potentialScore()!)\"></polygon>\n    <text\n      [attr.x]=\"arrowW/2 + 6\"\n      [attr.y]=\"arrowH/2 + 9\"\n      text-anchor=\"middle\"\n      font-size=\"24\"\n      font-weight=\"800\"\n      [attr.fill]=\"textColorForScore(potentialScore()!)\"\n    >\n      {{ clampScore(potentialScore()!) }}\n    </text>\n  </g>\n  }\n</svg>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    textColorForScore(s) {
+        return this.textColorForBand(bandFromScore(s));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: EpcChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: EpcChart, isStandalone: true, selector: "rolatech-epc-chart", inputs: { currentScore: { classPropertyName: "currentScore", publicName: "currentScore", isSignal: true, isRequired: false, transformFunction: null }, potentialScore: { classPropertyName: "potentialScore", publicName: "potentialScore", isSignal: true, isRequired: false, transformFunction: null }, showCaptions: { classPropertyName: "showCaptions", publicName: "showCaptions", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "w-full" }, ngImport: i0, template: "<svg [attr.viewBox]=\"'0 0 ' + width + ' ' + height\" class=\"w-full h-auto\">\n  <!-- outer border -->\n  <rect x=\"0\" y=\"0\" [attr.width]=\"width\" [attr.height]=\"height\" fill=\"none\" stroke=\"var(--rt-text-primary)\" stroke-width=\"2\" />\n\n  <!-- header row -->\n  <text [attr.x]=\"leftPadding\" [attr.y]=\"headerY\" font-weight=\"700\" font-size=\"16\" fill=\"var(--rt-text-primary)\">\n    Energy Rating\n  </text>\n  <text\n    [attr.x]=\"currentColX + arrowW/2\"\n    [attr.y]=\"headerY\"\n    text-anchor=\"middle\"\n    font-weight=\"700\"\n    font-size=\"16\"\n    fill=\"var(--rt-text-primary)\"\n  >\n    Current\n  </text>\n  <text\n    [attr.x]=\"potentialColX + arrowW/2\"\n    [attr.y]=\"headerY\"\n    text-anchor=\"middle\"\n    font-weight=\"700\"\n    font-size=\"16\"\n    fill=\"var(--rt-text-primary)\"\n  >\n    Potential\n  </text>\n  <line\n    x1=\"0\"\n    [attr.y1]=\"headerY+10\"\n    [attr.x2]=\"width - 16\"\n    [attr.y2]=\"headerY+10\"\n    stroke=\"var(--rt-text-primary)\"\n    stroke-width=\"2\"\n  />\n\n  <!-- top/bottom captions -->\n  @if (showCaptions()) {\n  <text [attr.x]=\"leftPadding\" [attr.y]=\"topCaptionY\" fill=\"#9CA3AF\" font-size=\"20\">\n    very energy efficient - lower running costs\n  </text>\n  <text [attr.x]=\"leftPadding\" [attr.y]=\"bottomCaptionY\" fill=\"#9CA3AF\" font-size=\"20\">\n    not energy efficient - higher running costs\n  </text>\n  }\n\n  <!-- Wedges (A..G) -->\n  @for (b of bands; track b; let i = $index) {\n  <!-- range text column -->\n  <text [attr.x]=\"rangeX\" [attr.y]=\"rowY(i) + rowH/2 + 5\" fill=\"#6B7280\" font-size=\"16\">{{ RANGES[b] }}</text>\n\n  <!-- colored wedge -->\n  <polygon [attr.points]=\"wedgePoints(i)\" [attr.fill]=\"COLORS[b]\" stroke=\"none\" />\n\n  <!-- band letter -->\n  <text\n    [attr.x]=\"wedgeLetterX(i)\"\n    [attr.y]=\"rowY(i) + rowH/2 + 8\"\n    fill=\"white\"\n    font-size=\"28\"\n    font-weight=\"700\"\n    text-anchor=\"end\"\n  >\n    {{ b }}\n  </text>\n  }\n\n  <!-- Current arrow badge -->\n  @if (currentScore() !== null) {\n  <g [attr.transform]=\"'translate(' + currentColX + ',' + arrowY(currentScore()!) + ')'\">\n    <polygon [attr.points]=\"arrowPoints()\" [attr.fill]=\"colorForScore(currentScore()!)\"></polygon>\n    <text\n      [attr.x]=\"arrowW/2 + 6\"\n      [attr.y]=\"arrowH/2 + 9\"\n      text-anchor=\"middle\"\n      font-size=\"24\"\n      font-weight=\"800\"\n      [attr.fill]=\"textColorForScore(currentScore()!)\"\n    >\n      {{ clampScore(currentScore()!) }}\n    </text>\n    <!-- underline (optional) -->\n    <rect\n      [attr.x]=\"arrowW/2 - 12\"\n      [attr.y]=\"arrowH/2 + 12\"\n      width=\"36\"\n      height=\"3\"\n      [attr.fill]=\"textColorForScore(currentScore()!)\"\n      opacity=\"0.8\"\n    />\n  </g>\n  }\n\n  <!-- Potential arrow badge -->\n  @if (potentialScore() !== null) {\n  <g [attr.transform]=\"'translate(' + potentialColX + ',' + arrowY(potentialScore()!) + ')'\">\n    <polygon [attr.points]=\"arrowPoints()\" [attr.fill]=\"colorForScore(potentialScore()!)\"></polygon>\n    <text\n      [attr.x]=\"arrowW/2 + 6\"\n      [attr.y]=\"arrowH/2 + 9\"\n      text-anchor=\"middle\"\n      font-size=\"24\"\n      font-weight=\"800\"\n      [attr.fill]=\"textColorForScore(potentialScore()!)\"\n    >\n      {{ clampScore(potentialScore()!) }}\n    </text>\n  </g>\n  }\n</svg>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: EpcChart, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: EpcChart, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-epc-chart', imports: [CommonModule], host: { class: 'w-full' }, template: "<svg [attr.viewBox]=\"'0 0 ' + width + ' ' + height\" class=\"w-full h-auto\">\n  <!-- outer border -->\n  <rect x=\"0\" y=\"0\" [attr.width]=\"width\" [attr.height]=\"height\" fill=\"none\" stroke=\"var(--rt-text-primary)\" stroke-width=\"2\" />\n\n  <!-- header row -->\n  <text [attr.x]=\"leftPadding\" [attr.y]=\"headerY\" font-weight=\"700\" font-size=\"16\" fill=\"var(--rt-text-primary)\">\n    Energy Rating\n  </text>\n  <text\n    [attr.x]=\"currentColX + arrowW/2\"\n    [attr.y]=\"headerY\"\n    text-anchor=\"middle\"\n    font-weight=\"700\"\n    font-size=\"16\"\n    fill=\"var(--rt-text-primary)\"\n  >\n    Current\n  </text>\n  <text\n    [attr.x]=\"potentialColX + arrowW/2\"\n    [attr.y]=\"headerY\"\n    text-anchor=\"middle\"\n    font-weight=\"700\"\n    font-size=\"16\"\n    fill=\"var(--rt-text-primary)\"\n  >\n    Potential\n  </text>\n  <line\n    x1=\"0\"\n    [attr.y1]=\"headerY+10\"\n    [attr.x2]=\"width - 16\"\n    [attr.y2]=\"headerY+10\"\n    stroke=\"var(--rt-text-primary)\"\n    stroke-width=\"2\"\n  />\n\n  <!-- top/bottom captions -->\n  @if (showCaptions()) {\n  <text [attr.x]=\"leftPadding\" [attr.y]=\"topCaptionY\" fill=\"#9CA3AF\" font-size=\"20\">\n    very energy efficient - lower running costs\n  </text>\n  <text [attr.x]=\"leftPadding\" [attr.y]=\"bottomCaptionY\" fill=\"#9CA3AF\" font-size=\"20\">\n    not energy efficient - higher running costs\n  </text>\n  }\n\n  <!-- Wedges (A..G) -->\n  @for (b of bands; track b; let i = $index) {\n  <!-- range text column -->\n  <text [attr.x]=\"rangeX\" [attr.y]=\"rowY(i) + rowH/2 + 5\" fill=\"#6B7280\" font-size=\"16\">{{ RANGES[b] }}</text>\n\n  <!-- colored wedge -->\n  <polygon [attr.points]=\"wedgePoints(i)\" [attr.fill]=\"COLORS[b]\" stroke=\"none\" />\n\n  <!-- band letter -->\n  <text\n    [attr.x]=\"wedgeLetterX(i)\"\n    [attr.y]=\"rowY(i) + rowH/2 + 8\"\n    fill=\"white\"\n    font-size=\"28\"\n    font-weight=\"700\"\n    text-anchor=\"end\"\n  >\n    {{ b }}\n  </text>\n  }\n\n  <!-- Current arrow badge -->\n  @if (currentScore() !== null) {\n  <g [attr.transform]=\"'translate(' + currentColX + ',' + arrowY(currentScore()!) + ')'\">\n    <polygon [attr.points]=\"arrowPoints()\" [attr.fill]=\"colorForScore(currentScore()!)\"></polygon>\n    <text\n      [attr.x]=\"arrowW/2 + 6\"\n      [attr.y]=\"arrowH/2 + 9\"\n      text-anchor=\"middle\"\n      font-size=\"24\"\n      font-weight=\"800\"\n      [attr.fill]=\"textColorForScore(currentScore()!)\"\n    >\n      {{ clampScore(currentScore()!) }}\n    </text>\n    <!-- underline (optional) -->\n    <rect\n      [attr.x]=\"arrowW/2 - 12\"\n      [attr.y]=\"arrowH/2 + 12\"\n      width=\"36\"\n      height=\"3\"\n      [attr.fill]=\"textColorForScore(currentScore()!)\"\n      opacity=\"0.8\"\n    />\n  </g>\n  }\n\n  <!-- Potential arrow badge -->\n  @if (potentialScore() !== null) {\n  <g [attr.transform]=\"'translate(' + potentialColX + ',' + arrowY(potentialScore()!) + ')'\">\n    <polygon [attr.points]=\"arrowPoints()\" [attr.fill]=\"colorForScore(potentialScore()!)\"></polygon>\n    <text\n      [attr.x]=\"arrowW/2 + 6\"\n      [attr.y]=\"arrowH/2 + 9\"\n      text-anchor=\"middle\"\n      font-size=\"24\"\n      font-weight=\"800\"\n      [attr.fill]=\"textColorForScore(potentialScore()!)\"\n    >\n      {{ clampScore(potentialScore()!) }}\n    </text>\n  </g>\n  }\n</svg>\n" }]
         }] });
 
 class PropertyEpc {
     epc = input.required(...(ngDevMode ? [{ debugName: "epc" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyEpc, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.2", type: PropertyEpc, isStandalone: true, selector: "rolatech-property-epc", inputs: { epc: { classPropertyName: "epc", publicName: "epc", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"w-full\">\n  <div class=\"text-2xl font-bold py-3\" i18n>EPC</div>\n  <div class=\"flex flex-row items-center font-thin text-sm\">\n    <rolatech-epc-chart\n      [currentScore]=\"epc().currentScore\"\n      [potentialScore]=\"epc().potentialScore\"\n      [showCaptions]=\"true\"\n    ></rolatech-epc-chart>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: EpcChart, selector: "rolatech-epc-chart", inputs: ["currentScore", "potentialScore", "showCaptions"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyEpc, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", type: PropertyEpc, isStandalone: true, selector: "rolatech-property-epc", inputs: { epc: { classPropertyName: "epc", publicName: "epc", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"w-full\">\n  <div class=\"text-2xl font-bold py-3\" i18n>EPC</div>\n  <div class=\"flex flex-row items-center font-thin text-sm\">\n    <rolatech-epc-chart\n      [currentScore]=\"epc().currentScore\"\n      [potentialScore]=\"epc().potentialScore\"\n      [showCaptions]=\"true\"\n    ></rolatech-epc-chart>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: EpcChart, selector: "rolatech-epc-chart", inputs: ["currentScore", "potentialScore", "showCaptions"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyEpc, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyEpc, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-epc', imports: [EpcChart], template: "<div class=\"w-full\">\n  <div class=\"text-2xl font-bold py-3\" i18n>EPC</div>\n  <div class=\"flex flex-row items-center font-thin text-sm\">\n    <rolatech-epc-chart\n      [currentScore]=\"epc().currentScore\"\n      [potentialScore]=\"epc().potentialScore\"\n      [showCaptions]=\"true\"\n    ></rolatech-epc-chart>\n  </div>\n</div>\n" }]
         }] });
@@ -1488,6 +1766,7 @@ class PropertyDetailsComponent extends BaseComponent {
     authService = inject(AuthService);
     authUserService = inject(AuthUserService);
     propertyService = inject(PropertyService);
+    propertyHighlightsService = inject(PropertyHighlightsService);
     timezoneService = inject(TimeZoneService);
     authenticated = this.authService.authenticated;
     property;
@@ -1511,10 +1790,10 @@ class PropertyDetailsComponent extends BaseComponent {
         if (!this.property.videos)
             return [];
         if (this.timezone() === 'Asia/Shanghai') {
-            return this.property.videos.filter(v => v.provider === PropertyVideoProvider.COS);
+            return this.property.videos.filter((v) => v.provider === PropertyVideoProvider.COS);
         }
         else {
-            return this.property.videos.filter(v => v.provider === PropertyVideoProvider.YOUTUBE);
+            return this.property.videos.filter((v) => v.provider === PropertyVideoProvider.YOUTUBE);
         }
     }
     // results: any[] = [];
@@ -1528,8 +1807,8 @@ class PropertyDetailsComponent extends BaseComponent {
     }
     ngOnInit() {
         this.getProperty();
-        this.findFeatures();
-        this.findHighlights();
+        this.getFeatures();
+        this.getHighlights();
         this.getEpc();
         // this.timezoneService.getTimeZoneFromApi().subscribe({
         //   next: res => {
@@ -1544,7 +1823,7 @@ class PropertyDetailsComponent extends BaseComponent {
             next: (res) => {
                 this.property = res.data;
                 const firstPart = this.property.description.split('<br/>')[0].trim();
-                const arr = firstPart.split('|').map(s => s.trim());
+                const arr = firstPart.split('|').map((s) => s.trim());
                 if (this.property.variants) {
                     this.variants = this.property.variants;
                     this.selectedVariant = this.variants[0];
@@ -1577,25 +1856,25 @@ class PropertyDetailsComponent extends BaseComponent {
             },
         });
     }
-    findFeatures() {
-        this.propertyService.findFeatures(this.id).subscribe({
+    getFeatures() {
+        this.propertyService.getFeatures(this.id).subscribe({
             next: (res) => {
                 this.features = res.data || [];
-            }
+            },
         });
     }
-    findHighlights() {
-        this.propertyService.getHighlights(this.id).subscribe({
+    getHighlights() {
+        this.propertyHighlightsService.getHighlights(this.id).subscribe({
             next: (res) => {
                 this.highlights = res.data || [];
-            }
+            },
         });
     }
     getEpc() {
         this.propertyService.getEpc(this.id).subscribe({
             next: (res) => {
                 this.epc = res.data;
-            }
+            },
         });
     }
     wishListCheck() {
@@ -1675,10 +1954,10 @@ class PropertyDetailsComponent extends BaseComponent {
         this.selectedVariant = matchingVariant;
         // const updatedCriteria = matchingVariant ? updateCriteriaFromVariant(matchingVariant) : [];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyDetailsComponent, isStandalone: true, selector: "rolatech-property-details", usesInheritance: true, ngImport: i0, template: "@if (property) {\n  <rolatech-container>\n    <div class=\"flex flex-col w-full\">\n      <div class=\"py-3\">\n        <rolatech-property-media [media]=\"property.media\"></rolatech-property-media>\n      </div>\n      <div class=\"flex flex-col md:flex-row gap-3 w-full\">\n        <div class=\"w-full md:w-2/3\">\n          <rolatech-property-info [property]=\"property\" (wish)=\"onWish($event)\" [inWishList]=\"inWishList\">\n          </rolatech-property-info>\n          <!-- <rolatech-property-agent-renderer\n            [name]=\"fullname\"\n            [avatar]=\"user?.avatar\"\n            [username]=\"username\"\n          ></rolatech-property-agent-renderer> -->\n          <mat-divider></mat-divider>\n\n          @if (features.length > 0) {\n            <rolatech-property-features [features]=\"features\"></rolatech-property-features>\n          }\n          @if (highlights.length > 0) {\n            <rolatech-property-highlights [highlights]=\"highlights\"></rolatech-property-highlights>\n          }\n          <!-- <rolatech-property-epc [epc]=\"epc\"></rolatech-property-epc> -->\n          <rolatech-property-location [location]=\"property.location\"></rolatech-property-location>\n          @if (videos && videos.length > 0) {\n            @for (item of videos; track $index) {\n              <rolatech-property-video [video]=\"item\"></rolatech-property-video>\n            }\n          }\n          @if (epc && epc.currentScore) {\n            <rolatech-property-epc [epc]=\"epc\"></rolatech-property-epc>\n          }\n          <div class=\"flex flex-col\">\n            <div class=\"text-2xl font-bold pt-3\" i18n>Sections</div>\n            @for (section of property.sections; track $index) {\n              <rolatech-property-section [section]=\"section\"></rolatech-property-section>\n            }\n            <rolatech-comments [itemId]=\"property.id\"></rolatech-comments>\n          </div>\n        </div>\n        <div class=\"w-full md:w-1/3\">\n          <rolatech-property-agent-renderer\n            [name]=\"fullname\"\n            [avatar]=\"user?.avatar\"\n            [username]=\"username\"\n          ></rolatech-property-agent-renderer>\n          <rolatech-property-pricing (wish)=\"onWish($event)\" [property]=\"property\"></rolatech-property-pricing>\n          <rolatech-property-actions\n            [property]=\"property\"\n            (offer)=\"onOffer($event)\"\n            (deposit)=\"onOffer($event)\"\n            (requestViewing)=\"onRequestViewing($event)\"\n          >\n            @if (user) {\n              <rolatech-property-action-contact [email]=\"user.email\" [phone]=\"user.phone\"></rolatech-property-action-contact>\n            }\n          </rolatech-property-actions>\n        </div>\n      </div>\n    </div>\n  </rolatech-container>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: PropertyInfoComponent, selector: "rolatech-property-info", inputs: ["property", "inWishList"], outputs: ["wish"] }, { kind: "component", type: PropertyMediaComponent, selector: "rolatech-property-media", inputs: ["media", "min"] }, { kind: "component", type: PropertyPricingComponent, selector: "rolatech-property-pricing", inputs: ["property", "price"] }, { kind: "component", type: PropertySectionComponent, selector: "rolatech-property-section", inputs: ["section", "user", "username"] }, { kind: "component", type: PropertyActionsComponent, selector: "rolatech-property-actions", inputs: ["property"], outputs: ["requestViewing", "offer", "deposit"] }, { kind: "component", type: CommentsComponent, selector: "rolatech-comments", inputs: ["itemId"] }, { kind: "component", type: PropertyAgentRenderer, selector: "rolatech-property-agent-renderer", inputs: ["name", "avatar", "username", "subtitle"] }, { kind: "component", type: PropertyLocationComponent, selector: "rolatech-property-location", inputs: ["location"] }, { kind: "component", type: PropertyFeaturesComponent, selector: "rolatech-property-features", inputs: ["features"] }, { kind: "component", type: PropertyVideoComponent, selector: "rolatech-property-video", inputs: ["video"] }, { kind: "component", type: PropertyActionContactComponent, selector: "rolatech-property-action-contact", inputs: ["email", "phone"], outputs: ["callAgent", "emailAgent"] }, { kind: "component", type: PropertyHighlights, selector: "rolatech-property-highlights", inputs: ["highlights"] }, { kind: "component", type: PropertyEpc, selector: "rolatech-property-epc", inputs: ["epc"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyDetailsComponent, isStandalone: true, selector: "rolatech-property-details", usesInheritance: true, ngImport: i0, template: "@if (property) {\n  <rolatech-container>\n    <div class=\"flex flex-col w-full\">\n      <div class=\"py-3\">\n        <rolatech-property-media [media]=\"property.media\"></rolatech-property-media>\n      </div>\n      <div class=\"flex flex-col md:flex-row gap-3 w-full\">\n        <div class=\"w-full md:w-2/3\">\n          <rolatech-property-info [property]=\"property\" (wish)=\"onWish($event)\" [inWishList]=\"inWishList\">\n          </rolatech-property-info>\n          <!-- <rolatech-property-agent-renderer\n            [name]=\"fullname\"\n            [avatar]=\"user?.avatar\"\n            [username]=\"username\"\n          ></rolatech-property-agent-renderer> -->\n          @if (features.length > 0) {\n            <rolatech-property-features [features]=\"features\"></rolatech-property-features>\n          }\n          @if (highlights.length > 0) {\n            <rolatech-property-highlights [highlights]=\"highlights\"></rolatech-property-highlights>\n          }\n          @if (property.location) {\n            <rolatech-property-location [location]=\"property.location\"></rolatech-property-location>\n          }\n          @if (videos && videos.length > 0) {\n            @for (item of videos; track $index) {\n              <rolatech-property-video [video]=\"item\"></rolatech-property-video>\n            }\n          }\n          @if (epc && epc.currentScore) {\n            <rolatech-property-epc [epc]=\"epc\"></rolatech-property-epc>\n          }\n          <div class=\"flex flex-col\">\n            <div class=\"text-2xl font-bold pt-3\" i18n>Sections</div>\n            @for (section of property.sections; track $index) {\n              <rolatech-property-section [section]=\"section\"></rolatech-property-section>\n            }\n            <rolatech-comments [itemId]=\"property.id\"></rolatech-comments>\n          </div>\n        </div>\n        <div class=\"w-full md:w-1/3\">\n          <rolatech-property-agent-renderer\n            [name]=\"fullname\"\n            [avatar]=\"user?.avatar\"\n            [username]=\"username\"\n          ></rolatech-property-agent-renderer>\n          <rolatech-property-pricing (wish)=\"onWish($event)\" [property]=\"property\"></rolatech-property-pricing>\n          <rolatech-property-actions\n            [property]=\"property\"\n            (offer)=\"onOffer($event)\"\n            (deposit)=\"onOffer($event)\"\n            (requestViewing)=\"onRequestViewing($event)\"\n          >\n            @if (user) {\n              <rolatech-property-action-contact [email]=\"user.email\" [phone]=\"user.phone\"></rolatech-property-action-contact>\n            }\n          </rolatech-property-actions>\n        </div>\n      </div>\n    </div>\n  </rolatech-container>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: PropertyInfoComponent, selector: "rolatech-property-info", inputs: ["property", "inWishList"], outputs: ["wish"] }, { kind: "component", type: PropertyMediaComponent, selector: "rolatech-property-media", inputs: ["media", "min"] }, { kind: "component", type: PropertyPricingComponent, selector: "rolatech-property-pricing", inputs: ["property", "price"] }, { kind: "component", type: PropertySectionComponent, selector: "rolatech-property-section", inputs: ["section", "user", "username"] }, { kind: "component", type: PropertyActionsComponent, selector: "rolatech-property-actions", inputs: ["property"], outputs: ["requestViewing", "offer", "deposit"] }, { kind: "component", type: CommentsComponent, selector: "rolatech-comments", inputs: ["itemId"] }, { kind: "component", type: PropertyAgentRenderer, selector: "rolatech-property-agent-renderer", inputs: ["name", "avatar", "username", "subtitle"] }, { kind: "component", type: PropertyLocationComponent, selector: "rolatech-property-location", inputs: ["location"] }, { kind: "component", type: PropertyFeaturesComponent, selector: "rolatech-property-features", inputs: ["features"] }, { kind: "component", type: PropertyVideoComponent, selector: "rolatech-property-video", inputs: ["video"] }, { kind: "component", type: PropertyActionContactComponent, selector: "rolatech-property-action-contact", inputs: ["email", "phone"], outputs: ["callAgent", "emailAgent"] }, { kind: "component", type: PropertyHighlights, selector: "rolatech-property-highlights", inputs: ["highlights"] }, { kind: "component", type: PropertyEpc, selector: "rolatech-property-epc", inputs: ["epc"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyDetailsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyDetailsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-details', imports: [
                         AngularCommonModule,
@@ -1697,7 +1976,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                         PropertyActionContactComponent,
                         PropertyHighlights,
                         PropertyEpc,
-                    ], template: "@if (property) {\n  <rolatech-container>\n    <div class=\"flex flex-col w-full\">\n      <div class=\"py-3\">\n        <rolatech-property-media [media]=\"property.media\"></rolatech-property-media>\n      </div>\n      <div class=\"flex flex-col md:flex-row gap-3 w-full\">\n        <div class=\"w-full md:w-2/3\">\n          <rolatech-property-info [property]=\"property\" (wish)=\"onWish($event)\" [inWishList]=\"inWishList\">\n          </rolatech-property-info>\n          <!-- <rolatech-property-agent-renderer\n            [name]=\"fullname\"\n            [avatar]=\"user?.avatar\"\n            [username]=\"username\"\n          ></rolatech-property-agent-renderer> -->\n          <mat-divider></mat-divider>\n\n          @if (features.length > 0) {\n            <rolatech-property-features [features]=\"features\"></rolatech-property-features>\n          }\n          @if (highlights.length > 0) {\n            <rolatech-property-highlights [highlights]=\"highlights\"></rolatech-property-highlights>\n          }\n          <!-- <rolatech-property-epc [epc]=\"epc\"></rolatech-property-epc> -->\n          <rolatech-property-location [location]=\"property.location\"></rolatech-property-location>\n          @if (videos && videos.length > 0) {\n            @for (item of videos; track $index) {\n              <rolatech-property-video [video]=\"item\"></rolatech-property-video>\n            }\n          }\n          @if (epc && epc.currentScore) {\n            <rolatech-property-epc [epc]=\"epc\"></rolatech-property-epc>\n          }\n          <div class=\"flex flex-col\">\n            <div class=\"text-2xl font-bold pt-3\" i18n>Sections</div>\n            @for (section of property.sections; track $index) {\n              <rolatech-property-section [section]=\"section\"></rolatech-property-section>\n            }\n            <rolatech-comments [itemId]=\"property.id\"></rolatech-comments>\n          </div>\n        </div>\n        <div class=\"w-full md:w-1/3\">\n          <rolatech-property-agent-renderer\n            [name]=\"fullname\"\n            [avatar]=\"user?.avatar\"\n            [username]=\"username\"\n          ></rolatech-property-agent-renderer>\n          <rolatech-property-pricing (wish)=\"onWish($event)\" [property]=\"property\"></rolatech-property-pricing>\n          <rolatech-property-actions\n            [property]=\"property\"\n            (offer)=\"onOffer($event)\"\n            (deposit)=\"onOffer($event)\"\n            (requestViewing)=\"onRequestViewing($event)\"\n          >\n            @if (user) {\n              <rolatech-property-action-contact [email]=\"user.email\" [phone]=\"user.phone\"></rolatech-property-action-contact>\n            }\n          </rolatech-property-actions>\n        </div>\n      </div>\n    </div>\n  </rolatech-container>\n}\n" }]
+                    ], template: "@if (property) {\n  <rolatech-container>\n    <div class=\"flex flex-col w-full\">\n      <div class=\"py-3\">\n        <rolatech-property-media [media]=\"property.media\"></rolatech-property-media>\n      </div>\n      <div class=\"flex flex-col md:flex-row gap-3 w-full\">\n        <div class=\"w-full md:w-2/3\">\n          <rolatech-property-info [property]=\"property\" (wish)=\"onWish($event)\" [inWishList]=\"inWishList\">\n          </rolatech-property-info>\n          <!-- <rolatech-property-agent-renderer\n            [name]=\"fullname\"\n            [avatar]=\"user?.avatar\"\n            [username]=\"username\"\n          ></rolatech-property-agent-renderer> -->\n          @if (features.length > 0) {\n            <rolatech-property-features [features]=\"features\"></rolatech-property-features>\n          }\n          @if (highlights.length > 0) {\n            <rolatech-property-highlights [highlights]=\"highlights\"></rolatech-property-highlights>\n          }\n          @if (property.location) {\n            <rolatech-property-location [location]=\"property.location\"></rolatech-property-location>\n          }\n          @if (videos && videos.length > 0) {\n            @for (item of videos; track $index) {\n              <rolatech-property-video [video]=\"item\"></rolatech-property-video>\n            }\n          }\n          @if (epc && epc.currentScore) {\n            <rolatech-property-epc [epc]=\"epc\"></rolatech-property-epc>\n          }\n          <div class=\"flex flex-col\">\n            <div class=\"text-2xl font-bold pt-3\" i18n>Sections</div>\n            @for (section of property.sections; track $index) {\n              <rolatech-property-section [section]=\"section\"></rolatech-property-section>\n            }\n            <rolatech-comments [itemId]=\"property.id\"></rolatech-comments>\n          </div>\n        </div>\n        <div class=\"w-full md:w-1/3\">\n          <rolatech-property-agent-renderer\n            [name]=\"fullname\"\n            [avatar]=\"user?.avatar\"\n            [username]=\"username\"\n          ></rolatech-property-agent-renderer>\n          <rolatech-property-pricing (wish)=\"onWish($event)\" [property]=\"property\"></rolatech-property-pricing>\n          <rolatech-property-actions\n            [property]=\"property\"\n            (offer)=\"onOffer($event)\"\n            (deposit)=\"onOffer($event)\"\n            (requestViewing)=\"onRequestViewing($event)\"\n          >\n            @if (user) {\n              <rolatech-property-action-contact [email]=\"user.email\" [phone]=\"user.phone\"></rolatech-property-action-contact>\n            }\n          </rolatech-property-actions>\n        </div>\n      </div>\n    </div>\n  </rolatech-container>\n}\n" }]
         }], ctorParameters: () => [] });
 
 const MY_FORMATS$5 = {
@@ -1728,17 +2007,17 @@ class PropertyViewingTimeComponent {
     ngDoCheck() {
         this.output.emit(this.proposedTime());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyViewingTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyViewingTimeComponent, isStandalone: true, selector: "rolatech-property-viewing-time", inputs: { proposedTime: { classPropertyName: "proposedTime", publicName: "proposedTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { output: "output", select: "select" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyViewingTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyViewingTimeComponent, isStandalone: true, selector: "rolatech-property-viewing-time", inputs: { proposedTime: { classPropertyName: "proposedTime", publicName: "proposedTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { output: "output", select: "select" }, providers: [
             {
                 provide: DateAdapter,
                 useClass: MomentDateAdapter,
                 deps: [MAT_DATE_LOCALE],
             },
             { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$5 },
-        ], ngImport: i0, template: "<div class=\"flex flex-col md:flex-row gap-2\">\n  <mat-form-field appearance=\"fill\">\n    <mat-label i18n>Viewing Date</mat-label>\n    <input\n      matInput\n      placeholder=\"Viewing date\"\n      [matDatepicker]=\"startDatePicker\"\n      [min]=\"minDate\"\n      [max]=\"maxDate\"\n      (focus)=\"startDatePicker.open()\"\n      name=\"viewingDate\"\n      [(ngModel)]=\"proposedTime()!.date\"\n      (dateInput)=\"proposedTime()!.date = $event.value.format('YYYY-MM-DD')\"\n      required\n      readonly\n    />\n    <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n    <mat-datepicker #startDatePicker></mat-datepicker>\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\">\n    <mat-label i18n>Viewing time</mat-label>\n    <mat-icon matIconPrefix>schedule</mat-icon>\n    <mat-select [(ngModel)]=\"proposedTime()!.time\" required readonly>\n      @for (d of time; track d) {\n        <mat-option [value]=\"d\">\n          {{ d }}\n        </mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n</div>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }] });
+        ], ngImport: i0, template: "<div class=\"flex flex-col md:flex-row gap-2\">\n  <mat-form-field appearance=\"fill\">\n    <mat-label i18n>Viewing Date</mat-label>\n    <input\n      matInput\n      placeholder=\"Viewing date\"\n      [matDatepicker]=\"startDatePicker\"\n      [min]=\"minDate\"\n      [max]=\"maxDate\"\n      (focus)=\"startDatePicker.open()\"\n      name=\"viewingDate\"\n      [(ngModel)]=\"proposedTime()!.date\"\n      (dateInput)=\"proposedTime()!.date = $event.value.format('YYYY-MM-DD')\"\n      required\n      readonly\n    />\n    <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n    <mat-datepicker #startDatePicker></mat-datepicker>\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\">\n    <mat-label i18n>Viewing time</mat-label>\n    <mat-icon matIconPrefix>schedule</mat-icon>\n    <mat-select [(ngModel)]=\"proposedTime()!.time\" required readonly>\n      @for (d of time; track d) {\n        <mat-option [value]=\"d\">\n          {{ d }}\n        </mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n</div>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyViewingTimeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyViewingTimeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-viewing-time', imports: [
                         MatFormFieldModule,
@@ -1798,7 +2077,7 @@ class PropertyViewingRequestComponent extends BaseComponent {
     countries = ['United Kingdom', 'China'];
     selectedCountry;
     displayPrice = computed(() => {
-        return this.property ? (this.property.price / 100).toFixed(2) : 0;
+        return this.property ? this.property.price.toFixed(2) : 0;
     }, ...(ngDevMode ? [{ debugName: "displayPrice" }] : []));
     ngOnInit() {
         this.getProperty();
@@ -1808,6 +2087,7 @@ class PropertyViewingRequestComponent extends BaseComponent {
         this.propertyService.get(this.id).subscribe({
             next: (res) => {
                 this.property = res.data;
+                console.log(res.data);
                 this.titleService.setTitle(`${this.property.title}`);
             },
         });
@@ -1828,17 +2108,17 @@ class PropertyViewingRequestComponent extends BaseComponent {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyViewingRequestComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyViewingRequestComponent, isStandalone: true, selector: "rolatech-property-viewing-request", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyViewingRequestComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyViewingRequestComponent, isStandalone: true, selector: "rolatech-property-viewing-request", providers: [
             {
                 provide: DateAdapter,
                 useClass: MomentDateAdapter,
                 deps: [MAT_DATE_LOCALE],
             },
             { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$4 },
-        ], usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  <div class=\"flex flex-col-reverse md:flex-row w-full py-2 mb-3 gap-3\">\n    <div class=\"w-full md:w-2/3\">\n      <div>\n        <div class=\"text-xl font-bold py-2 mb-3\" i18n>Request a viewing</div>\n        <div class=\"mb-3\">\n          <mat-radio-group\n            aria-label=\"Select an option\"\n            [(ngModel)]=\"viewing.viewerCategory\"\n            (change)=\"onViewerSelectionChange($event)\"\n          >\n            <mat-radio-button [value]=\"viewerCategory.TENANT\" i18n>I'm a tenant</mat-radio-button>\n            <mat-radio-button [value]=\"viewerCategory.AGENT\" i18n>I'm an agent</mat-radio-button>\n          </mat-radio-group>\n        </div>\n        @if (selectedViewerCategory === 'TENANT') {\n          <div class=\"flex flex-col md:flex-row gap-2\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>First name</mat-label>\n              <input matInput type=\"text\" [(ngModel)]=\"viewing.firstName\" />\n            </mat-form-field>\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>Last name</mat-label>\n              <input matInput type=\"text\" [(ngModel)]=\"viewing.lastName\" />\n            </mat-form-field>\n          </div>\n          <div class=\"flex flex-col md:flex-row gap-2\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>Phone</mat-label>\n              <input matInput type=\"text\" [(ngModel)]=\"viewing.phone\" />\n            </mat-form-field>\n          </div>\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>Email</mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"viewing.email\" />\n          </mat-form-field>\n          <mat-form-field>\n            <mat-label i18n>Tenant type</mat-label>\n            <mat-select placeholder=\"Tenant type\" [(ngModel)]=\"viewing.applicantType\">\n              @for (applicantType of applicantTypes | keyvalue; track applicantType) {\n                <mat-option [value]=\"applicantType.key\">\n                  {{ applicantType.value }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        } @else {\n          <div class=\"flex flex-col md:flex-row gap-2\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>Your email</mat-label>\n              <input matInput type=\"text\" [(ngModel)]=\"viewing.email\" />\n            </mat-form-field>\n          </div>\n          <div class=\"flex flex-col md:flex-row gap-2\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>Number of tenants</mat-label>\n              <input matInput type=\"number\" [(ngModel)]=\"viewing.numberOfTenants\" />\n            </mat-form-field>\n          </div>\n          <mat-form-field>\n            <mat-label i18n>Applicant type</mat-label>\n            <mat-select placeholder=\"Applicant type\" [(ngModel)]=\"viewing.applicantType\">\n              @for (applicantType of applicantTypes | keyvalue; track applicantType) {\n                <mat-option [value]=\"applicantType.key\">\n                  {{ applicantType.value }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field appearance=\"fill\">\n            <input\n              matInput\n              placeholder=\"Start date\"\n              [matDatepicker]=\"startDatePicker\"\n              [min]=\"minDate\"\n              (focus)=\"startDatePicker.open()\"\n              name=\"startDate\"\n              [(ngModel)]=\"viewing.startDate\"\n              (dateInput)=\"viewing.startDate = $event.value.format('YYYY-MM-DD')\"\n              readonly\n            />\n            <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n            <mat-datepicker #startDatePicker></mat-datepicker>\n          </mat-form-field>\n          <div class=\"flex flex-col md:flex-row gap-2\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>Tenancy length</mat-label>\n              <span matTextSuffix>months</span>\n              <input matInput type=\"number\" [(ngModel)]=\"viewing.tenancyDuration\" />\n            </mat-form-field>\n          </div>\n          <mat-form-field appearance=\"fill\" floatLabel=\"always\">\n            <mat-label i18n>Annual income(All tenants combined)</mat-label>\n            <span matTextPrefix>\u00A3&nbsp;</span>\n            <input matInput type=\"text\" placeholder=\"00.00\" [(ngModel)]=\"viewing.income\" />\n          </mat-form-field>\n          <mat-form-field>\n            <mat-label i18n>Employment Status</mat-label>\n            <mat-select placeholder=\"Employment Status\" [(ngModel)]=\"viewing.employmentStatus\">\n              @for (item of employmentStatus | keyvalue; track item) {\n                <mat-option [value]=\"item.key\">\n                  {{ item.value }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field>\n            <mat-label i18n>AdverseCredit Status</mat-label>\n            <mat-select placeholder=\"AdverseCredit Status\" [(ngModel)]=\"viewing.adverseCreditStatus\">\n              @for (item of adverseCreditStatus | keyvalue; track item) {\n                <mat-option [value]=\"item.key\">\n                  {{ item.value }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        }\n        <div>\n          <div class=\"mb-3\">\n            <div class=\"text-lg font-bold\" i18n>Viewing date</div>\n            <div class=\"opacity-70\" i18n>\n              Please choose 3 different times on at least 2 different days that would work for you.\n            </div>\n          </div>\n          @for (item of viewing.proposedSlots; track $index) {\n            <rolatech-property-viewing-time [proposedTime]=\"item\"></rolatech-property-viewing-time>\n          }\n        </div>\n      </div>\n      <button mat-flat-button (click)=\"sendRequest()\" i18n>Send request</button>\n    </div>\n    <div class=\"w-full md:w-1/2 py-2 mb-3\">\n      <div class=\"text-xl font-bold py-2 mb-3\" i18n>Property info</div>\n      <div>\n        <rolatech-thumbnail [src]=\"property ? property.media[0].url : ''\" size=\"small\"></rolatech-thumbnail>\n      </div>\n      <div class=\"py-3 text-xl font-bold\">\u00A3{{ displayPrice() }}</div>\n    </div>\n  </div>\n</rolatech-container>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: ThumbnailComponent, selector: "rolatech-thumbnail", inputs: ["src", "size", "mode", "ratio", "width", "height"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i7$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i7$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: PropertyViewingTimeComponent, selector: "rolatech-property-viewing-time", inputs: ["proposedTime"], outputs: ["output", "select"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
+        ], usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  <div class=\"flex flex-col-reverse md:flex-row w-full py-2 mb-3 gap-3\">\n    <div class=\"w-full md:w-2/3\">\n      <div>\n        <div class=\"text-xl font-bold py-2 mb-3\" i18n>Request a viewing</div>\n        <div class=\"mb-3\">\n          <mat-radio-group\n            aria-label=\"Select an option\"\n            [(ngModel)]=\"viewing.viewerCategory\"\n            (change)=\"onViewerSelectionChange($event)\"\n          >\n            <mat-radio-button [value]=\"viewerCategory.TENANT\" i18n>I'm a tenant</mat-radio-button>\n            <mat-radio-button [value]=\"viewerCategory.AGENT\" i18n>I'm an agent</mat-radio-button>\n          </mat-radio-group>\n        </div>\n        @if (selectedViewerCategory === 'Tenant') {\n          <div class=\"flex flex-col md:flex-row gap-2\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>First name</mat-label>\n              <input matInput type=\"text\" [(ngModel)]=\"viewing.firstName\" />\n            </mat-form-field>\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>Last name</mat-label>\n              <input matInput type=\"text\" [(ngModel)]=\"viewing.lastName\" />\n            </mat-form-field>\n          </div>\n          <div class=\"flex flex-col md:flex-row gap-2\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>Phone</mat-label>\n              <input matInput type=\"text\" [(ngModel)]=\"viewing.phone\" />\n            </mat-form-field>\n          </div>\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>Email</mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"viewing.email\" />\n          </mat-form-field>\n          <mat-form-field>\n            <mat-label i18n>Tenant type</mat-label>\n            <mat-select placeholder=\"Tenant type\" [(ngModel)]=\"viewing.applicantType\">\n              @for (applicantType of applicantTypes | keyvalue; track applicantType) {\n                <mat-option [value]=\"applicantType.key\">\n                  {{ applicantType.value }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        } @else {\n          <div class=\"flex flex-col md:flex-row gap-2\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>Your email</mat-label>\n              <input matInput type=\"text\" [(ngModel)]=\"viewing.email\" />\n            </mat-form-field>\n          </div>\n          <div class=\"flex flex-col md:flex-row gap-2\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>Number of tenants</mat-label>\n              <input matInput type=\"number\" [(ngModel)]=\"viewing.numberOfTenants\" />\n            </mat-form-field>\n          </div>\n          <mat-form-field>\n            <mat-label i18n>Applicant type</mat-label>\n            <mat-select placeholder=\"Applicant type\" [(ngModel)]=\"viewing.applicantType\">\n              @for (applicantType of applicantTypes | keyvalue; track applicantType) {\n                <mat-option [value]=\"applicantType.key\">\n                  {{ applicantType.value }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field appearance=\"fill\">\n            <input\n              matInput\n              placeholder=\"Start date\"\n              [matDatepicker]=\"startDatePicker\"\n              [min]=\"minDate\"\n              (focus)=\"startDatePicker.open()\"\n              name=\"startDate\"\n              [(ngModel)]=\"viewing.startDate\"\n              (dateInput)=\"viewing.startDate = $event.value.format('YYYY-MM-DD')\"\n              readonly\n            />\n            <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n            <mat-datepicker #startDatePicker></mat-datepicker>\n          </mat-form-field>\n          <div class=\"flex flex-col md:flex-row gap-2\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>Tenancy length</mat-label>\n              <span matTextSuffix>months</span>\n              <input matInput type=\"number\" [(ngModel)]=\"viewing.tenancyDuration\" />\n            </mat-form-field>\n          </div>\n          <mat-form-field appearance=\"fill\" floatLabel=\"always\">\n            <mat-label i18n>Annual income(All tenants combined)</mat-label>\n            <span matTextPrefix>\u00A3&nbsp;</span>\n            <input matInput type=\"text\" placeholder=\"00.00\" [(ngModel)]=\"viewing.income\" />\n          </mat-form-field>\n          <mat-form-field>\n            <mat-label i18n>Employment Status</mat-label>\n            <mat-select placeholder=\"Employment Status\" [(ngModel)]=\"viewing.employmentStatus\">\n              @for (item of employmentStatus | keyvalue; track item) {\n                <mat-option [value]=\"item.key\">\n                  {{ item.value }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field>\n            <mat-label i18n>AdverseCredit Status</mat-label>\n            <mat-select placeholder=\"AdverseCredit Status\" [(ngModel)]=\"viewing.adverseCreditStatus\">\n              @for (item of adverseCreditStatus | keyvalue; track item) {\n                <mat-option [value]=\"item.key\">\n                  {{ item.value }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        }\n        <div>\n          <div class=\"mb-3\">\n            <div class=\"text-lg font-bold\" i18n>Viewing date</div>\n            <div class=\"opacity-70\" i18n>\n              Please choose 3 different times on at least 2 different days that would work for you.\n            </div>\n          </div>\n          @for (item of viewing.proposedSlots; track $index) {\n            <rolatech-property-viewing-time [proposedTime]=\"item\"></rolatech-property-viewing-time>\n          }\n        </div>\n      </div>\n      <button mat-flat-button (click)=\"sendRequest()\" i18n>Send request</button>\n    </div>\n    <div class=\"w-full md:w-1/2 py-2 mb-3\">\n      @if (property) {\n        <div class=\"text-xl font-bold py-2 mb-3\" i18n>Property info</div>\n        <div>\n          <rolatech-thumbnail [src]=\"property ? property.media[0].url : ''\" size=\"small\"></rolatech-thumbnail>\n        </div>\n        <div class=\"text-xl font-bold\">{{ property.title }}</div>\n        <div class=\"\">Available: {{ property.availableDate | availableDate }}</div>\n        @if (property.market.toString() === 'LETTINGS' && property.rentFrequency.toString() === 'MONTHLY') {\n          <div class=\"py-3 text-xl font-bold\">\u00A3{{ property.price.toFixed(2) }}pcm</div>\n        } @else {\n          <div class=\"py-3 text-xl font-bold\">\u00A3{{ property.price.toFixed(2) }}</div>\n        }\n      }\n    </div>\n  </div>\n</rolatech-container>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: ThumbnailComponent, selector: "rolatech-thumbnail", inputs: ["src", "size", "mode", "ratio", "width", "height"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i7.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i7.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: PropertyViewingTimeComponent, selector: "rolatech-property-viewing-time", inputs: ["proposedTime"], outputs: ["output", "select"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: AvailableDatePipe, name: "availableDate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyViewingRequestComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyViewingRequestComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-viewing-request', imports: [
                         CommonModule,
@@ -1853,6 +2133,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                         MatDatepickerModule,
                         MatRadioModule,
                         PropertyViewingTimeComponent,
+                        AvailableDatePipe,
                     ], providers: [
                         {
                             provide: DateAdapter,
@@ -1860,7 +2141,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                             deps: [MAT_DATE_LOCALE],
                         },
                         { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$4 },
-                    ], template: "<rolatech-container>\n  <div class=\"flex flex-col-reverse md:flex-row w-full py-2 mb-3 gap-3\">\n    <div class=\"w-full md:w-2/3\">\n      <div>\n        <div class=\"text-xl font-bold py-2 mb-3\" i18n>Request a viewing</div>\n        <div class=\"mb-3\">\n          <mat-radio-group\n            aria-label=\"Select an option\"\n            [(ngModel)]=\"viewing.viewerCategory\"\n            (change)=\"onViewerSelectionChange($event)\"\n          >\n            <mat-radio-button [value]=\"viewerCategory.TENANT\" i18n>I'm a tenant</mat-radio-button>\n            <mat-radio-button [value]=\"viewerCategory.AGENT\" i18n>I'm an agent</mat-radio-button>\n          </mat-radio-group>\n        </div>\n        @if (selectedViewerCategory === 'TENANT') {\n          <div class=\"flex flex-col md:flex-row gap-2\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>First name</mat-label>\n              <input matInput type=\"text\" [(ngModel)]=\"viewing.firstName\" />\n            </mat-form-field>\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>Last name</mat-label>\n              <input matInput type=\"text\" [(ngModel)]=\"viewing.lastName\" />\n            </mat-form-field>\n          </div>\n          <div class=\"flex flex-col md:flex-row gap-2\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>Phone</mat-label>\n              <input matInput type=\"text\" [(ngModel)]=\"viewing.phone\" />\n            </mat-form-field>\n          </div>\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>Email</mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"viewing.email\" />\n          </mat-form-field>\n          <mat-form-field>\n            <mat-label i18n>Tenant type</mat-label>\n            <mat-select placeholder=\"Tenant type\" [(ngModel)]=\"viewing.applicantType\">\n              @for (applicantType of applicantTypes | keyvalue; track applicantType) {\n                <mat-option [value]=\"applicantType.key\">\n                  {{ applicantType.value }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        } @else {\n          <div class=\"flex flex-col md:flex-row gap-2\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>Your email</mat-label>\n              <input matInput type=\"text\" [(ngModel)]=\"viewing.email\" />\n            </mat-form-field>\n          </div>\n          <div class=\"flex flex-col md:flex-row gap-2\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>Number of tenants</mat-label>\n              <input matInput type=\"number\" [(ngModel)]=\"viewing.numberOfTenants\" />\n            </mat-form-field>\n          </div>\n          <mat-form-field>\n            <mat-label i18n>Applicant type</mat-label>\n            <mat-select placeholder=\"Applicant type\" [(ngModel)]=\"viewing.applicantType\">\n              @for (applicantType of applicantTypes | keyvalue; track applicantType) {\n                <mat-option [value]=\"applicantType.key\">\n                  {{ applicantType.value }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field appearance=\"fill\">\n            <input\n              matInput\n              placeholder=\"Start date\"\n              [matDatepicker]=\"startDatePicker\"\n              [min]=\"minDate\"\n              (focus)=\"startDatePicker.open()\"\n              name=\"startDate\"\n              [(ngModel)]=\"viewing.startDate\"\n              (dateInput)=\"viewing.startDate = $event.value.format('YYYY-MM-DD')\"\n              readonly\n            />\n            <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n            <mat-datepicker #startDatePicker></mat-datepicker>\n          </mat-form-field>\n          <div class=\"flex flex-col md:flex-row gap-2\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>Tenancy length</mat-label>\n              <span matTextSuffix>months</span>\n              <input matInput type=\"number\" [(ngModel)]=\"viewing.tenancyDuration\" />\n            </mat-form-field>\n          </div>\n          <mat-form-field appearance=\"fill\" floatLabel=\"always\">\n            <mat-label i18n>Annual income(All tenants combined)</mat-label>\n            <span matTextPrefix>\u00A3&nbsp;</span>\n            <input matInput type=\"text\" placeholder=\"00.00\" [(ngModel)]=\"viewing.income\" />\n          </mat-form-field>\n          <mat-form-field>\n            <mat-label i18n>Employment Status</mat-label>\n            <mat-select placeholder=\"Employment Status\" [(ngModel)]=\"viewing.employmentStatus\">\n              @for (item of employmentStatus | keyvalue; track item) {\n                <mat-option [value]=\"item.key\">\n                  {{ item.value }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field>\n            <mat-label i18n>AdverseCredit Status</mat-label>\n            <mat-select placeholder=\"AdverseCredit Status\" [(ngModel)]=\"viewing.adverseCreditStatus\">\n              @for (item of adverseCreditStatus | keyvalue; track item) {\n                <mat-option [value]=\"item.key\">\n                  {{ item.value }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        }\n        <div>\n          <div class=\"mb-3\">\n            <div class=\"text-lg font-bold\" i18n>Viewing date</div>\n            <div class=\"opacity-70\" i18n>\n              Please choose 3 different times on at least 2 different days that would work for you.\n            </div>\n          </div>\n          @for (item of viewing.proposedSlots; track $index) {\n            <rolatech-property-viewing-time [proposedTime]=\"item\"></rolatech-property-viewing-time>\n          }\n        </div>\n      </div>\n      <button mat-flat-button (click)=\"sendRequest()\" i18n>Send request</button>\n    </div>\n    <div class=\"w-full md:w-1/2 py-2 mb-3\">\n      <div class=\"text-xl font-bold py-2 mb-3\" i18n>Property info</div>\n      <div>\n        <rolatech-thumbnail [src]=\"property ? property.media[0].url : ''\" size=\"small\"></rolatech-thumbnail>\n      </div>\n      <div class=\"py-3 text-xl font-bold\">\u00A3{{ displayPrice() }}</div>\n    </div>\n  </div>\n</rolatech-container>\n", styles: ["mat-form-field{width:100%}\n"] }]
+                    ], template: "<rolatech-container>\n  <div class=\"flex flex-col-reverse md:flex-row w-full py-2 mb-3 gap-3\">\n    <div class=\"w-full md:w-2/3\">\n      <div>\n        <div class=\"text-xl font-bold py-2 mb-3\" i18n>Request a viewing</div>\n        <div class=\"mb-3\">\n          <mat-radio-group\n            aria-label=\"Select an option\"\n            [(ngModel)]=\"viewing.viewerCategory\"\n            (change)=\"onViewerSelectionChange($event)\"\n          >\n            <mat-radio-button [value]=\"viewerCategory.TENANT\" i18n>I'm a tenant</mat-radio-button>\n            <mat-radio-button [value]=\"viewerCategory.AGENT\" i18n>I'm an agent</mat-radio-button>\n          </mat-radio-group>\n        </div>\n        @if (selectedViewerCategory === 'Tenant') {\n          <div class=\"flex flex-col md:flex-row gap-2\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>First name</mat-label>\n              <input matInput type=\"text\" [(ngModel)]=\"viewing.firstName\" />\n            </mat-form-field>\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>Last name</mat-label>\n              <input matInput type=\"text\" [(ngModel)]=\"viewing.lastName\" />\n            </mat-form-field>\n          </div>\n          <div class=\"flex flex-col md:flex-row gap-2\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>Phone</mat-label>\n              <input matInput type=\"text\" [(ngModel)]=\"viewing.phone\" />\n            </mat-form-field>\n          </div>\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>Email</mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"viewing.email\" />\n          </mat-form-field>\n          <mat-form-field>\n            <mat-label i18n>Tenant type</mat-label>\n            <mat-select placeholder=\"Tenant type\" [(ngModel)]=\"viewing.applicantType\">\n              @for (applicantType of applicantTypes | keyvalue; track applicantType) {\n                <mat-option [value]=\"applicantType.key\">\n                  {{ applicantType.value }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        } @else {\n          <div class=\"flex flex-col md:flex-row gap-2\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>Your email</mat-label>\n              <input matInput type=\"text\" [(ngModel)]=\"viewing.email\" />\n            </mat-form-field>\n          </div>\n          <div class=\"flex flex-col md:flex-row gap-2\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>Number of tenants</mat-label>\n              <input matInput type=\"number\" [(ngModel)]=\"viewing.numberOfTenants\" />\n            </mat-form-field>\n          </div>\n          <mat-form-field>\n            <mat-label i18n>Applicant type</mat-label>\n            <mat-select placeholder=\"Applicant type\" [(ngModel)]=\"viewing.applicantType\">\n              @for (applicantType of applicantTypes | keyvalue; track applicantType) {\n                <mat-option [value]=\"applicantType.key\">\n                  {{ applicantType.value }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field appearance=\"fill\">\n            <input\n              matInput\n              placeholder=\"Start date\"\n              [matDatepicker]=\"startDatePicker\"\n              [min]=\"minDate\"\n              (focus)=\"startDatePicker.open()\"\n              name=\"startDate\"\n              [(ngModel)]=\"viewing.startDate\"\n              (dateInput)=\"viewing.startDate = $event.value.format('YYYY-MM-DD')\"\n              readonly\n            />\n            <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n            <mat-datepicker #startDatePicker></mat-datepicker>\n          </mat-form-field>\n          <div class=\"flex flex-col md:flex-row gap-2\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>Tenancy length</mat-label>\n              <span matTextSuffix>months</span>\n              <input matInput type=\"number\" [(ngModel)]=\"viewing.tenancyDuration\" />\n            </mat-form-field>\n          </div>\n          <mat-form-field appearance=\"fill\" floatLabel=\"always\">\n            <mat-label i18n>Annual income(All tenants combined)</mat-label>\n            <span matTextPrefix>\u00A3&nbsp;</span>\n            <input matInput type=\"text\" placeholder=\"00.00\" [(ngModel)]=\"viewing.income\" />\n          </mat-form-field>\n          <mat-form-field>\n            <mat-label i18n>Employment Status</mat-label>\n            <mat-select placeholder=\"Employment Status\" [(ngModel)]=\"viewing.employmentStatus\">\n              @for (item of employmentStatus | keyvalue; track item) {\n                <mat-option [value]=\"item.key\">\n                  {{ item.value }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field>\n            <mat-label i18n>AdverseCredit Status</mat-label>\n            <mat-select placeholder=\"AdverseCredit Status\" [(ngModel)]=\"viewing.adverseCreditStatus\">\n              @for (item of adverseCreditStatus | keyvalue; track item) {\n                <mat-option [value]=\"item.key\">\n                  {{ item.value }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        }\n        <div>\n          <div class=\"mb-3\">\n            <div class=\"text-lg font-bold\" i18n>Viewing date</div>\n            <div class=\"opacity-70\" i18n>\n              Please choose 3 different times on at least 2 different days that would work for you.\n            </div>\n          </div>\n          @for (item of viewing.proposedSlots; track $index) {\n            <rolatech-property-viewing-time [proposedTime]=\"item\"></rolatech-property-viewing-time>\n          }\n        </div>\n      </div>\n      <button mat-flat-button (click)=\"sendRequest()\" i18n>Send request</button>\n    </div>\n    <div class=\"w-full md:w-1/2 py-2 mb-3\">\n      @if (property) {\n        <div class=\"text-xl font-bold py-2 mb-3\" i18n>Property info</div>\n        <div>\n          <rolatech-thumbnail [src]=\"property ? property.media[0].url : ''\" size=\"small\"></rolatech-thumbnail>\n        </div>\n        <div class=\"text-xl font-bold\">{{ property.title }}</div>\n        <div class=\"\">Available: {{ property.availableDate | availableDate }}</div>\n        @if (property.market.toString() === 'LETTINGS' && property.rentFrequency.toString() === 'MONTHLY') {\n          <div class=\"py-3 text-xl font-bold\">\u00A3{{ property.price.toFixed(2) }}pcm</div>\n        } @else {\n          <div class=\"py-3 text-xl font-bold\">\u00A3{{ property.price.toFixed(2) }}</div>\n        }\n      }\n    </div>\n  </div>\n</rolatech-container>\n", styles: ["mat-form-field{width:100%}\n"] }]
         }] });
 
 const MY_FORMATS$3 = {
@@ -1902,12 +2183,12 @@ class PropertyOfferComponent extends BaseComponent {
     selectedCountry;
     // property!: Property;
     // displayPrice = computed(() => {
-    //   return (this.property?.price / 100).toFixed(2);
+    //   return (this.property?.price).toFixed(2);
     // });
     property = signal(null, ...(ngDevMode ? [{ debugName: "property" }] : []));
     displayPrice = computed(() => {
         const p = this.property();
-        return p ? (p.price / 100).toFixed(2) : '0.00';
+        return p ? p.price.toFixed(2) : '0.00';
     }, ...(ngDevMode ? [{ debugName: "displayPrice" }] : []));
     firstImageUrl = computed(() => {
         const p = this.property();
@@ -1961,17 +2242,17 @@ class PropertyOfferComponent extends BaseComponent {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyOfferComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyOfferComponent, isStandalone: true, selector: "rolatech-property-offer", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyOfferComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyOfferComponent, isStandalone: true, selector: "rolatech-property-offer", providers: [
             {
                 provide: DateAdapter,
                 useClass: MomentDateAdapter,
                 deps: [MAT_DATE_LOCALE],
             },
             { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$3 },
-        ], usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  <div class=\"flex flex-col-reverse md:flex-row w-full py-2 mb-3 gap-3\">\n    <div class=\"w-full md:w-2/3\">\n      <div>\n        <div class=\"text-xl font-bold py-2 mb-3\">\n          <!-- <span i18n>Offer for </span><span>{{ property()?.title : '' }}</span> -->\n          <span i18n=\"@@offerFor\">Offer for {{ property()?.title }}</span>\n        </div>\n        <div class=\"flex flex-col md:flex-row gap-2\">\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>First name</mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"offer.firstName\" required />\n          </mat-form-field>\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>Last name</mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"offer.lastName\" required />\n          </mat-form-field>\n        </div>\n        <div class=\"flex flex-col md:flex-row gap-2\">\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>Phone</mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"offer.phone\" required />\n          </mat-form-field>\n        </div>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Email</mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"offer.email\" required />\n        </mat-form-field>\n\n        <mat-form-field appearance=\"fill\" floatLabel=\"always\">\n          <mat-label i18n>Asking price</mat-label>\n          <span matTextPrefix>\u00A3&nbsp;</span>\n          <input matInput type=\"text\" placeholder=\"0.00\" [(ngModel)]=\"offer.amount\" required />\n          <!-- <input\n            matInput\n            type=\"number\"\n            placeholder=\"0.00\"\n            [value]=\"formattedAmount\"\n            (input)=\"onAmountChange($event)\"\n            required\n          /> -->\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Tenancy Length</mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"offer.tenancyDuration\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Number Of Tenants</mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"offer.numberOfTenants\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label>Start date</mat-label>\n          <input\n            matInput\n            placeholder=\"Start date\"\n            [matDatepicker]=\"startDatePicker\"\n            [min]=\"minDate\"\n            (focus)=\"startDatePicker.open()\"\n            name=\"startDate\"\n            [(ngModel)]=\"offer.startDate\"\n            (dateInput)=\"offer.startDate = $event.value.format('YYYY-MM-DD')\"\n            readonly\n            required\n          />\n          <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n          <mat-datepicker #startDatePicker></mat-datepicker>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label i18n>Applicant type</mat-label>\n          <mat-select placeholder=\"Applicant type\" [(ngModel)]=\"offer.applicantType\" required>\n            @for (key of applicantTypes; track key) {\n              <mat-option [value]=\"key\">\n                {{ PropertyApplicantType[key] }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <!-- subscriptSizing=\"dynamic\" -->\n        <mat-form-field>\n          <mat-label i18n>Residency status</mat-label>\n          <mat-select placeholder=\"Residency status\" [(ngModel)]=\"offer.residencyStatus\" required>\n            @for (status of residencyStatus | keyvalue; track status) {\n              <mat-option [value]=\"status.key\">\n                {{ status.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label i18n>Employment Status</mat-label>\n          <mat-select placeholder=\"Employment Status\" [(ngModel)]=\"offer.employmentStatus\" required>\n            @for (item of employmentStatus | keyvalue; track item) {\n              <mat-option [value]=\"item.key\">\n                {{ item.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label i18n>AdverseCredit Status</mat-label>\n          <mat-select placeholder=\"AdverseCredit Status\" [(ngModel)]=\"offer.adverseCreditStatus\" required>\n            @for (item of adverseCreditStatus | keyvalue; track item) {\n              <mat-option [value]=\"item.key\">\n                {{ item.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div>\n        <div class=\"text-md py-2\" i18n>Your message(Optional)</div>\n        <mat-form-field appearance=\"fill\">\n          <textarea matInput type=\"text\" [(ngModel)]=\"offer.notes\" cdkTextareaAutosize cdkAutosizeMinRows=\"3\"></textarea>\n        </mat-form-field>\n      </div>\n      <!-- <button mat-flat-button (click)=\"sendRequest()\" i18n>Send request</button> -->\n      <button mat-flat-button (click)=\"sendRequest()\" [disabled]=\"sending\">\n        <span style=\"display: flex; align-items: center\">\n          @if (sending) {\n            <mat-progress-spinner diameter=\"20\" mode=\"indeterminate\" [style.marginRight.px]=\"8\"></mat-progress-spinner>\n          }\n          {{ sending ? 'Requesting...' : 'Send request' }}\n        </span>\n      </button>\n    </div>\n    <div class=\"w-full md:w-1/2 py-2 mb-3\">\n      <div class=\"text-xl font-bold py-2 mb-3\" i18n>Property info</div>\n      <div>\n        <rolatech-thumbnail [src]=\"firstImageUrl()\" size=\"small\"></rolatech-thumbnail>\n      </div>\n      <div class=\"py-3 text-xl font-bold\">\u00A3{{ displayPrice() }}</div>\n    </div>\n  </div>\n</rolatech-container>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i4$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: ThumbnailComponent, selector: "rolatech-thumbnail", inputs: ["src", "size", "mode", "ratio", "width", "height"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
+        ], usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  <div class=\"flex flex-col-reverse md:flex-row w-full py-2 mb-3 gap-3\">\n    <div class=\"w-full md:w-2/3\">\n      <div>\n        <div class=\"text-xl font-bold py-2 mb-3\">\n          <!-- <span i18n>Offer for </span><span>{{ property()?.title : '' }}</span> -->\n          <span i18n=\"@@offerFor\">Offer for {{ property()?.title }}</span>\n        </div>\n        <div class=\"flex flex-col md:flex-row gap-2\">\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>First name</mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"offer.firstName\" required />\n          </mat-form-field>\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>Last name</mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"offer.lastName\" required />\n          </mat-form-field>\n        </div>\n        <div class=\"flex flex-col md:flex-row gap-2\">\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>Phone</mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"offer.phone\" required />\n          </mat-form-field>\n        </div>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Email</mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"offer.email\" required />\n        </mat-form-field>\n\n        <mat-form-field appearance=\"fill\" floatLabel=\"always\">\n          <mat-label i18n>Asking price</mat-label>\n          <span matTextPrefix>\u00A3&nbsp;</span>\n          <input matInput type=\"text\" placeholder=\"0.00\" [(ngModel)]=\"offer.amount\" required />\n          <!-- <input\n            matInput\n            type=\"number\"\n            placeholder=\"0.00\"\n            [value]=\"formattedAmount\"\n            (input)=\"onAmountChange($event)\"\n            required\n          /> -->\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Tenancy Length</mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"offer.tenancyDuration\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Number Of Tenants</mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"offer.numberOfTenants\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label>Start date</mat-label>\n          <input\n            matInput\n            placeholder=\"Start date\"\n            [matDatepicker]=\"startDatePicker\"\n            [min]=\"minDate\"\n            (focus)=\"startDatePicker.open()\"\n            name=\"startDate\"\n            [(ngModel)]=\"offer.startDate\"\n            (dateInput)=\"offer.startDate = $event.value.format('YYYY-MM-DD')\"\n            readonly\n            required\n          />\n          <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n          <mat-datepicker #startDatePicker></mat-datepicker>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label i18n>Applicant type</mat-label>\n          <mat-select placeholder=\"Applicant type\" [(ngModel)]=\"offer.applicantType\" required>\n            @for (key of applicantTypes; track key) {\n              <mat-option [value]=\"key\">\n                {{ PropertyApplicantType[key] }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <!-- subscriptSizing=\"dynamic\" -->\n        <mat-form-field>\n          <mat-label i18n>Residency status</mat-label>\n          <mat-select placeholder=\"Residency status\" [(ngModel)]=\"offer.residencyStatus\" required>\n            @for (status of residencyStatus | keyvalue; track status) {\n              <mat-option [value]=\"status.key\">\n                {{ status.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label i18n>Employment Status</mat-label>\n          <mat-select placeholder=\"Employment Status\" [(ngModel)]=\"offer.employmentStatus\" required>\n            @for (item of employmentStatus | keyvalue; track item) {\n              <mat-option [value]=\"item.key\">\n                {{ item.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label i18n>AdverseCredit Status</mat-label>\n          <mat-select placeholder=\"AdverseCredit Status\" [(ngModel)]=\"offer.adverseCreditStatus\" required>\n            @for (item of adverseCreditStatus | keyvalue; track item) {\n              <mat-option [value]=\"item.key\">\n                {{ item.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div>\n        <div class=\"text-md py-2\" i18n>Your message(Optional)</div>\n        <mat-form-field appearance=\"fill\">\n          <textarea matInput type=\"text\" [(ngModel)]=\"offer.notes\" cdkTextareaAutosize cdkAutosizeMinRows=\"3\"></textarea>\n        </mat-form-field>\n      </div>\n      <!-- <button mat-flat-button (click)=\"sendRequest()\" i18n>Send request</button> -->\n      <button mat-flat-button (click)=\"sendRequest()\" [disabled]=\"sending\">\n        <span style=\"display: flex; align-items: center\">\n          @if (sending) {\n            <mat-progress-spinner diameter=\"20\" mode=\"indeterminate\" [style.marginRight.px]=\"8\"></mat-progress-spinner>\n          }\n          {{ sending ? 'Requesting...' : 'Send request' }}\n        </span>\n      </button>\n    </div>\n    <div class=\"w-full md:w-1/2 py-2 mb-3\">\n      @if (property()) {\n        <div class=\"text-xl font-bold py-2 mb-3\" i18n>Property info</div>\n        <div>\n          <rolatech-thumbnail [src]=\"firstImageUrl()\" size=\"small\"></rolatech-thumbnail>\n        </div>\n        <div class=\"text-xl font-bold\">{{ property()!.title }}</div>\n        <div class=\"\">Available: {{ property()!.availableDate | availableDate }}</div>\n        @if (property()!.market.toString() === 'LETTINGS' && property()!.rentFrequency.toString() === 'MONTHLY') {\n          <div class=\"py-3 text-xl font-bold\">\u00A3{{ property()!.price.toFixed(2) }}pcm</div>\n        } @else {\n          <div class=\"py-3 text-xl font-bold\">\u00A3{{ property()!.price.toFixed(2) }}</div>\n        }\n      }\n    </div>\n  </div>\n</rolatech-container>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i4$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: ThumbnailComponent, selector: "rolatech-thumbnail", inputs: ["src", "size", "mode", "ratio", "width", "height"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: AvailableDatePipe, name: "availableDate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyOfferComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyOfferComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-offer', imports: [
                         CommonModule,
@@ -1986,6 +2267,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                         KeyValuePipe,
                         MatDatepickerModule,
                         MatProgressSpinner,
+                        AvailableDatePipe,
                     ], providers: [
                         {
                             provide: DateAdapter,
@@ -1993,7 +2275,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                             deps: [MAT_DATE_LOCALE],
                         },
                         { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$3 },
-                    ], template: "<rolatech-container>\n  <div class=\"flex flex-col-reverse md:flex-row w-full py-2 mb-3 gap-3\">\n    <div class=\"w-full md:w-2/3\">\n      <div>\n        <div class=\"text-xl font-bold py-2 mb-3\">\n          <!-- <span i18n>Offer for </span><span>{{ property()?.title : '' }}</span> -->\n          <span i18n=\"@@offerFor\">Offer for {{ property()?.title }}</span>\n        </div>\n        <div class=\"flex flex-col md:flex-row gap-2\">\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>First name</mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"offer.firstName\" required />\n          </mat-form-field>\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>Last name</mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"offer.lastName\" required />\n          </mat-form-field>\n        </div>\n        <div class=\"flex flex-col md:flex-row gap-2\">\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>Phone</mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"offer.phone\" required />\n          </mat-form-field>\n        </div>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Email</mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"offer.email\" required />\n        </mat-form-field>\n\n        <mat-form-field appearance=\"fill\" floatLabel=\"always\">\n          <mat-label i18n>Asking price</mat-label>\n          <span matTextPrefix>\u00A3&nbsp;</span>\n          <input matInput type=\"text\" placeholder=\"0.00\" [(ngModel)]=\"offer.amount\" required />\n          <!-- <input\n            matInput\n            type=\"number\"\n            placeholder=\"0.00\"\n            [value]=\"formattedAmount\"\n            (input)=\"onAmountChange($event)\"\n            required\n          /> -->\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Tenancy Length</mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"offer.tenancyDuration\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Number Of Tenants</mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"offer.numberOfTenants\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label>Start date</mat-label>\n          <input\n            matInput\n            placeholder=\"Start date\"\n            [matDatepicker]=\"startDatePicker\"\n            [min]=\"minDate\"\n            (focus)=\"startDatePicker.open()\"\n            name=\"startDate\"\n            [(ngModel)]=\"offer.startDate\"\n            (dateInput)=\"offer.startDate = $event.value.format('YYYY-MM-DD')\"\n            readonly\n            required\n          />\n          <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n          <mat-datepicker #startDatePicker></mat-datepicker>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label i18n>Applicant type</mat-label>\n          <mat-select placeholder=\"Applicant type\" [(ngModel)]=\"offer.applicantType\" required>\n            @for (key of applicantTypes; track key) {\n              <mat-option [value]=\"key\">\n                {{ PropertyApplicantType[key] }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <!-- subscriptSizing=\"dynamic\" -->\n        <mat-form-field>\n          <mat-label i18n>Residency status</mat-label>\n          <mat-select placeholder=\"Residency status\" [(ngModel)]=\"offer.residencyStatus\" required>\n            @for (status of residencyStatus | keyvalue; track status) {\n              <mat-option [value]=\"status.key\">\n                {{ status.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label i18n>Employment Status</mat-label>\n          <mat-select placeholder=\"Employment Status\" [(ngModel)]=\"offer.employmentStatus\" required>\n            @for (item of employmentStatus | keyvalue; track item) {\n              <mat-option [value]=\"item.key\">\n                {{ item.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label i18n>AdverseCredit Status</mat-label>\n          <mat-select placeholder=\"AdverseCredit Status\" [(ngModel)]=\"offer.adverseCreditStatus\" required>\n            @for (item of adverseCreditStatus | keyvalue; track item) {\n              <mat-option [value]=\"item.key\">\n                {{ item.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div>\n        <div class=\"text-md py-2\" i18n>Your message(Optional)</div>\n        <mat-form-field appearance=\"fill\">\n          <textarea matInput type=\"text\" [(ngModel)]=\"offer.notes\" cdkTextareaAutosize cdkAutosizeMinRows=\"3\"></textarea>\n        </mat-form-field>\n      </div>\n      <!-- <button mat-flat-button (click)=\"sendRequest()\" i18n>Send request</button> -->\n      <button mat-flat-button (click)=\"sendRequest()\" [disabled]=\"sending\">\n        <span style=\"display: flex; align-items: center\">\n          @if (sending) {\n            <mat-progress-spinner diameter=\"20\" mode=\"indeterminate\" [style.marginRight.px]=\"8\"></mat-progress-spinner>\n          }\n          {{ sending ? 'Requesting...' : 'Send request' }}\n        </span>\n      </button>\n    </div>\n    <div class=\"w-full md:w-1/2 py-2 mb-3\">\n      <div class=\"text-xl font-bold py-2 mb-3\" i18n>Property info</div>\n      <div>\n        <rolatech-thumbnail [src]=\"firstImageUrl()\" size=\"small\"></rolatech-thumbnail>\n      </div>\n      <div class=\"py-3 text-xl font-bold\">\u00A3{{ displayPrice() }}</div>\n    </div>\n  </div>\n</rolatech-container>\n", styles: ["mat-form-field{width:100%}\n"] }]
+                    ], template: "<rolatech-container>\n  <div class=\"flex flex-col-reverse md:flex-row w-full py-2 mb-3 gap-3\">\n    <div class=\"w-full md:w-2/3\">\n      <div>\n        <div class=\"text-xl font-bold py-2 mb-3\">\n          <!-- <span i18n>Offer for </span><span>{{ property()?.title : '' }}</span> -->\n          <span i18n=\"@@offerFor\">Offer for {{ property()?.title }}</span>\n        </div>\n        <div class=\"flex flex-col md:flex-row gap-2\">\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>First name</mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"offer.firstName\" required />\n          </mat-form-field>\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>Last name</mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"offer.lastName\" required />\n          </mat-form-field>\n        </div>\n        <div class=\"flex flex-col md:flex-row gap-2\">\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>Phone</mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"offer.phone\" required />\n          </mat-form-field>\n        </div>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Email</mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"offer.email\" required />\n        </mat-form-field>\n\n        <mat-form-field appearance=\"fill\" floatLabel=\"always\">\n          <mat-label i18n>Asking price</mat-label>\n          <span matTextPrefix>\u00A3&nbsp;</span>\n          <input matInput type=\"text\" placeholder=\"0.00\" [(ngModel)]=\"offer.amount\" required />\n          <!-- <input\n            matInput\n            type=\"number\"\n            placeholder=\"0.00\"\n            [value]=\"formattedAmount\"\n            (input)=\"onAmountChange($event)\"\n            required\n          /> -->\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Tenancy Length</mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"offer.tenancyDuration\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Number Of Tenants</mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"offer.numberOfTenants\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label>Start date</mat-label>\n          <input\n            matInput\n            placeholder=\"Start date\"\n            [matDatepicker]=\"startDatePicker\"\n            [min]=\"minDate\"\n            (focus)=\"startDatePicker.open()\"\n            name=\"startDate\"\n            [(ngModel)]=\"offer.startDate\"\n            (dateInput)=\"offer.startDate = $event.value.format('YYYY-MM-DD')\"\n            readonly\n            required\n          />\n          <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n          <mat-datepicker #startDatePicker></mat-datepicker>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label i18n>Applicant type</mat-label>\n          <mat-select placeholder=\"Applicant type\" [(ngModel)]=\"offer.applicantType\" required>\n            @for (key of applicantTypes; track key) {\n              <mat-option [value]=\"key\">\n                {{ PropertyApplicantType[key] }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <!-- subscriptSizing=\"dynamic\" -->\n        <mat-form-field>\n          <mat-label i18n>Residency status</mat-label>\n          <mat-select placeholder=\"Residency status\" [(ngModel)]=\"offer.residencyStatus\" required>\n            @for (status of residencyStatus | keyvalue; track status) {\n              <mat-option [value]=\"status.key\">\n                {{ status.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label i18n>Employment Status</mat-label>\n          <mat-select placeholder=\"Employment Status\" [(ngModel)]=\"offer.employmentStatus\" required>\n            @for (item of employmentStatus | keyvalue; track item) {\n              <mat-option [value]=\"item.key\">\n                {{ item.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label i18n>AdverseCredit Status</mat-label>\n          <mat-select placeholder=\"AdverseCredit Status\" [(ngModel)]=\"offer.adverseCreditStatus\" required>\n            @for (item of adverseCreditStatus | keyvalue; track item) {\n              <mat-option [value]=\"item.key\">\n                {{ item.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div>\n        <div class=\"text-md py-2\" i18n>Your message(Optional)</div>\n        <mat-form-field appearance=\"fill\">\n          <textarea matInput type=\"text\" [(ngModel)]=\"offer.notes\" cdkTextareaAutosize cdkAutosizeMinRows=\"3\"></textarea>\n        </mat-form-field>\n      </div>\n      <!-- <button mat-flat-button (click)=\"sendRequest()\" i18n>Send request</button> -->\n      <button mat-flat-button (click)=\"sendRequest()\" [disabled]=\"sending\">\n        <span style=\"display: flex; align-items: center\">\n          @if (sending) {\n            <mat-progress-spinner diameter=\"20\" mode=\"indeterminate\" [style.marginRight.px]=\"8\"></mat-progress-spinner>\n          }\n          {{ sending ? 'Requesting...' : 'Send request' }}\n        </span>\n      </button>\n    </div>\n    <div class=\"w-full md:w-1/2 py-2 mb-3\">\n      @if (property()) {\n        <div class=\"text-xl font-bold py-2 mb-3\" i18n>Property info</div>\n        <div>\n          <rolatech-thumbnail [src]=\"firstImageUrl()\" size=\"small\"></rolatech-thumbnail>\n        </div>\n        <div class=\"text-xl font-bold\">{{ property()!.title }}</div>\n        <div class=\"\">Available: {{ property()!.availableDate | availableDate }}</div>\n        @if (property()!.market.toString() === 'LETTINGS' && property()!.rentFrequency.toString() === 'MONTHLY') {\n          <div class=\"py-3 text-xl font-bold\">\u00A3{{ property()!.price.toFixed(2) }}pcm</div>\n        } @else {\n          <div class=\"py-3 text-xl font-bold\">\u00A3{{ property()!.price.toFixed(2) }}</div>\n        }\n      }\n    </div>\n  </div>\n</rolatech-container>\n", styles: ["mat-form-field{width:100%}\n"] }]
         }], ctorParameters: () => [] });
 
 class PropertyOfferIndexComponent extends BaseComponent {
@@ -2013,9 +2295,9 @@ class PropertyOfferIndexComponent extends BaseComponent {
             icon: 'dashboard',
         },
         {
-            name: 'Pending',
+            name: 'Created',
             icon: 'category',
-            status: 'pending',
+            status: 'created',
         },
         {
             name: 'Accepted',
@@ -2079,16 +2361,10 @@ class PropertyOfferIndexComponent extends BaseComponent {
         })
             .join(',');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyOfferIndexComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyOfferIndexComponent, isStandalone: true, selector: "rolatech-property-offer-index", usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  <rolatech-toolbar title=\"Offers\" large> </rolatech-toolbar>\n  <rolatech-tabs [select]=\"select\">\n    @for (item of links; track item) {\n      @if (item.status) {\n        <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n      } @else {\n        <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n      }\n    }\n  </rolatech-tabs>\n  <rolatech-list>\n    @if (offers) {\n      @for (item of offers; track item) {\n        <rolatech-property-offer-item [routerLink]=\"['./', item.id]\" [offer]=\"item\"></rolatech-property-offer-item>\n      }\n    } @else {\n      <rolatech-empty></rolatech-empty>\n    }\n  </rolatech-list>\n</rolatech-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: TabsComponent, selector: "rolatech-tabs", inputs: ["select", "loading"], outputs: ["selectChange"] }, { kind: "component", type: TabComponent, selector: "rolatech-tab", inputs: ["label"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: ListComponent, selector: "rolatech-list" }, { kind: "component", type: EmptyComponent, selector: "rolatech-empty" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: PropertyOfferItemComponent, selector: "rolatech-property-offer-item", inputs: ["offer"] }], animations: [
-            trigger('filter', [
-                state('collapsed', style({ height: '0px', minHeight: '0' })),
-                state('expanded', style({ height: '*' })),
-                transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
-            ]),
-        ], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyOfferIndexComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyOfferIndexComponent, isStandalone: true, selector: "rolatech-property-offer-index", usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  <rolatech-toolbar title=\"Offers\" large> </rolatech-toolbar>\n  <rolatech-tabs [select]=\"select\">\n    @for (item of links; track item) {\n      @if (item.status) {\n        <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n      } @else {\n        <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n      }\n    }\n  </rolatech-tabs>\n  <rolatech-list>\n    @if (offers) {\n      @for (item of offers; track item) {\n        <rolatech-property-offer-item [routerLink]=\"['./', item.id]\" [offer]=\"item\"></rolatech-property-offer-item>\n      }\n    } @else {\n      <rolatech-empty></rolatech-empty>\n    }\n  </rolatech-list>\n</rolatech-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: TabsComponent, selector: "rolatech-tabs", inputs: ["select", "loading"], outputs: ["selectChange"] }, { kind: "component", type: TabComponent, selector: "rolatech-tab", inputs: ["label"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: ListComponent, selector: "rolatech-list" }, { kind: "component", type: EmptyComponent, selector: "rolatech-empty" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: PropertyOfferItemComponent, selector: "rolatech-property-offer-item", inputs: ["offer"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyOfferIndexComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyOfferIndexComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-offer-index', imports: [
                         CommonModule,
@@ -2109,24 +2385,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                         MatSelectModule,
                         MatButtonModule,
                         PropertyOfferItemComponent,
-                    ], animations: [
-                        trigger('filter', [
-                            state('collapsed', style({ height: '0px', minHeight: '0' })),
-                            state('expanded', style({ height: '*' })),
-                            transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
-                        ]),
                     ], encapsulation: ViewEncapsulation.None, template: "<rolatech-container>\n  <rolatech-toolbar title=\"Offers\" large> </rolatech-toolbar>\n  <rolatech-tabs [select]=\"select\">\n    @for (item of links; track item) {\n      @if (item.status) {\n        <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n      } @else {\n        <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n      }\n    }\n  </rolatech-tabs>\n  <rolatech-list>\n    @if (offers) {\n      @for (item of offers; track item) {\n        <rolatech-property-offer-item [routerLink]=\"['./', item.id]\" [offer]=\"item\"></rolatech-property-offer-item>\n      }\n    } @else {\n      <rolatech-empty></rolatech-empty>\n    }\n  </rolatech-list>\n</rolatech-container>\n" }]
         }] });
 
 class PropertyViewingItemComponent {
     viewing = input.required(...(ngDevMode ? [{ debugName: "viewing" }] : []));
     status = PropertyViewingStatus;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyViewingItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyViewingItemComponent, isStandalone: true, selector: "rolatech-property-viewing-item", inputs: { viewing: { classPropertyName: "viewing", publicName: "viewing", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col hover:bg-[--rt-raised-background] cursor-pointer p-3\">\n  <div>\n    <div class=\"flex justify-between w-full mb-2\">\n      <a class=\"flex items-center gap-3\">\n        <span>Viewing ID: {{ viewing().id }}</span>\n      </a>\n      <span class=\"font-medium text-sm\">{{ status[viewing().status] }}</span>\n    </div>\n    <div class=\"flex flex-col overflow-x-scroll scrollbar-hide\">\n      <div class=\"flex flex-row py-2\">\n        @if (viewing().property.media) {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            @defer {\n              <rolatech-thumbnail [src]=\"viewing().property.media[0].url\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n        } @else {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            <rolatech-image-placeholder></rolatech-image-placeholder>\n          </div>\n        }\n        <div class=\"flex w-full justify-between\">\n          <div class=\"flex justify-between w-full\">\n            <div class=\"flex flex-col\">\n              <div>{{ viewing().property.title }}</div>\n              <div class=\"inline-flex gap-1 mt-2\">\n                <div>\n                  <span class=\"mr-1\">{{ viewing().property.bedrooms }}</span>\n                  <span i18n>Bedrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ viewing().property.bathrooms }}</span>\n                  <span i18n>Bathrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ viewing().property.receptions }}</span>\n                  <span i18n>Receptions</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"text-right\">\n              <div class=\"text-sm\">\u00A3{{ viewing().property.price | fixed }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: ImagePlaceholderComponent, selector: "rolatech-image-placeholder", inputs: ["ratio"] }, { kind: "pipe", type: FixedPipe, name: "fixed" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyViewingItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyViewingItemComponent, isStandalone: true, selector: "rolatech-property-viewing-item", inputs: { viewing: { classPropertyName: "viewing", publicName: "viewing", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col hover:bg-[--rt-raised-background] cursor-pointer p-3\">\n  <div>\n    <div class=\"flex justify-between w-full mb-2\">\n      <a class=\"flex items-center gap-3\">\n        <span>Viewing ID: {{ viewing().id }}</span>\n      </a>\n      <span class=\"font-medium text-sm\">{{ status[viewing().status] }}</span>\n    </div>\n    @if (viewing().item) {\n      <div class=\"flex flex-col overflow-x-scroll scrollbar-hide\">\n        <div class=\"flex flex-row py-2\">\n          @if (viewing().item.media) {\n            <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n              @defer {\n                <rolatech-thumbnail [src]=\"viewing().item.media[0].url\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n              } @placeholder {\n                <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n              }\n            </div>\n          } @else {\n            <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n              <rolatech-image-placeholder></rolatech-image-placeholder>\n            </div>\n          }\n          <div class=\"flex w-full justify-between\">\n            <div class=\"flex justify-between w-full\">\n              <div class=\"flex flex-col\">\n                <div>{{ viewing().item.propertyTitle }}</div>\n                <div class=\"inline-flex gap-1 mt-2\">\n                  <div>\n                    <span class=\"mr-1\">{{ viewing().item.bedrooms }}</span>\n                    <span i18n>Bedrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ viewing().item.bathrooms }}</span>\n                    <span i18n>Bathrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ viewing().item.receptions }}</span>\n                    <span i18n>Receptions</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"text-right\">\n                <div class=\"text-sm\">\u00A3{{ viewing().item.price.toFixed(2) }}</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: ImagePlaceholderComponent, selector: "rolatech-image-placeholder", inputs: ["ratio"] }], deferBlockDependencies: [() => [ThumbnailComponent]] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyViewingItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyViewingItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-property-viewing-item', imports: [MatIconModule, ThumbnailComponent, ImagePlaceholderComponent, FixedPipe], template: "<div class=\"flex flex-col hover:bg-[--rt-raised-background] cursor-pointer p-3\">\n  <div>\n    <div class=\"flex justify-between w-full mb-2\">\n      <a class=\"flex items-center gap-3\">\n        <span>Viewing ID: {{ viewing().id }}</span>\n      </a>\n      <span class=\"font-medium text-sm\">{{ status[viewing().status] }}</span>\n    </div>\n    <div class=\"flex flex-col overflow-x-scroll scrollbar-hide\">\n      <div class=\"flex flex-row py-2\">\n        @if (viewing().property.media) {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            @defer {\n              <rolatech-thumbnail [src]=\"viewing().property.media[0].url\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n        } @else {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            <rolatech-image-placeholder></rolatech-image-placeholder>\n          </div>\n        }\n        <div class=\"flex w-full justify-between\">\n          <div class=\"flex justify-between w-full\">\n            <div class=\"flex flex-col\">\n              <div>{{ viewing().property.title }}</div>\n              <div class=\"inline-flex gap-1 mt-2\">\n                <div>\n                  <span class=\"mr-1\">{{ viewing().property.bedrooms }}</span>\n                  <span i18n>Bedrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ viewing().property.bathrooms }}</span>\n                  <span i18n>Bathrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ viewing().property.receptions }}</span>\n                  <span i18n>Receptions</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"text-right\">\n              <div class=\"text-sm\">\u00A3{{ viewing().property.price | fixed }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'rolatech-property-viewing-item', imports: [MatIconModule, ThumbnailComponent, ImagePlaceholderComponent], template: "<div class=\"flex flex-col hover:bg-[--rt-raised-background] cursor-pointer p-3\">\n  <div>\n    <div class=\"flex justify-between w-full mb-2\">\n      <a class=\"flex items-center gap-3\">\n        <span>Viewing ID: {{ viewing().id }}</span>\n      </a>\n      <span class=\"font-medium text-sm\">{{ status[viewing().status] }}</span>\n    </div>\n    @if (viewing().item) {\n      <div class=\"flex flex-col overflow-x-scroll scrollbar-hide\">\n        <div class=\"flex flex-row py-2\">\n          @if (viewing().item.media) {\n            <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n              @defer {\n                <rolatech-thumbnail [src]=\"viewing().item.media[0].url\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n              } @placeholder {\n                <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n              }\n            </div>\n          } @else {\n            <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n              <rolatech-image-placeholder></rolatech-image-placeholder>\n            </div>\n          }\n          <div class=\"flex w-full justify-between\">\n            <div class=\"flex justify-between w-full\">\n              <div class=\"flex flex-col\">\n                <div>{{ viewing().item.propertyTitle }}</div>\n                <div class=\"inline-flex gap-1 mt-2\">\n                  <div>\n                    <span class=\"mr-1\">{{ viewing().item.bedrooms }}</span>\n                    <span i18n>Bedrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ viewing().item.bathrooms }}</span>\n                    <span i18n>Bathrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ viewing().item.receptions }}</span>\n                    <span i18n>Receptions</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"text-right\">\n                <div class=\"text-sm\">\u00A3{{ viewing().item.price.toFixed(2) }}</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n" }]
         }] });
 
 class PropertyViewingIndexComponent extends BaseComponent {
@@ -2203,10 +2473,10 @@ class PropertyViewingIndexComponent extends BaseComponent {
         })
             .join(',');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyViewingIndexComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyViewingIndexComponent, isStandalone: true, selector: "rolatech-property-viewing-index", usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  <rolatech-toolbar title=\"Viewings\" large> </rolatech-toolbar>\n  <rolatech-tabs [select]=\"select\">\n    @for (item of links; track item) {\n      @if (item.status) {\n        <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n      } @else {\n        <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n      }\n    }\n  </rolatech-tabs>\n  <rolatech-list>\n    @if (viewings) {\n      @for (item of viewings; track item) {\n        <rolatech-property-viewing-item [routerLink]=\"['./', item.id]\" [viewing]=\"item\"></rolatech-property-viewing-item>\n      }\n    } @else {\n      <rolatech-empty></rolatech-empty>\n    }\n  </rolatech-list>\n</rolatech-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: TabsComponent, selector: "rolatech-tabs", inputs: ["select", "loading"], outputs: ["selectChange"] }, { kind: "component", type: TabComponent, selector: "rolatech-tab", inputs: ["label"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: ListComponent, selector: "rolatech-list" }, { kind: "component", type: EmptyComponent, selector: "rolatech-empty" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: PropertyViewingItemComponent, selector: "rolatech-property-viewing-item", inputs: ["viewing"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyViewingIndexComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyViewingIndexComponent, isStandalone: true, selector: "rolatech-property-viewing-index", usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  <rolatech-toolbar title=\"Viewings\" large> </rolatech-toolbar>\n  <rolatech-tabs [select]=\"select\">\n    @for (item of links; track item) {\n      @if (item.status) {\n        <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n      } @else {\n        <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n      }\n    }\n  </rolatech-tabs>\n  <rolatech-list>\n    @if (viewings) {\n      @for (item of viewings; track item) {\n        <rolatech-property-viewing-item [routerLink]=\"['./', item.id]\" [viewing]=\"item\"></rolatech-property-viewing-item>\n      }\n    } @else {\n      <rolatech-empty></rolatech-empty>\n    }\n  </rolatech-list>\n</rolatech-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: TabsComponent, selector: "rolatech-tabs", inputs: ["select", "loading"], outputs: ["selectChange"] }, { kind: "component", type: TabComponent, selector: "rolatech-tab", inputs: ["label"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: ListComponent, selector: "rolatech-list" }, { kind: "component", type: EmptyComponent, selector: "rolatech-empty" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: PropertyViewingItemComponent, selector: "rolatech-property-viewing-item", inputs: ["viewing"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyViewingIndexComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyViewingIndexComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-viewing-index', imports: [
                         CommonModule,
@@ -2241,10 +2511,10 @@ class DuePipe {
             return '';
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.2", ngImport: i0, type: DuePipe, isStandalone: true, name: "due" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: DuePipe, isStandalone: true, name: "due" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DuePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DuePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'due',
@@ -2267,6 +2537,9 @@ class PropertyOfferDetailComponent extends BaseComponent {
     checkouting = false;
     holdingDeposit;
     securityDeposit;
+    type = computed(() => {
+        return this.offer.type.toString();
+    }, ...(ngDevMode ? [{ debugName: "type" }] : []));
     async ngOnInit() {
         this.route.params.subscribe((params) => {
             const id = params['id'];
@@ -2339,9 +2612,9 @@ class PropertyOfferDetailComponent extends BaseComponent {
         });
     }
     calculateDeposit() {
-        const price = this.offer.item.price;
-        this.holdingDeposit = ((price * 12) / 52 / 100).toFixed(2);
-        this.securityDeposit = (((price * 12) / 52 / 100) * 5).toFixed(2);
+        const price = this.offer.item.amount;
+        this.holdingDeposit = ((price * 12) / 52).toFixed(2);
+        this.securityDeposit = (((price * 12) / 52) * 5).toFixed(2);
     }
     holdingDepositCheckout() {
         this.checkouting = true;
@@ -2373,10 +2646,10 @@ class PropertyOfferDetailComponent extends BaseComponent {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyOfferDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyOfferDetailComponent, isStandalone: true, selector: "rolatech-property-offer-detail", usesInheritance: true, ngImport: i0, template: "@if (offer) {\n  <rolatech-container>\n    <rolatech-toolbar [title]=\"status[offer.status]\" large link=\"../\">\n      <button mat-flat-button (click)=\"timeline()\">\n        <mat-icon>history</mat-icon>\n        <span i18n>Offer status</span>\n      </button>\n    </rolatech-toolbar>\n    <div>\n      <div class=\"flex justify-between items-center py-2\">\n        <a class=\"text-xl font-bold\">Offer ID: {{ offer.id }}</a>\n      </div>\n\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Property details</div>\n        <hr class=\"mb-2\" />\n        <div\n          class=\"flex items-center py-2 cursor-pointer hover:bg-[--rt-raised-background]\"\n          [routerLink]=\"['../../', offer.item.propertyId]\"\n        >\n          <div class=\"min-w-16 w-24 object-cover aspect-video rounded-md mr-3\">\n            @defer {\n              <rolatech-thumbnail [src]=\"offer.item.media[0].url\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n          <div class=\"flex w-full justify-between\">\n            <div class=\"flex justify-between w-full\">\n              <div class=\"flex flex-col\">\n                <div>{{ offer.item.propertyTitle }}</div>\n                <div class=\"inline-flex gap-1 mt-2\">\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.bedrooms }}</span>\n                    <span i18n>Bedrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.bathrooms }}</span>\n                    <span i18n>Bathrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.receptions }}</span>\n                    <span i18n>Receptions</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"text-right\">\n                <div class=\"text-sm\">\u00A3{{ offer.item.price | fixed }}</div>\n              </div>\n            </div>\n          </div>\n          <div class=\"hidden md:flex flex-col px-3\"></div>\n        </div>\n      </div>\n      <div>\n        <div class=\"mt-3\">\n          <div class=\"text-lg py-2 font-bold\" i18n>Offer info</div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Created at</span>\n            <span class=\"text-sm\"> {{ offer.createdAt }}</span>\n          </div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Start date</span>\n            <span class=\"text-sm\"> {{ offer.startDate }}</span>\n          </div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Asked price</span>\n            <span class=\"text-sm\" i18n>\u00A3{{ offer.amount | fixed }}</span>\n          </div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Deposit due date</span>\n            <span class=\"text-sm\"> {{ offer.startDate | due }}</span>\n          </div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Holding deposit</span>\n            <span class=\"text-sm\">\u00A3{{ holdingDeposit }}</span>\n          </div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Security deposit</span>\n            <span class=\"text-sm\">\u00A3{{ securityDeposit }}</span>\n          </div>\n          <div class=\"flex items-baseline justify-between py-1\">\n            <span class=\"font-medium min-w-20\" i18n>Note</span>\n            <!-- <span class=\"text-sm\">{{ offer.note || '' }}</span> -->\n          </div>\n        </div>\n        <div id=\"payment-element\"></div>\n        @if (offer.status.toString() === 'CREATED' || offer.status.toString() === 'PAID') {\n          <div class=\"mt-6\">\n            <div class=\"text-lg pb-3 font-medium\" i18n>Payment method</div>\n\n            <div class=\"flex items-center\">\n              <svg\n                class=\"svg-icon\"\n                style=\"width: 2rem; height: 2rem\"\n                viewBox=\"0 0 1024 1024\"\n                version=\"1.1\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M395.846 603.585c-3.921 1.98-7.936 2.925-12.81 2.925-10.9 0-19.791-5.85-24.764-14.625l-2.006-3.864-78.106-167.913c-0.956-1.98-0.956-3.865-0.956-5.845 0-7.83 5.928-13.68 13.863-13.68 2.965 0 5.928 0.944 8.893 2.924l91.965 64.43c6.884 3.864 14.82 6.79 23.708 6.79 4.972 0 9.85-0.945 14.822-2.926L861.71 282.479c-77.149-89.804-204.684-148.384-349.135-148.384-235.371 0-427.242 157.158-427.242 351.294 0 105.368 57.361 201.017 147.323 265.447 6.88 4.905 11.852 13.68 11.852 22.45 0 2.925-0.957 5.85-2.006 8.775-6.881 26.318-18.831 69.334-18.831 71.223-0.958 2.92-2.013 6.79-2.013 10.75 0 7.83 5.929 13.68 13.865 13.68 2.963 0 5.928-0.944 7.935-2.925l92.922-53.674c6.885-3.87 14.82-6.794 22.756-6.794 3.916 0 8.889 0.944 12.81 1.98 43.496 12.644 91.012 19.53 139.48 19.53 235.372 0 427.24-157.158 427.24-351.294 0-58.58-17.78-114.143-48.467-163.003l-491.39 280.07-2.963 1.98z\"\n                  fill=\"#09BB07\"\n                />\n              </svg>\n              <span class=\"ml-1\" i18n>Stripe</span>\n            </div>\n          </div>\n        }\n      </div>\n      <!-- safe area -->\n      <div class=\"pb-16 sm:pb-3\"></div>\n      <div class=\"\">\n        <div class=\"flex items-center justify-end\">\n          @if (offer.status.toString() === 'PENDING') {\n            <span\n              class=\"underline text-sm underline-offset-4 mr-6 cursor-pointer hover:text-[--rt-brand-color]\"\n              (click)=\"cancel()\"\n              i18n\n              >Cancel</span\n            >\n          }\n          @if (offer.status.toString() === 'PENDING') {\n            <button mat-flat-button class=\"min-h-11\" (click)=\"holdingDepositCheckout()\" [disabled]=\"checkouting\">\n              <span style=\"display: flex; align-items: center\">\n                @if (checkouting) {\n                  <mat-progress-spinner diameter=\"20\" mode=\"indeterminate\" [style.marginRight.px]=\"8\"></mat-progress-spinner>\n                }\n                {{ checkouting ? 'Processing...' : 'Pay holding deposit' }}\n              </span>\n            </button>\n          }\n          @if (offer.status.toString() === 'ACCEPTED') {\n            <button mat-flat-button class=\"min-h-11\" (click)=\"securityDepositCheckout()\" [disabled]=\"checkouting\">\n              <span style=\"display: flex; align-items: center\">\n                @if (checkouting) {\n                  <mat-progress-spinner diameter=\"20\" mode=\"indeterminate\" [style.marginRight.px]=\"8\"></mat-progress-spinner>\n                }\n                {{ checkouting ? 'Processing...' : 'Pay security deposit' }}\n              </span>\n            </button>\n          }\n          <!-- <button mat-flat-button class=\"w-32 min-h-11\" (click)=\"securityDepositCheckout()\" i18n>Pay security deposit</button> -->\n        </div>\n      </div>\n    </div>\n  </rolatech-container>\n}\n@if (info) {\n  <div\n    [ngClass]=\"loadingTimeline ? 'translate-x-full' : 'translate-none'\"\n    class=\"fixed top-0 right-0 z-[1001] h-screen p-4 overflow-y-auto transition-transform bg-[--rt-raised-background] w-80 sm:w-[300px] shadow-xl\"\n  >\n    <div class=\"flex justify-between items-center sm:p-4\">\n      <div class=\"text-xl font-bold\" i18n>Status</div>\n      <button mat-icon-button (click)=\"info = !info\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n    @if (loadingTimeline) {\n      <div>\n        <rolatech-spinner></rolatech-spinner>\n      </div>\n    } @else {\n      <div class=\"mt-3 p-1 sm:p-4\">\n        <ol class=\"relative boffer-l boffer-[--rt-boffer-color]\">\n          @for (item of timelineData; track item) {\n            <li class=\"mb-8 ml-4\">\n              <div\n                class=\"absolute w-3 h-3 rounded-full mt-1.5 -left-1.5 boffer boffer-[--rt-raised-background] bg-[--rt-text-primary]\"\n              ></div>\n              <div class=\"text-md font-bold mb-1\">{{ timelineStatus[item.status] }}</div>\n              @if (item.status === 'OFFER_RETURN_REJECTED') {\n                <div class=\"text-sm mb-1\">{{ item.return.note }}</div>\n              }\n              @if (item.status === 'OFFER_RETURN_REQUESTED') {\n                <div class=\"text-sm mb-1\">{{ item.return.reason }}</div>\n              }\n              <div class=\"text-sm text-[--rt-text-secondary]\">{{ item.date }}</div>\n            </li>\n          }\n        </ol>\n      </div>\n    }\n  </div>\n}\n\n<div\n  (click)=\"info = !info\"\n  [ngClass]=\"info ? 'visible' : 'invisible'\"\n  class=\"bg-[--rt-10-percent-layer] fixed inset-0 z-[1000]\"\n></div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SpinnerComponent, selector: "rolatech-spinner", inputs: ["title"] }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: FixedPipe, name: "fixed" }, { kind: "pipe", type: DuePipe, name: "due" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyOfferDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyOfferDetailComponent, isStandalone: true, selector: "rolatech-property-offer-detail", usesInheritance: true, ngImport: i0, template: "@if (offer) {\n  <rolatech-container>\n    <rolatech-toolbar [title]=\"status[offer.status]\" large link=\"../\">\n      <button mat-flat-button (click)=\"timeline()\">\n        <mat-icon>history</mat-icon>\n        <span i18n>Offer status</span>\n      </button>\n    </rolatech-toolbar>\n    <div>\n      <div class=\"flex justify-between items-center py-2\">\n        <a class=\"text-xl font-bold\">Offer ID: {{ offer.id }}</a>\n      </div>\n\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Property details</div>\n        <hr class=\"mb-2\" />\n        <div\n          class=\"flex items-center py-2 cursor-pointer hover:bg-[--rt-raised-background]\"\n          [routerLink]=\"['../../', offer.item.propertyId]\"\n        >\n          <div class=\"min-w-24 w-24 object-cover aspect-video rounded-md\">\n            @defer {\n              <rolatech-thumbnail [src]=\"offer.item.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n          <div class=\"flex w-full justify-between\">\n            <div class=\"flex justify-between w-full px-2\">\n              <div class=\"flex flex-col\">\n                <div>{{ offer.item.propertyTitle }}</div>\n                <div class=\"inline-flex gap-1 mt-2\">\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.bedrooms }}</span>\n                    <span i18n>Bedrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.bathrooms }}</span>\n                    <span i18n>Bathrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.receptions }}</span>\n                    <span i18n>Receptions</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"text-right\">\n                <div class=\"text-sm\">\u00A3{{ offer.item.amount.toFixed(2) }}</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div>\n        <div class=\"mt-3\">\n          <div class=\"text-lg py-2 font-bold\" i18n>Offer info</div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Created at</span>\n            <span class=\"text-sm\"> {{ offer.createdAt }}</span>\n          </div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Start date</span>\n            <span class=\"text-sm\"> {{ offer.startDate }}</span>\n          </div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Asked price</span>\n            <span class=\"text-sm\" i18n>\u00A3{{ offer.amount.toFixed(2) }}</span>\n          </div>\n          @if (type() === 'LETTINGS') {\n            @if (property) {\n              <div class=\"flex items-center justify-between py-1\">\n                <span class=\"font-medium\" i18n>Deposit due date</span>\n                <span class=\"text-sm\"> {{ offer.startDate | due }}</span>\n              </div>\n              <div class=\"flex items-center justify-between py-1\">\n                <span class=\"font-medium\" i18n>Holding deposit</span>\n                <span class=\"text-sm\">\u00A3{{ holdingDeposit }}</span>\n              </div>\n              <div class=\"flex items-center justify-between py-1\">\n                <span class=\"font-medium\" i18n>Security deposit</span>\n                <span class=\"text-sm\">\u00A3{{ securityDeposit }}</span>\n              </div>\n            }\n          }\n          <div class=\"flex items-baseline justify-between py-1\">\n            <span class=\"font-medium min-w-20\" i18n>Note</span>\n            <!-- <span class=\"text-sm\">{{ offer.note || '' }}</span> -->\n          </div>\n        </div>\n        <div id=\"payment-element\"></div>\n        @if (offer.status.toString() === 'CREATED' || offer.status.toString() === 'PAID') {\n          <div class=\"mt-6\">\n            <div class=\"text-lg pb-3 font-medium\" i18n>Payment method</div>\n\n            <div class=\"flex items-center\">\n              <svg\n                class=\"svg-icon\"\n                style=\"width: 2rem; height: 2rem\"\n                viewBox=\"0 0 1024 1024\"\n                version=\"1.1\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M395.846 603.585c-3.921 1.98-7.936 2.925-12.81 2.925-10.9 0-19.791-5.85-24.764-14.625l-2.006-3.864-78.106-167.913c-0.956-1.98-0.956-3.865-0.956-5.845 0-7.83 5.928-13.68 13.863-13.68 2.965 0 5.928 0.944 8.893 2.924l91.965 64.43c6.884 3.864 14.82 6.79 23.708 6.79 4.972 0 9.85-0.945 14.822-2.926L861.71 282.479c-77.149-89.804-204.684-148.384-349.135-148.384-235.371 0-427.242 157.158-427.242 351.294 0 105.368 57.361 201.017 147.323 265.447 6.88 4.905 11.852 13.68 11.852 22.45 0 2.925-0.957 5.85-2.006 8.775-6.881 26.318-18.831 69.334-18.831 71.223-0.958 2.92-2.013 6.79-2.013 10.75 0 7.83 5.929 13.68 13.865 13.68 2.963 0 5.928-0.944 7.935-2.925l92.922-53.674c6.885-3.87 14.82-6.794 22.756-6.794 3.916 0 8.889 0.944 12.81 1.98 43.496 12.644 91.012 19.53 139.48 19.53 235.372 0 427.24-157.158 427.24-351.294 0-58.58-17.78-114.143-48.467-163.003l-491.39 280.07-2.963 1.98z\"\n                  fill=\"#09BB07\"\n                />\n              </svg>\n              <span class=\"ml-1\" i18n>Stripe</span>\n            </div>\n          </div>\n        }\n      </div>\n      <!-- safe area -->\n      <div class=\"pb-16 sm:pb-3\"></div>\n      <div class=\"\">\n        <div class=\"flex items-center justify-end\">\n          @if (offer.status.toString() === 'PENDING') {\n            <span\n              class=\"underline text-sm underline-offset-4 mr-6 cursor-pointer hover:text-[--rt-brand-color]\"\n              (click)=\"cancel()\"\n              i18n\n              >Cancel</span\n            >\n          }\n          @if (offer.status.toString() === 'PENDING') {\n            <button mat-flat-button class=\"min-h-11\" (click)=\"holdingDepositCheckout()\" [disabled]=\"checkouting\">\n              <span style=\"display: flex; align-items: center\">\n                @if (checkouting) {\n                  <mat-progress-spinner diameter=\"20\" mode=\"indeterminate\" [style.marginRight.px]=\"8\"></mat-progress-spinner>\n                }\n                {{ checkouting ? 'Processing...' : 'Pay holding deposit' }}\n              </span>\n            </button>\n          }\n          @if (offer.status.toString() === 'ACCEPTED') {\n            <button mat-flat-button class=\"min-h-11\" (click)=\"securityDepositCheckout()\" [disabled]=\"checkouting\">\n              <span style=\"display: flex; align-items: center\">\n                @if (checkouting) {\n                  <mat-progress-spinner diameter=\"20\" mode=\"indeterminate\" [style.marginRight.px]=\"8\"></mat-progress-spinner>\n                }\n                {{ checkouting ? 'Processing...' : 'Pay security deposit' }}\n              </span>\n            </button>\n          }\n          <!-- <button mat-flat-button class=\"w-32 min-h-11\" (click)=\"securityDepositCheckout()\" i18n>Pay security deposit</button> -->\n        </div>\n      </div>\n    </div>\n  </rolatech-container>\n}\n@if (info) {\n  <div\n    [ngClass]=\"loadingTimeline ? 'translate-x-full' : 'translate-none'\"\n    class=\"fixed top-0 right-0 z-[1001] h-screen p-4 overflow-y-auto transition-transform bg-[--rt-raised-background] w-80 sm:w-[300px] shadow-xl\"\n  >\n    <div class=\"flex justify-between items-center sm:p-4\">\n      <div class=\"text-xl font-bold\" i18n>Status</div>\n      <button mat-icon-button (click)=\"info = !info\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n    @if (loadingTimeline) {\n      <div>\n        <rolatech-spinner></rolatech-spinner>\n      </div>\n    } @else {\n      <div class=\"mt-3 p-1 sm:p-4\">\n        <ol class=\"relative boffer-l boffer-[--rt-boffer-color]\">\n          @for (item of timelineData; track item) {\n            <li class=\"mb-8 ml-4\">\n              <div\n                class=\"absolute w-3 h-3 rounded-full mt-1.5 -left-1.5 boffer boffer-[--rt-raised-background] bg-[--rt-text-primary]\"\n              ></div>\n              <div class=\"text-md font-bold mb-1\">{{ timelineStatus[item.status] }}</div>\n              @if (item.status === 'OFFER_RETURN_REJECTED') {\n                <div class=\"text-sm mb-1\">{{ item.return.note }}</div>\n              }\n              @if (item.status === 'OFFER_RETURN_REQUESTED') {\n                <div class=\"text-sm mb-1\">{{ item.return.reason }}</div>\n              }\n              <div class=\"text-sm text-[--rt-text-secondary]\">{{ item.date }}</div>\n            </li>\n          }\n        </ol>\n      </div>\n    }\n  </div>\n}\n\n<div\n  (click)=\"info = !info\"\n  [ngClass]=\"info ? 'visible' : 'invisible'\"\n  class=\"bg-[--rt-10-percent-layer] fixed inset-0 z-[1000]\"\n></div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SpinnerComponent, selector: "rolatech-spinner", inputs: ["title"] }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: DuePipe, name: "due" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyOfferDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyOfferDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-offer-detail', imports: [
                         MatButtonModule,
@@ -2386,11 +2659,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                         SpinnerComponent,
                         ContainerComponent,
                         ToolbarComponent,
-                        FixedPipe,
                         MatProgressSpinnerModule,
                         RouterLink,
                         DuePipe,
-                    ], template: "@if (offer) {\n  <rolatech-container>\n    <rolatech-toolbar [title]=\"status[offer.status]\" large link=\"../\">\n      <button mat-flat-button (click)=\"timeline()\">\n        <mat-icon>history</mat-icon>\n        <span i18n>Offer status</span>\n      </button>\n    </rolatech-toolbar>\n    <div>\n      <div class=\"flex justify-between items-center py-2\">\n        <a class=\"text-xl font-bold\">Offer ID: {{ offer.id }}</a>\n      </div>\n\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Property details</div>\n        <hr class=\"mb-2\" />\n        <div\n          class=\"flex items-center py-2 cursor-pointer hover:bg-[--rt-raised-background]\"\n          [routerLink]=\"['../../', offer.item.propertyId]\"\n        >\n          <div class=\"min-w-16 w-24 object-cover aspect-video rounded-md mr-3\">\n            @defer {\n              <rolatech-thumbnail [src]=\"offer.item.media[0].url\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n          <div class=\"flex w-full justify-between\">\n            <div class=\"flex justify-between w-full\">\n              <div class=\"flex flex-col\">\n                <div>{{ offer.item.propertyTitle }}</div>\n                <div class=\"inline-flex gap-1 mt-2\">\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.bedrooms }}</span>\n                    <span i18n>Bedrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.bathrooms }}</span>\n                    <span i18n>Bathrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.receptions }}</span>\n                    <span i18n>Receptions</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"text-right\">\n                <div class=\"text-sm\">\u00A3{{ offer.item.price | fixed }}</div>\n              </div>\n            </div>\n          </div>\n          <div class=\"hidden md:flex flex-col px-3\"></div>\n        </div>\n      </div>\n      <div>\n        <div class=\"mt-3\">\n          <div class=\"text-lg py-2 font-bold\" i18n>Offer info</div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Created at</span>\n            <span class=\"text-sm\"> {{ offer.createdAt }}</span>\n          </div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Start date</span>\n            <span class=\"text-sm\"> {{ offer.startDate }}</span>\n          </div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Asked price</span>\n            <span class=\"text-sm\" i18n>\u00A3{{ offer.amount | fixed }}</span>\n          </div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Deposit due date</span>\n            <span class=\"text-sm\"> {{ offer.startDate | due }}</span>\n          </div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Holding deposit</span>\n            <span class=\"text-sm\">\u00A3{{ holdingDeposit }}</span>\n          </div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Security deposit</span>\n            <span class=\"text-sm\">\u00A3{{ securityDeposit }}</span>\n          </div>\n          <div class=\"flex items-baseline justify-between py-1\">\n            <span class=\"font-medium min-w-20\" i18n>Note</span>\n            <!-- <span class=\"text-sm\">{{ offer.note || '' }}</span> -->\n          </div>\n        </div>\n        <div id=\"payment-element\"></div>\n        @if (offer.status.toString() === 'CREATED' || offer.status.toString() === 'PAID') {\n          <div class=\"mt-6\">\n            <div class=\"text-lg pb-3 font-medium\" i18n>Payment method</div>\n\n            <div class=\"flex items-center\">\n              <svg\n                class=\"svg-icon\"\n                style=\"width: 2rem; height: 2rem\"\n                viewBox=\"0 0 1024 1024\"\n                version=\"1.1\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M395.846 603.585c-3.921 1.98-7.936 2.925-12.81 2.925-10.9 0-19.791-5.85-24.764-14.625l-2.006-3.864-78.106-167.913c-0.956-1.98-0.956-3.865-0.956-5.845 0-7.83 5.928-13.68 13.863-13.68 2.965 0 5.928 0.944 8.893 2.924l91.965 64.43c6.884 3.864 14.82 6.79 23.708 6.79 4.972 0 9.85-0.945 14.822-2.926L861.71 282.479c-77.149-89.804-204.684-148.384-349.135-148.384-235.371 0-427.242 157.158-427.242 351.294 0 105.368 57.361 201.017 147.323 265.447 6.88 4.905 11.852 13.68 11.852 22.45 0 2.925-0.957 5.85-2.006 8.775-6.881 26.318-18.831 69.334-18.831 71.223-0.958 2.92-2.013 6.79-2.013 10.75 0 7.83 5.929 13.68 13.865 13.68 2.963 0 5.928-0.944 7.935-2.925l92.922-53.674c6.885-3.87 14.82-6.794 22.756-6.794 3.916 0 8.889 0.944 12.81 1.98 43.496 12.644 91.012 19.53 139.48 19.53 235.372 0 427.24-157.158 427.24-351.294 0-58.58-17.78-114.143-48.467-163.003l-491.39 280.07-2.963 1.98z\"\n                  fill=\"#09BB07\"\n                />\n              </svg>\n              <span class=\"ml-1\" i18n>Stripe</span>\n            </div>\n          </div>\n        }\n      </div>\n      <!-- safe area -->\n      <div class=\"pb-16 sm:pb-3\"></div>\n      <div class=\"\">\n        <div class=\"flex items-center justify-end\">\n          @if (offer.status.toString() === 'PENDING') {\n            <span\n              class=\"underline text-sm underline-offset-4 mr-6 cursor-pointer hover:text-[--rt-brand-color]\"\n              (click)=\"cancel()\"\n              i18n\n              >Cancel</span\n            >\n          }\n          @if (offer.status.toString() === 'PENDING') {\n            <button mat-flat-button class=\"min-h-11\" (click)=\"holdingDepositCheckout()\" [disabled]=\"checkouting\">\n              <span style=\"display: flex; align-items: center\">\n                @if (checkouting) {\n                  <mat-progress-spinner diameter=\"20\" mode=\"indeterminate\" [style.marginRight.px]=\"8\"></mat-progress-spinner>\n                }\n                {{ checkouting ? 'Processing...' : 'Pay holding deposit' }}\n              </span>\n            </button>\n          }\n          @if (offer.status.toString() === 'ACCEPTED') {\n            <button mat-flat-button class=\"min-h-11\" (click)=\"securityDepositCheckout()\" [disabled]=\"checkouting\">\n              <span style=\"display: flex; align-items: center\">\n                @if (checkouting) {\n                  <mat-progress-spinner diameter=\"20\" mode=\"indeterminate\" [style.marginRight.px]=\"8\"></mat-progress-spinner>\n                }\n                {{ checkouting ? 'Processing...' : 'Pay security deposit' }}\n              </span>\n            </button>\n          }\n          <!-- <button mat-flat-button class=\"w-32 min-h-11\" (click)=\"securityDepositCheckout()\" i18n>Pay security deposit</button> -->\n        </div>\n      </div>\n    </div>\n  </rolatech-container>\n}\n@if (info) {\n  <div\n    [ngClass]=\"loadingTimeline ? 'translate-x-full' : 'translate-none'\"\n    class=\"fixed top-0 right-0 z-[1001] h-screen p-4 overflow-y-auto transition-transform bg-[--rt-raised-background] w-80 sm:w-[300px] shadow-xl\"\n  >\n    <div class=\"flex justify-between items-center sm:p-4\">\n      <div class=\"text-xl font-bold\" i18n>Status</div>\n      <button mat-icon-button (click)=\"info = !info\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n    @if (loadingTimeline) {\n      <div>\n        <rolatech-spinner></rolatech-spinner>\n      </div>\n    } @else {\n      <div class=\"mt-3 p-1 sm:p-4\">\n        <ol class=\"relative boffer-l boffer-[--rt-boffer-color]\">\n          @for (item of timelineData; track item) {\n            <li class=\"mb-8 ml-4\">\n              <div\n                class=\"absolute w-3 h-3 rounded-full mt-1.5 -left-1.5 boffer boffer-[--rt-raised-background] bg-[--rt-text-primary]\"\n              ></div>\n              <div class=\"text-md font-bold mb-1\">{{ timelineStatus[item.status] }}</div>\n              @if (item.status === 'OFFER_RETURN_REJECTED') {\n                <div class=\"text-sm mb-1\">{{ item.return.note }}</div>\n              }\n              @if (item.status === 'OFFER_RETURN_REQUESTED') {\n                <div class=\"text-sm mb-1\">{{ item.return.reason }}</div>\n              }\n              <div class=\"text-sm text-[--rt-text-secondary]\">{{ item.date }}</div>\n            </li>\n          }\n        </ol>\n      </div>\n    }\n  </div>\n}\n\n<div\n  (click)=\"info = !info\"\n  [ngClass]=\"info ? 'visible' : 'invisible'\"\n  class=\"bg-[--rt-10-percent-layer] fixed inset-0 z-[1000]\"\n></div>\n" }]
+                    ], template: "@if (offer) {\n  <rolatech-container>\n    <rolatech-toolbar [title]=\"status[offer.status]\" large link=\"../\">\n      <button mat-flat-button (click)=\"timeline()\">\n        <mat-icon>history</mat-icon>\n        <span i18n>Offer status</span>\n      </button>\n    </rolatech-toolbar>\n    <div>\n      <div class=\"flex justify-between items-center py-2\">\n        <a class=\"text-xl font-bold\">Offer ID: {{ offer.id }}</a>\n      </div>\n\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Property details</div>\n        <hr class=\"mb-2\" />\n        <div\n          class=\"flex items-center py-2 cursor-pointer hover:bg-[--rt-raised-background]\"\n          [routerLink]=\"['../../', offer.item.propertyId]\"\n        >\n          <div class=\"min-w-24 w-24 object-cover aspect-video rounded-md\">\n            @defer {\n              <rolatech-thumbnail [src]=\"offer.item.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n          <div class=\"flex w-full justify-between\">\n            <div class=\"flex justify-between w-full px-2\">\n              <div class=\"flex flex-col\">\n                <div>{{ offer.item.propertyTitle }}</div>\n                <div class=\"inline-flex gap-1 mt-2\">\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.bedrooms }}</span>\n                    <span i18n>Bedrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.bathrooms }}</span>\n                    <span i18n>Bathrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.receptions }}</span>\n                    <span i18n>Receptions</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"text-right\">\n                <div class=\"text-sm\">\u00A3{{ offer.item.amount.toFixed(2) }}</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div>\n        <div class=\"mt-3\">\n          <div class=\"text-lg py-2 font-bold\" i18n>Offer info</div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Created at</span>\n            <span class=\"text-sm\"> {{ offer.createdAt }}</span>\n          </div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Start date</span>\n            <span class=\"text-sm\"> {{ offer.startDate }}</span>\n          </div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Asked price</span>\n            <span class=\"text-sm\" i18n>\u00A3{{ offer.amount.toFixed(2) }}</span>\n          </div>\n          @if (type() === 'LETTINGS') {\n            @if (property) {\n              <div class=\"flex items-center justify-between py-1\">\n                <span class=\"font-medium\" i18n>Deposit due date</span>\n                <span class=\"text-sm\"> {{ offer.startDate | due }}</span>\n              </div>\n              <div class=\"flex items-center justify-between py-1\">\n                <span class=\"font-medium\" i18n>Holding deposit</span>\n                <span class=\"text-sm\">\u00A3{{ holdingDeposit }}</span>\n              </div>\n              <div class=\"flex items-center justify-between py-1\">\n                <span class=\"font-medium\" i18n>Security deposit</span>\n                <span class=\"text-sm\">\u00A3{{ securityDeposit }}</span>\n              </div>\n            }\n          }\n          <div class=\"flex items-baseline justify-between py-1\">\n            <span class=\"font-medium min-w-20\" i18n>Note</span>\n            <!-- <span class=\"text-sm\">{{ offer.note || '' }}</span> -->\n          </div>\n        </div>\n        <div id=\"payment-element\"></div>\n        @if (offer.status.toString() === 'CREATED' || offer.status.toString() === 'PAID') {\n          <div class=\"mt-6\">\n            <div class=\"text-lg pb-3 font-medium\" i18n>Payment method</div>\n\n            <div class=\"flex items-center\">\n              <svg\n                class=\"svg-icon\"\n                style=\"width: 2rem; height: 2rem\"\n                viewBox=\"0 0 1024 1024\"\n                version=\"1.1\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M395.846 603.585c-3.921 1.98-7.936 2.925-12.81 2.925-10.9 0-19.791-5.85-24.764-14.625l-2.006-3.864-78.106-167.913c-0.956-1.98-0.956-3.865-0.956-5.845 0-7.83 5.928-13.68 13.863-13.68 2.965 0 5.928 0.944 8.893 2.924l91.965 64.43c6.884 3.864 14.82 6.79 23.708 6.79 4.972 0 9.85-0.945 14.822-2.926L861.71 282.479c-77.149-89.804-204.684-148.384-349.135-148.384-235.371 0-427.242 157.158-427.242 351.294 0 105.368 57.361 201.017 147.323 265.447 6.88 4.905 11.852 13.68 11.852 22.45 0 2.925-0.957 5.85-2.006 8.775-6.881 26.318-18.831 69.334-18.831 71.223-0.958 2.92-2.013 6.79-2.013 10.75 0 7.83 5.929 13.68 13.865 13.68 2.963 0 5.928-0.944 7.935-2.925l92.922-53.674c6.885-3.87 14.82-6.794 22.756-6.794 3.916 0 8.889 0.944 12.81 1.98 43.496 12.644 91.012 19.53 139.48 19.53 235.372 0 427.24-157.158 427.24-351.294 0-58.58-17.78-114.143-48.467-163.003l-491.39 280.07-2.963 1.98z\"\n                  fill=\"#09BB07\"\n                />\n              </svg>\n              <span class=\"ml-1\" i18n>Stripe</span>\n            </div>\n          </div>\n        }\n      </div>\n      <!-- safe area -->\n      <div class=\"pb-16 sm:pb-3\"></div>\n      <div class=\"\">\n        <div class=\"flex items-center justify-end\">\n          @if (offer.status.toString() === 'PENDING') {\n            <span\n              class=\"underline text-sm underline-offset-4 mr-6 cursor-pointer hover:text-[--rt-brand-color]\"\n              (click)=\"cancel()\"\n              i18n\n              >Cancel</span\n            >\n          }\n          @if (offer.status.toString() === 'PENDING') {\n            <button mat-flat-button class=\"min-h-11\" (click)=\"holdingDepositCheckout()\" [disabled]=\"checkouting\">\n              <span style=\"display: flex; align-items: center\">\n                @if (checkouting) {\n                  <mat-progress-spinner diameter=\"20\" mode=\"indeterminate\" [style.marginRight.px]=\"8\"></mat-progress-spinner>\n                }\n                {{ checkouting ? 'Processing...' : 'Pay holding deposit' }}\n              </span>\n            </button>\n          }\n          @if (offer.status.toString() === 'ACCEPTED') {\n            <button mat-flat-button class=\"min-h-11\" (click)=\"securityDepositCheckout()\" [disabled]=\"checkouting\">\n              <span style=\"display: flex; align-items: center\">\n                @if (checkouting) {\n                  <mat-progress-spinner diameter=\"20\" mode=\"indeterminate\" [style.marginRight.px]=\"8\"></mat-progress-spinner>\n                }\n                {{ checkouting ? 'Processing...' : 'Pay security deposit' }}\n              </span>\n            </button>\n          }\n          <!-- <button mat-flat-button class=\"w-32 min-h-11\" (click)=\"securityDepositCheckout()\" i18n>Pay security deposit</button> -->\n        </div>\n      </div>\n    </div>\n  </rolatech-container>\n}\n@if (info) {\n  <div\n    [ngClass]=\"loadingTimeline ? 'translate-x-full' : 'translate-none'\"\n    class=\"fixed top-0 right-0 z-[1001] h-screen p-4 overflow-y-auto transition-transform bg-[--rt-raised-background] w-80 sm:w-[300px] shadow-xl\"\n  >\n    <div class=\"flex justify-between items-center sm:p-4\">\n      <div class=\"text-xl font-bold\" i18n>Status</div>\n      <button mat-icon-button (click)=\"info = !info\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n    @if (loadingTimeline) {\n      <div>\n        <rolatech-spinner></rolatech-spinner>\n      </div>\n    } @else {\n      <div class=\"mt-3 p-1 sm:p-4\">\n        <ol class=\"relative boffer-l boffer-[--rt-boffer-color]\">\n          @for (item of timelineData; track item) {\n            <li class=\"mb-8 ml-4\">\n              <div\n                class=\"absolute w-3 h-3 rounded-full mt-1.5 -left-1.5 boffer boffer-[--rt-raised-background] bg-[--rt-text-primary]\"\n              ></div>\n              <div class=\"text-md font-bold mb-1\">{{ timelineStatus[item.status] }}</div>\n              @if (item.status === 'OFFER_RETURN_REJECTED') {\n                <div class=\"text-sm mb-1\">{{ item.return.note }}</div>\n              }\n              @if (item.status === 'OFFER_RETURN_REQUESTED') {\n                <div class=\"text-sm mb-1\">{{ item.return.reason }}</div>\n              }\n              <div class=\"text-sm text-[--rt-text-secondary]\">{{ item.date }}</div>\n            </li>\n          }\n        </ol>\n      </div>\n    }\n  </div>\n}\n\n<div\n  (click)=\"info = !info\"\n  [ngClass]=\"info ? 'visible' : 'invisible'\"\n  class=\"bg-[--rt-10-percent-layer] fixed inset-0 z-[1000]\"\n></div>\n" }]
         }] });
 
 class PropertyViewingDetailComponent extends BaseComponent {
@@ -2444,10 +2716,10 @@ class PropertyViewingDetailComponent extends BaseComponent {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyViewingDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyViewingDetailComponent, isStandalone: true, selector: "rolatech-property-viewing-detail", usesInheritance: true, ngImport: i0, template: "@if (viewing) {\n  <rolatech-container>\n    <rolatech-toolbar [title]=\"status[viewing.status]\" large link=\"../\"> </rolatech-toolbar>\n    <div>\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Property details</div>\n        <hr class=\"mb-2\" />\n        @if (property) {\n          <div\n            class=\"flex items-center py-2 cursor-pointer hover:bg-[--rt-raised-background]\"\n            [routerLink]=\"['../../', property.id]\"\n          >\n            <div class=\"min-w-16 w-24 object-cover aspect-video rounded-md mr-3\">\n              @defer {\n                <rolatech-thumbnail [src]=\"property.media[0].url\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n              } @placeholder {\n                <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n              }\n            </div>\n            <div class=\"flex w-full justify-between\">\n              <div class=\"flex justify-between w-full\">\n                <div class=\"flex flex-col\">\n                  <div>{{ property.title }}</div>\n                  <div class=\"inline-flex gap-1 mt-2\">\n                    <div>\n                      <span class=\"mr-1\">{{ property.bedrooms }}</span>\n                      <span i18n>Bedrooms</span>\n                    </div>\n                    <div>\n                      <span class=\"mr-1\">{{ property.bathrooms }}</span>\n                      <span i18n>Bathrooms</span>\n                    </div>\n                    <div>\n                      <span class=\"mr-1\">{{ property.receptions }}</span>\n                      <span i18n>Receptions</span>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"text-right\">\n                  <div class=\"text-sm\">\u00A3{{ property.price | fixed }}</div>\n                </div>\n              </div>\n            </div>\n            <div class=\"hidden md:flex flex-col px-3\"></div>\n          </div>\n        }\n      </div>\n\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Proposed times</div>\n        <hr class=\"mb-2\" />\n        @for (item of viewing.proposedSlots; track $index) {\n          <div class=\"flex flex-row items-center gap-3 py-3\">\n            <rolatech-rich-label label=\"Date\" [title]=\"item.date\"></rolatech-rich-label>\n            <rolatech-rich-label label=\"Time\" [title]=\"item.time\"></rolatech-rich-label>\n            @if (viewing.viewingDate && viewing.viewingTime) {\n              @if (item.date === viewing.viewingDate && item.time === viewing.viewingTime) {\n                <div class=\"ml-3\"><button mat-flat-button i18n disabled=\"\">Confirmed</button></div>\n              }\n            }\n          </div>\n        }\n      </div>\n      <!-- safe area -->\n      <div class=\"pb-16 sm:pb-3\"></div>\n      <div class=\"\">\n        <div class=\"flex items-center justify-end\">\n          @if (viewing.status.toString() !== 'CANCELLED') {\n            <button mat-flat-button class=\"min-h-11\" (click)=\"cancel()\" i18n>Cancel</button>\n          }\n        </div>\n      </div>\n    </div>\n  </rolatech-container>\n}\n@if (info) {\n  <div\n    [ngClass]=\"loadingTimeline ? 'translate-x-full' : 'translate-none'\"\n    class=\"fixed top-0 right-0 z-[1001] h-screen p-4 overflow-y-auto transition-transform bg-[--rt-raised-background] w-80 sm:w-[300px] shadow-xl\"\n  >\n    <div class=\"flex justify-between items-center sm:p-4\">\n      <div class=\"text-xl font-bold\" i18n>Status</div>\n      <button mat-icon-button (click)=\"info = !info\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n  </div>\n}\n\n<div\n  (click)=\"info = !info\"\n  [ngClass]=\"info ? 'visible' : 'invisible'\"\n  class=\"bg-[--rt-10-percent-layer] fixed inset-0 z-[1000]\"\n></div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: RichLabelComponent, selector: "rolatech-rich-label", inputs: ["label", "title"] }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: FixedPipe, name: "fixed" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyViewingDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyViewingDetailComponent, isStandalone: true, selector: "rolatech-property-viewing-detail", usesInheritance: true, ngImport: i0, template: "@if (viewing) {\n  <rolatech-container>\n    <rolatech-toolbar [title]=\"status[viewing.status]\" large link=\"../\"> </rolatech-toolbar>\n    <div>\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Property details</div>\n        <hr class=\"mb-2\" />\n        @if (property) {\n          <div\n            class=\"flex items-center py-2 cursor-pointer hover:bg-[--rt-raised-background]\"\n            [routerLink]=\"['../../', property.id]\"\n          >\n            <div class=\"min-w-24 w-24 object-cover aspect-video rounded-md mr-3\">\n              @defer {\n                <rolatech-thumbnail [src]=\"property.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n              } @placeholder {\n                <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n              }\n            </div>\n            <div class=\"flex w-full justify-between\">\n              <div class=\"flex justify-between w-full\">\n                <div class=\"flex flex-col\">\n                  <div>{{ property.title }}</div>\n                  <div class=\"inline-flex gap-1 mt-2\">\n                    <div>\n                      <span class=\"mr-1\">{{ property.bedrooms }}</span>\n                      <span i18n>Bedrooms</span>\n                    </div>\n                    <div>\n                      <span class=\"mr-1\">{{ property.bathrooms }}</span>\n                      <span i18n>Bathrooms</span>\n                    </div>\n                    <div>\n                      <span class=\"mr-1\">{{ property.receptions }}</span>\n                      <span i18n>Receptions</span>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"text-right\">\n                  <div class=\"text-sm\">\u00A3{{ property.price.toFixed(2) }}</div>\n                </div>\n              </div>\n            </div>\n            <div class=\"hidden md:flex flex-col px-3\"></div>\n          </div>\n        }\n      </div>\n\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Proposed times</div>\n        <hr class=\"mb-2\" />\n        @for (item of viewing.proposedSlots; track $index) {\n          <div class=\"flex flex-row items-center gap-3 py-3\">\n            <rolatech-rich-label label=\"Date\" [title]=\"item.date\"></rolatech-rich-label>\n            <rolatech-rich-label label=\"Time\" [title]=\"item.time\"></rolatech-rich-label>\n            @if (viewing.viewingDate && viewing.viewingTime) {\n              @if (item.date === viewing.viewingDate && item.time === viewing.viewingTime) {\n                <div class=\"ml-3\"><button mat-flat-button i18n disabled=\"\">Confirmed</button></div>\n              }\n            }\n          </div>\n        }\n      </div>\n      <!-- safe area -->\n      <div class=\"pb-16 sm:pb-3\"></div>\n      <div class=\"\">\n        <div class=\"flex items-center justify-end\">\n          @if (viewing.status.toString() !== 'CANCELLED') {\n            <button mat-flat-button class=\"min-h-11\" (click)=\"cancel()\" i18n>Cancel</button>\n          }\n        </div>\n      </div>\n    </div>\n  </rolatech-container>\n}\n@if (info) {\n  <div\n    [ngClass]=\"loadingTimeline ? 'translate-x-full' : 'translate-none'\"\n    class=\"fixed top-0 right-0 z-[1001] h-screen p-4 overflow-y-auto transition-transform bg-[--rt-raised-background] w-80 sm:w-[300px] shadow-xl\"\n  >\n    <div class=\"flex justify-between items-center sm:p-4\">\n      <div class=\"text-xl font-bold\" i18n>Status</div>\n      <button mat-icon-button (click)=\"info = !info\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n  </div>\n}\n\n<div\n  (click)=\"info = !info\"\n  [ngClass]=\"info ? 'visible' : 'invisible'\"\n  class=\"bg-[--rt-10-percent-layer] fixed inset-0 z-[1000]\"\n></div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: RichLabelComponent, selector: "rolatech-rich-label", inputs: ["label", "title"] }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], deferBlockDependencies: [() => [ThumbnailComponent]] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyViewingDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyViewingDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-viewing-detail', imports: [
                         MatButtonModule,
@@ -2457,9 +2729,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                         RichLabelComponent,
                         ContainerComponent,
                         ToolbarComponent,
-                        FixedPipe,
                         RouterLink,
-                    ], template: "@if (viewing) {\n  <rolatech-container>\n    <rolatech-toolbar [title]=\"status[viewing.status]\" large link=\"../\"> </rolatech-toolbar>\n    <div>\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Property details</div>\n        <hr class=\"mb-2\" />\n        @if (property) {\n          <div\n            class=\"flex items-center py-2 cursor-pointer hover:bg-[--rt-raised-background]\"\n            [routerLink]=\"['../../', property.id]\"\n          >\n            <div class=\"min-w-16 w-24 object-cover aspect-video rounded-md mr-3\">\n              @defer {\n                <rolatech-thumbnail [src]=\"property.media[0].url\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n              } @placeholder {\n                <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n              }\n            </div>\n            <div class=\"flex w-full justify-between\">\n              <div class=\"flex justify-between w-full\">\n                <div class=\"flex flex-col\">\n                  <div>{{ property.title }}</div>\n                  <div class=\"inline-flex gap-1 mt-2\">\n                    <div>\n                      <span class=\"mr-1\">{{ property.bedrooms }}</span>\n                      <span i18n>Bedrooms</span>\n                    </div>\n                    <div>\n                      <span class=\"mr-1\">{{ property.bathrooms }}</span>\n                      <span i18n>Bathrooms</span>\n                    </div>\n                    <div>\n                      <span class=\"mr-1\">{{ property.receptions }}</span>\n                      <span i18n>Receptions</span>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"text-right\">\n                  <div class=\"text-sm\">\u00A3{{ property.price | fixed }}</div>\n                </div>\n              </div>\n            </div>\n            <div class=\"hidden md:flex flex-col px-3\"></div>\n          </div>\n        }\n      </div>\n\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Proposed times</div>\n        <hr class=\"mb-2\" />\n        @for (item of viewing.proposedSlots; track $index) {\n          <div class=\"flex flex-row items-center gap-3 py-3\">\n            <rolatech-rich-label label=\"Date\" [title]=\"item.date\"></rolatech-rich-label>\n            <rolatech-rich-label label=\"Time\" [title]=\"item.time\"></rolatech-rich-label>\n            @if (viewing.viewingDate && viewing.viewingTime) {\n              @if (item.date === viewing.viewingDate && item.time === viewing.viewingTime) {\n                <div class=\"ml-3\"><button mat-flat-button i18n disabled=\"\">Confirmed</button></div>\n              }\n            }\n          </div>\n        }\n      </div>\n      <!-- safe area -->\n      <div class=\"pb-16 sm:pb-3\"></div>\n      <div class=\"\">\n        <div class=\"flex items-center justify-end\">\n          @if (viewing.status.toString() !== 'CANCELLED') {\n            <button mat-flat-button class=\"min-h-11\" (click)=\"cancel()\" i18n>Cancel</button>\n          }\n        </div>\n      </div>\n    </div>\n  </rolatech-container>\n}\n@if (info) {\n  <div\n    [ngClass]=\"loadingTimeline ? 'translate-x-full' : 'translate-none'\"\n    class=\"fixed top-0 right-0 z-[1001] h-screen p-4 overflow-y-auto transition-transform bg-[--rt-raised-background] w-80 sm:w-[300px] shadow-xl\"\n  >\n    <div class=\"flex justify-between items-center sm:p-4\">\n      <div class=\"text-xl font-bold\" i18n>Status</div>\n      <button mat-icon-button (click)=\"info = !info\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n  </div>\n}\n\n<div\n  (click)=\"info = !info\"\n  [ngClass]=\"info ? 'visible' : 'invisible'\"\n  class=\"bg-[--rt-10-percent-layer] fixed inset-0 z-[1000]\"\n></div>\n" }]
+                    ], template: "@if (viewing) {\n  <rolatech-container>\n    <rolatech-toolbar [title]=\"status[viewing.status]\" large link=\"../\"> </rolatech-toolbar>\n    <div>\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Property details</div>\n        <hr class=\"mb-2\" />\n        @if (property) {\n          <div\n            class=\"flex items-center py-2 cursor-pointer hover:bg-[--rt-raised-background]\"\n            [routerLink]=\"['../../', property.id]\"\n          >\n            <div class=\"min-w-24 w-24 object-cover aspect-video rounded-md mr-3\">\n              @defer {\n                <rolatech-thumbnail [src]=\"property.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n              } @placeholder {\n                <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n              }\n            </div>\n            <div class=\"flex w-full justify-between\">\n              <div class=\"flex justify-between w-full\">\n                <div class=\"flex flex-col\">\n                  <div>{{ property.title }}</div>\n                  <div class=\"inline-flex gap-1 mt-2\">\n                    <div>\n                      <span class=\"mr-1\">{{ property.bedrooms }}</span>\n                      <span i18n>Bedrooms</span>\n                    </div>\n                    <div>\n                      <span class=\"mr-1\">{{ property.bathrooms }}</span>\n                      <span i18n>Bathrooms</span>\n                    </div>\n                    <div>\n                      <span class=\"mr-1\">{{ property.receptions }}</span>\n                      <span i18n>Receptions</span>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"text-right\">\n                  <div class=\"text-sm\">\u00A3{{ property.price.toFixed(2) }}</div>\n                </div>\n              </div>\n            </div>\n            <div class=\"hidden md:flex flex-col px-3\"></div>\n          </div>\n        }\n      </div>\n\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Proposed times</div>\n        <hr class=\"mb-2\" />\n        @for (item of viewing.proposedSlots; track $index) {\n          <div class=\"flex flex-row items-center gap-3 py-3\">\n            <rolatech-rich-label label=\"Date\" [title]=\"item.date\"></rolatech-rich-label>\n            <rolatech-rich-label label=\"Time\" [title]=\"item.time\"></rolatech-rich-label>\n            @if (viewing.viewingDate && viewing.viewingTime) {\n              @if (item.date === viewing.viewingDate && item.time === viewing.viewingTime) {\n                <div class=\"ml-3\"><button mat-flat-button i18n disabled=\"\">Confirmed</button></div>\n              }\n            }\n          </div>\n        }\n      </div>\n      <!-- safe area -->\n      <div class=\"pb-16 sm:pb-3\"></div>\n      <div class=\"\">\n        <div class=\"flex items-center justify-end\">\n          @if (viewing.status.toString() !== 'CANCELLED') {\n            <button mat-flat-button class=\"min-h-11\" (click)=\"cancel()\" i18n>Cancel</button>\n          }\n        </div>\n      </div>\n    </div>\n  </rolatech-container>\n}\n@if (info) {\n  <div\n    [ngClass]=\"loadingTimeline ? 'translate-x-full' : 'translate-none'\"\n    class=\"fixed top-0 right-0 z-[1001] h-screen p-4 overflow-y-auto transition-transform bg-[--rt-raised-background] w-80 sm:w-[300px] shadow-xl\"\n  >\n    <div class=\"flex justify-between items-center sm:p-4\">\n      <div class=\"text-xl font-bold\" i18n>Status</div>\n      <button mat-icon-button (click)=\"info = !info\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n  </div>\n}\n\n<div\n  (click)=\"info = !info\"\n  [ngClass]=\"info ? 'visible' : 'invisible'\"\n  class=\"bg-[--rt-10-percent-layer] fixed inset-0 z-[1000]\"\n></div>\n" }]
         }] });
 
 class PropertyWishlistComponent extends BaseComponent {
@@ -2475,10 +2746,10 @@ class PropertyWishlistComponent extends BaseComponent {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyWishlistComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyWishlistComponent, isStandalone: true, selector: "rolatech-property-wishlist", usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  <rolatech-toolbar title=\"Wishlist\" large> </rolatech-toolbar>\n  <rolatech-list>\n    @if (wishlist) {\n      @for (item of wishlist; track item) {\n        <rolatech-property-item [routerLink]=\"['../', item.id]\" [property]=\"item\"></rolatech-property-item>\n      }\n    } @else {\n      <rolatech-empty></rolatech-empty>\n    }\n  </rolatech-list>\n</rolatech-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: ListComponent, selector: "rolatech-list" }, { kind: "component", type: EmptyComponent, selector: "rolatech-empty" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: PropertyItemComponent, selector: "rolatech-property-item", inputs: ["property"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyWishlistComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyWishlistComponent, isStandalone: true, selector: "rolatech-property-wishlist", usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  <rolatech-toolbar title=\"Wishlist\" large> </rolatech-toolbar>\n  <rolatech-list>\n    @if (wishlist) {\n      @for (item of wishlist; track item) {\n        <rolatech-property-item [routerLink]=\"['../', item.id]\" [property]=\"item\"></rolatech-property-item>\n      }\n    } @else {\n      <rolatech-empty></rolatech-empty>\n    }\n  </rolatech-list>\n</rolatech-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: ListComponent, selector: "rolatech-list" }, { kind: "component", type: EmptyComponent, selector: "rolatech-empty" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: PropertyItemComponent, selector: "rolatech-property-item", inputs: ["property"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyWishlistComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyWishlistComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-wishlist', imports: [
                         CommonModule,
@@ -2507,7 +2778,7 @@ const propertyRoutes = [
         children: [
             {
                 path: '',
-                loadComponent: () => import('./rolatech-angular-property-property-index.component-BO3-EbLo.mjs').then((x) => x.PropertyIndexComponent),
+                loadComponent: () => import('./rolatech-angular-property-property-index.component-MvFCsi7i.mjs').then((x) => x.PropertyIndexComponent),
             },
         ],
     },
@@ -2578,14 +2849,17 @@ class PropertyManageIndexComponent {
     loading = false;
     ngOnInit() {
         // this.findProperties();
-        const sub = this.route.queryParamMap.pipe(map((p) => {
+        const sub = this.route.queryParamMap
+            .pipe(map((p) => {
             const page = p.get('page') ? Number(p.get('page')) : 1;
             this.pageIndex.set(Math.max(page - 1, 0));
             return {
                 q: p.get('q') || undefined,
-                city: p.get('city') || undefined,
+                town: p.get('town') || undefined,
                 minBedrooms: p.get('minBedrooms') ? Number(p.get('minBedrooms')) : undefined,
-                maxPricePence: p.get('maxPricePence') ? Number(p.get('maxPricePence')) : undefined,
+                maxBedrooms: p.get('maxBedrooms') ? Number(p.get('maxBedrooms')) : undefined,
+                minPrice: p.get('minPrice') ? Number(p.get('minPrice')) : undefined,
+                maxPrice: p.get('maxPrice') ? Number(p.get('maxPrice')) : undefined,
                 availableFrom: p.get('availableFrom') || undefined,
                 availableTo: p.get('availableTo') || undefined,
                 features: p.getAll('features')?.length ? p.getAll('features') : undefined,
@@ -2597,8 +2871,9 @@ class PropertyManageIndexComponent {
         // Cheap deep compare via JSON to avoid spam calls when nothing changed
         map((o) => JSON.stringify(o)), distinctUntilChanged(), map((s) => JSON.parse(s)), switchMap((params) => {
             this.loading = true;
-            return this.propertySearchService.search(params).pipe(finalize(() => this.loading = false));
-        })).subscribe({
+            return this.propertySearchService.search(params).pipe(finalize(() => (this.loading = false)));
+        }))
+            .subscribe({
             next: (res) => {
                 this.properties.set(res.data);
                 this.meta = res.meta;
@@ -2607,13 +2882,13 @@ class PropertyManageIndexComponent {
             error: () => {
                 this.properties.set([]);
                 this.length = 0;
-            }
+            },
         });
         // // auto-unsubscribe on destroy
         this.destroyRef.onDestroy(() => sub.unsubscribe());
     }
     toggleSearch() {
-        this.open.update(v => !v);
+        this.open.update((v) => !v);
     }
     toggleView() {
         if (this.gridView) {
@@ -2633,22 +2908,22 @@ class PropertyManageIndexComponent {
     }
     search(params) {
         this.propertySearchService.search(params).subscribe({
-            next: res => {
+            next: (res) => {
                 this.properties.set(res.data);
                 this.meta = res.meta;
                 this.loading = false;
                 this.length = res.meta.pagination.count;
                 // this.pageIndex.set(Math.max(page - 1, 0));
             },
-            error: error => {
+            error: (error) => {
                 this.loading = false;
-            }
+            },
         });
     }
     onCloseSearch() {
         // this.open.set(false);
         // this.router.navigate([], { queryParams: {}, queryParamsHandling: 'merge' });
-        this.router.navigate(["/properties"]);
+        this.router.navigate(['/properties']);
     }
     export() {
         this.exporting = true;
@@ -2667,7 +2942,7 @@ class PropertyManageIndexComponent {
             },
             error: (e) => {
                 this.exporting = false;
-            }
+            },
         });
     }
     onPage(e) {
@@ -2677,10 +2952,10 @@ class PropertyManageIndexComponent {
             replaceUrl: true, // optional: avoid stacking history on every page click
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageIndexComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyManageIndexComponent, isStandalone: true, selector: "rolatech-property-manage-index", host: { properties: { "class.rolatech-property-manage-index": "this.hasClass" } }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "<rolatech-toolbar title=\"Properties\">\n  <div class=\"flex items-center gap-2\">\n    <button mat-icon-button (click)=\"toggleSearch()\">\n      <mat-icon>search</mat-icon>\n    </button>\n    <!-- <button mat-icon-button (click)=\"toggleView()\">\n      <mat-icon>{{ gridView ? 'view_list' : 'grid_on' }}</mat-icon>\n    </button> -->\n    <button mat-flat-button routerLink=\"./create\">\n      <mat-icon>add</mat-icon>\n      <span i18n>Add property</span>\n    </button>\n    <!-- <button mat-flat-button (click)=\"export()\" [disabled]=\"exporting\">\n      <mat-icon>download</mat-icon>\n      <span i18n>Export</span>\n    </button> -->\n    <button mat-flat-button (click)=\"export()\" [disabled]=\"exporting\" aria-label=\"Export CSV\">\n      @if (!exporting) {\n        Export CSV\n      } @else {\n        Exporting\u2026\n      }\n    </button>\n  </div>\n</rolatech-toolbar>\n<div class=\"p-2\">\n  <rolatech-search-bar\n    [(show)]=\"open\"\n    #searchBar\n    (search)=\"searchByText($event)\"\n    (close)=\"onCloseSearch()\"\n  ></rolatech-search-bar>\n</div>\n@if (loading) {\n  <div class=\"flex justify-center items-center\">\n    <rolatech-spinner></rolatech-spinner>\n  </div>\n} @else {\n  <div class=\"bg-[--rt-rasised-background] h-full\">\n    <!-- <rolatech-property-manage-filter></rolatech-property-manage-filter> -->\n    <div class=\"flex flex-wrap p-3 gap-3\">\n      @for (item of properties(); track $index) {\n        <rolatech-property-manage-item\n          [property]=\"item\"\n          routerLink=\"./{{ item.id }}/manage/info\"\n        ></rolatech-property-manage-item>\n      }\n    </div>\n  </div>\n}\n<mat-paginator\n  #paginator\n  [length]=\"length\"\n  [pageSize]=\"pageSize\"\n  [pageIndex]=\"pageIndex()\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  (page)=\"onPage($event)\"\n  hidePageSize\n  showFirstLastButtons\n>\n</mat-paginator>\n", styles: ["mat-form-field{width:100%}table{width:100%}td.mat-column-actions{text-align:right;max-width:64px;font-size:.8rem;padding:0 8px}.mat-mdc-header-cell.actions{text-align:right;max-width:64px;width:64px}.mat-mdc-cell:nth-last-child(2),.mat-mdc-header-cell:nth-last-child(2),.mat-mdc-footer-cell:nth-last-child(2){text-align:right;max-width:180px;width:180px}mat-cell:last-of-type,mat-header-cell:last-of-type,mat-footer-cell:last-of-type{text-align:right;padding-right:8px!important}rolatech-property-manage-index{display:flex;flex-direction:column;--rt-property-view-items-per-row: 1}@media (min-width: 600px){rolatech-property-manage-index{--rt-property-view-items-per-row: 2}}@media (min-width: 768px){rolatech-property-manage-index{--rt-property-view-items-per-row: 3}}@media (min-width: 1280px){rolatech-property-manage-index{--rt-property-view-items-per-row: 3}}@media (min-width: 1536px){rolatech-property-manage-index{--rt-property-view-items-per-row: 4}}@media (min-width: 1920px){rolatech-property-manage-index{--rt-property-view-items-per-row: 5}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i3$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: SpinnerComponent, selector: "rolatech-spinner", inputs: ["title"] }, { kind: "component", type: PropertyManageItemComponent, selector: "rolatech-property-manage-item", inputs: ["property", "thumbnail", "list"] }, { kind: "component", type: SearchBar, selector: "rolatech-search-bar", inputs: ["show"], outputs: ["showChange", "search", "close"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageIndexComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyManageIndexComponent, isStandalone: true, selector: "rolatech-property-manage-index", host: { properties: { "class.rolatech-property-manage-index": "this.hasClass" } }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "<rolatech-toolbar title=\"Properties\">\n  <div class=\"flex items-center gap-2\">\n    <button mat-icon-button (click)=\"toggleSearch()\">\n      <mat-icon>search</mat-icon>\n    </button>\n    <!-- <button mat-icon-button (click)=\"toggleView()\">\n      <mat-icon>{{ gridView ? 'view_list' : 'grid_on' }}</mat-icon>\n    </button> -->\n    <button mat-flat-button routerLink=\"./create\">\n      <mat-icon>add</mat-icon>\n      <span i18n>Add property</span>\n    </button>\n    <!-- <button mat-flat-button (click)=\"export()\" [disabled]=\"exporting\">\n      <mat-icon>download</mat-icon>\n      <span i18n>Export</span>\n    </button> -->\n    <button mat-flat-button (click)=\"export()\" [disabled]=\"exporting\" aria-label=\"Export CSV\">\n      @if (!exporting) {\n        Export CSV\n      } @else {\n        Exporting\u2026\n      }\n    </button>\n  </div>\n</rolatech-toolbar>\n<div class=\"p-2\">\n  <rolatech-search-bar\n    [(show)]=\"open\"\n    #searchBar\n    (search)=\"searchByText($event)\"\n    (close)=\"onCloseSearch()\"\n  ></rolatech-search-bar>\n</div>\n@if (loading) {\n  <div class=\"flex justify-center items-center\">\n    <rolatech-spinner></rolatech-spinner>\n  </div>\n} @else {\n  <div class=\"bg-[--rt-rasised-background] h-full\">\n    <!-- <rolatech-property-manage-filter></rolatech-property-manage-filter> -->\n    <div class=\"flex flex-wrap p-3 gap-3\">\n      @for (item of properties(); track $index) {\n        <rolatech-property-manage-item\n          [property]=\"item\"\n          routerLink=\"./{{ item.id }}/manage/info\"\n        ></rolatech-property-manage-item>\n      }\n    </div>\n  </div>\n}\n<mat-paginator\n  #paginator\n  [length]=\"length\"\n  [pageSize]=\"pageSize\"\n  [pageIndex]=\"pageIndex()\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  (page)=\"onPage($event)\"\n  hidePageSize\n  showFirstLastButtons\n>\n</mat-paginator>\n", styles: ["mat-form-field{width:100%}table{width:100%}td.mat-column-actions{text-align:right;max-width:64px;font-size:.8rem;padding:0 8px}.mat-mdc-header-cell.actions{text-align:right;max-width:64px;width:64px}.mat-mdc-cell:nth-last-child(2),.mat-mdc-header-cell:nth-last-child(2),.mat-mdc-footer-cell:nth-last-child(2){text-align:right;max-width:180px;width:180px}mat-cell:last-of-type,mat-header-cell:last-of-type,mat-footer-cell:last-of-type{text-align:right;padding-right:8px!important}rolatech-property-manage-index{display:flex;flex-direction:column;--rt-property-view-items-per-row: 1}@media (min-width: 600px){rolatech-property-manage-index{--rt-property-view-items-per-row: 2}}@media (min-width: 768px){rolatech-property-manage-index{--rt-property-view-items-per-row: 3}}@media (min-width: 1280px){rolatech-property-manage-index{--rt-property-view-items-per-row: 3}}@media (min-width: 1536px){rolatech-property-manage-index{--rt-property-view-items-per-row: 4}}@media (min-width: 1920px){rolatech-property-manage-index{--rt-property-view-items-per-row: 5}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i3$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: SpinnerComponent, selector: "rolatech-spinner", inputs: ["title"] }, { kind: "component", type: PropertyManageItemComponent, selector: "rolatech-property-manage-item", inputs: ["property", "thumbnail", "list"] }, { kind: "component", type: SearchBar, selector: "rolatech-search-bar", inputs: ["show"], outputs: ["showChange", "search", "close"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageIndexComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageIndexComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-manage-index', imports: [
                         MatButtonModule,
@@ -2692,7 +2967,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                         ToolbarComponent,
                         SpinnerComponent,
                         PropertyManageItemComponent,
-                        SearchBar
+                        SearchBar,
                     ], encapsulation: ViewEncapsulation.None, template: "<rolatech-toolbar title=\"Properties\">\n  <div class=\"flex items-center gap-2\">\n    <button mat-icon-button (click)=\"toggleSearch()\">\n      <mat-icon>search</mat-icon>\n    </button>\n    <!-- <button mat-icon-button (click)=\"toggleView()\">\n      <mat-icon>{{ gridView ? 'view_list' : 'grid_on' }}</mat-icon>\n    </button> -->\n    <button mat-flat-button routerLink=\"./create\">\n      <mat-icon>add</mat-icon>\n      <span i18n>Add property</span>\n    </button>\n    <!-- <button mat-flat-button (click)=\"export()\" [disabled]=\"exporting\">\n      <mat-icon>download</mat-icon>\n      <span i18n>Export</span>\n    </button> -->\n    <button mat-flat-button (click)=\"export()\" [disabled]=\"exporting\" aria-label=\"Export CSV\">\n      @if (!exporting) {\n        Export CSV\n      } @else {\n        Exporting\u2026\n      }\n    </button>\n  </div>\n</rolatech-toolbar>\n<div class=\"p-2\">\n  <rolatech-search-bar\n    [(show)]=\"open\"\n    #searchBar\n    (search)=\"searchByText($event)\"\n    (close)=\"onCloseSearch()\"\n  ></rolatech-search-bar>\n</div>\n@if (loading) {\n  <div class=\"flex justify-center items-center\">\n    <rolatech-spinner></rolatech-spinner>\n  </div>\n} @else {\n  <div class=\"bg-[--rt-rasised-background] h-full\">\n    <!-- <rolatech-property-manage-filter></rolatech-property-manage-filter> -->\n    <div class=\"flex flex-wrap p-3 gap-3\">\n      @for (item of properties(); track $index) {\n        <rolatech-property-manage-item\n          [property]=\"item\"\n          routerLink=\"./{{ item.id }}/manage/info\"\n        ></rolatech-property-manage-item>\n      }\n    </div>\n  </div>\n}\n<mat-paginator\n  #paginator\n  [length]=\"length\"\n  [pageSize]=\"pageSize\"\n  [pageIndex]=\"pageIndex()\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  (page)=\"onPage($event)\"\n  hidePageSize\n  showFirstLastButtons\n>\n</mat-paginator>\n", styles: ["mat-form-field{width:100%}table{width:100%}td.mat-column-actions{text-align:right;max-width:64px;font-size:.8rem;padding:0 8px}.mat-mdc-header-cell.actions{text-align:right;max-width:64px;width:64px}.mat-mdc-cell:nth-last-child(2),.mat-mdc-header-cell:nth-last-child(2),.mat-mdc-footer-cell:nth-last-child(2){text-align:right;max-width:180px;width:180px}mat-cell:last-of-type,mat-header-cell:last-of-type,mat-footer-cell:last-of-type{text-align:right;padding-right:8px!important}rolatech-property-manage-index{display:flex;flex-direction:column;--rt-property-view-items-per-row: 1}@media (min-width: 600px){rolatech-property-manage-index{--rt-property-view-items-per-row: 2}}@media (min-width: 768px){rolatech-property-manage-index{--rt-property-view-items-per-row: 3}}@media (min-width: 1280px){rolatech-property-manage-index{--rt-property-view-items-per-row: 3}}@media (min-width: 1536px){rolatech-property-manage-index{--rt-property-view-items-per-row: 4}}@media (min-width: 1920px){rolatech-property-manage-index{--rt-property-view-items-per-row: 5}}\n"] }]
         }], propDecorators: { hasClass: [{
                 type: HostBinding,
@@ -2720,10 +2995,10 @@ class PropertyManageCreateComponent {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: PropertyManageCreateComponent, isStandalone: true, selector: "rolatech-property-manage-create", ngImport: i0, template: "<rolatech-toolbar title=\"Add property\" link=\"../\"> </rolatech-toolbar>\n<div class=\"p-3\">\n  <section>\n    <form #productForm=\"ngForm\">\n      <div class=\"flex flex-col\">\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Title </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"property.title\" name=\"title\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Description </mat-label>\n          <textarea\n            matInput\n            type=\"text\"\n            [(ngModel)]=\"property.description\"\n            name=\"description\"\n            required\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"3\"\n          ></textarea>\n        </mat-form-field>\n      </div>\n    </form>\n  </section>\n  <div i18n>* items are required</div>\n  <div class=\"mt-3\">\n    <button mat-flat-button class=\"w-28\" (click)=\"create()\" i18n>Create</button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i4$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: PropertyManageCreateComponent, isStandalone: true, selector: "rolatech-property-manage-create", ngImport: i0, template: "<rolatech-toolbar title=\"Add property\" link=\"../\"> </rolatech-toolbar>\n<div class=\"p-3\">\n  <section>\n    <form #productForm=\"ngForm\">\n      <div class=\"flex flex-col\">\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Title </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"property.title\" name=\"title\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Description </mat-label>\n          <textarea\n            matInput\n            type=\"text\"\n            [(ngModel)]=\"property.description\"\n            name=\"description\"\n            required\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"3\"\n          ></textarea>\n        </mat-form-field>\n      </div>\n    </form>\n  </section>\n  <div i18n>* items are required</div>\n  <div class=\"mt-3\">\n    <button mat-flat-button class=\"w-28\" (click)=\"create()\" i18n>Create</button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i4$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageCreateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageCreateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-manage-create', imports: [
                         ToolbarComponent,
@@ -2782,19 +3057,19 @@ class PropertyManageLayoutComponent extends BaseComponent {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageLayoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyManageLayoutComponent, isStandalone: true, selector: "rolatech-property-manage-layout", usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col md:flex-row m-auto\">\n  <div\n    class=\"min-w-[256px] px-3 md:px-0 flex flex-row md:flex-col md:h-full items-center md:items-start h-16 overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n  >\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-1\" i18n>Property</div>\n      <a routerLink=\"./info\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Basic info</a>\n      <a routerLink=\"./media\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Media</a>\n      <a routerLink=\"./videos\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Videos</a>\n      <a routerLink=\"./sections\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Details</a>\n      <a routerLink=\"./floorplan\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Floorplan</a>\n      <a routerLink=\"./location\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Location</a>\n      <a routerLink=\"./features\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Features</a>\n      <a routerLink=\"./keywords\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Keywords</a>\n      <a routerLink=\"./highlights\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Highlights</a>\n      <a routerLink=\"./epc\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>EPC</a>\n      <a routerLink=\"./translation\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Translation</a>\n      <!-- <a routerLink=\"./amenities\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Amenities</a> -->\n      <!-- <a routerLink=\"./tags\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Tags</a> -->\n      <!-- <a routerLink=\"./options\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Options</a> -->\n    </div>\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\" i18n>Settings</div>\n      <!-- <a routerLink=\"./variants\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Variants</a> -->\n      <a routerLink=\"./schedule\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Schedule</a>\n      <a routerLink=\"./pricing\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Pricing</a>\n    </div>\n    <!-- <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\" i18n>Others</div>\n    </div> -->\n    @if (property) {\n      @if (property.status.toString() === 'DRAFT') {\n        <div class=\"md:mt-6 md:ml-2 flex items-center\">\n          <button mat-flat-button (click)=\"submit()\" i18n>Submit for review</button>\n        </div>\n      }\n      @if (property.status.toString() === 'PENDING') {\n        <div class=\"md:mt-6 md:ml-2 flex items-center\">\n          <button mat-flat-button disabled i18n>Pending</button>\n        </div>\n      }\n      @if (property.status.toString() === 'APPROVED') {\n        <div class=\"md:mt-6 md:ml-2 flex items-center\">\n          <button mat-flat-button (click)=\"publish()\" i18n>Publish</button>\n        </div>\n      }\n    }\n  </div>\n  <div class=\"w-full\">\n    <router-outlet></router-outlet>\n  </div>\n</div>\n", styles: [".manage-active{background-color:var(--rt-10-percent-layer, rgba(0, 0, 0, .05));box-shadow:4px 0 var(--rt-base-background-inverse, #000) inset;font-weight:600}@media (max-width: 768px){.manage-active{box-shadow:inset 0 -4px 0 0 var(--rt-base-background-inverse, #000)}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageLayoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyManageLayoutComponent, isStandalone: true, selector: "rolatech-property-manage-layout", usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col md:flex-row m-auto\">\n  <div\n    class=\"min-w-[256px] px-3 md:px-0 flex flex-row md:flex-col md:h-full items-center md:items-start h-16 overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n  >\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-1\" i18n>Property</div>\n      <a routerLink=\"./info\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Basic info</a>\n      <a routerLink=\"./media\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Media</a>\n      <a routerLink=\"./videos\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Videos</a>\n      <a routerLink=\"./sections\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Details</a>\n      <a routerLink=\"./floorplan\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Floorplan</a>\n      <a routerLink=\"./location\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Location</a>\n      <a routerLink=\"./features\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Features</a>\n      <a routerLink=\"./keywords\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Keywords</a>\n      <a routerLink=\"./highlights\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Highlights</a>\n      <a routerLink=\"./epc\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>EPC</a>\n      <a routerLink=\"./translation\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Translation</a>\n      <!-- <a routerLink=\"./amenities\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Amenities</a> -->\n      <!-- <a routerLink=\"./tags\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Tags</a> -->\n      <!-- <a routerLink=\"./options\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Options</a> -->\n    </div>\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\" i18n>Settings</div>\n      <!-- <a routerLink=\"./variants\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Variants</a> -->\n      <a routerLink=\"./schedule\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Schedule</a>\n      <a routerLink=\"./pricing\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Pricing</a>\n    </div>\n    <!-- <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\" i18n>Others</div>\n    </div> -->\n    @if (property) {\n      @if (property.status.toString() === 'DRAFT') {\n        <div class=\"md:mt-6 md:ml-2 flex items-center\">\n          <button mat-flat-button (click)=\"submit()\" i18n>Submit for review</button>\n        </div>\n      }\n      @if (property.status.toString() === 'PENDING') {\n        <div class=\"md:mt-6 md:ml-2 flex items-center\">\n          <button mat-flat-button disabled i18n>Pending</button>\n        </div>\n      }\n      @if (property.status.toString() === 'APPROVED') {\n        <div class=\"md:mt-6 md:ml-2 flex items-center\">\n          <button mat-flat-button (click)=\"publish()\" i18n>Publish</button>\n        </div>\n      }\n    }\n  </div>\n  <div class=\"w-full\">\n    <router-outlet></router-outlet>\n  </div>\n</div>\n", styles: [".manage-active{background-color:var(--rt-10-percent-layer, rgba(0, 0, 0, .05));box-shadow:4px 0 var(--rt-base-background-inverse, #000) inset;font-weight:600}@media (max-width: 768px){.manage-active{box-shadow:inset 0 -4px 0 0 var(--rt-base-background-inverse, #000)}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-manage-layout', imports: [RouterLink, RouterLinkActive, MatButtonModule, RouterOutlet], encapsulation: ViewEncapsulation.None, template: "<div class=\"flex flex-col md:flex-row m-auto\">\n  <div\n    class=\"min-w-[256px] px-3 md:px-0 flex flex-row md:flex-col md:h-full items-center md:items-start h-16 overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n  >\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-1\" i18n>Property</div>\n      <a routerLink=\"./info\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Basic info</a>\n      <a routerLink=\"./media\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Media</a>\n      <a routerLink=\"./videos\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Videos</a>\n      <a routerLink=\"./sections\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Details</a>\n      <a routerLink=\"./floorplan\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Floorplan</a>\n      <a routerLink=\"./location\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Location</a>\n      <a routerLink=\"./features\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Features</a>\n      <a routerLink=\"./keywords\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Keywords</a>\n      <a routerLink=\"./highlights\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Highlights</a>\n      <a routerLink=\"./epc\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>EPC</a>\n      <a routerLink=\"./translation\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Translation</a>\n      <!-- <a routerLink=\"./amenities\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Amenities</a> -->\n      <!-- <a routerLink=\"./tags\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Tags</a> -->\n      <!-- <a routerLink=\"./options\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Options</a> -->\n    </div>\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\" i18n>Settings</div>\n      <!-- <a routerLink=\"./variants\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Variants</a> -->\n      <a routerLink=\"./schedule\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Schedule</a>\n      <a routerLink=\"./pricing\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Pricing</a>\n    </div>\n    <!-- <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\" i18n>Others</div>\n    </div> -->\n    @if (property) {\n      @if (property.status.toString() === 'DRAFT') {\n        <div class=\"md:mt-6 md:ml-2 flex items-center\">\n          <button mat-flat-button (click)=\"submit()\" i18n>Submit for review</button>\n        </div>\n      }\n      @if (property.status.toString() === 'PENDING') {\n        <div class=\"md:mt-6 md:ml-2 flex items-center\">\n          <button mat-flat-button disabled i18n>Pending</button>\n        </div>\n      }\n      @if (property.status.toString() === 'APPROVED') {\n        <div class=\"md:mt-6 md:ml-2 flex items-center\">\n          <button mat-flat-button (click)=\"publish()\" i18n>Publish</button>\n        </div>\n      }\n    }\n  </div>\n  <div class=\"w-full\">\n    <router-outlet></router-outlet>\n  </div>\n</div>\n", styles: [".manage-active{background-color:var(--rt-10-percent-layer, rgba(0, 0, 0, .05));box-shadow:4px 0 var(--rt-base-background-inverse, #000) inset;font-weight:600}@media (max-width: 768px){.manage-active{box-shadow:inset 0 -4px 0 0 var(--rt-base-background-inverse, #000)}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"] }]
         }] });
 
 class PropertyManageContentComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: PropertyManageContentComponent, isStandalone: true, selector: "rolatech-property-manage-content", ngImport: i0, template: "<ng-content select=\"rolatech-toolbar\"></ng-content>\n<div class=\"p-3\">\n  <ng-content></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: PropertyManageContentComponent, isStandalone: true, selector: "rolatech-property-manage-content", ngImport: i0, template: "<ng-content select=\"rolatech-toolbar\"></ng-content>\n<div class=\"p-3\">\n  <ng-content></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-manage-content', imports: [CommonModule], template: "<ng-content select=\"rolatech-toolbar\"></ng-content>\n<div class=\"p-3\">\n  <ng-content></ng-content>\n</div>\n" }]
         }] });
@@ -2828,10 +3103,10 @@ class PropertyManageInfoComponent extends BaseComponent {
         this.propertyService.get(this.id).subscribe({
             next: (res) => {
                 this.property = res.data;
-                const price = this.property.price ? (this.property.price / 100).toFixed(2) : '0.00';
+                const price = this.property.price ? this.property.price.toFixed(2) : '0.00';
                 this.price.set(price);
                 if (this.property.priceType?.toString() === 'PARTIAL') {
-                    const deposit = (this.property.deposit / 100).toFixed(2);
+                    const deposit = this.property.deposit.toFixed(2);
                     this.deposit.set(deposit);
                 }
             },
@@ -2881,17 +3156,17 @@ class PropertyManageInfoComponent extends BaseComponent {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageInfoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyManageInfoComponent, isStandalone: true, selector: "rolatech-property-manage-info", inputs: { price: { classPropertyName: "price", publicName: "price", isSignal: true, isRequired: false, transformFunction: null }, deposit: { classPropertyName: "deposit", publicName: "deposit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { price: "priceChange", deposit: "depositChange" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageInfoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyManageInfoComponent, isStandalone: true, selector: "rolatech-property-manage-info", inputs: { price: { classPropertyName: "price", publicName: "price", isSignal: true, isRequired: false, transformFunction: null }, deposit: { classPropertyName: "deposit", publicName: "deposit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { price: "priceChange", deposit: "depositChange" }, providers: [
             {
                 provide: DateAdapter,
                 useClass: MomentDateAdapter,
                 deps: [MAT_DATE_LOCALE],
             },
             { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$2 },
-        ], usesInheritance: true, ngImport: i0, template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Basic info\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  @if (property) {\n    <div class=\"flex flex-col\">\n      <form #propertyForm=\"ngForm\">\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Title </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"property.title\" name=\"title\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Description </mat-label>\n          <textarea\n            matInput\n            type=\"text\"\n            [(ngModel)]=\"property.description\"\n            name=\"description\"\n            required\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"3\"\n          ></textarea>\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Bedrooms </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"property.bedrooms\" name=\"bedrooms\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Bathrooms </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"property.bathrooms\" name=\"bathrooms\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Receptions </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"property.receptions\" name=\"receptions\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Floor </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"property.floor\" name=\"floor\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Size(sqft) </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"property.size\" name=\"size\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\" required>\n          <mat-label i18n>Type</mat-label>\n          <mat-select\n            name=\"type\"\n            [compareWith]=\"typeCompareFn\"\n            (selectionChange)=\"onTypeChange($event)\"\n            [(ngModel)]=\"property.type\"\n          >\n            @for (type of propertyType | keyvalue; track type) {\n              <mat-option [value]=\"type.key\">\n                {{ type.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <!-- <mat-form-field appearance=\"fill\" required>\n          <mat-label i18n>Price type</mat-label>\n          <mat-select name=\"priceType\" [compareWith]=\"priceTypeCompareFn\" [(ngModel)]=\"property.priceType\">\n            @for (type of priceType | keyvalue; track type) {\n              <mat-option [value]=\"type.key\">\n                {{ type.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field> -->\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Available date</mat-label>\n          <input\n            matInput\n            placeholder=\"Available date\"\n            [matDatepicker]=\"availableDatePicker\"\n            [min]=\"minDate\"\n            (focus)=\"availableDatePicker.open()\"\n            name=\"availableDate\"\n            [(ngModel)]=\"property.availableDate\"\n            (dateInput)=\"property.availableDate = $event.value.format('YYYY-MM-DD')\"\n            readonly\n          />\n          <mat-datepicker-toggle matIconPrefix [for]=\"availableDatePicker\"></mat-datepicker-toggle>\n          <mat-datepicker #availableDatePicker></mat-datepicker>\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Price </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"price\" name=\"price\" required rolatechDecimal />\n        </mat-form-field>\n        @if (property.priceType && property.priceType.toString() === 'PARTIAL') {\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n> Deposit </mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"deposit\" name=\"deposit\" required rolatechDecimal />\n          </mat-form-field>\n        }\n      </form>\n    </div>\n    <div>\n      <button mat-flat-button (click)=\"update()\" i18n>Save</button>\n    </div>\n  }\n</rolatech-property-manage-content>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i4$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: PropertyManageContentComponent, selector: "rolatech-property-manage-content" }, { kind: "directive", type: DecimalDirective, selector: "[rolatechDecimal]" }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }] });
+        ], usesInheritance: true, ngImport: i0, template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Basic info\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  @if (property) {\n    <div class=\"flex flex-col\">\n      <form #propertyForm=\"ngForm\">\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Title </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"property.title\" name=\"title\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Description </mat-label>\n          <textarea\n            matInput\n            type=\"text\"\n            [(ngModel)]=\"property.description\"\n            name=\"description\"\n            required\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"3\"\n          ></textarea>\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Bedrooms </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"property.bedrooms\" name=\"bedrooms\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Bathrooms </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"property.bathrooms\" name=\"bathrooms\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Receptions </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"property.receptions\" name=\"receptions\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Floor </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"property.floor\" name=\"floor\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Size(sqft) </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"property.size\" name=\"size\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\" required>\n          <mat-label i18n>Type</mat-label>\n          <mat-select\n            name=\"type\"\n            [compareWith]=\"typeCompareFn\"\n            (selectionChange)=\"onTypeChange($event)\"\n            [(ngModel)]=\"property.type\"\n          >\n            @for (type of propertyType | keyvalue; track type) {\n              <mat-option [value]=\"type.key\">\n                {{ type.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <!-- <mat-form-field appearance=\"fill\" required>\n          <mat-label i18n>Price type</mat-label>\n          <mat-select name=\"priceType\" [compareWith]=\"priceTypeCompareFn\" [(ngModel)]=\"property.priceType\">\n            @for (type of priceType | keyvalue; track type) {\n              <mat-option [value]=\"type.key\">\n                {{ type.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field> -->\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Available date</mat-label>\n          <input\n            matInput\n            placeholder=\"Available date\"\n            [matDatepicker]=\"availableDatePicker\"\n            [min]=\"minDate\"\n            (focus)=\"availableDatePicker.open()\"\n            name=\"availableDate\"\n            [(ngModel)]=\"property.availableDate\"\n            (dateInput)=\"property.availableDate = $event.value.format('YYYY-MM-DD')\"\n            readonly\n          />\n          <mat-datepicker-toggle matIconPrefix [for]=\"availableDatePicker\"></mat-datepicker-toggle>\n          <mat-datepicker #availableDatePicker></mat-datepicker>\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Price </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"price\" name=\"price\" required rolatechDecimal />\n        </mat-form-field>\n        @if (property.priceType && property.priceType.toString() === 'PARTIAL') {\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n> Deposit </mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"deposit\" name=\"deposit\" required rolatechDecimal />\n          </mat-form-field>\n        }\n      </form>\n    </div>\n    <div>\n      <button mat-flat-button (click)=\"update()\" i18n>Save</button>\n    </div>\n  }\n</rolatech-property-manage-content>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i4$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: PropertyManageContentComponent, selector: "rolatech-property-manage-content" }, { kind: "directive", type: DecimalDirective, selector: "[rolatechDecimal]" }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageInfoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageInfoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-manage-info', imports: [
                         FormsModule,
@@ -3082,10 +3357,10 @@ class PropertyManageMediaComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageMediaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyManageMediaComponent, isStandalone: true, selector: "rolatech-property-manage-media", ngImport: i0, template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Media info\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <div>\n    <p i18n>*Limit 5MB per image*</p>\n    <rolatech-media-list (upload)=\"onMultipleFilesUpload($event)\">\n      @for (item of media; track item; let i = $index) {\n        <rolatech-media-list-item\n          [media]=\"item\"\n          (mediaItemClick)=\"onImageClick(i)\"\n          (deleteMedia)=\"onMediaDelete(item)\"\n          [uploading]=\"item.uploading\"\n        ></rolatech-media-list-item>\n      }\n    </rolatech-media-list>\n  </div>\n</rolatech-property-manage-content>\n", styles: [""], dependencies: [{ kind: "component", type: MediaListComponent, selector: "rolatech-media-list", inputs: ["isUploading", "media", "showAdd"], outputs: ["mediaItemClick", "upload"] }, { kind: "component", type: MediaListItemComponent, selector: "rolatech-media-list-item", inputs: ["media", "uploadProgress", "uploading"], outputs: ["mediaItemClick", "deleteMedia"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: PropertyManageContentComponent, selector: "rolatech-property-manage-content" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageMediaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyManageMediaComponent, isStandalone: true, selector: "rolatech-property-manage-media", ngImport: i0, template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Media info\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <div>\n    <p i18n>*Limit 5MB per image*</p>\n    <rolatech-media-list (upload)=\"onMultipleFilesUpload($event)\">\n      @for (item of media; track item; let i = $index) {\n        <rolatech-media-list-item\n          [media]=\"item\"\n          (mediaItemClick)=\"onImageClick(i)\"\n          (deleteMedia)=\"onMediaDelete(item)\"\n          [uploading]=\"item.uploading\"\n        ></rolatech-media-list-item>\n      }\n    </rolatech-media-list>\n  </div>\n</rolatech-property-manage-content>\n", styles: [""], dependencies: [{ kind: "component", type: MediaListComponent, selector: "rolatech-media-list", inputs: ["isUploading", "media", "showAdd"], outputs: ["mediaItemClick", "upload"] }, { kind: "component", type: MediaListItemComponent, selector: "rolatech-media-list-item", inputs: ["media", "uploadProgress", "uploading"], outputs: ["mediaItemClick", "deleteMedia"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: PropertyManageContentComponent, selector: "rolatech-property-manage-content" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageMediaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageMediaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-manage-media', imports: [MediaListComponent, MediaListItemComponent, ToolbarComponent, PropertyManageContentComponent], template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Media info\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <div>\n    <p i18n>*Limit 5MB per image*</p>\n    <rolatech-media-list (upload)=\"onMultipleFilesUpload($event)\">\n      @for (item of media; track item; let i = $index) {\n        <rolatech-media-list-item\n          [media]=\"item\"\n          (mediaItemClick)=\"onImageClick(i)\"\n          (deleteMedia)=\"onMediaDelete(item)\"\n          [uploading]=\"item.uploading\"\n        ></rolatech-media-list-item>\n      }\n    </rolatech-media-list>\n  </div>\n</rolatech-property-manage-content>\n" }]
         }], ctorParameters: () => [] });
@@ -3125,16 +3400,10 @@ class PropertyManageSectionItemComponent {
         this.deleteMedia.emit({ section: this.section(), media });
         this.selectedImg = this.section().media ? first(this.section().media) : null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageSectionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyManageSectionItemComponent, isStandalone: true, selector: "rolatech-property-manage-section-item", inputs: { isUploading: { classPropertyName: "isUploading", publicName: "isUploading", isSignal: true, isRequired: false, transformFunction: null }, section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, selectMedia: { classPropertyName: "selectMedia", publicName: "selectMedia", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { upload: "upload", delete: "delete", save: "save", deleteMedia: "deleteMedia" }, ngImport: i0, template: "<div class=\"px-3\">\n  <div\n    class=\"h-14 py-3 flex items-center justify-between cursor-pointer\"\n    (click)=\"expanded = !expanded; $event.stopPropagation()\"\n  >\n    <div class=\"flex\">\n      <div class=\"w-32 line-clamp-1\">{{ section().title }}</div>\n      <div class=\"line-clamp-1\">{{ section().description }}</div>\n    </div>\n    <div>\n      <button mat-icon-button aria-label=\"expand row\" (click)=\"expanded = !expanded; $event.stopPropagation()\">\n        @if (expanded) {\n          <mat-icon>keyboard_arrow_up</mat-icon>\n        } @else {\n          <mat-icon>keyboard_arrow_down</mat-icon>\n        }\n      </button>\n    </div>\n  </div>\n  <div class=\"flex flex-col gap-3 w-full overflow-hidden\" [@detailExpand]=\"expanded ? 'expanded' : 'collapsed'\">\n    <div class=\"flex flex-col lg:flex-row\">\n      <div class=\"flex flex-col grow\">\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Title</mat-label>\n          <input matInput placeholder=\"Title\" i18n-placeholder [(ngModel)]=\"section().title\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\" [hideRequiredMarker]=\"true\">\n          <mat-label i18n>Description</mat-label>\n          <textarea\n            matInput\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"3\"\n            placeholder=\"Description\"\n            [(ngModel)]=\"section().description\"\n            i18n-placeholder\n          ></textarea>\n        </mat-form-field>\n      </div>\n      <!-- media -->\n      <div class=\"lg:basis-1/2 px-0 lg:px-3\">\n        @if (selectedImg) {\n          <div class=\"flex flex-row justify-center relative aspect-video\">\n            <img class=\"object-contain w-full\" [src]=\"selectedImg.url\" [alt]=\"selectedImg.alt\" />\n            <div class=\"absolute z-30 right-0\">\n              <button\n                mat-icon-button\n                [matMenuTriggerFor]=\"beforeMenu\"\n                class=\"ml-auto focus:outline-none hover:bg-[--rt-base-background] p-1\"\n              >\n                <mat-icon>more_vert</mat-icon>\n              </button>\n              <mat-menu #beforeMenu=\"matMenu\" xPosition=\"before\">\n                <button mat-menu-item (click)=\"onDeleteMedia(selectedImg)\">\n                  <span i18n>Delete</span>\n                </button>\n              </mat-menu>\n            </div>\n          </div>\n        }\n\n        <!-- media -->\n        <div>\n          <div class=\"flex flex-row flex-wrap cursor-pointer relative box-border\" fxLayout=\"row\">\n            <div class=\"progress-bar\">\n              @if (section().isUploading) {\n                <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n              }\n            </div>\n            @for (media of section().media; track media) {\n              <div class=\"media-list-item\">\n                <img class=\"tile-media\" (click)=\"onMediaItemClick(media)\" [src]=\"media.url\" [alt]=\"media.alt\" />\n              </div>\n            }\n            <input style=\"display: none\" type=\"file\" accept=\"image/*\" (change)=\"onUpload($event)\" #fileInput />\n            <div class=\"add-button\">\n              <div (click)=\"fileInput.click()\" class=\"tile-media flex justify-center items-center\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"48px\" viewBox=\"0 -960 960 960\" width=\"48px\" fill=\"#5f6368\">\n                  <path d=\"M444-444H240v-72h204v-204h72v204h204v72H516v204h-72v-204Z\" />\n                </svg>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    @if (actions()) {\n      <div class=\"flex flex-row justify-end p-3 gap-3\">\n        <button mat-button class=\"max-h-8\" (click)=\"onDelete(section())\" i18n>Delete</button>\n        <button mat-flat-button class=\"max-h-8\" (click)=\"onSave(section())\" i18n>Save</button>\n      </div>\n    }\n  </div>\n</div>\n\n<mat-divider></mat-divider>\n", styles: [".media-list{flex-wrap:wrap;box-sizing:border-box}.progress-bar{display:block;min-height:6px;width:100%}.media-list-item{cursor:pointer;position:relative;box-sizing:border-box;padding:2px}.tile-media{height:64px;width:64px;object-fit:contain;cursor:pointer;border:1px solid grey;position:relative;box-sizing:border-box;border-radius:8px}.add-button{cursor:pointer;position:relative;box-sizing:border-box;padding:2px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i4$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i8.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], animations: [
-            trigger('detailExpand', [
-                state('collapsed', style({ height: '0px' })),
-                state('expanded', style({ height: '*' })),
-                transition('expanded <=> collapsed', animate('400ms cubic-bezier(0.25, 0.1, 0.25, 1)')),
-            ]),
-        ] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageSectionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyManageSectionItemComponent, isStandalone: true, selector: "rolatech-property-manage-section-item", inputs: { isUploading: { classPropertyName: "isUploading", publicName: "isUploading", isSignal: true, isRequired: false, transformFunction: null }, section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, selectMedia: { classPropertyName: "selectMedia", publicName: "selectMedia", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { upload: "upload", delete: "delete", save: "save", deleteMedia: "deleteMedia" }, ngImport: i0, template: "<div class=\"px-3\">\n  <div\n    class=\"h-14 py-3 flex items-center justify-between cursor-pointer\"\n    (click)=\"expanded = !expanded; $event.stopPropagation()\"\n  >\n    <div class=\"flex\">\n      <div class=\"w-32 line-clamp-1\">{{ section().title }}</div>\n      <div class=\"line-clamp-1\">{{ section().description }}</div>\n    </div>\n    <div>\n      <button mat-icon-button aria-label=\"expand row\" (click)=\"expanded = !expanded; $event.stopPropagation()\">\n        @if (expanded) {\n          <mat-icon>keyboard_arrow_up</mat-icon>\n        } @else {\n          <mat-icon>keyboard_arrow_down</mat-icon>\n        }\n      </button>\n    </div>\n  </div>\n  <div class=\"flex flex-col gap-3 w-full overflow-hidden collapsed\" [class.expanded]=\"expanded\">\n    <div class=\"flex flex-col lg:flex-row\">\n      <div class=\"flex flex-col grow\">\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Title</mat-label>\n          <input matInput placeholder=\"Title\" i18n-placeholder [(ngModel)]=\"section().title\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\" [hideRequiredMarker]=\"true\">\n          <mat-label i18n>Description</mat-label>\n          <textarea\n            matInput\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"3\"\n            placeholder=\"Description\"\n            [(ngModel)]=\"section().description\"\n            i18n-placeholder\n          ></textarea>\n        </mat-form-field>\n      </div>\n      <!-- media -->\n      <div class=\"lg:basis-1/2 px-0 lg:px-3\">\n        @if (selectedImg) {\n          <div class=\"flex flex-row justify-center relative aspect-video\">\n            <img class=\"object-contain w-full\" [src]=\"selectedImg.url\" [alt]=\"selectedImg.alt\" />\n            <div class=\"absolute z-30 right-0\">\n              <button\n                mat-icon-button\n                [matMenuTriggerFor]=\"beforeMenu\"\n                class=\"ml-auto focus:outline-none hover:bg-[--rt-base-background] p-1\"\n              >\n                <mat-icon>more_vert</mat-icon>\n              </button>\n              <mat-menu #beforeMenu=\"matMenu\" xPosition=\"before\">\n                <button mat-menu-item (click)=\"onDeleteMedia(selectedImg)\">\n                  <span i18n>Delete</span>\n                </button>\n              </mat-menu>\n            </div>\n          </div>\n        }\n\n        <!-- media -->\n        <div>\n          <div class=\"flex flex-row flex-wrap cursor-pointer relative box-border\" fxLayout=\"row\">\n            <div class=\"progress-bar\">\n              @if (section().isUploading) {\n                <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n              }\n            </div>\n            @for (media of section().media; track media) {\n              <div class=\"media-list-item\">\n                <img class=\"tile-media\" (click)=\"onMediaItemClick(media)\" [src]=\"media.url\" [alt]=\"media.alt\" />\n              </div>\n            }\n            <input style=\"display: none\" type=\"file\" accept=\"image/*\" (change)=\"onUpload($event)\" #fileInput />\n            <div class=\"add-button\">\n              <div (click)=\"fileInput.click()\" class=\"tile-media flex justify-center items-center\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"48px\" viewBox=\"0 -960 960 960\" width=\"48px\" fill=\"#5f6368\">\n                  <path d=\"M444-444H240v-72h204v-204h72v204h204v72H516v204h-72v-204Z\" />\n                </svg>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    @if (actions()) {\n      <div class=\"flex flex-row justify-end p-3 gap-3\">\n        <button mat-button class=\"max-h-8\" (click)=\"onDelete(section())\" i18n>Delete</button>\n        <button mat-flat-button class=\"max-h-8\" (click)=\"onSave(section())\" i18n>Save</button>\n      </div>\n    }\n  </div>\n</div>\n\n<mat-divider></mat-divider>\n", styles: [".media-list{flex-wrap:wrap;box-sizing:border-box}.progress-bar{display:block;min-height:6px;width:100%}.media-list-item{cursor:pointer;position:relative;box-sizing:border-box;padding:2px}.tile-media{height:64px;width:64px;object-fit:contain;cursor:pointer;border:1px solid grey;position:relative;box-sizing:border-box;border-radius:8px}.add-button{cursor:pointer;position:relative;box-sizing:border-box;padding:2px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i4$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i8.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageSectionItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageSectionItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-manage-section-item', imports: [
                         MatFormFieldModule,
@@ -3146,13 +3415,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                         MatMenuModule,
                         MatProgressBarModule,
                         MatDividerModule,
-                    ], animations: [
-                        trigger('detailExpand', [
-                            state('collapsed', style({ height: '0px' })),
-                            state('expanded', style({ height: '*' })),
-                            transition('expanded <=> collapsed', animate('400ms cubic-bezier(0.25, 0.1, 0.25, 1)')),
-                        ]),
-                    ], template: "<div class=\"px-3\">\n  <div\n    class=\"h-14 py-3 flex items-center justify-between cursor-pointer\"\n    (click)=\"expanded = !expanded; $event.stopPropagation()\"\n  >\n    <div class=\"flex\">\n      <div class=\"w-32 line-clamp-1\">{{ section().title }}</div>\n      <div class=\"line-clamp-1\">{{ section().description }}</div>\n    </div>\n    <div>\n      <button mat-icon-button aria-label=\"expand row\" (click)=\"expanded = !expanded; $event.stopPropagation()\">\n        @if (expanded) {\n          <mat-icon>keyboard_arrow_up</mat-icon>\n        } @else {\n          <mat-icon>keyboard_arrow_down</mat-icon>\n        }\n      </button>\n    </div>\n  </div>\n  <div class=\"flex flex-col gap-3 w-full overflow-hidden\" [@detailExpand]=\"expanded ? 'expanded' : 'collapsed'\">\n    <div class=\"flex flex-col lg:flex-row\">\n      <div class=\"flex flex-col grow\">\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Title</mat-label>\n          <input matInput placeholder=\"Title\" i18n-placeholder [(ngModel)]=\"section().title\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\" [hideRequiredMarker]=\"true\">\n          <mat-label i18n>Description</mat-label>\n          <textarea\n            matInput\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"3\"\n            placeholder=\"Description\"\n            [(ngModel)]=\"section().description\"\n            i18n-placeholder\n          ></textarea>\n        </mat-form-field>\n      </div>\n      <!-- media -->\n      <div class=\"lg:basis-1/2 px-0 lg:px-3\">\n        @if (selectedImg) {\n          <div class=\"flex flex-row justify-center relative aspect-video\">\n            <img class=\"object-contain w-full\" [src]=\"selectedImg.url\" [alt]=\"selectedImg.alt\" />\n            <div class=\"absolute z-30 right-0\">\n              <button\n                mat-icon-button\n                [matMenuTriggerFor]=\"beforeMenu\"\n                class=\"ml-auto focus:outline-none hover:bg-[--rt-base-background] p-1\"\n              >\n                <mat-icon>more_vert</mat-icon>\n              </button>\n              <mat-menu #beforeMenu=\"matMenu\" xPosition=\"before\">\n                <button mat-menu-item (click)=\"onDeleteMedia(selectedImg)\">\n                  <span i18n>Delete</span>\n                </button>\n              </mat-menu>\n            </div>\n          </div>\n        }\n\n        <!-- media -->\n        <div>\n          <div class=\"flex flex-row flex-wrap cursor-pointer relative box-border\" fxLayout=\"row\">\n            <div class=\"progress-bar\">\n              @if (section().isUploading) {\n                <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n              }\n            </div>\n            @for (media of section().media; track media) {\n              <div class=\"media-list-item\">\n                <img class=\"tile-media\" (click)=\"onMediaItemClick(media)\" [src]=\"media.url\" [alt]=\"media.alt\" />\n              </div>\n            }\n            <input style=\"display: none\" type=\"file\" accept=\"image/*\" (change)=\"onUpload($event)\" #fileInput />\n            <div class=\"add-button\">\n              <div (click)=\"fileInput.click()\" class=\"tile-media flex justify-center items-center\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"48px\" viewBox=\"0 -960 960 960\" width=\"48px\" fill=\"#5f6368\">\n                  <path d=\"M444-444H240v-72h204v-204h72v204h204v72H516v204h-72v-204Z\" />\n                </svg>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    @if (actions()) {\n      <div class=\"flex flex-row justify-end p-3 gap-3\">\n        <button mat-button class=\"max-h-8\" (click)=\"onDelete(section())\" i18n>Delete</button>\n        <button mat-flat-button class=\"max-h-8\" (click)=\"onSave(section())\" i18n>Save</button>\n      </div>\n    }\n  </div>\n</div>\n\n<mat-divider></mat-divider>\n", styles: [".media-list{flex-wrap:wrap;box-sizing:border-box}.progress-bar{display:block;min-height:6px;width:100%}.media-list-item{cursor:pointer;position:relative;box-sizing:border-box;padding:2px}.tile-media{height:64px;width:64px;object-fit:contain;cursor:pointer;border:1px solid grey;position:relative;box-sizing:border-box;border-radius:8px}.add-button{cursor:pointer;position:relative;box-sizing:border-box;padding:2px}\n"] }]
+                    ], template: "<div class=\"px-3\">\n  <div\n    class=\"h-14 py-3 flex items-center justify-between cursor-pointer\"\n    (click)=\"expanded = !expanded; $event.stopPropagation()\"\n  >\n    <div class=\"flex\">\n      <div class=\"w-32 line-clamp-1\">{{ section().title }}</div>\n      <div class=\"line-clamp-1\">{{ section().description }}</div>\n    </div>\n    <div>\n      <button mat-icon-button aria-label=\"expand row\" (click)=\"expanded = !expanded; $event.stopPropagation()\">\n        @if (expanded) {\n          <mat-icon>keyboard_arrow_up</mat-icon>\n        } @else {\n          <mat-icon>keyboard_arrow_down</mat-icon>\n        }\n      </button>\n    </div>\n  </div>\n  <div class=\"flex flex-col gap-3 w-full overflow-hidden collapsed\" [class.expanded]=\"expanded\">\n    <div class=\"flex flex-col lg:flex-row\">\n      <div class=\"flex flex-col grow\">\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Title</mat-label>\n          <input matInput placeholder=\"Title\" i18n-placeholder [(ngModel)]=\"section().title\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\" [hideRequiredMarker]=\"true\">\n          <mat-label i18n>Description</mat-label>\n          <textarea\n            matInput\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"3\"\n            placeholder=\"Description\"\n            [(ngModel)]=\"section().description\"\n            i18n-placeholder\n          ></textarea>\n        </mat-form-field>\n      </div>\n      <!-- media -->\n      <div class=\"lg:basis-1/2 px-0 lg:px-3\">\n        @if (selectedImg) {\n          <div class=\"flex flex-row justify-center relative aspect-video\">\n            <img class=\"object-contain w-full\" [src]=\"selectedImg.url\" [alt]=\"selectedImg.alt\" />\n            <div class=\"absolute z-30 right-0\">\n              <button\n                mat-icon-button\n                [matMenuTriggerFor]=\"beforeMenu\"\n                class=\"ml-auto focus:outline-none hover:bg-[--rt-base-background] p-1\"\n              >\n                <mat-icon>more_vert</mat-icon>\n              </button>\n              <mat-menu #beforeMenu=\"matMenu\" xPosition=\"before\">\n                <button mat-menu-item (click)=\"onDeleteMedia(selectedImg)\">\n                  <span i18n>Delete</span>\n                </button>\n              </mat-menu>\n            </div>\n          </div>\n        }\n\n        <!-- media -->\n        <div>\n          <div class=\"flex flex-row flex-wrap cursor-pointer relative box-border\" fxLayout=\"row\">\n            <div class=\"progress-bar\">\n              @if (section().isUploading) {\n                <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n              }\n            </div>\n            @for (media of section().media; track media) {\n              <div class=\"media-list-item\">\n                <img class=\"tile-media\" (click)=\"onMediaItemClick(media)\" [src]=\"media.url\" [alt]=\"media.alt\" />\n              </div>\n            }\n            <input style=\"display: none\" type=\"file\" accept=\"image/*\" (change)=\"onUpload($event)\" #fileInput />\n            <div class=\"add-button\">\n              <div (click)=\"fileInput.click()\" class=\"tile-media flex justify-center items-center\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"48px\" viewBox=\"0 -960 960 960\" width=\"48px\" fill=\"#5f6368\">\n                  <path d=\"M444-444H240v-72h204v-204h72v204h204v72H516v204h-72v-204Z\" />\n                </svg>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    @if (actions()) {\n      <div class=\"flex flex-row justify-end p-3 gap-3\">\n        <button mat-button class=\"max-h-8\" (click)=\"onDelete(section())\" i18n>Delete</button>\n        <button mat-flat-button class=\"max-h-8\" (click)=\"onSave(section())\" i18n>Save</button>\n      </div>\n    }\n  </div>\n</div>\n\n<mat-divider></mat-divider>\n", styles: [".media-list{flex-wrap:wrap;box-sizing:border-box}.progress-bar{display:block;min-height:6px;width:100%}.media-list-item{cursor:pointer;position:relative;box-sizing:border-box;padding:2px}.tile-media{height:64px;width:64px;object-fit:contain;cursor:pointer;border:1px solid grey;position:relative;box-sizing:border-box;border-radius:8px}.add-button{cursor:pointer;position:relative;box-sizing:border-box;padding:2px}\n"] }]
         }], ctorParameters: () => [] });
 
 class PropertyManageSectionsComponent {
@@ -3305,10 +3568,10 @@ class PropertyManageSectionsComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageSectionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyManageSectionsComponent, isStandalone: true, selector: "rolatech-property-manage-sections", ngImport: i0, template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Details\" class=\"hidden md:block\" divider> </rolatech-toolbar>\n  <div>\n    <div>\n      @for (section of sections; track section) {\n        <rolatech-property-manage-section-item\n          [section]=\"section\"\n          (upload)=\"onUploadSectionMedia($event)\"\n          (deleteMedia)=\"onDeleteSectionMedia($event)\"\n          (save)=\"onSectionSave($event)\"\n          (delete)=\"onSectionDelete($event)\"\n          [actions]=\"true\"\n        ></rolatech-property-manage-section-item>\n      }\n    </div>\n    <button mat-stroked-button (click)=\"addSection()\" class=\"mt-3\">\n      <mat-icon>add</mat-icon>\n      <span i18n>Add</span>\n    </button>\n  </div>\n</rolatech-property-manage-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: PropertyManageContentComponent, selector: "rolatech-property-manage-content" }, { kind: "component", type: PropertyManageSectionItemComponent, selector: "rolatech-property-manage-section-item", inputs: ["isUploading", "section", "actions", "selectMedia"], outputs: ["upload", "delete", "save", "deleteMedia"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageSectionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyManageSectionsComponent, isStandalone: true, selector: "rolatech-property-manage-sections", ngImport: i0, template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Details\" class=\"hidden md:block\" divider> </rolatech-toolbar>\n  <div>\n    <div>\n      @for (section of sections; track section) {\n        <rolatech-property-manage-section-item\n          [section]=\"section\"\n          (upload)=\"onUploadSectionMedia($event)\"\n          (deleteMedia)=\"onDeleteSectionMedia($event)\"\n          (save)=\"onSectionSave($event)\"\n          (delete)=\"onSectionDelete($event)\"\n          [actions]=\"true\"\n        ></rolatech-property-manage-section-item>\n      }\n    </div>\n    <button mat-stroked-button (click)=\"addSection()\" class=\"mt-3\">\n      <mat-icon>add</mat-icon>\n      <span i18n>Add</span>\n    </button>\n  </div>\n</rolatech-property-manage-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: PropertyManageContentComponent, selector: "rolatech-property-manage-content" }, { kind: "component", type: PropertyManageSectionItemComponent, selector: "rolatech-property-manage-section-item", inputs: ["isUploading", "section", "actions", "selectMedia"], outputs: ["upload", "delete", "save", "deleteMedia"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageSectionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageSectionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-manage-sections', imports: [
                         MatButtonModule,
@@ -3320,19 +3583,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
         }], ctorParameters: () => [] });
 
 class PropertyManagePricingComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManagePricingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: PropertyManagePricingComponent, isStandalone: true, selector: "rolatech-property-manage-pricing", ngImport: i0, template: "<p>property-manage-pricing works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManagePricingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: PropertyManagePricingComponent, isStandalone: true, selector: "rolatech-property-manage-pricing", ngImport: i0, template: "<p>property-manage-pricing works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManagePricingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManagePricingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-manage-pricing', imports: [CommonModule], template: "<p>property-manage-pricing works!</p>\n" }]
         }] });
 
 class PropertyManageScheduleComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageScheduleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: PropertyManageScheduleComponent, isStandalone: true, selector: "rolatech-property-manage-schedule", ngImport: i0, template: "<p>property-manage-schedule works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageScheduleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: PropertyManageScheduleComponent, isStandalone: true, selector: "rolatech-property-manage-schedule", ngImport: i0, template: "<p>property-manage-schedule works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageScheduleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageScheduleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-manage-schedule', imports: [CommonModule], template: "<p>property-manage-schedule works!</p>\n" }]
         }] });
@@ -3358,7 +3621,7 @@ class PropertyManageFeaturesComponent extends BaseComponent {
     find() {
         forkJoin({
             features: this.featureService.find({}),
-            options: this.propertyService.findFeatures(this.id),
+            options: this.propertyService.findUserFeatures(this.id),
         }).subscribe(({ features, options }) => {
             this.features = features.data;
             if (options.data) {
@@ -3395,7 +3658,7 @@ class PropertyManageFeaturesComponent extends BaseComponent {
         this.selected[featureId] = selectedValues;
     }
     save() {
-        this.propertyService.updateFeatures(this.id, this.selected).subscribe({
+        this.propertyService.updateUserFeatures(this.id, this.selected).subscribe({
             next: (res) => {
                 this.snackBarService.open('Update successfully');
             },
@@ -3419,10 +3682,10 @@ class PropertyManageFeaturesComponent extends BaseComponent {
         }
         return binding;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageFeaturesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyManageFeaturesComponent, isStandalone: true, selector: "rolatech-property-manage-features", usesInheritance: true, ngImport: i0, template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Features\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <div>\n    @for (feature of features; track $index) {\n      <div>\n        <h4>{{ feature.name }}</h4>\n        @for (value of feature.values; track $index) {\n          <mat-checkbox\n            [checked]=\"selected[feature.id] ? selected[feature.id].includes(value.id) : false\"\n            (change)=\"toggleValue(feature.id, value.id, $event.checked)\"\n          >\n            {{ value.name }}\n          </mat-checkbox>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- @for (item of features; track item) {\n    <section class=\"example-section\">\n      <span class=\"example-list-section\">\n        <h4>{{ item.name }}</h4>\n        <mat-checkbox\n          class=\"example-margin\"\n          [checked]=\"item.selected\"\n          [indeterminate]=\"partiallyComplete(item)()\"\n          (change)=\"sectionChange(item, $event.checked)\"\n        >\n          {{ item.name }}\n        </mat-checkbox>\n      </span>\n      <div class=\"example-list-section\">\n        <div>\n          @for (value of item.values; track value; let i = $index) {\n            <mat-checkbox [checked]=\"value.selected\" (change)=\"sectionChange(item, $event.checked, i)\">\n              {{ value.name }}\n            </mat-checkbox>\n          }\n        </div>\n      </div>\n    </section>\n  } -->\n  <!-- <div class=\"px-3 mb-3\">\n    @for (item of features; track $index) {\n      <div class=\"text-xl font-bold py-2\">{{ item.name }}</div>\n      @for (value of item.values; track value; let i = $index) {\n        <mat-checkbox\n          class=\"text-lg font-medium\"\n          (click)=\"$event.stopPropagation()\"\n          [checked]=\"value.selected\"\n          (change)=\"sectionChange($event.checked, i)\"\n        >\n          {{ value.name }}\n        </mat-checkbox>\n      }\n    }\n  </div> -->\n  <button mat-flat-button (click)=\"save()\" i18n>Save</button>\n</rolatech-property-manage-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PropertyManageContentComponent, selector: "rolatech-property-manage-content" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$6.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageFeaturesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyManageFeaturesComponent, isStandalone: true, selector: "rolatech-property-manage-features", usesInheritance: true, ngImport: i0, template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Features\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <div>\n    @for (feature of features; track $index) {\n      <div>\n        <h4>{{ feature.name }}</h4>\n        @for (value of feature.values; track $index) {\n          <mat-checkbox\n            [checked]=\"selected[feature.id] ? selected[feature.id].includes(value.id) : false\"\n            (change)=\"toggleValue(feature.id, value.id, $event.checked)\"\n          >\n            {{ value.name }}\n          </mat-checkbox>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- @for (item of features; track item) {\n    <section class=\"example-section\">\n      <span class=\"example-list-section\">\n        <h4>{{ item.name }}</h4>\n        <mat-checkbox\n          class=\"example-margin\"\n          [checked]=\"item.selected\"\n          [indeterminate]=\"partiallyComplete(item)()\"\n          (change)=\"sectionChange(item, $event.checked)\"\n        >\n          {{ item.name }}\n        </mat-checkbox>\n      </span>\n      <div class=\"example-list-section\">\n        <div>\n          @for (value of item.values; track value; let i = $index) {\n            <mat-checkbox [checked]=\"value.selected\" (change)=\"sectionChange(item, $event.checked, i)\">\n              {{ value.name }}\n            </mat-checkbox>\n          }\n        </div>\n      </div>\n    </section>\n  } -->\n  <!-- <div class=\"px-3 mb-3\">\n    @for (item of features; track $index) {\n      <div class=\"text-xl font-bold py-2\">{{ item.name }}</div>\n      @for (value of item.values; track value; let i = $index) {\n        <mat-checkbox\n          class=\"text-lg font-medium\"\n          (click)=\"$event.stopPropagation()\"\n          [checked]=\"value.selected\"\n          (change)=\"sectionChange($event.checked, i)\"\n        >\n          {{ value.name }}\n        </mat-checkbox>\n      }\n    }\n  </div> -->\n  <button mat-flat-button (click)=\"save()\" i18n>Save</button>\n</rolatech-property-manage-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PropertyManageContentComponent, selector: "rolatech-property-manage-content" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$6.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageFeaturesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageFeaturesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-manage-features', imports: [CommonModule, PropertyManageContentComponent, ToolbarComponent, MatCheckboxModule, MatButtonModule], template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Features\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <div>\n    @for (feature of features; track $index) {\n      <div>\n        <h4>{{ feature.name }}</h4>\n        @for (value of feature.values; track $index) {\n          <mat-checkbox\n            [checked]=\"selected[feature.id] ? selected[feature.id].includes(value.id) : false\"\n            (change)=\"toggleValue(feature.id, value.id, $event.checked)\"\n          >\n            {{ value.name }}\n          </mat-checkbox>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- @for (item of features; track item) {\n    <section class=\"example-section\">\n      <span class=\"example-list-section\">\n        <h4>{{ item.name }}</h4>\n        <mat-checkbox\n          class=\"example-margin\"\n          [checked]=\"item.selected\"\n          [indeterminate]=\"partiallyComplete(item)()\"\n          (change)=\"sectionChange(item, $event.checked)\"\n        >\n          {{ item.name }}\n        </mat-checkbox>\n      </span>\n      <div class=\"example-list-section\">\n        <div>\n          @for (value of item.values; track value; let i = $index) {\n            <mat-checkbox [checked]=\"value.selected\" (change)=\"sectionChange(item, $event.checked, i)\">\n              {{ value.name }}\n            </mat-checkbox>\n          }\n        </div>\n      </div>\n    </section>\n  } -->\n  <!-- <div class=\"px-3 mb-3\">\n    @for (item of features; track $index) {\n      <div class=\"text-xl font-bold py-2\">{{ item.name }}</div>\n      @for (value of item.values; track value; let i = $index) {\n        <mat-checkbox\n          class=\"text-lg font-medium\"\n          (click)=\"$event.stopPropagation()\"\n          [checked]=\"value.selected\"\n          (change)=\"sectionChange($event.checked, i)\"\n        >\n          {{ value.name }}\n        </mat-checkbox>\n      }\n    }\n  </div> -->\n  <button mat-flat-button (click)=\"save()\" i18n>Save</button>\n</rolatech-property-manage-content>\n" }]
         }] });
@@ -3574,24 +3837,11 @@ class PropertyManageLocationComponent extends BaseComponent {
             },
         });
     }
-    searchSchools(lat, lng, radius = 2000) {
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageLocationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyManageLocationComponent, isStandalone: true, selector: "rolatech-property-manage-location", inputs: { location: { classPropertyName: "location", publicName: "location", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { location: "locationChange" }, viewQueries: [{ propertyName: "autocompleteInput", first: true, predicate: ["autocompleteInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Location\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <mat-form-field position=\"left\">\n    <input\n      type=\"text\"\n      placeholder=\"Search for a location\"\n      #searchInput\n      (input)=\"onInputChange($event)\"\n      matInput\n      [matAutocomplete]=\"auto\"\n    />\n    <mat-autocomplete\n      class=\"single-autocomplete\"\n      #auto=\"matAutocomplete\"\n      (optionSelected)=\"onOptionSelected($event)\"\n      [displayWith]=\"displayFn\"\n    >\n      @for (prediction of predictions; track $index) {\n        <mat-option [value]=\"prediction\">\n          {{ prediction.description }}\n        </mat-option>\n      }\n    </mat-autocomplete>\n  </mat-form-field>\n  <div class=\"border px-3 rounded-md\">\n    <div class=\"flex justify-between items-center py-3 cursor-pointer select-none\" i18n (click)=\"expand = !expand\">\n      <span> Enter the address manually </span>\n      <mat-icon>{{ expand ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\n    </div>\n    <div [@contentAnimation]=\"expand\" [class.hidden]=\"!expand\">\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n> Flat number </mat-label>\n        <input matInput [(ngModel)]=\"location().flatNumber\" required />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n> Street number </mat-label>\n        <input matInput [(ngModel)]=\"location().streetNumber\" required />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n> Building name </mat-label>\n        <input matInput [(ngModel)]=\"location().name\" required />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n> Street </mat-label>\n        <input matInput [(ngModel)]=\"location().street\" required />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n> Town </mat-label>\n        <input matInput [(ngModel)]=\"location().town\" required />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n> Postcode </mat-label>\n        <input matInput [(ngModel)]=\"location().postCode\" required />\n      </mat-form-field>\n    </div>\n  </div>\n  <div class=\"flex justify-end items-center p-3 gap-3\">\n    <button mat-flat-button i18n (click)=\"save()\">Save</button>\n  </div>\n</rolatech-property-manage-content>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: PropertyManageContentComponent, selector: "rolatech-property-manage-content" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], animations: [
-            trigger('contentAnimation', [
-                state('hidden', style({
-                    height: '0',
-                    opacity: 0,
-                })),
-                state('visible', style({
-                    height: '*',
-                    opacity: 1,
-                })),
-                transition('hidden <=> visible', animate('300ms ease-in-out')),
-            ]),
-        ] });
+    searchSchools(lat, lng, radius = 2000) { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageLocationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyManageLocationComponent, isStandalone: true, selector: "rolatech-property-manage-location", inputs: { location: { classPropertyName: "location", publicName: "location", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { location: "locationChange" }, viewQueries: [{ propertyName: "autocompleteInput", first: true, predicate: ["autocompleteInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Location\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <mat-form-field position=\"left\">\n    <input\n      type=\"text\"\n      placeholder=\"Search for a location\"\n      #searchInput\n      (input)=\"onInputChange($event)\"\n      matInput\n      [matAutocomplete]=\"auto\"\n    />\n    <mat-autocomplete\n      class=\"single-autocomplete\"\n      #auto=\"matAutocomplete\"\n      (optionSelected)=\"onOptionSelected($event)\"\n      [displayWith]=\"displayFn\"\n    >\n      @for (prediction of predictions; track $index) {\n        <mat-option [value]=\"prediction\">\n          {{ prediction.description }}\n        </mat-option>\n      }\n    </mat-autocomplete>\n  </mat-form-field>\n  <div class=\"border px-3 rounded-md\">\n    <div class=\"flex justify-between items-center py-3 cursor-pointer select-none\" i18n (click)=\"expand = !expand\">\n      <span> Enter the address manually </span>\n      <mat-icon>{{ expand ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\n    </div>\n    <div class=\"collapsed\" [class.expanded]=\"!expand\">\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n> Flat number </mat-label>\n        <input matInput [(ngModel)]=\"location().flatNumber\" required />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n> Street number </mat-label>\n        <input matInput [(ngModel)]=\"location().streetNumber\" required />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n> Building name </mat-label>\n        <input matInput [(ngModel)]=\"location().name\" required />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n> Street </mat-label>\n        <input matInput [(ngModel)]=\"location().street\" required />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n> Town </mat-label>\n        <input matInput [(ngModel)]=\"location().town\" required />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n> Postcode </mat-label>\n        <input matInput [(ngModel)]=\"location().postCode\" required />\n      </mat-form-field>\n    </div>\n  </div>\n  <div class=\"flex justify-end items-center p-3 gap-3\">\n    <button mat-flat-button i18n (click)=\"save()\">Save</button>\n  </div>\n</rolatech-property-manage-content>\n", styles: ["mat-form-field{width:100%}.collapsed{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.4,0,.2,1)}.expanded{max-height:1000px}\n"], dependencies: [{ kind: "component", type: PropertyManageContentComponent, selector: "rolatech-property-manage-content" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageLocationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageLocationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-manage-location', imports: [
                         PropertyManageContentComponent,
@@ -3605,19 +3855,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                         MatAutocompleteModule,
                         MatButtonModule,
                         MatIconModule,
-                    ], animations: [
-                        trigger('contentAnimation', [
-                            state('hidden', style({
-                                height: '0',
-                                opacity: 0,
-                            })),
-                            state('visible', style({
-                                height: '*',
-                                opacity: 1,
-                            })),
-                            transition('hidden <=> visible', animate('300ms ease-in-out')),
-                        ]),
-                    ], template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Location\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <mat-form-field position=\"left\">\n    <input\n      type=\"text\"\n      placeholder=\"Search for a location\"\n      #searchInput\n      (input)=\"onInputChange($event)\"\n      matInput\n      [matAutocomplete]=\"auto\"\n    />\n    <mat-autocomplete\n      class=\"single-autocomplete\"\n      #auto=\"matAutocomplete\"\n      (optionSelected)=\"onOptionSelected($event)\"\n      [displayWith]=\"displayFn\"\n    >\n      @for (prediction of predictions; track $index) {\n        <mat-option [value]=\"prediction\">\n          {{ prediction.description }}\n        </mat-option>\n      }\n    </mat-autocomplete>\n  </mat-form-field>\n  <div class=\"border px-3 rounded-md\">\n    <div class=\"flex justify-between items-center py-3 cursor-pointer select-none\" i18n (click)=\"expand = !expand\">\n      <span> Enter the address manually </span>\n      <mat-icon>{{ expand ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\n    </div>\n    <div [@contentAnimation]=\"expand\" [class.hidden]=\"!expand\">\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n> Flat number </mat-label>\n        <input matInput [(ngModel)]=\"location().flatNumber\" required />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n> Street number </mat-label>\n        <input matInput [(ngModel)]=\"location().streetNumber\" required />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n> Building name </mat-label>\n        <input matInput [(ngModel)]=\"location().name\" required />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n> Street </mat-label>\n        <input matInput [(ngModel)]=\"location().street\" required />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n> Town </mat-label>\n        <input matInput [(ngModel)]=\"location().town\" required />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n> Postcode </mat-label>\n        <input matInput [(ngModel)]=\"location().postCode\" required />\n      </mat-form-field>\n    </div>\n  </div>\n  <div class=\"flex justify-end items-center p-3 gap-3\">\n    <button mat-flat-button i18n (click)=\"save()\">Save</button>\n  </div>\n</rolatech-property-manage-content>\n", styles: ["mat-form-field{width:100%}\n"] }]
+                    ], template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Location\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <mat-form-field position=\"left\">\n    <input\n      type=\"text\"\n      placeholder=\"Search for a location\"\n      #searchInput\n      (input)=\"onInputChange($event)\"\n      matInput\n      [matAutocomplete]=\"auto\"\n    />\n    <mat-autocomplete\n      class=\"single-autocomplete\"\n      #auto=\"matAutocomplete\"\n      (optionSelected)=\"onOptionSelected($event)\"\n      [displayWith]=\"displayFn\"\n    >\n      @for (prediction of predictions; track $index) {\n        <mat-option [value]=\"prediction\">\n          {{ prediction.description }}\n        </mat-option>\n      }\n    </mat-autocomplete>\n  </mat-form-field>\n  <div class=\"border px-3 rounded-md\">\n    <div class=\"flex justify-between items-center py-3 cursor-pointer select-none\" i18n (click)=\"expand = !expand\">\n      <span> Enter the address manually </span>\n      <mat-icon>{{ expand ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\n    </div>\n    <div class=\"collapsed\" [class.expanded]=\"!expand\">\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n> Flat number </mat-label>\n        <input matInput [(ngModel)]=\"location().flatNumber\" required />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n> Street number </mat-label>\n        <input matInput [(ngModel)]=\"location().streetNumber\" required />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n> Building name </mat-label>\n        <input matInput [(ngModel)]=\"location().name\" required />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n> Street </mat-label>\n        <input matInput [(ngModel)]=\"location().street\" required />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n> Town </mat-label>\n        <input matInput [(ngModel)]=\"location().town\" required />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n> Postcode </mat-label>\n        <input matInput [(ngModel)]=\"location().postCode\" required />\n      </mat-form-field>\n    </div>\n  </div>\n  <div class=\"flex justify-end items-center p-3 gap-3\">\n    <button mat-flat-button i18n (click)=\"save()\">Save</button>\n  </div>\n</rolatech-property-manage-content>\n", styles: ["mat-form-field{width:100%}.collapsed{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.4,0,.2,1)}.expanded{max-height:1000px}\n"] }]
         }], propDecorators: { autocompleteInput: [{
                 type: ViewChild,
                 args: ['autocompleteInput', { static: false }]
@@ -3634,10 +3872,10 @@ class PropertyVideoYoutubeAddComponent {
     ngDoCheck() {
         this.output.emit(this.url);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyVideoYoutubeAddComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: PropertyVideoYoutubeAddComponent, isStandalone: true, selector: "rolatech-property-video-youtube-add", outputs: { output: "output" }, ngImport: i0, template: "<mat-form-field appearance=\"fill\">\n  <mat-label>Youtube Video URL</mat-label>\n  <input matInput placeholder=\"Youtube Video URL\" type=\"text\" [(ngModel)]=\"url\" i18n />\n</mat-form-field>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyVideoYoutubeAddComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: PropertyVideoYoutubeAddComponent, isStandalone: true, selector: "rolatech-property-video-youtube-add", outputs: { output: "output" }, ngImport: i0, template: "<mat-form-field appearance=\"fill\">\n  <mat-label>Youtube Video URL</mat-label>\n  <input matInput placeholder=\"Youtube Video URL\" type=\"text\" [(ngModel)]=\"url\" i18n />\n</mat-form-field>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyVideoYoutubeAddComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyVideoYoutubeAddComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-video-youtube-add', imports: [CommonModule, MatFormFieldModule, MatInputModule, FormsModule], template: "<mat-form-field appearance=\"fill\">\n  <mat-label>Youtube Video URL</mat-label>\n  <input matInput placeholder=\"Youtube Video URL\" type=\"text\" [(ngModel)]=\"url\" i18n />\n</mat-form-field>\n", styles: ["mat-form-field{width:100%}\n"] }]
         }] });
@@ -3651,10 +3889,10 @@ class SafeUrlPipe {
         // If you want to allow in [href], [src], [poster], [srcdoc], etc.
         return this.sanitizer.bypassSecurityTrustResourceUrl(url);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SafeUrlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.2", ngImport: i0, type: SafeUrlPipe, isStandalone: true, name: "safeUrl" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SafeUrlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: SafeUrlPipe, isStandalone: true, name: "safeUrl" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SafeUrlPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SafeUrlPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'safeUrl',
@@ -3712,10 +3950,10 @@ class PropertyVideoItem {
         const videoElement = event.target;
         this.video().duration = videoElement.duration;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyVideoItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyVideoItem, isStandalone: true, selector: "rolatech-property-video-item", inputs: { progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, video: { classPropertyName: "video", publicName: "video", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, hasUnsaved: { classPropertyName: "hasUnsaved", publicName: "hasUnsaved", isSignal: true, isRequired: false, transformFunction: null }, editId: { classPropertyName: "editId", publicName: "editId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editId: "editIdChange", save: "save", cancel: "cancel", delete: "delete", edit: "edit", upload: "upload" }, viewQueries: [{ propertyName: "myVideo", first: true, predicate: ["video"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex flex-col grow p-2\">\n  @if (!editTitle) {\n  <div class=\"w-full flex gap-3 p-3 items-center\">\n    <span>{{ video().title }}</span>\n    <button mat-icon-button (click)=\"onEdit(video()); $event.stopPropagation()\" class=\"max-w-8 max-h-8 !p-1\">\n      <mat-icon>edit</mat-icon>\n    </button>\n    <button mat-icon-button (click)=\"onDelete(video()); $event.stopPropagation()\" class=\"max-w-8 max-h-8 !p-1\">\n      <mat-icon>delete</mat-icon>\n    </button>\n  </div>\n  } @else {\n  <div class=\"flex flex-col justify-between items-center\">\n    <rolatech-input [(title)]=\"video().title\" placeholder=\"Title\"></rolatech-input>\n    <div class=\"w-full flex flex-row justify-end p-3 gap-3\">\n      <button mat-button class=\"max-h-8\" (click)=\"onCancel(video())\" i18n>Cancel</button>\n      <button mat-flat-button class=\"max-h-8\" (click)=\"onSave(video())\" i18n>Save</button>\n    </div>\n  </div>\n  }\n\n  <div>\n    @if (video().url) {\n    <div class=\"flex flex-col p-2 gap-3\">\n      <div class=\"bg-black h-fit\">\n        <video\n          controls\n          #videoContainer\n          [src]=\"video().url\"\n          class=\"w-full aspect-video\"\n          (loadedmetadata)=\"onLoadedMetadata($event)\"\n          [poster]=\"video().thumbnail\"\n        >\n          <!-- <source [src]=\"video().url\" type=\"video/mp4\" /> -->\n        </video>\n      </div>\n      <div class=\"flex flex-col justify-between w-full\">\n        <div class=\"flex justify-between items-center w-full\">\n          @if (video().uploading) {\n          <div>\n            <span> {{ video().progress }}%</span>\n          </div>\n          }\n        </div>\n        <div class=\"flex justify-between items-center\">\n          <div>\n            <span>{{ video().duration | duration }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n    @if (video().uploading) {\n    <div class=\"p-2\">\n      <mat-progress-bar mode=\"determinate\" [value]=\"video().progress\"> </mat-progress-bar>\n    </div>\n    } } @else {\n    <div class=\"px-3\">\n      <input\n        class=\"ud-sr-only\"\n        type=\"file\"\n        accept=\".avi,.mpg,.mpeg,.flv,.mov,.m2v,.m4v,.mp4,.rm,.ram,.vob,.ogv,.webm,.wmv\"\n        (change)=\"onUpload(video().id, $event)\"\n        #fileInput\n      />\n      <div class=\"flex justify-between items-center\">\n        <div i18n>No videos</div>\n        <button mat-flat-button class=\"max-h-8\" (click)=\"fileInput.click()\" i18n>Upload</button>\n      </div>\n    </div>\n    }\n  </div>\n  @if (!hasUnsaved()) {\n  <ng-content></ng-content>\n  }\n</div>\n", styles: [".ud-sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i8.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: InputComponent, selector: "rolatech-input", inputs: ["title", "placeholder"], outputs: ["titleChange"] }, { kind: "pipe", type: DurationPipe, name: "duration" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyVideoItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyVideoItem, isStandalone: true, selector: "rolatech-property-video-item", inputs: { progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, video: { classPropertyName: "video", publicName: "video", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, hasUnsaved: { classPropertyName: "hasUnsaved", publicName: "hasUnsaved", isSignal: true, isRequired: false, transformFunction: null }, editId: { classPropertyName: "editId", publicName: "editId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editId: "editIdChange", save: "save", cancel: "cancel", delete: "delete", edit: "edit", upload: "upload" }, viewQueries: [{ propertyName: "myVideo", first: true, predicate: ["video"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex flex-col grow p-2\">\n  @if (!editTitle) {\n  <div class=\"w-full flex gap-3 p-3 items-center\">\n    <span>{{ video().title }}</span>\n    <button mat-icon-button (click)=\"onEdit(video()); $event.stopPropagation()\" class=\"max-w-8 max-h-8 !p-1\">\n      <mat-icon>edit</mat-icon>\n    </button>\n    <button mat-icon-button (click)=\"onDelete(video()); $event.stopPropagation()\" class=\"max-w-8 max-h-8 !p-1\">\n      <mat-icon>delete</mat-icon>\n    </button>\n  </div>\n  } @else {\n  <div class=\"flex flex-col justify-between items-center\">\n    <rolatech-input [(title)]=\"video().title\" placeholder=\"Title\"></rolatech-input>\n    <div class=\"w-full flex flex-row justify-end p-3 gap-3\">\n      <button mat-button class=\"max-h-8\" (click)=\"onCancel(video())\" i18n>Cancel</button>\n      <button mat-flat-button class=\"max-h-8\" (click)=\"onSave(video())\" i18n>Save</button>\n    </div>\n  </div>\n  }\n\n  <div>\n    @if (video().url) {\n    <div class=\"flex flex-col p-2 gap-3\">\n      <div class=\"bg-black h-fit\">\n        <video\n          controls\n          #videoContainer\n          [src]=\"video().url\"\n          class=\"w-full aspect-video\"\n          (loadedmetadata)=\"onLoadedMetadata($event)\"\n          [poster]=\"video().thumbnail\"\n        >\n          <!-- <source [src]=\"video().url\" type=\"video/mp4\" /> -->\n        </video>\n      </div>\n      <div class=\"flex flex-col justify-between w-full\">\n        <div class=\"flex justify-between items-center w-full\">\n          @if (video().uploading) {\n          <div>\n            <span> {{ video().progress }}%</span>\n          </div>\n          }\n        </div>\n        <div class=\"flex justify-between items-center\">\n          <div>\n            <span>{{ video().duration | duration }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n    @if (video().uploading) {\n    <div class=\"p-2\">\n      <mat-progress-bar mode=\"determinate\" [value]=\"video().progress\"> </mat-progress-bar>\n    </div>\n    } } @else {\n    <div class=\"px-3\">\n      <input\n        class=\"ud-sr-only\"\n        type=\"file\"\n        accept=\".avi,.mpg,.mpeg,.flv,.mov,.m2v,.m4v,.mp4,.rm,.ram,.vob,.ogv,.webm,.wmv\"\n        (change)=\"onUpload(video().id, $event)\"\n        #fileInput\n      />\n      <div class=\"flex justify-between items-center\">\n        <div i18n>No videos</div>\n        <button mat-flat-button class=\"max-h-8\" (click)=\"fileInput.click()\" i18n>Upload</button>\n      </div>\n    </div>\n    }\n  </div>\n  @if (!hasUnsaved()) {\n  <ng-content></ng-content>\n  }\n</div>\n", styles: [".ud-sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i8.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: InputComponent, selector: "rolatech-input", inputs: ["title", "placeholder"], outputs: ["titleChange"] }, { kind: "pipe", type: DurationPipe, name: "duration" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyVideoItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyVideoItem, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-video-item', imports: [
                         MatIconModule,
@@ -3987,34 +4225,145 @@ class PropertyManageVideoComponent extends BaseComponent {
         }
         return fileChunkList;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyManageVideoComponent, isStandalone: true, selector: "rolatech-property-manage-video", usesInheritance: true, ngImport: i0, template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Videos\" class=\"hidden md:block\" divider> </rolatech-toolbar>\n  <rolatech-tabs [(select)]=\"tabIndex\">\n    <rolatech-tab label=\"Youtube\"></rolatech-tab>\n    <rolatech-tab label=\"COS\"></rolatech-tab>\n  </rolatech-tabs>\n  <div class=\"py-2\">\n    @if (tabIndex() === 0) {\n      @if (youtubeVideos.length > 0 && youtubeVideos[0].url) {\n        <div class=\"relative w-full aspect-video\">\n          @if (!iframeLoaded) {\n            <div class=\"absolute inset-0 flex items-center justify-center bg-black/10 border bg-white\">\n              <span>Loading...</span>\n            </div>\n          }\n          <iframe\n            [src]=\"toYoutubeEmbed(youtubeVideos[0].url) | safeUrl\"\n            frameborder=\"0\"\n            allowfullscreen\n            class=\"w-full h-full\"\n            (load)=\"iframeLoaded = true\"\n          ></iframe>\n        </div>\n        <button mat-flat-button (click)=\"updateYoutubeUrl(youtubeVideos[0])\" class=\"mt-3\">Update Youtube url</button>\n      } @else {\n        <button mat-flat-button (click)=\"addYoutubeUrl()\" class=\"mt-3\">Add Youtube url</button>\n      }\n    }\n    @if (tabIndex() === 1) {\n      @for (video of cosVideos; track $index) {\n        <rolatech-property-video-item\n          [video]=\"video\"\n          (save)=\"onCOSVideoSave($event)\"\n          (delete)=\"onCOSVideoDelete(video, $event)\"\n          (edit)=\"onVideoEdit($event)\"\n          (upload)=\"onCOSVideoUpload(video, $event)\"\n          [editId]=\"videoEditId\"\n        ></rolatech-property-video-item>\n      }\n      @if (cosVideos.length === 0) {\n        <div class=\"p-3\">\n          <button mat-flat-button class=\"max-h-8\" (click)=\"addCOSVideo()\">\n            <mat-icon>add</mat-icon>\n            <span>Add video</span>\n          </button>\n        </div>\n      }\n      <!-- <rolatech-video-upload (upload)=\"onMediaUploadInit($event)\"></rolatech-video-upload> -->\n    }\n  </div>\n</rolatech-property-manage-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: PropertyManageContentComponent, selector: "rolatech-property-manage-content" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: TabsComponent, selector: "rolatech-tabs", inputs: ["select", "loading"], outputs: ["selectChange"] }, { kind: "component", type: TabComponent, selector: "rolatech-tab", inputs: ["label"] }, { kind: "component", type: PropertyVideoItem, selector: "rolatech-property-video-item", inputs: ["progress", "video", "actions", "hasUnsaved", "editId"], outputs: ["editIdChange", "save", "cancel", "delete", "edit", "upload"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SafeUrlPipe, name: "safeUrl" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyManageVideoComponent, isStandalone: true, selector: "rolatech-property-manage-video", usesInheritance: true, ngImport: i0, template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Videos\" class=\"hidden md:block\" divider> </rolatech-toolbar>\n  <rolatech-tabs [(select)]=\"tabIndex\">\n    <rolatech-tab label=\"Youtube\"></rolatech-tab>\n    <rolatech-tab label=\"COS\"></rolatech-tab>\n  </rolatech-tabs>\n  <div class=\"py-2\">\n    @if (tabIndex() === 0) {\n      @if (youtubeVideos.length > 0 && youtubeVideos[0].url) {\n        <div class=\"relative w-full aspect-video\">\n          @if (!iframeLoaded) {\n            <div class=\"absolute inset-0 flex items-center justify-center bg-black/10 border bg-white\">\n              <span>Loading...</span>\n            </div>\n          }\n          <iframe\n            [src]=\"toYoutubeEmbed(youtubeVideos[0].url) | safeUrl\"\n            frameborder=\"0\"\n            allowfullscreen\n            class=\"w-full h-full\"\n            (load)=\"iframeLoaded = true\"\n          ></iframe>\n        </div>\n        <button mat-flat-button (click)=\"updateYoutubeUrl(youtubeVideos[0])\" class=\"mt-3\">Update Youtube url</button>\n      } @else {\n        <button mat-flat-button (click)=\"addYoutubeUrl()\" class=\"mt-3\">Add Youtube url</button>\n      }\n    }\n    @if (tabIndex() === 1) {\n      @for (video of cosVideos; track $index) {\n        <rolatech-property-video-item\n          [video]=\"video\"\n          (save)=\"onCOSVideoSave($event)\"\n          (delete)=\"onCOSVideoDelete(video, $event)\"\n          (edit)=\"onVideoEdit($event)\"\n          (upload)=\"onCOSVideoUpload(video, $event)\"\n          [editId]=\"videoEditId\"\n        ></rolatech-property-video-item>\n      }\n      @if (cosVideos.length === 0) {\n        <div class=\"p-3\">\n          <button mat-flat-button class=\"max-h-8\" (click)=\"addCOSVideo()\">\n            <mat-icon>add</mat-icon>\n            <span>Add video</span>\n          </button>\n        </div>\n      }\n      <!-- <rolatech-video-upload (upload)=\"onMediaUploadInit($event)\"></rolatech-video-upload> -->\n    }\n  </div>\n</rolatech-property-manage-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: PropertyManageContentComponent, selector: "rolatech-property-manage-content" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: TabsComponent, selector: "rolatech-tabs", inputs: ["select", "loading"], outputs: ["selectChange"] }, { kind: "component", type: TabComponent, selector: "rolatech-tab", inputs: ["label"] }, { kind: "component", type: PropertyVideoItem, selector: "rolatech-property-video-item", inputs: ["progress", "video", "actions", "hasUnsaved", "editId"], outputs: ["editIdChange", "save", "cancel", "delete", "edit", "upload"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SafeUrlPipe, name: "safeUrl" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageVideoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageVideoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-manage-video', imports: [CommonModule, ToolbarComponent, PropertyManageContentComponent, MatButtonModule, TabsComponent, TabComponent, SafeUrlPipe, PropertyVideoItem, MatIcon], template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Videos\" class=\"hidden md:block\" divider> </rolatech-toolbar>\n  <rolatech-tabs [(select)]=\"tabIndex\">\n    <rolatech-tab label=\"Youtube\"></rolatech-tab>\n    <rolatech-tab label=\"COS\"></rolatech-tab>\n  </rolatech-tabs>\n  <div class=\"py-2\">\n    @if (tabIndex() === 0) {\n      @if (youtubeVideos.length > 0 && youtubeVideos[0].url) {\n        <div class=\"relative w-full aspect-video\">\n          @if (!iframeLoaded) {\n            <div class=\"absolute inset-0 flex items-center justify-center bg-black/10 border bg-white\">\n              <span>Loading...</span>\n            </div>\n          }\n          <iframe\n            [src]=\"toYoutubeEmbed(youtubeVideos[0].url) | safeUrl\"\n            frameborder=\"0\"\n            allowfullscreen\n            class=\"w-full h-full\"\n            (load)=\"iframeLoaded = true\"\n          ></iframe>\n        </div>\n        <button mat-flat-button (click)=\"updateYoutubeUrl(youtubeVideos[0])\" class=\"mt-3\">Update Youtube url</button>\n      } @else {\n        <button mat-flat-button (click)=\"addYoutubeUrl()\" class=\"mt-3\">Add Youtube url</button>\n      }\n    }\n    @if (tabIndex() === 1) {\n      @for (video of cosVideos; track $index) {\n        <rolatech-property-video-item\n          [video]=\"video\"\n          (save)=\"onCOSVideoSave($event)\"\n          (delete)=\"onCOSVideoDelete(video, $event)\"\n          (edit)=\"onVideoEdit($event)\"\n          (upload)=\"onCOSVideoUpload(video, $event)\"\n          [editId]=\"videoEditId\"\n        ></rolatech-property-video-item>\n      }\n      @if (cosVideos.length === 0) {\n        <div class=\"p-3\">\n          <button mat-flat-button class=\"max-h-8\" (click)=\"addCOSVideo()\">\n            <mat-icon>add</mat-icon>\n            <span>Add video</span>\n          </button>\n        </div>\n      }\n      <!-- <rolatech-video-upload (upload)=\"onMediaUploadInit($event)\"></rolatech-video-upload> -->\n    }\n  </div>\n</rolatech-property-manage-content>\n" }]
         }], ctorParameters: () => [] });
 
 class PropertyManageHighlights extends BaseComponent {
-    propertyService = inject(PropertyService);
-    highlights = [];
+    propertyHighlightsService = inject(PropertyHighlightsService);
+    highlights = signal([], ...(ngDevMode ? [{ debugName: "highlights" }] : []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    savingAll = signal(false, ...(ngDevMode ? [{ debugName: "savingAll" }] : []));
+    draft = '';
+    editIndex = signal(null, ...(ngDevMode ? [{ debugName: "editIndex" }] : []));
+    editText = '';
+    editMode = signal(false, ...(ngDevMode ? [{ debugName: "editMode" }] : []));
     ngOnInit() {
         this.id = this.route.parent?.snapshot.paramMap.get('id');
-        this.find();
+        this.reload();
     }
-    find() {
-        this.propertyService.getHighlights(this.id).subscribe({
-            next: (res) => {
-                this.highlights = res.data;
-            }
+    toggleEdit() {
+        // leaving edit mode cancels any inline edit
+        if (this.editMode()) {
+            this.cancelEdit();
+        }
+        this.editMode.update((v) => !v);
+    }
+    reload() {
+        this.loading.set(true);
+        this.propertyHighlightsService.getHighlights(this.id).subscribe({
+            next: (res) => this.highlights.set(res.data ?? []),
+            error: (e) => this.err('Failed to load highlights', e),
+            complete: () => this.loading.set(false),
+        });
+    }
+    create() {
+        const text = this.draft.trim();
+        if (!text)
+            return;
+        // optimistic append
+        const before = this.highlights();
+        this.highlights.set([...before, text]);
+        this.draft = '';
+        this.propertyHighlightsService.addHighlight(this.id, text).subscribe({
+            next: (res) => this.highlights.set(res.data),
+            error: (e) => {
+                this.highlights.set(before);
+                this.err('Add failed', e);
+            },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageHighlights, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyManageHighlights, isStandalone: true, selector: "rolatech-property-manage-highlights", usesInheritance: true, ngImport: i0, template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Highlights\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <div>\n    @for (item of highlights; track $index) {\n    <div class=\"font-bold p-1\">{{item}}</div>\n    }\n  </div>\n</rolatech-property-manage-content>\n", styles: [""], dependencies: [{ kind: "component", type: PropertyManageContentComponent, selector: "rolatech-property-manage-content" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }] });
+    startEdit(index, value) {
+        if (!this.editMode())
+            return; // only allow in edit mode
+        this.editIndex.set(index);
+        this.editText = value;
+    }
+    cancelEdit() {
+        this.editIndex.set(null);
+        this.editText = '';
+    }
+    saveEdit(index) {
+        const text = this.editText.trim();
+        if (!text)
+            return;
+        const before = this.highlights();
+        const copy = before.slice();
+        copy[index] = text;
+        this.highlights.set(copy);
+        this.editIndex.set(null);
+        this.editText = '';
+        this.propertyHighlightsService.updateHighlightAt(this.id, index, text).subscribe({
+            next: (res) => this.highlights.set(res.data),
+            error: (e) => {
+                this.highlights.set(before);
+                this.err('Update failed', e);
+            },
+        });
+    }
+    remove(index) {
+        const before = this.highlights();
+        const copy = before.slice();
+        copy.splice(index, 1);
+        this.highlights.set(copy);
+        this.propertyHighlightsService.deleteHighlightAt(this.id, index).subscribe({
+            next: (res) => this.highlights.set(res.data),
+            error: (e) => {
+                this.highlights.set(before);
+                this.err('Delete failed', e);
+            },
+        });
+    }
+    dropped(evt) {
+        if (!this.editMode() || evt.previousIndex === evt.currentIndex)
+            return;
+        const before = this.highlights();
+        const copy = before.slice();
+        moveItemInArray(copy, evt.previousIndex, evt.currentIndex);
+        this.highlights.set(copy);
+        this.propertyHighlightsService.reorderHighlights(this.id, evt.previousIndex, evt.currentIndex).subscribe({
+            next: (res) => this.highlights.set(res.data),
+            error: (e) => {
+                this.highlights.set(before);
+                this.err('Reorder failed', e);
+            },
+        });
+    }
+    saveAll() {
+        const list = this.highlights();
+        this.savingAll.set(true);
+        this.propertyHighlightsService.replaceAllHighlights(this.id, list).subscribe({
+            next: (res) => this.highlights.set(res.data),
+            error: (e) => this.err('Save all failed', e),
+            complete: () => this.savingAll.set(false),
+        });
+    }
+    err(msg, _e) {
+        this.snackBarService.open(msg);
+        // optionally log _e
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageHighlights, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyManageHighlights, isStandalone: true, selector: "rolatech-property-manage-highlights", usesInheritance: true, ngImport: i0, template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Highlights\" class=\"hidden md:block\" divider>\n    <button mat-flat-button (click)=\"toggleEdit()\">\n      <mat-icon>@if (editMode()) { done } @else { edit }</mat-icon>\n      <span>@if (editMode()) { Done } @else { Edit }</span>\n    </button>\n  </rolatech-toolbar>\n  @if (loading()) {\n  <mat-progress-spinner mode=\"indeterminate\" diameter=\"20\"></mat-progress-spinner>\n  }\n  <div class=\"flex flex-col gap-2\" cdkDropList [cdkDropListDisabled]=\"!editMode()\" (cdkDropListDropped)=\"dropped($event)\">\n    @for (h of highlights(); track $index) {\n    <div class=\"item\" cdkDrag>\n      @if (editMode()) {\n      <div class=\"flex cursor-grab items-center\" cdkDragHandle aria-label=\"Drag to reorder\">\n        <mat-icon>drag_indicator</mat-icon>\n      </div>\n      } @if (editIndex() === $index) {\n      <mat-form-field appearance=\"fill\" class=\"grow\">\n        <input matInput [(ngModel)]=\"editText\" name=\"edit-{{$index}}\" maxlength=\"200\" />\n        <mat-hint align=\"end\">{{editText.length}} / 200</mat-hint>\n      </mat-form-field>\n      <button mat-icon-button color=\"primary\" (click)=\"saveEdit($index)\" [disabled]=\"!editText.trim()\">\n        <mat-icon>check</mat-icon>\n      </button>\n      <button mat-icon-button (click)=\"cancelEdit()\">\n        <mat-icon>close</mat-icon>\n      </button>\n      } @else {\n      <div class=\"flex-1 select-text\" (dblclick)=\"startEdit($index, h)\">{{ h }}</div>\n      @if (editMode()) {\n      <button mat-icon-button color=\"primary\" (click)=\"startEdit($index, h)\" aria-label=\"Edit\">\n        <mat-icon>edit</mat-icon>\n      </button>\n      <button mat-icon-button color=\"warn\" (click)=\"remove($index)\" aria-label=\"Delete\">\n        <mat-icon>delete</mat-icon>\n      </button>\n      } }\n    </div>\n    }\n  </div>\n  <form class=\"flex items-center gap-2 mt-2\" (ngSubmit)=\"create()\">\n    <mat-form-field appearance=\"fill\" class=\"flex-1\" subscriptSizing=\"dynamic\">\n      <mat-label>New highlight</mat-label>\n      <input matInput [(ngModel)]=\"draft\" name=\"draft\" maxlength=\"200\" />\n      <mat-hint align=\"end\">{{draft.length}} / 200</mat-hint>\n    </mat-form-field>\n    <button mat-flat-button type=\"submit\" [disabled]=\"!draft.trim()\">Add</button>\n  </form>\n  <div class=\"flex items-center\">\n    <button mat-stroked-button color=\"primary\" (click)=\"saveAll()\" [disabled]=\"savingAll()\">Save All</button>\n    @if (savingAll()) {\n    <span class=\"ml-2\">Saving\u2026</span>\n    }\n  </div>\n</rolatech-property-manage-content>\n", styles: [".header{display:flex;align-items:center;gap:12px}.grow{flex:1 1 auto}.item{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid rgba(0,0,0,.08);border-radius:12px;background:#fff}\n"], dependencies: [{ kind: "component", type: PropertyManageContentComponent, selector: "rolatech-property-manage-content" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i4$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageHighlights, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageHighlights, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-property-manage-highlights', imports: [PropertyManageContentComponent, ToolbarComponent], template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Highlights\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <div>\n    @for (item of highlights; track $index) {\n    <div class=\"font-bold p-1\">{{item}}</div>\n    }\n  </div>\n</rolatech-property-manage-content>\n" }]
+            args: [{ selector: 'rolatech-property-manage-highlights', imports: [
+                        PropertyManageContentComponent,
+                        ToolbarComponent,
+                        MatButtonModule,
+                        MatIcon,
+                        MatFormFieldModule,
+                        CommonModule,
+                        FormsModule,
+                        DragDropModule,
+                        MatListModule,
+                        MatProgressSpinnerModule,
+                        MatInputModule,
+                    ], template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Highlights\" class=\"hidden md:block\" divider>\n    <button mat-flat-button (click)=\"toggleEdit()\">\n      <mat-icon>@if (editMode()) { done } @else { edit }</mat-icon>\n      <span>@if (editMode()) { Done } @else { Edit }</span>\n    </button>\n  </rolatech-toolbar>\n  @if (loading()) {\n  <mat-progress-spinner mode=\"indeterminate\" diameter=\"20\"></mat-progress-spinner>\n  }\n  <div class=\"flex flex-col gap-2\" cdkDropList [cdkDropListDisabled]=\"!editMode()\" (cdkDropListDropped)=\"dropped($event)\">\n    @for (h of highlights(); track $index) {\n    <div class=\"item\" cdkDrag>\n      @if (editMode()) {\n      <div class=\"flex cursor-grab items-center\" cdkDragHandle aria-label=\"Drag to reorder\">\n        <mat-icon>drag_indicator</mat-icon>\n      </div>\n      } @if (editIndex() === $index) {\n      <mat-form-field appearance=\"fill\" class=\"grow\">\n        <input matInput [(ngModel)]=\"editText\" name=\"edit-{{$index}}\" maxlength=\"200\" />\n        <mat-hint align=\"end\">{{editText.length}} / 200</mat-hint>\n      </mat-form-field>\n      <button mat-icon-button color=\"primary\" (click)=\"saveEdit($index)\" [disabled]=\"!editText.trim()\">\n        <mat-icon>check</mat-icon>\n      </button>\n      <button mat-icon-button (click)=\"cancelEdit()\">\n        <mat-icon>close</mat-icon>\n      </button>\n      } @else {\n      <div class=\"flex-1 select-text\" (dblclick)=\"startEdit($index, h)\">{{ h }}</div>\n      @if (editMode()) {\n      <button mat-icon-button color=\"primary\" (click)=\"startEdit($index, h)\" aria-label=\"Edit\">\n        <mat-icon>edit</mat-icon>\n      </button>\n      <button mat-icon-button color=\"warn\" (click)=\"remove($index)\" aria-label=\"Delete\">\n        <mat-icon>delete</mat-icon>\n      </button>\n      } }\n    </div>\n    }\n  </div>\n  <form class=\"flex items-center gap-2 mt-2\" (ngSubmit)=\"create()\">\n    <mat-form-field appearance=\"fill\" class=\"flex-1\" subscriptSizing=\"dynamic\">\n      <mat-label>New highlight</mat-label>\n      <input matInput [(ngModel)]=\"draft\" name=\"draft\" maxlength=\"200\" />\n      <mat-hint align=\"end\">{{draft.length}} / 200</mat-hint>\n    </mat-form-field>\n    <button mat-flat-button type=\"submit\" [disabled]=\"!draft.trim()\">Add</button>\n  </form>\n  <div class=\"flex items-center\">\n    <button mat-stroked-button color=\"primary\" (click)=\"saveAll()\" [disabled]=\"savingAll()\">Save All</button>\n    @if (savingAll()) {\n    <span class=\"ml-2\">Saving\u2026</span>\n    }\n  </div>\n</rolatech-property-manage-content>\n", styles: [".header{display:flex;align-items:center;gap:12px}.grow{flex:1 1 auto}.item{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid rgba(0,0,0,.08);border-radius:12px;background:#fff}\n"] }]
         }] });
 
 class PropertyManageEpc extends BaseComponent {
@@ -4057,37 +4406,37 @@ class PropertyManageEpc extends BaseComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageEpc, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: PropertyManageEpc, isStandalone: true, selector: "rolatech-property-manage-epc", usesInheritance: true, ngImport: i0, template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"EPC\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <div class=\"w-full md:max-w-[70%]\">\n    <div class=\"p-2\">\n      <mat-form-field appearance=\"fill\">\n        <mat-label>Current Score</mat-label>\n        <input matInput [(ngModel)]=\"currentScore\" placeholder=\"Current Score\" />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <mat-label>Potential Score</mat-label>\n        <input matInput [(ngModel)]=\"potentialScore\" placeholder=\"Potential Score\" />\n      </mat-form-field>\n      <button mat-flat-button (click)=\"add()\">Save</button>\n    </div>\n    <div>\n      <div class=\"font-bold text-lg p-2\">Domestic EPC</div>\n      <rolatech-epc-chart\n        [currentScore]=\"currentScore\"\n        [potentialScore]=\"potentialScore\"\n        [showCaptions]=\"true\"\n      ></rolatech-epc-chart>\n    </div>\n  </div>\n</rolatech-property-manage-content>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: PropertyManageContentComponent, selector: "rolatech-property-manage-content" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: EpcChart, selector: "rolatech-epc-chart", inputs: ["currentScore", "potentialScore", "showCaptions"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageEpc, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: PropertyManageEpc, isStandalone: true, selector: "rolatech-property-manage-epc", usesInheritance: true, ngImport: i0, template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"EPC\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <div class=\"w-full md:max-w-[70%]\">\n    <div class=\"p-2\">\n      <mat-form-field appearance=\"fill\">\n        <mat-label>Current Score</mat-label>\n        <input matInput [(ngModel)]=\"currentScore\" placeholder=\"Current Score\" />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <mat-label>Potential Score</mat-label>\n        <input matInput [(ngModel)]=\"potentialScore\" placeholder=\"Potential Score\" />\n      </mat-form-field>\n      <button mat-flat-button (click)=\"add()\">Save</button>\n    </div>\n    <div>\n      <div class=\"font-bold text-lg p-2\">Domestic EPC</div>\n      <rolatech-epc-chart\n        [currentScore]=\"currentScore\"\n        [potentialScore]=\"potentialScore\"\n        [showCaptions]=\"true\"\n      ></rolatech-epc-chart>\n    </div>\n  </div>\n</rolatech-property-manage-content>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: PropertyManageContentComponent, selector: "rolatech-property-manage-content" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: EpcChart, selector: "rolatech-epc-chart", inputs: ["currentScore", "potentialScore", "showCaptions"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageEpc, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageEpc, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-manage-epc', imports: [PropertyManageContentComponent, ToolbarComponent, EpcChart, MatFormFieldModule, FormsModule, MatInputModule, MatButtonModule], template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"EPC\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <div class=\"w-full md:max-w-[70%]\">\n    <div class=\"p-2\">\n      <mat-form-field appearance=\"fill\">\n        <mat-label>Current Score</mat-label>\n        <input matInput [(ngModel)]=\"currentScore\" placeholder=\"Current Score\" />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <mat-label>Potential Score</mat-label>\n        <input matInput [(ngModel)]=\"potentialScore\" placeholder=\"Potential Score\" />\n      </mat-form-field>\n      <button mat-flat-button (click)=\"add()\">Save</button>\n    </div>\n    <div>\n      <div class=\"font-bold text-lg p-2\">Domestic EPC</div>\n      <rolatech-epc-chart\n        [currentScore]=\"currentScore\"\n        [potentialScore]=\"potentialScore\"\n        [showCaptions]=\"true\"\n      ></rolatech-epc-chart>\n    </div>\n  </div>\n</rolatech-property-manage-content>\n", styles: ["mat-form-field{width:100%}\n"] }]
         }] });
 
 class PropertyManageTranslation {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageTranslation, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: PropertyManageTranslation, isStandalone: true, selector: "rolatech-property-manage-translation", ngImport: i0, template: "<p>property-manage-translation works!</p>\n", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageTranslation, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: PropertyManageTranslation, isStandalone: true, selector: "rolatech-property-manage-translation", ngImport: i0, template: "<p>property-manage-translation works!</p>\n", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageTranslation, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageTranslation, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-manage-translation', imports: [], template: "<p>property-manage-translation works!</p>\n" }]
         }] });
 
 class PropertyManageKeywords {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageKeywords, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: PropertyManageKeywords, isStandalone: true, selector: "rolatech-property-manage-keywords", ngImport: i0, template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Keywords\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <div></div>\n</rolatech-property-manage-content>\n", styles: [""], dependencies: [{ kind: "component", type: PropertyManageContentComponent, selector: "rolatech-property-manage-content" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageKeywords, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: PropertyManageKeywords, isStandalone: true, selector: "rolatech-property-manage-keywords", ngImport: i0, template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Keywords\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <div></div>\n</rolatech-property-manage-content>\n", styles: [""], dependencies: [{ kind: "component", type: PropertyManageContentComponent, selector: "rolatech-property-manage-content" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageKeywords, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageKeywords, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-manage-keywords', imports: [PropertyManageContentComponent, ToolbarComponent], template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Keywords\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <div></div>\n</rolatech-property-manage-content>\n" }]
         }] });
 
 class PropertyManageFloorplan {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageFloorplan, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: PropertyManageFloorplan, isStandalone: true, selector: "rolatech-property-manage-floorplan", ngImport: i0, template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Floorplan\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <div></div>\n</rolatech-property-manage-content>\n", styles: [""], dependencies: [{ kind: "component", type: PropertyManageContentComponent, selector: "rolatech-property-manage-content" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageFloorplan, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: PropertyManageFloorplan, isStandalone: true, selector: "rolatech-property-manage-floorplan", ngImport: i0, template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Floorplan\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <div></div>\n</rolatech-property-manage-content>\n", styles: [""], dependencies: [{ kind: "component", type: PropertyManageContentComponent, selector: "rolatech-property-manage-content" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageFloorplan, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageFloorplan, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-manage-floorplan', imports: [PropertyManageContentComponent, ToolbarComponent], template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Floorplan\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <div></div>\n</rolatech-property-manage-content>\n" }]
         }] });
@@ -4176,10 +4525,10 @@ class PropertyViewingConfirmationComponent {
     ngDoCheck() {
         this.output.emit(true);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyViewingConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyViewingConfirmationComponent, isStandalone: true, selector: "rolatech-property-viewing-confirmation", inputs: { proposedTime: { classPropertyName: "proposedTime", publicName: "proposedTime", isSignal: true, isRequired: false, transformFunction: null }, selectedTime: { classPropertyName: "selectedTime", publicName: "selectedTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { output: "output", proposedTime: "proposedTimeChange", selectedTime: "selectedTimeChange" }, ngImport: i0, template: "<div>\n  @if (proposedTime()) {\n    <div>\n      <span> {{ proposedTime().date }} </span><span>{{ proposedTime().time }}</span>\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyViewingConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyViewingConfirmationComponent, isStandalone: true, selector: "rolatech-property-viewing-confirmation", inputs: { proposedTime: { classPropertyName: "proposedTime", publicName: "proposedTime", isSignal: true, isRequired: false, transformFunction: null }, selectedTime: { classPropertyName: "selectedTime", publicName: "selectedTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { output: "output", proposedTime: "proposedTimeChange", selectedTime: "selectedTimeChange" }, ngImport: i0, template: "<div>\n  @if (proposedTime()) {\n    <div>\n      <span> {{ proposedTime().date }} </span><span>{{ proposedTime().time }}</span>\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyViewingConfirmationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyViewingConfirmationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-viewing-confirmation', imports: [CommonModule], template: "<div>\n  @if (proposedTime()) {\n    <div>\n      <span> {{ proposedTime().date }} </span><span>{{ proposedTime().time }}</span>\n    </div>\n  }\n</div>\n" }]
         }] });
@@ -4252,18 +4601,18 @@ class PropertyManageViewingsDetailComponent extends BaseComponent {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageViewingsDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PropertyManageViewingsDetailComponent, isStandalone: true, selector: "rolatech-property-manage-viewings-detail", usesInheritance: true, ngImport: i0, template: "@if (viewing) {\n  <rolatech-toolbar [title]=\"status[viewing.status]\" large link=\"../\"></rolatech-toolbar>\n  <div class=\"px-4\">\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Viewer</div>\n      <hr class=\"mb-2\" />\n      <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n        <rolatech-rich-label label=\"Name\" [title]=\"name\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Email\" [title]=\"viewing.email\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Phone\" [title]=\"viewing.phone\"></rolatech-rich-label>\n      </div>\n    </div>\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Proposed times</div>\n      <hr class=\"mb-2\" />\n      @for (item of viewing.proposedSlots; track $index) {\n        <div class=\"flex flex-row items-center gap-3 py-3\">\n          <rolatech-rich-label label=\"Date\" [title]=\"item.date\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Time\" [title]=\"item.time\"></rolatech-rich-label>\n          @if (viewing.viewingDate && viewing.viewingTime) {\n            @if (item.date === viewing.viewingDate && item.time === viewing.viewingTime) {\n              <div class=\"ml-3\"><button mat-flat-button i18n disabled=\"\">Confirmed</button></div>\n            }\n          }\n          @if (!viewingTimeConfirmed) {\n            <div class=\"ml-3\"><button mat-flat-button (click)=\"confirmViewingTime(item)\" i18n>Confirm</button></div>\n          }\n        </div>\n      }\n    </div>\n    <!-- Introducing agent -->\n    @if (viewing.viewerCategory.toString() === 'AGENT') {\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Qualification</div>\n        <hr class=\"mb-2\" />\n        <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n          <!-- <rolatech-rich-label label=\"Move-in date\" [title]=\"viewing.startDate\"></rolatech-rich-label> -->\n          <rolatech-rich-label label=\"Tenancy duration\" [title]=\"viewing.tenancyDuration\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Number of tenants\" [title]=\"viewing.numberOfTenants\"></rolatech-rich-label>\n        </div>\n        <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n          <rolatech-rich-label\n            label=\"Employment status\"\n            [title]=\"employmentStatus[viewing.employmentStatus]\"\n          ></rolatech-rich-label>\n          <!-- <rolatech-rich-label label=\"Employer\" [title]=\"viewing.startDate\"></rolatech-rich-label> -->\n          <rolatech-rich-label label=\"Annual income\" [title]=\"viewing.income\"></rolatech-rich-label>\n        </div>\n      </div>\n    }\n\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Property details</div>\n      <hr class=\"mb-2\" />\n      @if (property) {\n        <div class=\"flex items-center py-2\">\n          <div class=\"min-w-16 w-24 object-cover aspect-video rounded-md mr-3\">\n            @defer {\n              <rolatech-thumbnail [src]=\"property.media[0].url\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n          <div class=\"flex w-full justify-between\">\n            <div class=\"flex justify-between w-full\">\n              <div class=\"flex flex-col\">\n                <div>{{ property.title }}</div>\n                <div class=\"inline-flex gap-1 mt-2\">\n                  <div>\n                    <span class=\"mr-1\">{{ property.bedrooms }}</span>\n                    <span i18n>Bedrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ property.bathrooms }}</span>\n                    <span i18n>Bathrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ property.receptions }}</span>\n                    <span i18n>Receptions</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"text-right\">\n                <div class=\"text-sm\">\u00A3{{ property.price | fixed }}</div>\n              </div>\n            </div>\n          </div>\n          <div class=\"hidden md:flex flex-col px-3\"></div>\n        </div>\n      }\n    </div>\n\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Viewing agent</div>\n      <hr class=\"mb-2\" />\n      @if (agent) {\n        <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n          <rolatech-rich-label label=\"Name\" [title]=\"agent.name\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Email\" [title]=\"agent.email\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Phone\" [title]=\"agent.phone\"></rolatech-rich-label>\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: RichLabelComponent, selector: "rolatech-rich-label", inputs: ["label", "title"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: FixedPipe, name: "fixed" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageViewingsDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyManageViewingsDetailComponent, isStandalone: true, selector: "rolatech-property-manage-viewings-detail", usesInheritance: true, ngImport: i0, template: "@if (viewing) {\n  <rolatech-toolbar [title]=\"status[viewing.status]\" large link=\"../\"></rolatech-toolbar>\n  <div class=\"px-4\">\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Viewer</div>\n      <hr class=\"mb-2\" />\n      <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n        <rolatech-rich-label label=\"Name\" [title]=\"name\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Email\" [title]=\"viewing.email\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Phone\" [title]=\"viewing.phone\"></rolatech-rich-label>\n      </div>\n    </div>\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Proposed times</div>\n      <hr class=\"mb-2\" />\n      @for (item of viewing.proposedSlots; track $index) {\n        <div class=\"flex flex-row items-center gap-3 py-3\">\n          <rolatech-rich-label label=\"Date\" [title]=\"item.date\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Time\" [title]=\"item.time\"></rolatech-rich-label>\n          @if (viewing.viewingDate && viewing.viewingTime) {\n            @if (item.date === viewing.viewingDate && item.time === viewing.viewingTime) {\n              <div class=\"ml-3\"><button mat-flat-button i18n disabled=\"\">Confirmed</button></div>\n            }\n          }\n          @if (!viewingTimeConfirmed) {\n            <div class=\"ml-3\"><button mat-flat-button (click)=\"confirmViewingTime(item)\" i18n>Confirm</button></div>\n          }\n        </div>\n      }\n    </div>\n    <!-- Introducing agent -->\n    @if (viewing.viewerCategory.toString() === 'AGENT') {\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Qualification</div>\n        <hr class=\"mb-2\" />\n        <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n          <!-- <rolatech-rich-label label=\"Move-in date\" [title]=\"viewing.startDate\"></rolatech-rich-label> -->\n          <rolatech-rich-label label=\"Tenancy duration\" [title]=\"viewing.tenancyDuration\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Number of tenants\" [title]=\"viewing.numberOfTenants\"></rolatech-rich-label>\n        </div>\n        <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n          <rolatech-rich-label\n            label=\"Employment status\"\n            [title]=\"employmentStatus[viewing.employmentStatus]\"\n          ></rolatech-rich-label>\n          <!-- <rolatech-rich-label label=\"Employer\" [title]=\"viewing.startDate\"></rolatech-rich-label> -->\n          <rolatech-rich-label label=\"Annual income\" [title]=\"viewing.income\"></rolatech-rich-label>\n        </div>\n      </div>\n    }\n\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Property details</div>\n      <hr class=\"mb-2\" />\n      @if (property) {\n        <div class=\"flex items-center py-2\">\n          <div class=\"min-w-24 w-24 object-cover aspect-video rounded-md mr-3\">\n            @defer {\n              <rolatech-thumbnail [src]=\"property.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n          <div class=\"flex w-full justify-between\">\n            <div class=\"flex justify-between w-full\">\n              <div class=\"flex flex-col\">\n                <div>{{ property.title }}</div>\n                <div class=\"inline-flex gap-1 mt-2\">\n                  <div>\n                    <span class=\"mr-1\">{{ property.bedrooms }}</span>\n                    <span i18n>Bedrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ property.bathrooms }}</span>\n                    <span i18n>Bathrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ property.receptions }}</span>\n                    <span i18n>Receptions</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"text-right\">\n                <div class=\"text-sm\">\u00A3{{ property.price.toFixed(2) }}</div>\n              </div>\n            </div>\n          </div>\n          <div class=\"hidden md:flex flex-col px-3\"></div>\n        </div>\n      }\n    </div>\n\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Viewing agent</div>\n      <hr class=\"mb-2\" />\n      @if (agent) {\n        <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n          <rolatech-rich-label label=\"Name\" [title]=\"agent.name\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Email\" [title]=\"agent.email\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Phone\" [title]=\"agent.phone\"></rolatech-rich-label>\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: RichLabelComponent, selector: "rolatech-rich-label", inputs: ["label", "title"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], deferBlockDependencies: [() => [ThumbnailComponent]] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PropertyManageViewingsDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageViewingsDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-property-manage-viewings-detail', imports: [CommonModule, ToolbarComponent, RichLabelComponent, ThumbnailComponent, FixedPipe, MatButtonModule], template: "@if (viewing) {\n  <rolatech-toolbar [title]=\"status[viewing.status]\" large link=\"../\"></rolatech-toolbar>\n  <div class=\"px-4\">\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Viewer</div>\n      <hr class=\"mb-2\" />\n      <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n        <rolatech-rich-label label=\"Name\" [title]=\"name\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Email\" [title]=\"viewing.email\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Phone\" [title]=\"viewing.phone\"></rolatech-rich-label>\n      </div>\n    </div>\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Proposed times</div>\n      <hr class=\"mb-2\" />\n      @for (item of viewing.proposedSlots; track $index) {\n        <div class=\"flex flex-row items-center gap-3 py-3\">\n          <rolatech-rich-label label=\"Date\" [title]=\"item.date\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Time\" [title]=\"item.time\"></rolatech-rich-label>\n          @if (viewing.viewingDate && viewing.viewingTime) {\n            @if (item.date === viewing.viewingDate && item.time === viewing.viewingTime) {\n              <div class=\"ml-3\"><button mat-flat-button i18n disabled=\"\">Confirmed</button></div>\n            }\n          }\n          @if (!viewingTimeConfirmed) {\n            <div class=\"ml-3\"><button mat-flat-button (click)=\"confirmViewingTime(item)\" i18n>Confirm</button></div>\n          }\n        </div>\n      }\n    </div>\n    <!-- Introducing agent -->\n    @if (viewing.viewerCategory.toString() === 'AGENT') {\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Qualification</div>\n        <hr class=\"mb-2\" />\n        <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n          <!-- <rolatech-rich-label label=\"Move-in date\" [title]=\"viewing.startDate\"></rolatech-rich-label> -->\n          <rolatech-rich-label label=\"Tenancy duration\" [title]=\"viewing.tenancyDuration\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Number of tenants\" [title]=\"viewing.numberOfTenants\"></rolatech-rich-label>\n        </div>\n        <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n          <rolatech-rich-label\n            label=\"Employment status\"\n            [title]=\"employmentStatus[viewing.employmentStatus]\"\n          ></rolatech-rich-label>\n          <!-- <rolatech-rich-label label=\"Employer\" [title]=\"viewing.startDate\"></rolatech-rich-label> -->\n          <rolatech-rich-label label=\"Annual income\" [title]=\"viewing.income\"></rolatech-rich-label>\n        </div>\n      </div>\n    }\n\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Property details</div>\n      <hr class=\"mb-2\" />\n      @if (property) {\n        <div class=\"flex items-center py-2\">\n          <div class=\"min-w-16 w-24 object-cover aspect-video rounded-md mr-3\">\n            @defer {\n              <rolatech-thumbnail [src]=\"property.media[0].url\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n          <div class=\"flex w-full justify-between\">\n            <div class=\"flex justify-between w-full\">\n              <div class=\"flex flex-col\">\n                <div>{{ property.title }}</div>\n                <div class=\"inline-flex gap-1 mt-2\">\n                  <div>\n                    <span class=\"mr-1\">{{ property.bedrooms }}</span>\n                    <span i18n>Bedrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ property.bathrooms }}</span>\n                    <span i18n>Bathrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ property.receptions }}</span>\n                    <span i18n>Receptions</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"text-right\">\n                <div class=\"text-sm\">\u00A3{{ property.price | fixed }}</div>\n              </div>\n            </div>\n          </div>\n          <div class=\"hidden md:flex flex-col px-3\"></div>\n        </div>\n      }\n    </div>\n\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Viewing agent</div>\n      <hr class=\"mb-2\" />\n      @if (agent) {\n        <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n          <rolatech-rich-label label=\"Name\" [title]=\"agent.name\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Email\" [title]=\"agent.email\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Phone\" [title]=\"agent.phone\"></rolatech-rich-label>\n        </div>\n      }\n    </div>\n  </div>\n}\n" }]
+            args: [{ selector: 'rolatech-property-manage-viewings-detail', imports: [CommonModule, ToolbarComponent, RichLabelComponent, ThumbnailComponent, MatButtonModule], template: "@if (viewing) {\n  <rolatech-toolbar [title]=\"status[viewing.status]\" large link=\"../\"></rolatech-toolbar>\n  <div class=\"px-4\">\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Viewer</div>\n      <hr class=\"mb-2\" />\n      <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n        <rolatech-rich-label label=\"Name\" [title]=\"name\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Email\" [title]=\"viewing.email\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Phone\" [title]=\"viewing.phone\"></rolatech-rich-label>\n      </div>\n    </div>\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Proposed times</div>\n      <hr class=\"mb-2\" />\n      @for (item of viewing.proposedSlots; track $index) {\n        <div class=\"flex flex-row items-center gap-3 py-3\">\n          <rolatech-rich-label label=\"Date\" [title]=\"item.date\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Time\" [title]=\"item.time\"></rolatech-rich-label>\n          @if (viewing.viewingDate && viewing.viewingTime) {\n            @if (item.date === viewing.viewingDate && item.time === viewing.viewingTime) {\n              <div class=\"ml-3\"><button mat-flat-button i18n disabled=\"\">Confirmed</button></div>\n            }\n          }\n          @if (!viewingTimeConfirmed) {\n            <div class=\"ml-3\"><button mat-flat-button (click)=\"confirmViewingTime(item)\" i18n>Confirm</button></div>\n          }\n        </div>\n      }\n    </div>\n    <!-- Introducing agent -->\n    @if (viewing.viewerCategory.toString() === 'AGENT') {\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Qualification</div>\n        <hr class=\"mb-2\" />\n        <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n          <!-- <rolatech-rich-label label=\"Move-in date\" [title]=\"viewing.startDate\"></rolatech-rich-label> -->\n          <rolatech-rich-label label=\"Tenancy duration\" [title]=\"viewing.tenancyDuration\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Number of tenants\" [title]=\"viewing.numberOfTenants\"></rolatech-rich-label>\n        </div>\n        <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n          <rolatech-rich-label\n            label=\"Employment status\"\n            [title]=\"employmentStatus[viewing.employmentStatus]\"\n          ></rolatech-rich-label>\n          <!-- <rolatech-rich-label label=\"Employer\" [title]=\"viewing.startDate\"></rolatech-rich-label> -->\n          <rolatech-rich-label label=\"Annual income\" [title]=\"viewing.income\"></rolatech-rich-label>\n        </div>\n      </div>\n    }\n\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Property details</div>\n      <hr class=\"mb-2\" />\n      @if (property) {\n        <div class=\"flex items-center py-2\">\n          <div class=\"min-w-24 w-24 object-cover aspect-video rounded-md mr-3\">\n            @defer {\n              <rolatech-thumbnail [src]=\"property.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n          <div class=\"flex w-full justify-between\">\n            <div class=\"flex justify-between w-full\">\n              <div class=\"flex flex-col\">\n                <div>{{ property.title }}</div>\n                <div class=\"inline-flex gap-1 mt-2\">\n                  <div>\n                    <span class=\"mr-1\">{{ property.bedrooms }}</span>\n                    <span i18n>Bedrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ property.bathrooms }}</span>\n                    <span i18n>Bathrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ property.receptions }}</span>\n                    <span i18n>Receptions</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"text-right\">\n                <div class=\"text-sm\">\u00A3{{ property.price.toFixed(2) }}</div>\n              </div>\n            </div>\n          </div>\n          <div class=\"hidden md:flex flex-col px-3\"></div>\n        </div>\n      }\n    </div>\n\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Viewing agent</div>\n      <hr class=\"mb-2\" />\n      @if (agent) {\n        <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n          <rolatech-rich-label label=\"Name\" [title]=\"agent.name\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Email\" [title]=\"agent.email\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Phone\" [title]=\"agent.phone\"></rolatech-rich-label>\n        </div>\n      }\n    </div>\n  </div>\n}\n" }]
         }] });
 
 const propertyManageViewingsRoutes = [
     {
         path: '',
-        loadComponent: () => import('./rolatech-angular-property-property-manage-viewings-index.component-BzLcZmqM.mjs').then((x) => x.PropertyManageViewingsIndexComponent),
+        loadComponent: () => import('./rolatech-angular-property-property-manage-viewings-index.component-Cw2Ue3FV.mjs').then((x) => x.PropertyManageViewingsIndexComponent),
     },
     {
         path: ':id',
@@ -4288,12 +4637,12 @@ class LettingManageItem {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LettingManageItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: LettingManageItem, isStandalone: true, selector: "rolatech-letting-manage-item", inputs: { letting: { classPropertyName: "letting", publicName: "letting", isSignal: true, isRequired: true, transformFunction: null }, thumbnail: { classPropertyName: "thumbnail", publicName: "thumbnail", isSignal: true, isRequired: false, transformFunction: null }, list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rolatech-letting-manage-item": "this.hasClass" } }, ngImport: i0, template: "<div\n  class=\"flex p-3 bg-[--rt-raised-background] hover:bg-[--rt-raised-background] cursor-pointer rounded-md\"\n  [ngClass]=\"list() ? 'w-full flex-row' : 'flex-col h-full'\"\n>\n  <div>\n    @if (letting().media) {\n    <div class=\"object-cover aspect-video rounded-lg\" [ngClass]=\"list() ? 'w-32 mr-3' : ''\">\n      @defer {\n      <rolatech-thumbnail [src]=\"letting().media ? letting().media[0].url : ''\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n      } @placeholder {\n      <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n      }\n    </div>\n    } @else {\n    <div class=\"object-cover aspect-video rounded-lg\" [ngClass]=\"list() ? 'w-32 mr-3' : ''\">\n      <rolatech-image-placeholder></rolatech-image-placeholder>\n    </div>\n    }\n  </div>\n\n  <div class=\"py-2\">\n    <div class=\"text-lg font-bold\">{{ letting().title }}</div>\n  </div>\n  <div class=\"flex-1\"></div>\n  <div class=\"\">\u00A3{{ letting().price | fixed }}</div>\n</div>\n", styles: ["rolatech-letting-manage-item{--rt-letting-view-item-margin: 16px;width:calc(100% / var(--rt-letting-view-items-per-row) - var(--rt-letting-view-item-margin) - .01px)}rolatech-letting-manage-item[list]{--rt-letting-view-items-per-row: 1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ImagePlaceholderComponent, selector: "rolatech-image-placeholder", inputs: ["ratio"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "pipe", type: FixedPipe, name: "fixed" }], encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [ThumbnailComponent]] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: LettingManageItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: LettingManageItem, isStandalone: true, selector: "rolatech-letting-manage-item", inputs: { letting: { classPropertyName: "letting", publicName: "letting", isSignal: true, isRequired: true, transformFunction: null }, thumbnail: { classPropertyName: "thumbnail", publicName: "thumbnail", isSignal: true, isRequired: false, transformFunction: null }, list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rolatech-letting-manage-item": "this.hasClass" } }, ngImport: i0, template: "<div\n  class=\"flex p-3 bg-[--rt-raised-background] hover:bg-[--rt-raised-background] cursor-pointer rounded-md\"\n  [ngClass]=\"list() ? 'w-full flex-row' : 'flex-col h-full'\"\n>\n  <div>\n    @if (letting().media) {\n    <div class=\"object-cover aspect-video rounded-lg\" [ngClass]=\"list() ? 'w-32 mr-3' : ''\">\n      @defer {\n      <rolatech-thumbnail [src]=\"letting().media ? letting().media[0].url : ''\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n      } @placeholder {\n      <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n      }\n    </div>\n    } @else {\n    <div class=\"object-cover aspect-video rounded-lg\" [ngClass]=\"list() ? 'w-32 mr-3' : ''\">\n      <rolatech-image-placeholder></rolatech-image-placeholder>\n    </div>\n    }\n  </div>\n\n  <div class=\"py-2\">\n    <div class=\"text-lg font-bold\">{{ letting().title }}</div>\n  </div>\n  <div class=\"flex-1\"></div>\n  <div class=\"\">\u00A3{{ letting().price.toFixed(2) }}</div>\n</div>\n", styles: ["rolatech-letting-manage-item{--rt-letting-view-item-margin: 16px;width:calc(100% / var(--rt-letting-view-items-per-row) - var(--rt-letting-view-item-margin) - .01px)}rolatech-letting-manage-item[list]{--rt-letting-view-items-per-row: 1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ImagePlaceholderComponent, selector: "rolatech-image-placeholder", inputs: ["ratio"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatMenuModule }], encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [ThumbnailComponent]] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LettingManageItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: LettingManageItem, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-letting-manage-item', imports: [CommonModule, ThumbnailComponent, ImagePlaceholderComponent, MatButtonModule, MatMenuModule, FixedPipe], encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"flex p-3 bg-[--rt-raised-background] hover:bg-[--rt-raised-background] cursor-pointer rounded-md\"\n  [ngClass]=\"list() ? 'w-full flex-row' : 'flex-col h-full'\"\n>\n  <div>\n    @if (letting().media) {\n    <div class=\"object-cover aspect-video rounded-lg\" [ngClass]=\"list() ? 'w-32 mr-3' : ''\">\n      @defer {\n      <rolatech-thumbnail [src]=\"letting().media ? letting().media[0].url : ''\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n      } @placeholder {\n      <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n      }\n    </div>\n    } @else {\n    <div class=\"object-cover aspect-video rounded-lg\" [ngClass]=\"list() ? 'w-32 mr-3' : ''\">\n      <rolatech-image-placeholder></rolatech-image-placeholder>\n    </div>\n    }\n  </div>\n\n  <div class=\"py-2\">\n    <div class=\"text-lg font-bold\">{{ letting().title }}</div>\n  </div>\n  <div class=\"flex-1\"></div>\n  <div class=\"\">\u00A3{{ letting().price | fixed }}</div>\n</div>\n", styles: ["rolatech-letting-manage-item{--rt-letting-view-item-margin: 16px;width:calc(100% / var(--rt-letting-view-items-per-row) - var(--rt-letting-view-item-margin) - .01px)}rolatech-letting-manage-item[list]{--rt-letting-view-items-per-row: 1}\n"] }]
+            args: [{ selector: 'rolatech-letting-manage-item', imports: [CommonModule, ThumbnailComponent, ImagePlaceholderComponent, MatButtonModule, MatMenuModule], encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"flex p-3 bg-[--rt-raised-background] hover:bg-[--rt-raised-background] cursor-pointer rounded-md\"\n  [ngClass]=\"list() ? 'w-full flex-row' : 'flex-col h-full'\"\n>\n  <div>\n    @if (letting().media) {\n    <div class=\"object-cover aspect-video rounded-lg\" [ngClass]=\"list() ? 'w-32 mr-3' : ''\">\n      @defer {\n      <rolatech-thumbnail [src]=\"letting().media ? letting().media[0].url : ''\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n      } @placeholder {\n      <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n      }\n    </div>\n    } @else {\n    <div class=\"object-cover aspect-video rounded-lg\" [ngClass]=\"list() ? 'w-32 mr-3' : ''\">\n      <rolatech-image-placeholder></rolatech-image-placeholder>\n    </div>\n    }\n  </div>\n\n  <div class=\"py-2\">\n    <div class=\"text-lg font-bold\">{{ letting().title }}</div>\n  </div>\n  <div class=\"flex-1\"></div>\n  <div class=\"\">\u00A3{{ letting().price.toFixed(2) }}</div>\n</div>\n", styles: ["rolatech-letting-manage-item{--rt-letting-view-item-margin: 16px;width:calc(100% / var(--rt-letting-view-items-per-row) - var(--rt-letting-view-item-margin) - .01px)}rolatech-letting-manage-item[list]{--rt-letting-view-items-per-row: 1}\n"] }]
         }], ctorParameters: () => [], propDecorators: { hasClass: [{
                 type: HostBinding,
                 args: ['class.rolatech-letting-manage-item']
@@ -4318,10 +4667,10 @@ class LettingManageIndex {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LettingManageIndex, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: LettingManageIndex, isStandalone: true, selector: "rolatech-letting-manage-index", ngImport: i0, template: "<rolatech-toolbar title=\"Lettings\"> </rolatech-toolbar>\n@if (loading) {\n<div class=\"flex justify-center items-center\">\n  <rolatech-spinner></rolatech-spinner>\n</div>\n} @else {\n<div class=\"bg-[--rt-rasised-background] h-full\">\n  <div class=\"flex flex-wrap p-3 gap-3\">\n    @for (item of lettings; track $index) {\n    <rolatech-letting-manage-item [letting]=\"item\" routerLink=\"./{{ item.id }}\"></rolatech-letting-manage-item>\n    }\n  </div>\n</div>\n\n<!-- <mat-paginator\n    #paginator\n    [length]=\"length\"\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"pageEvent = find($event)\"\n    hidePageSize\n    showFirstLastButtons\n  >\n  </mat-paginator> -->\n}\n", styles: ["rolatech-letting-manage-index{--rt-letting-view-items-per-row: 1}@media (min-width: 600px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 2}}@media (min-width: 768px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 3}}@media (min-width: 1280px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 3}}@media (min-width: 1536px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 4}}@media (min-width: 1920px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 5}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: SpinnerComponent, selector: "rolatech-spinner", inputs: ["title"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: LettingManageItem, selector: "rolatech-letting-manage-item", inputs: ["letting", "thumbnail", "list"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: LettingManageIndex, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: LettingManageIndex, isStandalone: true, selector: "rolatech-letting-manage-index", ngImport: i0, template: "<rolatech-toolbar title=\"Lettings\"> </rolatech-toolbar>\n@if (loading) {\n<div class=\"flex justify-center items-center\">\n  <rolatech-spinner></rolatech-spinner>\n</div>\n} @else {\n<div class=\"bg-[--rt-rasised-background] h-full\">\n  <div class=\"flex flex-wrap p-3 gap-3\">\n    @for (item of lettings; track $index) {\n    <rolatech-letting-manage-item [letting]=\"item\" routerLink=\"./{{ item.id }}\"></rolatech-letting-manage-item>\n    }\n  </div>\n</div>\n\n<!-- <mat-paginator\n    #paginator\n    [length]=\"length\"\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"pageEvent = find($event)\"\n    hidePageSize\n    showFirstLastButtons\n  >\n  </mat-paginator> -->\n}\n", styles: ["rolatech-letting-manage-index{--rt-letting-view-items-per-row: 1}@media (min-width: 600px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 2}}@media (min-width: 768px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 3}}@media (min-width: 1280px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 3}}@media (min-width: 1536px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 4}}@media (min-width: 1920px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 5}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: SpinnerComponent, selector: "rolatech-spinner", inputs: ["title"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: LettingManageItem, selector: "rolatech-letting-manage-item", inputs: ["letting", "thumbnail", "list"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LettingManageIndex, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: LettingManageIndex, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-letting-manage-index', imports: [CommonModule, ToolbarComponent, SpinnerComponent, MatButtonModule, RouterLink, LettingManageItem], encapsulation: ViewEncapsulation.None, template: "<rolatech-toolbar title=\"Lettings\"> </rolatech-toolbar>\n@if (loading) {\n<div class=\"flex justify-center items-center\">\n  <rolatech-spinner></rolatech-spinner>\n</div>\n} @else {\n<div class=\"bg-[--rt-rasised-background] h-full\">\n  <div class=\"flex flex-wrap p-3 gap-3\">\n    @for (item of lettings; track $index) {\n    <rolatech-letting-manage-item [letting]=\"item\" routerLink=\"./{{ item.id }}\"></rolatech-letting-manage-item>\n    }\n  </div>\n</div>\n\n<!-- <mat-paginator\n    #paginator\n    [length]=\"length\"\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"pageEvent = find($event)\"\n    hidePageSize\n    showFirstLastButtons\n  >\n  </mat-paginator> -->\n}\n", styles: ["rolatech-letting-manage-index{--rt-letting-view-items-per-row: 1}@media (min-width: 600px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 2}}@media (min-width: 768px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 3}}@media (min-width: 1280px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 3}}@media (min-width: 1536px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 4}}@media (min-width: 1920px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 5}}\n"] }]
         }] });
@@ -4332,7 +4681,7 @@ class LettingActions {
     offer = output();
     deposit = output();
     displayDeposit = computed(() => {
-        return (this.letting().deposit / 100).toFixed(2);
+        return this.letting().deposit.toFixed(2);
     }, ...(ngDevMode ? [{ debugName: "displayDeposit" }] : []));
     onRequestViewing(letting) {
         this.requestViewing.emit(letting);
@@ -4343,10 +4692,10 @@ class LettingActions {
     onDeposit(letting) {
         this.deposit.emit(letting);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LettingActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: LettingActions, isStandalone: true, selector: "rolatech-letting-actions", inputs: { letting: { classPropertyName: "letting", publicName: "letting", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { requestViewing: "requestViewing", offer: "offer", deposit: "deposit" }, ngImport: i0, template: "<div class=\"flex flex-col gap-3\">\n  <a mat-stroked-button class=\"\" (click)=\"onRequestViewing(letting())\" i18n>Request viewing</a>\n  @if (letting().priceType && letting().priceType.toString() === 'PARTIAL') {\n  <a mat-flat-button class=\"\" (click)=\"onDeposit(letting())\" i18n>Pay deposit \u00A3{{ displayDeposit() }}</a>\n  } @else {\n  <a mat-flat-button class=\"\" (click)=\"onOffer(letting())\" i18n>Make an offer</a>\n  }\n  <ng-content select=\"rolatech-letting-action-contact\"></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatMenuModule }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: LettingActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: LettingActions, isStandalone: true, selector: "rolatech-letting-actions", inputs: { letting: { classPropertyName: "letting", publicName: "letting", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { requestViewing: "requestViewing", offer: "offer", deposit: "deposit" }, ngImport: i0, template: "<div class=\"flex flex-col gap-3\">\n  <a mat-stroked-button class=\"\" (click)=\"onRequestViewing(letting())\" i18n>Request viewing</a>\n  @if (letting().priceType && letting().priceType.toString() === 'PARTIAL') {\n  <a mat-flat-button class=\"\" (click)=\"onDeposit(letting())\" i18n>Pay deposit \u00A3{{ displayDeposit() }}</a>\n  } @else {\n  <a mat-flat-button class=\"\" (click)=\"onOffer(letting())\" i18n>Make an offer</a>\n  }\n  <ng-content select=\"rolatech-letting-action-contact\"></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatMenuModule }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LettingActions, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: LettingActions, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-letting-actions', imports: [CommonModule, MatButtonModule, MatIconModule, MatMenuModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"flex flex-col gap-3\">\n  <a mat-stroked-button class=\"\" (click)=\"onRequestViewing(letting())\" i18n>Request viewing</a>\n  @if (letting().priceType && letting().priceType.toString() === 'PARTIAL') {\n  <a mat-flat-button class=\"\" (click)=\"onDeposit(letting())\" i18n>Pay deposit \u00A3{{ displayDeposit() }}</a>\n  } @else {\n  <a mat-flat-button class=\"\" (click)=\"onOffer(letting())\" i18n>Make an offer</a>\n  }\n  <ng-content select=\"rolatech-letting-action-contact\"></ng-content>\n</div>\n" }]
         }] });
@@ -4359,10 +4708,10 @@ class LettingActionContact {
     onEmailAgent(property) {
         this.emailAgent.emit(property);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LettingActionContact, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.2", type: LettingActionContact, isStandalone: true, selector: "rolatech-letting-action-contact", inputs: { phone: { classPropertyName: "phone", publicName: "phone", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { callAgent: "callAgent", emailAgent: "emailAgent" }, ngImport: i0, template: "<a mat-stroked-button class=\"w-full\" [href]=\"'https://wa.me/' + phone()\" target=\"_blank\">\n  <span i18n>Chat With Agent</span>\n</a>\n", styles: [".mat-mdc-menu-panel,.custom-menu-panel{max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatMenuModule }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: LettingActionContact, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", type: LettingActionContact, isStandalone: true, selector: "rolatech-letting-action-contact", inputs: { phone: { classPropertyName: "phone", publicName: "phone", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { callAgent: "callAgent", emailAgent: "emailAgent" }, ngImport: i0, template: "<a mat-stroked-button class=\"w-full\" [href]=\"'https://wa.me/' + phone()\" target=\"_blank\">\n  <span i18n>Chat With Agent</span>\n</a>\n", styles: [".mat-mdc-menu-panel,.custom-menu-panel{max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatMenuModule }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LettingActionContact, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: LettingActionContact, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-letting-action-contact', imports: [CommonModule, MatButtonModule, MatIconModule, MatMenuModule], encapsulation: ViewEncapsulation.None, template: "<a mat-stroked-button class=\"w-full\" [href]=\"'https://wa.me/' + phone()\" target=\"_blank\">\n  <span i18n>Chat With Agent</span>\n</a>\n", styles: [".mat-mdc-menu-panel,.custom-menu-panel{max-width:100%}\n"] }]
         }] });
@@ -4508,10 +4857,10 @@ class LettingManageDetail extends BaseComponent {
         this.selectedVariant = matchingVariant;
         // const updatedCriteria = matchingVariant ? updateCriteriaFromVariant(matchingVariant) : [];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LettingManageDetail, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: LettingManageDetail, isStandalone: true, selector: "rolatech-letting-manage-detail", usesInheritance: true, ngImport: i0, template: "@if (property) {\n<rolatech-container>\n  <div class=\"flex flex-col w-full\">\n    <div class=\"py-3\">\n      <rolatech-property-media [media]=\"property.media\"></rolatech-property-media>\n    </div>\n    <div class=\"flex flex-col md:flex-row gap-3 w-full\">\n      <div class=\"w-full md:w-2/3\">\n        <rolatech-property-info [property]=\"property\" (wish)=\"onWish($event)\" [inWishList]=\"inWishList\">\n        </rolatech-property-info>\n        <rolatech-property-agent-renderer\n          [name]=\"fullname\"\n          [avatar]=\"user?.avatar\"\n          [username]=\"username\"\n        ></rolatech-property-agent-renderer>\n        <rolatech-property-features [features]=\"property.features\"></rolatech-property-features>\n        <rolatech-property-location [location]=\"property.location\"></rolatech-property-location>\n        @if (property.videos) {\n        <rolatech-property-video [video]=\"property.videos[0]\"></rolatech-property-video>\n        }\n        <div class=\"flex flex-col\">\n          <div class=\"text-2xl font-bold pt-3\" i18n>Sections</div>\n          @for (section of property.sections; track $index) {\n          <rolatech-property-section [section]=\"section\"></rolatech-property-section>\n          }\n        </div>\n      </div>\n      <div class=\"w-full h-fit md:w-1/3 rounded-md border shadow p-3\">\n        <rolatech-property-agent-renderer\n          [name]=\"fullname\"\n          [avatar]=\"user?.avatar\"\n          [username]=\"username\"\n          subtitle=\"PrimeCase Agent\"\n        ></rolatech-property-agent-renderer>\n        <rolatech-property-pricing (wish)=\"onWish($event)\" [property]=\"property\"></rolatech-property-pricing>\n        <rolatech-letting-actions\n          [letting]=\"property\"\n          (offer)=\"onOffer($event)\"\n          (deposit)=\"onOffer($event)\"\n          (requestViewing)=\"onRequestViewing($event)\"\n        >\n          @if (user) {\n          <rolatech-letting-action-contact [phone]=\"user.phone\"></rolatech-letting-action-contact>\n          }\n        </rolatech-letting-actions>\n      </div>\n    </div>\n  </div>\n</rolatech-container>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: PropertyInfoComponent, selector: "rolatech-property-info", inputs: ["property", "inWishList"], outputs: ["wish"] }, { kind: "component", type: PropertyMediaComponent, selector: "rolatech-property-media", inputs: ["media", "min"] }, { kind: "component", type: PropertyPricingComponent, selector: "rolatech-property-pricing", inputs: ["property", "price"] }, { kind: "component", type: PropertySectionComponent, selector: "rolatech-property-section", inputs: ["section", "user", "username"] }, { kind: "component", type: LettingActions, selector: "rolatech-letting-actions", inputs: ["letting"], outputs: ["requestViewing", "offer", "deposit"] }, { kind: "component", type: LettingActionContact, selector: "rolatech-letting-action-contact", inputs: ["phone"], outputs: ["callAgent", "emailAgent"] }, { kind: "component", type: PropertyLocationComponent, selector: "rolatech-property-location", inputs: ["location"] }, { kind: "component", type: PropertyFeaturesComponent, selector: "rolatech-property-features", inputs: ["features"] }, { kind: "component", type: PropertyVideoComponent, selector: "rolatech-property-video", inputs: ["video"] }, { kind: "component", type: PropertyAgentRenderer, selector: "rolatech-property-agent-renderer", inputs: ["name", "avatar", "username", "subtitle"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: LettingManageDetail, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: LettingManageDetail, isStandalone: true, selector: "rolatech-letting-manage-detail", usesInheritance: true, ngImport: i0, template: "@if (property) {\n<rolatech-container>\n  <div class=\"flex flex-col w-full\">\n    <div class=\"py-3\">\n      <rolatech-property-media [media]=\"property.media\"></rolatech-property-media>\n    </div>\n    <div class=\"flex flex-col md:flex-row gap-3 w-full\">\n      <div class=\"w-full md:w-2/3\">\n        <rolatech-property-info [property]=\"property\" (wish)=\"onWish($event)\" [inWishList]=\"inWishList\">\n        </rolatech-property-info>\n        <rolatech-property-agent-renderer\n          [name]=\"fullname\"\n          [avatar]=\"user?.avatar\"\n          [username]=\"username\"\n        ></rolatech-property-agent-renderer>\n        <rolatech-property-features [features]=\"property.userFeatures\"></rolatech-property-features>\n        <rolatech-property-location [location]=\"property.location\"></rolatech-property-location>\n        @if (property.videos) {\n        <rolatech-property-video [video]=\"property.videos[0]\"></rolatech-property-video>\n        }\n        <div class=\"flex flex-col\">\n          <div class=\"text-2xl font-bold pt-3\" i18n>Sections</div>\n          @for (section of property.sections; track $index) {\n          <rolatech-property-section [section]=\"section\"></rolatech-property-section>\n          }\n        </div>\n      </div>\n      <div class=\"w-full h-fit md:w-1/3 rounded-md border shadow p-3\">\n        <rolatech-property-agent-renderer\n          [name]=\"fullname\"\n          [avatar]=\"user?.avatar\"\n          [username]=\"username\"\n          subtitle=\"PrimeCase Agent\"\n        ></rolatech-property-agent-renderer>\n        <rolatech-property-pricing (wish)=\"onWish($event)\" [property]=\"property\"></rolatech-property-pricing>\n        <rolatech-letting-actions\n          [letting]=\"property\"\n          (offer)=\"onOffer($event)\"\n          (deposit)=\"onOffer($event)\"\n          (requestViewing)=\"onRequestViewing($event)\"\n        >\n          @if (user) {\n          <rolatech-letting-action-contact [phone]=\"user.phone\"></rolatech-letting-action-contact>\n          }\n        </rolatech-letting-actions>\n      </div>\n    </div>\n  </div>\n</rolatech-container>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: PropertyInfoComponent, selector: "rolatech-property-info", inputs: ["property", "inWishList"], outputs: ["wish"] }, { kind: "component", type: PropertyMediaComponent, selector: "rolatech-property-media", inputs: ["media", "min"] }, { kind: "component", type: PropertyPricingComponent, selector: "rolatech-property-pricing", inputs: ["property", "price"] }, { kind: "component", type: PropertySectionComponent, selector: "rolatech-property-section", inputs: ["section", "user", "username"] }, { kind: "component", type: LettingActions, selector: "rolatech-letting-actions", inputs: ["letting"], outputs: ["requestViewing", "offer", "deposit"] }, { kind: "component", type: LettingActionContact, selector: "rolatech-letting-action-contact", inputs: ["phone"], outputs: ["callAgent", "emailAgent"] }, { kind: "component", type: PropertyLocationComponent, selector: "rolatech-property-location", inputs: ["location"] }, { kind: "component", type: PropertyFeaturesComponent, selector: "rolatech-property-features", inputs: ["features"] }, { kind: "component", type: PropertyVideoComponent, selector: "rolatech-property-video", inputs: ["video"] }, { kind: "component", type: PropertyAgentRenderer, selector: "rolatech-property-agent-renderer", inputs: ["name", "avatar", "username", "subtitle"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LettingManageDetail, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: LettingManageDetail, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-letting-manage-detail', imports: [
                         AngularCommonModule,
@@ -4527,7 +4876,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                         PropertyFeaturesComponent,
                         PropertyVideoComponent,
                         PropertyAgentRenderer
-                    ], template: "@if (property) {\n<rolatech-container>\n  <div class=\"flex flex-col w-full\">\n    <div class=\"py-3\">\n      <rolatech-property-media [media]=\"property.media\"></rolatech-property-media>\n    </div>\n    <div class=\"flex flex-col md:flex-row gap-3 w-full\">\n      <div class=\"w-full md:w-2/3\">\n        <rolatech-property-info [property]=\"property\" (wish)=\"onWish($event)\" [inWishList]=\"inWishList\">\n        </rolatech-property-info>\n        <rolatech-property-agent-renderer\n          [name]=\"fullname\"\n          [avatar]=\"user?.avatar\"\n          [username]=\"username\"\n        ></rolatech-property-agent-renderer>\n        <rolatech-property-features [features]=\"property.features\"></rolatech-property-features>\n        <rolatech-property-location [location]=\"property.location\"></rolatech-property-location>\n        @if (property.videos) {\n        <rolatech-property-video [video]=\"property.videos[0]\"></rolatech-property-video>\n        }\n        <div class=\"flex flex-col\">\n          <div class=\"text-2xl font-bold pt-3\" i18n>Sections</div>\n          @for (section of property.sections; track $index) {\n          <rolatech-property-section [section]=\"section\"></rolatech-property-section>\n          }\n        </div>\n      </div>\n      <div class=\"w-full h-fit md:w-1/3 rounded-md border shadow p-3\">\n        <rolatech-property-agent-renderer\n          [name]=\"fullname\"\n          [avatar]=\"user?.avatar\"\n          [username]=\"username\"\n          subtitle=\"PrimeCase Agent\"\n        ></rolatech-property-agent-renderer>\n        <rolatech-property-pricing (wish)=\"onWish($event)\" [property]=\"property\"></rolatech-property-pricing>\n        <rolatech-letting-actions\n          [letting]=\"property\"\n          (offer)=\"onOffer($event)\"\n          (deposit)=\"onOffer($event)\"\n          (requestViewing)=\"onRequestViewing($event)\"\n        >\n          @if (user) {\n          <rolatech-letting-action-contact [phone]=\"user.phone\"></rolatech-letting-action-contact>\n          }\n        </rolatech-letting-actions>\n      </div>\n    </div>\n  </div>\n</rolatech-container>\n}\n" }]
+                    ], template: "@if (property) {\n<rolatech-container>\n  <div class=\"flex flex-col w-full\">\n    <div class=\"py-3\">\n      <rolatech-property-media [media]=\"property.media\"></rolatech-property-media>\n    </div>\n    <div class=\"flex flex-col md:flex-row gap-3 w-full\">\n      <div class=\"w-full md:w-2/3\">\n        <rolatech-property-info [property]=\"property\" (wish)=\"onWish($event)\" [inWishList]=\"inWishList\">\n        </rolatech-property-info>\n        <rolatech-property-agent-renderer\n          [name]=\"fullname\"\n          [avatar]=\"user?.avatar\"\n          [username]=\"username\"\n        ></rolatech-property-agent-renderer>\n        <rolatech-property-features [features]=\"property.userFeatures\"></rolatech-property-features>\n        <rolatech-property-location [location]=\"property.location\"></rolatech-property-location>\n        @if (property.videos) {\n        <rolatech-property-video [video]=\"property.videos[0]\"></rolatech-property-video>\n        }\n        <div class=\"flex flex-col\">\n          <div class=\"text-2xl font-bold pt-3\" i18n>Sections</div>\n          @for (section of property.sections; track $index) {\n          <rolatech-property-section [section]=\"section\"></rolatech-property-section>\n          }\n        </div>\n      </div>\n      <div class=\"w-full h-fit md:w-1/3 rounded-md border shadow p-3\">\n        <rolatech-property-agent-renderer\n          [name]=\"fullname\"\n          [avatar]=\"user?.avatar\"\n          [username]=\"username\"\n          subtitle=\"PrimeCase Agent\"\n        ></rolatech-property-agent-renderer>\n        <rolatech-property-pricing (wish)=\"onWish($event)\" [property]=\"property\"></rolatech-property-pricing>\n        <rolatech-letting-actions\n          [letting]=\"property\"\n          (offer)=\"onOffer($event)\"\n          (deposit)=\"onOffer($event)\"\n          (requestViewing)=\"onRequestViewing($event)\"\n        >\n          @if (user) {\n          <rolatech-letting-action-contact [phone]=\"user.phone\"></rolatech-letting-action-contact>\n          }\n        </rolatech-letting-actions>\n      </div>\n    </div>\n  </div>\n</rolatech-container>\n}\n" }]
         }], ctorParameters: () => [] });
 
 const MY_FORMATS$1 = {
@@ -4589,17 +4938,17 @@ class LettingManageViewingRequest extends BaseComponent {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LettingManageViewingRequest, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: LettingManageViewingRequest, isStandalone: true, selector: "rolatech-letting-viewing-request", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: LettingManageViewingRequest, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: LettingManageViewingRequest, isStandalone: true, selector: "rolatech-letting-viewing-request", providers: [
             {
                 provide: DateAdapter,
                 useClass: MomentDateAdapter,
                 deps: [MAT_DATE_LOCALE],
             },
             { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$1 },
-        ], usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  <div class=\"flex flex-col-reverse md:flex-row w-full py-2 mb-3 gap-3\">\n    <div class=\"w-full md:w-2/3\">\n      <div>\n        <div class=\"text-xl font-bold py-2 mb-3\" i18n>Request a viewing</div>\n        <mat-form-field appearance=\"fill\">\n          <mat-label>Select tenant</mat-label>\n          <mat-select [(ngModel)]=\"viewing.tenantId\">\n            @for (item of tenants; track $index) {\n            <mat-option [value]=\"item.id\">\n              <div class=\"flex justify-between items-center\">\n                <span class=\"mr-3\">{{ item.firstName }}, {{item.lastName}}</span>\n                <span>{{item.email}}</span>\n              </div>\n            </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <input\n            matInput\n            placeholder=\"Start date\"\n            [matDatepicker]=\"startDatePicker\"\n            [min]=\"minDate\"\n            (focus)=\"startDatePicker.open()\"\n            name=\"startDate\"\n            [(ngModel)]=\"viewing.startDate\"\n            (dateInput)=\"viewing.startDate = $event.value.format('YYYY-MM-DD')\"\n            readonly\n          />\n          <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n          <mat-datepicker #startDatePicker></mat-datepicker>\n        </mat-form-field>\n        <div class=\"flex flex-col md:flex-row gap-2\">\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>Tenancy length</mat-label>\n            <span matTextSuffix>months</span>\n            <input matInput type=\"number\" [(ngModel)]=\"viewing.tenancyDuration\" />\n          </mat-form-field>\n        </div>\n\n        <div>\n          <div class=\"mb-3\">\n            <div class=\"text-lg font-bold\" i18n>Viewing date</div>\n            <div class=\"opacity-70\" i18n>\n              Please choose 3 different times on at least 2 different days that would work for you.\n            </div>\n          </div>\n          @for (item of viewing.proposedSlots; track $index) {\n          <rolatech-property-viewing-time [proposedTime]=\"item\"></rolatech-property-viewing-time>\n          }\n        </div>\n      </div>\n      <button mat-flat-button (click)=\"sendRequest()\" i18n>Send request</button>\n    </div>\n    @if (property) {\n    <div class=\"w-full md:w-1/2 py-2 mb-3\">\n      <div class=\"text-xl font-bold py-2 mb-3\" i18n>Property info</div>\n      <div>\n        <rolatech-thumbnail [src]=\"property ? property.media[0].url : ''\" size=\"small\"></rolatech-thumbnail>\n      </div>\n      <rolatech-property-pricing [property]=\"property\"></rolatech-property-pricing>\n    </div>\n    }\n  </div>\n</rolatech-container>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: ThumbnailComponent, selector: "rolatech-thumbnail", inputs: ["src", "size", "mode", "ratio", "width", "height"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "component", type: PropertyViewingTimeComponent, selector: "rolatech-property-viewing-time", inputs: ["proposedTime"], outputs: ["output", "select"] }, { kind: "component", type: PropertyPricingComponent, selector: "rolatech-property-pricing", inputs: ["property", "price"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  <div class=\"flex flex-col-reverse md:flex-row w-full py-2 mb-3 gap-3\">\n    <div class=\"w-full md:w-2/3\">\n      <div>\n        <div class=\"text-xl font-bold py-2 mb-3\" i18n>Request a viewing</div>\n        <mat-form-field appearance=\"fill\">\n          <mat-label>Select tenant</mat-label>\n          <mat-select [(ngModel)]=\"viewing.tenantId\">\n            @for (item of tenants; track $index) {\n            <mat-option [value]=\"item.id\">\n              <div class=\"flex justify-between items-center\">\n                <span class=\"mr-3\">{{ item.firstName }}, {{item.lastName}}</span>\n                <span>{{item.email}}</span>\n              </div>\n            </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <input\n            matInput\n            placeholder=\"Start date\"\n            [matDatepicker]=\"startDatePicker\"\n            [min]=\"minDate\"\n            (focus)=\"startDatePicker.open()\"\n            name=\"startDate\"\n            [(ngModel)]=\"viewing.startDate\"\n            (dateInput)=\"viewing.startDate = $event.value.format('YYYY-MM-DD')\"\n            readonly\n          />\n          <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n          <mat-datepicker #startDatePicker></mat-datepicker>\n        </mat-form-field>\n        <div class=\"flex flex-col md:flex-row gap-2\">\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>Tenancy length</mat-label>\n            <span matTextSuffix>months</span>\n            <input matInput type=\"number\" [(ngModel)]=\"viewing.tenancyDuration\" />\n          </mat-form-field>\n        </div>\n\n        <div>\n          <div class=\"mb-3\">\n            <div class=\"text-lg font-bold\" i18n>Viewing date</div>\n            <div class=\"opacity-70\" i18n>\n              Please choose 3 different times on at least 2 different days that would work for you.\n            </div>\n          </div>\n          @for (item of viewing.proposedSlots; track $index) {\n          <rolatech-property-viewing-time [proposedTime]=\"item\"></rolatech-property-viewing-time>\n          }\n        </div>\n      </div>\n      <button mat-flat-button (click)=\"sendRequest()\" i18n>Send request</button>\n    </div>\n    @if (property) {\n    <div class=\"w-full md:w-1/2 py-2 mb-3\">\n      <div class=\"text-xl font-bold py-2 mb-3\" i18n>Property info</div>\n      <div>\n        <rolatech-thumbnail [src]=\"property ? property.media[0].url : ''\" size=\"small\"></rolatech-thumbnail>\n      </div>\n      <rolatech-property-pricing [property]=\"property\"></rolatech-property-pricing>\n    </div>\n    }\n  </div>\n</rolatech-container>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: ThumbnailComponent, selector: "rolatech-thumbnail", inputs: ["src", "size", "mode", "ratio", "width", "height"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "component", type: PropertyViewingTimeComponent, selector: "rolatech-property-viewing-time", inputs: ["proposedTime"], outputs: ["output", "select"] }, { kind: "component", type: PropertyPricingComponent, selector: "rolatech-property-pricing", inputs: ["property", "price"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LettingManageViewingRequest, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: LettingManageViewingRequest, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-letting-viewing-request', imports: [
                         CommonModule,
@@ -4698,17 +5047,17 @@ class LettingManageOfferRequest extends BaseComponent {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LettingManageOfferRequest, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: LettingManageOfferRequest, isStandalone: true, selector: "rolatech-letting-manage-offer-request", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: LettingManageOfferRequest, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: LettingManageOfferRequest, isStandalone: true, selector: "rolatech-letting-manage-offer-request", providers: [
             {
                 provide: DateAdapter,
                 useClass: MomentDateAdapter,
                 deps: [MAT_DATE_LOCALE],
             },
             { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
-        ], usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  <div class=\"flex flex-col-reverse md:flex-row w-full py-2 mb-3 gap-3\">\n    <div class=\"w-full md:w-2/3\">\n      <div>\n        <div class=\"text-xl font-bold py-2 mb-3\">\n          <!-- <span i18n>Offer for </span><span>{{ property()?.title : '' }}</span> -->\n          @if (property) {\n          <span i18n=\"@@offerFor\">Offer for {{ property.title }}</span>\n\n          }\n        </div>\n        <mat-form-field appearance=\"fill\">\n          <mat-label>Select tenant</mat-label>\n          <mat-select [(ngModel)]=\"offer.tenantId\">\n            @for (item of tenants; track $index) {\n            <mat-option [value]=\"item.id\">\n              <div class=\"flex justify-between items-center\">\n                <span class=\"mr-3\">{{ item.firstName }}, {{item.lastName}}</span>\n                <span>{{item.email}}</span>\n              </div>\n            </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\" floatLabel=\"always\">\n          <mat-label i18n>Asking price</mat-label>\n          <span matTextPrefix>\u00A3&nbsp;</span>\n          <input matInput type=\"text\" placeholder=\"0.00\" [(ngModel)]=\"offer.amount\" required />\n          <!-- <input\n            matInput\n            type=\"number\"\n            placeholder=\"0.00\"\n            [value]=\"formattedAmount\"\n            (input)=\"onAmountChange($event)\"\n            required\n          /> -->\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Tenancy Length</mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"offer.tenancyDuration\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label>Start date</mat-label>\n          <input\n            matInput\n            placeholder=\"Start date\"\n            [matDatepicker]=\"startDatePicker\"\n            [min]=\"minDate\"\n            (focus)=\"startDatePicker.open()\"\n            name=\"startDate\"\n            [(ngModel)]=\"offer.startDate\"\n            (dateInput)=\"offer.startDate = $event.value.format('YYYY-MM-DD')\"\n            readonly\n            required\n          />\n          <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n          <mat-datepicker #startDatePicker></mat-datepicker>\n        </mat-form-field>\n      </div>\n      <div>\n        <div class=\"text-md py-2\" i18n>Your message(Optional)</div>\n        <mat-form-field appearance=\"fill\">\n          <textarea matInput type=\"text\" [(ngModel)]=\"offer.notes\" cdkTextareaAutosize cdkAutosizeMinRows=\"3\"></textarea>\n        </mat-form-field>\n      </div>\n      <!-- <button mat-flat-button (click)=\"sendRequest()\" i18n>Send request</button> -->\n      <button mat-flat-button (click)=\"sendRequest()\" [disabled]=\"sending\">\n        <span style=\"display: flex; align-items: center\">\n          @if (sending) {\n          <mat-progress-spinner diameter=\"20\" mode=\"indeterminate\" [style.marginRight.px]=\"8\"></mat-progress-spinner>\n          } {{ sending ? 'Requesting...' : 'Send request' }}\n        </span>\n      </button>\n    </div>\n    @if (property) {\n    <div class=\"w-full md:w-1/2 py-2 mb-3\">\n      <div class=\"text-xl font-bold py-2 mb-3\" i18n>Property info</div>\n      <div>\n        <rolatech-thumbnail [src]=\"property ? property.media[0].url : ''\" size=\"small\"></rolatech-thumbnail>\n      </div>\n      <rolatech-property-pricing [property]=\"property\"></rolatech-property-pricing>\n    </div>\n    }\n  </div>\n</rolatech-container>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i4$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: ThumbnailComponent, selector: "rolatech-thumbnail", inputs: ["src", "size", "mode", "ratio", "width", "height"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: PropertyPricingComponent, selector: "rolatech-property-pricing", inputs: ["property", "price"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  <div class=\"flex flex-col-reverse md:flex-row w-full py-2 mb-3 gap-3\">\n    <div class=\"w-full md:w-2/3\">\n      <div>\n        <div class=\"text-xl font-bold py-2 mb-3\">\n          <!-- <span i18n>Offer for </span><span>{{ property()?.title : '' }}</span> -->\n          @if (property) {\n          <span i18n=\"@@offerFor\">Offer for {{ property.title }}</span>\n\n          }\n        </div>\n        <mat-form-field appearance=\"fill\">\n          <mat-label>Select tenant</mat-label>\n          <mat-select [(ngModel)]=\"offer.tenantId\">\n            @for (item of tenants; track $index) {\n            <mat-option [value]=\"item.id\">\n              <div class=\"flex justify-between items-center\">\n                <span class=\"mr-3\">{{ item.firstName }}, {{item.lastName}}</span>\n                <span>{{item.email}}</span>\n              </div>\n            </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\" floatLabel=\"always\">\n          <mat-label i18n>Asking price</mat-label>\n          <span matTextPrefix>\u00A3&nbsp;</span>\n          <input matInput type=\"text\" placeholder=\"0.00\" [(ngModel)]=\"offer.amount\" required />\n          <!-- <input\n            matInput\n            type=\"number\"\n            placeholder=\"0.00\"\n            [value]=\"formattedAmount\"\n            (input)=\"onAmountChange($event)\"\n            required\n          /> -->\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Tenancy Length</mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"offer.tenancyDuration\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label>Start date</mat-label>\n          <input\n            matInput\n            placeholder=\"Start date\"\n            [matDatepicker]=\"startDatePicker\"\n            [min]=\"minDate\"\n            (focus)=\"startDatePicker.open()\"\n            name=\"startDate\"\n            [(ngModel)]=\"offer.startDate\"\n            (dateInput)=\"offer.startDate = $event.value.format('YYYY-MM-DD')\"\n            readonly\n            required\n          />\n          <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n          <mat-datepicker #startDatePicker></mat-datepicker>\n        </mat-form-field>\n      </div>\n      <div>\n        <div class=\"text-md py-2\" i18n>Your message(Optional)</div>\n        <mat-form-field appearance=\"fill\">\n          <textarea matInput type=\"text\" [(ngModel)]=\"offer.notes\" cdkTextareaAutosize cdkAutosizeMinRows=\"3\"></textarea>\n        </mat-form-field>\n      </div>\n      <!-- <button mat-flat-button (click)=\"sendRequest()\" i18n>Send request</button> -->\n      <button mat-flat-button (click)=\"sendRequest()\" [disabled]=\"sending\">\n        <span style=\"display: flex; align-items: center\">\n          @if (sending) {\n          <mat-progress-spinner diameter=\"20\" mode=\"indeterminate\" [style.marginRight.px]=\"8\"></mat-progress-spinner>\n          } {{ sending ? 'Requesting...' : 'Send request' }}\n        </span>\n      </button>\n    </div>\n    @if (property) {\n    <div class=\"w-full md:w-1/2 py-2 mb-3\">\n      <div class=\"text-xl font-bold py-2 mb-3\" i18n>Property info</div>\n      <div>\n        <rolatech-thumbnail [src]=\"property ? property.media[0].url : ''\" size=\"small\"></rolatech-thumbnail>\n      </div>\n      <rolatech-property-pricing [property]=\"property\"></rolatech-property-pricing>\n    </div>\n    }\n  </div>\n</rolatech-container>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i4$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: ThumbnailComponent, selector: "rolatech-thumbnail", inputs: ["src", "size", "mode", "ratio", "width", "height"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: PropertyPricingComponent, selector: "rolatech-property-pricing", inputs: ["property", "price"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LettingManageOfferRequest, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: LettingManageOfferRequest, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-letting-manage-offer-request', imports: [
                         CommonModule,
@@ -4754,10 +5103,10 @@ const lettingManageRoutes = [
 
 class TenantItem {
     tenant = input.required(...(ngDevMode ? [{ debugName: "tenant" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TenantItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.2", type: TenantItem, isStandalone: true, selector: "rolatech-tenant-item", inputs: { tenant: { classPropertyName: "tenant", publicName: "tenant", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex items-center justify-between px-2 h-11 cursor-pointer hover:bg-[--rt-raised-background]\">\n  <div>{{tenant().firstName}}, {{tenant().lastName}}</div>\n  <div class=\"flex flex-row items-center\">\n    <div>{{tenant().email}}</div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TenantItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", type: TenantItem, isStandalone: true, selector: "rolatech-tenant-item", inputs: { tenant: { classPropertyName: "tenant", publicName: "tenant", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex items-center justify-between px-2 h-11 cursor-pointer hover:bg-[--rt-raised-background]\">\n  <div>{{tenant().firstName}}, {{tenant().lastName}}</div>\n  <div class=\"flex flex-row items-center\">\n    <div>{{tenant().email}}</div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TenantItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TenantItem, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-tenant-item', imports: [CommonModule], template: "<div class=\"flex items-center justify-between px-2 h-11 cursor-pointer hover:bg-[--rt-raised-background]\">\n  <div>{{tenant().firstName}}, {{tenant().lastName}}</div>\n  <div class=\"flex flex-row items-center\">\n    <div>{{tenant().email}}</div>\n  </div>\n</div>\n" }]
         }] });
@@ -4781,10 +5130,10 @@ class TenantManageIndex {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TenantManageIndex, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: TenantManageIndex, isStandalone: true, selector: "rolatech-tenant-manage-index", ngImport: i0, template: "<rolatech-toolbar title=\"Tenants\">\n  <div class=\"flex items-center gap-2\">\n    <button mat-flat-button routerLink=\"./create\">\n      <mat-icon>add</mat-icon>\n      <span i18n>Add tenant</span>\n    </button>\n  </div>\n</rolatech-toolbar>\n@if (loading) {\n<div class=\"flex justify-center items-center\">\n  <rolatech-spinner></rolatech-spinner>\n</div>\n} @else {\n<div class=\"bg-[--rt-rasised-background] h-full\">\n  <div class=\"flex flex-col p-2\">\n    <div class=\"flex px-2 h-11 items-center justify-between\">\n      <div class=\"text-lg font-bold\">Name</div>\n      <div class=\"text-lg font-bold\">Email</div>\n    </div>\n    @for (item of tenants; track $index) {\n    <rolatech-tenant-item [tenant]=\"item\" routerLink=\"./{{ item.id }}\"></rolatech-tenant-item>\n    <hr />\n    }\n  </div>\n</div>\n\n<!-- <mat-paginator\n    #paginator\n    [length]=\"length\"\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"pageEvent = find($event)\"\n    hidePageSize\n    showFirstLastButtons\n  >\n  </mat-paginator> -->\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: SpinnerComponent, selector: "rolatech-spinner", inputs: ["title"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: TenantItem, selector: "rolatech-tenant-item", inputs: ["tenant"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TenantManageIndex, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: TenantManageIndex, isStandalone: true, selector: "rolatech-tenant-manage-index", ngImport: i0, template: "<rolatech-toolbar title=\"Tenants\">\n  <div class=\"flex items-center gap-2\">\n    <button mat-flat-button routerLink=\"./create\">\n      <mat-icon>add</mat-icon>\n      <span i18n>Add tenant</span>\n    </button>\n  </div>\n</rolatech-toolbar>\n@if (loading) {\n<div class=\"flex justify-center items-center\">\n  <rolatech-spinner></rolatech-spinner>\n</div>\n} @else {\n<div class=\"bg-[--rt-rasised-background] h-full\">\n  <div class=\"flex flex-col p-2\">\n    <div class=\"flex px-2 h-11 items-center justify-between\">\n      <div class=\"text-lg font-bold\">Name</div>\n      <div class=\"text-lg font-bold\">Email</div>\n    </div>\n    @for (item of tenants; track $index) {\n    <rolatech-tenant-item [tenant]=\"item\" routerLink=\"./{{ item.id }}\"></rolatech-tenant-item>\n    <hr />\n    }\n  </div>\n</div>\n\n<!-- <mat-paginator\n    #paginator\n    [length]=\"length\"\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"pageEvent = find($event)\"\n    hidePageSize\n    showFirstLastButtons\n  >\n  </mat-paginator> -->\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: SpinnerComponent, selector: "rolatech-spinner", inputs: ["title"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: TenantItem, selector: "rolatech-tenant-item", inputs: ["tenant"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TenantManageIndex, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TenantManageIndex, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-tenant-manage-index', imports: [CommonModule, ToolbarComponent, SpinnerComponent, MatButtonModule, MatIcon, RouterLink, TenantItem], template: "<rolatech-toolbar title=\"Tenants\">\n  <div class=\"flex items-center gap-2\">\n    <button mat-flat-button routerLink=\"./create\">\n      <mat-icon>add</mat-icon>\n      <span i18n>Add tenant</span>\n    </button>\n  </div>\n</rolatech-toolbar>\n@if (loading) {\n<div class=\"flex justify-center items-center\">\n  <rolatech-spinner></rolatech-spinner>\n</div>\n} @else {\n<div class=\"bg-[--rt-rasised-background] h-full\">\n  <div class=\"flex flex-col p-2\">\n    <div class=\"flex px-2 h-11 items-center justify-between\">\n      <div class=\"text-lg font-bold\">Name</div>\n      <div class=\"text-lg font-bold\">Email</div>\n    </div>\n    @for (item of tenants; track $index) {\n    <rolatech-tenant-item [tenant]=\"item\" routerLink=\"./{{ item.id }}\"></rolatech-tenant-item>\n    <hr />\n    }\n  </div>\n</div>\n\n<!-- <mat-paginator\n    #paginator\n    [length]=\"length\"\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"pageEvent = find($event)\"\n    hidePageSize\n    showFirstLastButtons\n  >\n  </mat-paginator> -->\n}\n" }]
         }] });
@@ -4806,10 +5155,10 @@ class TenantManageDetail extends BaseComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TenantManageDetail, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: TenantManageDetail, isStandalone: true, selector: "rolatech-tenant-manage-detail", usesInheritance: true, ngImport: i0, template: "<rolatech-toolbar title=\"Tenant details\" large link=\"../\"> </rolatech-toolbar>\n@if (tenant) {\n<div class=\"px-4\">\n  <div>\n    <div class=\"text-lg font-bold py-2\">Tenant</div>\n    <hr class=\"mb-2\" />\n    <div class=\"flex flex-col md:flex-row gap-1 md:gap-4\">\n      <rolatech-rich-label label=\"First Name\" [title]=\"tenant.firstName\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Last Name\" [title]=\"tenant.lastName\"></rolatech-rich-label>\n    </div>\n    <div class=\"flex flex-col md:flex-row gap-1 md:gap-4\">\n      <rolatech-rich-label label=\"Email\" [title]=\"tenant.email\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Phone\" [title]=\"tenant.phone\"></rolatech-rich-label>\n    </div>\n    <div>\n      <div class=\"text-lg font-bold py-2\">Qualification</div>\n      <hr class=\"mb-2\" />\n      <rolatech-rich-label label=\"Annual income\" [title]=\"tenant.income\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Number of tenants\" [title]=\"tenant.numberOfTenants\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Tenant category\" [title]=\"tenantCategory[tenant.tenantCategory]\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Employment status\" [title]=\"employmentStatus[tenant.employmentStatus]\"></rolatech-rich-label>\n      <rolatech-rich-label\n        label=\"AdverseCredit Status\"\n        [title]=\"adverseCreditStatus[tenant.adverseCreditStatus]\"\n      ></rolatech-rich-label>\n      <rolatech-rich-label label=\"Residency status\" [title]=\"residencyStatus[tenant.residencyStatus]\"></rolatech-rich-label>\n    </div>\n  </div>\n</div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: RichLabelComponent, selector: "rolatech-rich-label", inputs: ["label", "title"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TenantManageDetail, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: TenantManageDetail, isStandalone: true, selector: "rolatech-tenant-manage-detail", usesInheritance: true, ngImport: i0, template: "<rolatech-toolbar title=\"Tenant details\" large link=\"../\"> </rolatech-toolbar>\n@if (tenant) {\n<div class=\"px-4\">\n  <div>\n    <div class=\"text-lg font-bold py-2\">Tenant</div>\n    <hr class=\"mb-2\" />\n    <div class=\"flex flex-col md:flex-row gap-1 md:gap-4\">\n      <rolatech-rich-label label=\"First Name\" [title]=\"tenant.firstName\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Last Name\" [title]=\"tenant.lastName\"></rolatech-rich-label>\n    </div>\n    <div class=\"flex flex-col md:flex-row gap-1 md:gap-4\">\n      <rolatech-rich-label label=\"Email\" [title]=\"tenant.email\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Phone\" [title]=\"tenant.phone\"></rolatech-rich-label>\n    </div>\n    <div>\n      <div class=\"text-lg font-bold py-2\">Qualification</div>\n      <hr class=\"mb-2\" />\n      <rolatech-rich-label label=\"Annual income\" [title]=\"tenant.income\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Number of tenants\" [title]=\"tenant.numberOfTenants\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Tenant category\" [title]=\"tenantCategory[tenant.tenantCategory]\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Employment status\" [title]=\"employmentStatus[tenant.employmentStatus]\"></rolatech-rich-label>\n      <rolatech-rich-label\n        label=\"AdverseCredit Status\"\n        [title]=\"adverseCreditStatus[tenant.adverseCreditStatus]\"\n      ></rolatech-rich-label>\n      <rolatech-rich-label label=\"Residency status\" [title]=\"residencyStatus[tenant.residencyStatus]\"></rolatech-rich-label>\n    </div>\n  </div>\n</div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: RichLabelComponent, selector: "rolatech-rich-label", inputs: ["label", "title"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TenantManageDetail, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TenantManageDetail, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-tenant-manage-detail', imports: [CommonModule, ToolbarComponent, RichLabelComponent, ToolbarComponent], template: "<rolatech-toolbar title=\"Tenant details\" large link=\"../\"> </rolatech-toolbar>\n@if (tenant) {\n<div class=\"px-4\">\n  <div>\n    <div class=\"text-lg font-bold py-2\">Tenant</div>\n    <hr class=\"mb-2\" />\n    <div class=\"flex flex-col md:flex-row gap-1 md:gap-4\">\n      <rolatech-rich-label label=\"First Name\" [title]=\"tenant.firstName\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Last Name\" [title]=\"tenant.lastName\"></rolatech-rich-label>\n    </div>\n    <div class=\"flex flex-col md:flex-row gap-1 md:gap-4\">\n      <rolatech-rich-label label=\"Email\" [title]=\"tenant.email\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Phone\" [title]=\"tenant.phone\"></rolatech-rich-label>\n    </div>\n    <div>\n      <div class=\"text-lg font-bold py-2\">Qualification</div>\n      <hr class=\"mb-2\" />\n      <rolatech-rich-label label=\"Annual income\" [title]=\"tenant.income\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Number of tenants\" [title]=\"tenant.numberOfTenants\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Tenant category\" [title]=\"tenantCategory[tenant.tenantCategory]\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Employment status\" [title]=\"employmentStatus[tenant.employmentStatus]\"></rolatech-rich-label>\n      <rolatech-rich-label\n        label=\"AdverseCredit Status\"\n        [title]=\"adverseCreditStatus[tenant.adverseCreditStatus]\"\n      ></rolatech-rich-label>\n      <rolatech-rich-label label=\"Residency status\" [title]=\"residencyStatus[tenant.residencyStatus]\"></rolatech-rich-label>\n    </div>\n  </div>\n</div>\n}\n" }]
         }] });
@@ -4839,10 +5188,10 @@ class TenantManageCreate {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TenantManageCreate, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: TenantManageCreate, isStandalone: true, selector: "rolatech-tenant-manage-create", ngImport: i0, template: "<rolatech-toolbar title=\"Add tenant\" link=\"../\"> </rolatech-toolbar>\n<div class=\"p-3\">\n  <div class=\"flex flex-col md:w-2/3\">\n    <div class=\"flex w-full gap-2\">\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n>First name</mat-label>\n        <input matInput type=\"text\" [(ngModel)]=\"tenant.firstName\" required />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n>Last name</mat-label>\n        <input matInput type=\"text\" [(ngModel)]=\"tenant.lastName\" required />\n      </mat-form-field>\n    </div>\n    <mat-form-field appearance=\"fill\">\n      <mat-label i18n>Email</mat-label>\n      <input matInput type=\"text\" [(ngModel)]=\"tenant.email\" required />\n    </mat-form-field>\n    <mat-form-field appearance=\"fill\">\n      <mat-label i18n>Phone</mat-label>\n      <input matInput type=\"text\" [(ngModel)]=\"tenant.phone\" required />\n    </mat-form-field>\n    <mat-form-field appearance=\"fill\" floatLabel=\"always\">\n      <mat-label i18n>Annual income(All tenants combined)</mat-label>\n      <span matTextPrefix>\u00A3&nbsp;</span>\n      <input matInput type=\"text\" placeholder=\"00.00\" [(ngModel)]=\"tenant.income\" required />\n    </mat-form-field>\n    <mat-form-field appearance=\"fill\">\n      <mat-label i18n>Number Of Tenants</mat-label>\n      <input matInput type=\"text\" [(ngModel)]=\"tenant.numberOfTenants\" required />\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label i18n>Tenant category</mat-label>\n      <mat-select placeholder=\"Applicant type\" [(ngModel)]=\"tenant.tenantCategory\" required>\n        @for (tenantCategory of tenantCategory | keyvalue; track tenantCategory) {\n        <mat-option [value]=\"tenantCategory.key\"> {{ tenantCategory.value }} </mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label i18n>Employment Status</mat-label>\n      <mat-select placeholder=\"Employment Status\" [(ngModel)]=\"tenant.employmentStatus\" required>\n        @for (item of employmentStatus | keyvalue; track item) {\n        <mat-option [value]=\"item.key\"> {{ item.value }} </mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label i18n>AdverseCredit Status</mat-label>\n      <mat-select placeholder=\"AdverseCredit Status\" [(ngModel)]=\"tenant.adverseCreditStatus\" required>\n        @for (item of adverseCreditStatus | keyvalue; track item) {\n        <mat-option [value]=\"item.key\"> {{ item.value }} </mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label i18n>Residency status</mat-label>\n      <mat-select placeholder=\"Residency status\" [(ngModel)]=\"tenant.residencyStatus\" required>\n        @for (status of residencyStatus | keyvalue; track status) {\n        <mat-option [value]=\"status.key\"> {{ status.value }} </mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n  </div>\n  <div i18n>* items are required</div>\n  <div class=\"mt-3\">\n    <button mat-flat-button class=\"w-28\" (click)=\"create()\" i18n>Save</button>\n  </div>\n</div>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TenantManageCreate, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: TenantManageCreate, isStandalone: true, selector: "rolatech-tenant-manage-create", ngImport: i0, template: "<rolatech-toolbar title=\"Add tenant\" link=\"../\"> </rolatech-toolbar>\n<div class=\"p-3\">\n  <div class=\"flex flex-col md:w-2/3\">\n    <div class=\"flex w-full gap-2\">\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n>First name</mat-label>\n        <input matInput type=\"text\" [(ngModel)]=\"tenant.firstName\" required />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n>Last name</mat-label>\n        <input matInput type=\"text\" [(ngModel)]=\"tenant.lastName\" required />\n      </mat-form-field>\n    </div>\n    <mat-form-field appearance=\"fill\">\n      <mat-label i18n>Email</mat-label>\n      <input matInput type=\"text\" [(ngModel)]=\"tenant.email\" required />\n    </mat-form-field>\n    <mat-form-field appearance=\"fill\">\n      <mat-label i18n>Phone</mat-label>\n      <input matInput type=\"text\" [(ngModel)]=\"tenant.phone\" required />\n    </mat-form-field>\n    <mat-form-field appearance=\"fill\" floatLabel=\"always\">\n      <mat-label i18n>Annual income(All tenants combined)</mat-label>\n      <span matTextPrefix>\u00A3&nbsp;</span>\n      <input matInput type=\"text\" placeholder=\"00.00\" [(ngModel)]=\"tenant.income\" required />\n    </mat-form-field>\n    <mat-form-field appearance=\"fill\">\n      <mat-label i18n>Number Of Tenants</mat-label>\n      <input matInput type=\"text\" [(ngModel)]=\"tenant.numberOfTenants\" required />\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label i18n>Tenant category</mat-label>\n      <mat-select placeholder=\"Applicant type\" [(ngModel)]=\"tenant.tenantCategory\" required>\n        @for (tenantCategory of tenantCategory | keyvalue; track tenantCategory) {\n        <mat-option [value]=\"tenantCategory.key\"> {{ tenantCategory.value }} </mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label i18n>Employment Status</mat-label>\n      <mat-select placeholder=\"Employment Status\" [(ngModel)]=\"tenant.employmentStatus\" required>\n        @for (item of employmentStatus | keyvalue; track item) {\n        <mat-option [value]=\"item.key\"> {{ item.value }} </mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label i18n>AdverseCredit Status</mat-label>\n      <mat-select placeholder=\"AdverseCredit Status\" [(ngModel)]=\"tenant.adverseCreditStatus\" required>\n        @for (item of adverseCreditStatus | keyvalue; track item) {\n        <mat-option [value]=\"item.key\"> {{ item.value }} </mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label i18n>Residency status</mat-label>\n      <mat-select placeholder=\"Residency status\" [(ngModel)]=\"tenant.residencyStatus\" required>\n        @for (status of residencyStatus | keyvalue; track status) {\n        <mat-option [value]=\"status.key\"> {{ status.value }} </mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n  </div>\n  <div i18n>* items are required</div>\n  <div class=\"mt-3\">\n    <button mat-flat-button class=\"w-28\" (click)=\"create()\" i18n>Save</button>\n  </div>\n</div>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TenantManageCreate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TenantManageCreate, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-tenant-manage-create', imports: [
                         CommonModule,
@@ -4876,5 +5225,5 @@ const tenantManageRoutes = [
  * Generated bundle index. Do not edit.
  */
 
-export { AdverseCreditStatus as A, EmploymentStatus as E, Market as M, PropertyUtil as P, RentFrequency as R, ViewingTime as V, PropertyViewType as a, PropertyViewingItemComponent as b, propertyManageOffersRoutes as c, propertyRoutes as d, propertyManageRoutes as e, featureManageRoutes as f, propertyManageViewingsRoutes as g, PropertyActionsComponent as h, PropertyItemComponent as i, PropertyPricingComponent as j, PropertyPriceType as k, lettingManageRoutes as l, PropertyVideoProvider as m, PropertyStatus as n, PropertyType as o, propertyReviewRoutes as p, PropertyInventoryStatus as q, PropertyScope as r, PropertyViewingStatus as s, tenantManageRoutes as t, PropertyViewerCategory as u, PropertyOfferTimelineStatus as v, PropertyOfferType as w, PropertyOfferStatus as x, ResidencyStatus as y, PropertyApplicantType as z };
-//# sourceMappingURL=rolatech-angular-property-rolatech-angular-property-NsV_zGlO.mjs.map
+export { AdverseCreditStatus as A, BedroomRange as B, PriceRange as C, EmploymentStatus as E, Market as M, PropertyUtil as P, RentFrequency as R, ViewingTime as V, PropertyViewType as a, PropertyViewingItemComponent as b, propertyManageOffersRoutes as c, propertyRoutes as d, propertyManageRoutes as e, featureManageRoutes as f, propertyManageViewingsRoutes as g, PropertyActionsComponent as h, PropertyItemComponent as i, PropertyPricingComponent as j, PropertyPriceType as k, lettingManageRoutes as l, PropertyVideoProvider as m, PropertyStatus as n, PropertyType as o, propertyReviewRoutes as p, PropertyInventoryStatus as q, PropertyScope as r, PropertyViewingStatus as s, tenantManageRoutes as t, PropertyViewerCategory as u, PropertyOfferTimelineStatus as v, PropertyOfferType as w, PropertyOfferStatus as x, ResidencyStatus as y, PropertyApplicantType as z };
+//# sourceMappingURL=rolatech-angular-property-rolatech-angular-property-DlDjmR4a.mjs.map