@rolatech/angular-property 20.2.7-beta.2 → 20.2.8-bete.1

package/fesm2022/{rolatech-angular-property-rolatech-angular-property-Du0qae4S.mjs → rolatech-angular-property-rolatech-angular-property-BjulA68a.mjs}

@@ -1,17 +1,17 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, booleanAttribute, effect, HostBinding, ViewEncapsulation, Component, viewChild, PLATFORM_ID, output, computed, signal, model, EventEmitter, Injectable, Pipe, ViewChild } from '@angular/core';
-import * as i1$4 from '@angular/material/button';
+import { inject, ElementRef, input, booleanAttribute, effect, HostBinding, ViewEncapsulation, Component, viewChild, PLATFORM_ID, output, computed, signal, model, EventEmitter, Injectable, Pipe, InjectionToken, ViewChild } from '@angular/core';
+import * as i1$3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i4 from '@angular/material/menu';
+import * as i4$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i2$2 from '@angular/material/paginator';
+import * as i2$3 from '@angular/material/paginator';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
 import * as i1$1 from '@angular/router';
 import { RouterLink, RouterModule, ActivatedRoute, Router, RouterLinkActive, RouterOutlet } from '@angular/router';
 import { ThumbnailComponent, ImagePlaceholderComponent, Skeleton, ToolbarComponent, Loading, ImagePreviewDialogComponent, BaseComponent, AcceptDialogComponent, RejectDialogComponent, RichLabelComponent, AngularComponentsModule, ConfirmationDialogComponent, TabsComponent, TabComponent, EmptyComponent, ListComponent, ContainerComponent, SearchBar, SpinnerComponent, MediaListComponent, MediaListItemComponent, InputComponent } from '@rolatech/angular-components';
-import { PropertyService, FeatureService, PropertyOfferService, InvoiceService, FloorplanService, PropertyHighlightsService, TimeZoneService, PaymentService, PropertySearchService, DialogService } from '@rolatech/angular-services';
+import { PropertyService, FeatureService, PropertyOfferService, InvoiceService, FloorplanService, PropertyHighlightsService, TimeZoneService, PaymentService, TitleService, PropertySearchService, DialogService } from '@rolatech/angular-services';
 import * as i1 from '@angular/common';
 import { CommonModule, NgClass, isPlatformBrowser, ViewportScroller, KeyValuePipe, Location } from '@angular/common';
 import { PricePipe, APP_CONFIG, AngularCommonModule, OptionsFormatPipe, DecimalDirective, DurationPipe, SafeUrlPipe } from '@rolatech/angular-common';
@@ -19,23 +19,23 @@ 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 * as i1$3 from '@angular/forms';
-import { FormsModule, FormControl, ReactiveFormsModule } from '@angular/forms';
-import * as i1$2 from '@angular/material/form-field';
+import * as i1$2 from '@angular/forms';
+import { FormsModule, FormControl, ReactiveFormsModule, FormBuilder, Validators, ControlContainer } from '@angular/forms';
+import * as i2$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i3 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i5 from '@angular/material/select';
+import * as i4 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i1$5 from '@angular/material/chips';
+import * as i1$4 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
-import { startWith, map, distinctUntilChanged, switchMap, finalize, forkJoin, from, concatMap, take, Observable } from 'rxjs';
+import { startWith, map, distinctUntilChanged, switchMap, finalize, firstValueFrom, forkJoin, from, concatMap, take, Observable } from 'rxjs';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
-import * as i4$2 from '@angular/material/autocomplete';
+import * as i4$3 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatOptionModule, MAT_DATE_LOCALE, DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
+import { MatOptionModule, MAT_DATE_LOCALE, DateAdapter, MAT_DATE_FORMATS, MatNativeDateModule } from '@angular/material/core';
 import _, { findIndex, findLastIndex, first, remove } from 'lodash';
-import * as i2$1 from '@angular/material/divider';
+import * as i2$2 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
 import { MomentDateAdapter } from '@angular/material-moment-adapter';
 import * as i6 from '@angular/material/datepicker';
@@ -44,15 +44,21 @@ import * as i3$1 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
 import { CommentsComponent } from '@rolatech/angular-comment';
 import { DomSanitizer } from '@angular/platform-browser';
-import * as i4$1 from '@angular/cdk/text-field';
+import * as i4$2 from '@angular/cdk/text-field';
 import { TextFieldModule } from '@angular/cdk/text-field';
-import * as i5$1 from '@angular/material/progress-spinner';
+import * as i5 from '@angular/material/progress-spinner';
 import { MatProgressSpinner, MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatStepperModule } from '@angular/material/stepper';
+import * as i6$1 from '@angular/material/slide-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import * as i2$4 from '@angular/material/expansion';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatCardModule } from '@angular/material/card';
 import * as i8 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import * as i1$6 from '@angular/material/checkbox';
+import * as i1$5 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i4$3 from '@angular/cdk/drag-drop';
+import * as i4$4 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import { MatListModule } from '@angular/material/list';
 
@@ -72,8 +78,8 @@ var RentFrequency;
 })(RentFrequency || (RentFrequency = {}));
 var Market;
 (function (Market) {
-    Market["SALES"] = "Sales";
-    Market["LETTINGS"] = "Lettings";
+    Market["SALE"] = "Sale";
+    Market["RENTAL"] = "Rent";
     Market["NOT_SPECIFIED"] = "Not specified";
 })(Market || (Market = {}));
 var PropertyPriceType;
@@ -162,8 +168,8 @@ var PropertyOfferTimelineStatus;
 })(PropertyOfferTimelineStatus || (PropertyOfferTimelineStatus = {}));
 var PropertyOfferType;
 (function (PropertyOfferType) {
-    PropertyOfferType["SALES"] = "Sales";
-    PropertyOfferType["LETTINGS"] = "Lettings";
+    PropertyOfferType["SALE"] = "Sale";
+    PropertyOfferType["RENTAL"] = "Rent";
     PropertyOfferType["NOT_SPECIFIED"] = "Not specified";
 })(PropertyOfferType || (PropertyOfferType = {}));
 var PropertyOfferStatus;
@@ -644,7 +650,7 @@ class PropertyAgentUpdate {
         this.output.emit(this.selectedAgentId);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyAgentUpdate, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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: i4.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: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyAgentUpdate, decorators: [{
             type: Component,
@@ -755,7 +761,6 @@ class PropertyReviewDetailComponent extends BaseComponent {
                 if (res) {
                     this.propertyService.updateAgent(this.id, { userId: res }).subscribe({
                         next: (res) => {
-                            console.log(res);
                             this.getAgentPublicInfo(res.data.agentId);
                         },
                     });
@@ -764,7 +769,7 @@ class PropertyReviewDetailComponent extends BaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyReviewDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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\">{{ property.price | price }}</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: PricePipe, name: "price" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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\">{{ property.price | price }}</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$3.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: PricePipe, name: "price" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyReviewDetailComponent, decorators: [{
             type: Component,
@@ -808,7 +813,7 @@ class FeatureManageItemComponent {
         this.edit.emit(this.feature());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FeatureManageItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", 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$3.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$2.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: "21.0.6", ngImport: i0, type: FeatureManageItemComponent, decorators: [{
             type: Component,
@@ -859,7 +864,7 @@ class FeatureManageItemAddComponent {
         this.output.emit(this.feature);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FeatureManageItemAddComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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],[formArray],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]):not([formArray]),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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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$4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i1$4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i1$4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1$4.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$3.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: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),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: "21.0.6", ngImport: i0, type: FeatureManageItemAddComponent, decorators: [{
             type: Component,
@@ -892,7 +897,6 @@ class FeatureManageIndexComponent extends BaseComponent {
         });
     }
     saveFeature(feature) {
-        console.log(feature);
         this.featureService.addFeature(feature).subscribe({
             next: (res) => {
                 this.features.push(res.data);
@@ -989,7 +993,7 @@ class FeatureManageIndexComponent extends BaseComponent {
         this.featureControl.setValue(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FeatureManageIndexComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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$3.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: "21.0.6", ngImport: i0, type: FeatureManageIndexComponent, decorators: [{
             type: Component,
@@ -1033,14 +1037,14 @@ class PropertyOfferItemComponent {
     offer = input.required(...(ngDevMode ? [{ debugName: "offer" }] : []));
     status = PropertyOfferStatus;
     total = computed(() => {
-        return this.offer().price.toFixed(2);
+        return this.offer().amount.toFixed(2);
     }, ...(ngDevMode ? [{ debugName: "total" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyOfferItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 text-[--rt-brand-color]\">{{ 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.title }}</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\">{{ offer().item.amount | price }}</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"] }, { kind: "pipe", type: PricePipe, name: "price" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 text-[--rt-brand-color]\">{{ status[offer().status] }}</span>\n    </div>\n    @if (offer().item) {\n      <div class=\"flex flex-row py-2\">\n        @if (offer().item.media.length > 0) {\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.title }}</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\">{{ offer().item.amount | price }}</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"] }, { kind: "pipe", type: PricePipe, name: "price" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyOfferItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-property-offer-item', imports: [MatIconModule, ThumbnailComponent, ImagePlaceholderComponent, PricePipe], 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 text-[--rt-brand-color]\">{{ 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.title }}</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\">{{ offer().item.amount | price }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n" }]
+            args: [{ selector: 'rolatech-property-offer-item', imports: [MatIconModule, ThumbnailComponent, ImagePlaceholderComponent, PricePipe], 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 text-[--rt-brand-color]\">{{ status[offer().status] }}</span>\n    </div>\n    @if (offer().item) {\n      <div class=\"flex flex-row py-2\">\n        @if (offer().item.media.length > 0) {\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.title }}</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\">{{ offer().item.amount | price }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n" }]
         }], propDecorators: { offer: [{ type: i0.Input, args: [{ isSignal: true, alias: "offer", required: true }] }] } });
 
 class OfferItemSkeleton {
@@ -1136,7 +1140,7 @@ class PropertyManageOfferIndexComponent extends BaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyManageOfferIndexComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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@if (loading) {\n  <div class=\"divide-y divide-[--rt-10-percent-layer] flex flex-col px-3\">\n    @for (row of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]; track row) {\n      <rolatech-offer-item-skeleton></rolatech-offer-item-skeleton>\n    }\n  </div>\n} @else {\n  <rolatech-list>\n    @if (offers() && offers().length > 0) {\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}\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: [""], 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", "block"], 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" }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: OfferItemSkeleton, selector: "rolatech-offer-item-skeleton" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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@if (loading) {\n  <div class=\"divide-y divide-[--rt-10-percent-layer] flex flex-col px-3\">\n    @for (row of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]; track row) {\n      <rolatech-offer-item-skeleton></rolatech-offer-item-skeleton>\n    }\n  </div>\n} @else {\n  <rolatech-list>\n    @if (offers() && offers().length > 0) {\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}\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: [""], 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", "block"], 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" }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: OfferItemSkeleton, selector: "rolatech-offer-item-skeleton" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyManageOfferIndexComponent, decorators: [{
             type: Component,
@@ -1154,7 +1158,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                     ], 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@if (loading) {\n  <div class=\"divide-y divide-[--rt-10-percent-layer] flex flex-col px-3\">\n    @for (row of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]; track row) {\n      <rolatech-offer-item-skeleton></rolatech-offer-item-skeleton>\n    }\n  </div>\n} @else {\n  <rolatech-list>\n    @if (offers() && offers().length > 0) {\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}\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" }]
         }] });
 
-const MY_FORMATS$7 = {
+const MY_FORMATS$a = {
     parse: {
         dateInput: 'YYYY-MM-DD',
     },
@@ -1179,8 +1183,8 @@ class OfferEdit extends BaseComponent {
                 useClass: MomentDateAdapter,
                 deps: [MAT_DATE_LOCALE],
             },
-            { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$7 },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col gap-2\">\n  <div class=\"flex justify-between gap-3\">\n    <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n      <mat-label>Firstname</mat-label>\n      <input matInput [(ngModel)]=\"offer().firstName\" />\n    </mat-form-field>\n    <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n      <mat-label>Lastname</mat-label>\n      <input matInput [(ngModel)]=\"offer().lastName\" />\n    </mat-form-field>\n  </div>\n  <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n    <mat-label>Email</mat-label>\n    <input matInput [(ngModel)]=\"offer().email\" />\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n    <mat-label>Phone</mat-label>\n    <input matInput [(ngModel)]=\"offer().phone\" />\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n    <mat-label>Offer Price</mat-label>\n    <input matInput [(ngModel)]=\"offer().price\" />\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n    <mat-label i18n>Move-in date</mat-label>\n    <!-- [max]=\"maxDate\" -->\n    <input\n      matInput\n      placeholder=\"Move-in date\"\n      [min]=\"minDate\"\n      [matDatepicker]=\"startDatePicker\"\n      (focus)=\"startDatePicker.open()\"\n      [(ngModel)]=\"offer().startDate\"\n      (dateInput)=\"offer().startDate = $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</div>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "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: 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: "ngmodule", type: MatOptionModule }] });
+            { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$a },
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col gap-2\">\n  <div class=\"flex justify-between gap-3\">\n    <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n      <mat-label>Firstname</mat-label>\n      <input matInput [(ngModel)]=\"offer().firstName\" />\n    </mat-form-field>\n    <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n      <mat-label>Lastname</mat-label>\n      <input matInput [(ngModel)]=\"offer().lastName\" />\n    </mat-form-field>\n  </div>\n  <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n    <mat-label>Email</mat-label>\n    <input matInput [(ngModel)]=\"offer().email\" />\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n    <mat-label>Phone</mat-label>\n    <input matInput [(ngModel)]=\"offer().phone\" />\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n    <mat-label>Offer amount</mat-label>\n    <input matInput [(ngModel)]=\"offer().amount\" />\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n    <mat-label i18n>Move-in date</mat-label>\n    <!-- [max]=\"maxDate\" -->\n    <input\n      matInput\n      placeholder=\"Move-in date\"\n      [min]=\"minDate\"\n      [matDatepicker]=\"startDatePicker\"\n      (focus)=\"startDatePicker.open()\"\n      [(ngModel)]=\"offer().startDate\"\n      (dateInput)=\"offer().startDate = $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</div>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.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: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { 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: "ngmodule", type: MatOptionModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OfferEdit, decorators: [{
             type: Component,
@@ -1190,8 +1194,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                             useClass: MomentDateAdapter,
                             deps: [MAT_DATE_LOCALE],
                         },
-                        { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$7 },
-                    ], template: "<div class=\"flex flex-col gap-2\">\n  <div class=\"flex justify-between gap-3\">\n    <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n      <mat-label>Firstname</mat-label>\n      <input matInput [(ngModel)]=\"offer().firstName\" />\n    </mat-form-field>\n    <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n      <mat-label>Lastname</mat-label>\n      <input matInput [(ngModel)]=\"offer().lastName\" />\n    </mat-form-field>\n  </div>\n  <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n    <mat-label>Email</mat-label>\n    <input matInput [(ngModel)]=\"offer().email\" />\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n    <mat-label>Phone</mat-label>\n    <input matInput [(ngModel)]=\"offer().phone\" />\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n    <mat-label>Offer Price</mat-label>\n    <input matInput [(ngModel)]=\"offer().price\" />\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n    <mat-label i18n>Move-in date</mat-label>\n    <!-- [max]=\"maxDate\" -->\n    <input\n      matInput\n      placeholder=\"Move-in date\"\n      [min]=\"minDate\"\n      [matDatepicker]=\"startDatePicker\"\n      (focus)=\"startDatePicker.open()\"\n      [(ngModel)]=\"offer().startDate\"\n      (dateInput)=\"offer().startDate = $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</div>\n", styles: ["mat-form-field{width:100%}\n"] }]
+                        { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$a },
+                    ], template: "<div class=\"flex flex-col gap-2\">\n  <div class=\"flex justify-between gap-3\">\n    <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n      <mat-label>Firstname</mat-label>\n      <input matInput [(ngModel)]=\"offer().firstName\" />\n    </mat-form-field>\n    <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n      <mat-label>Lastname</mat-label>\n      <input matInput [(ngModel)]=\"offer().lastName\" />\n    </mat-form-field>\n  </div>\n  <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n    <mat-label>Email</mat-label>\n    <input matInput [(ngModel)]=\"offer().email\" />\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n    <mat-label>Phone</mat-label>\n    <input matInput [(ngModel)]=\"offer().phone\" />\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n    <mat-label>Offer amount</mat-label>\n    <input matInput [(ngModel)]=\"offer().amount\" />\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n    <mat-label i18n>Move-in date</mat-label>\n    <!-- [max]=\"maxDate\" -->\n    <input\n      matInput\n      placeholder=\"Move-in date\"\n      [min]=\"minDate\"\n      [matDatepicker]=\"startDatePicker\"\n      (focus)=\"startDatePicker.open()\"\n      [(ngModel)]=\"offer().startDate\"\n      (dateInput)=\"offer().startDate = $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</div>\n", styles: ["mat-form-field{width:100%}\n"] }]
         }], propDecorators: { offer: [{ type: i0.Input, args: [{ isSignal: true, alias: "offer", required: true }] }, { type: i0.Output, args: ["offerChange"] }], output: [{ type: i0.Output, args: ["output"] }] } });
 
 class PropertyManageOfferDetailComponent extends BaseComponent {
@@ -1206,6 +1210,8 @@ class PropertyManageOfferDetailComponent extends BaseComponent {
     status = PropertyOfferStatus;
     employmentStatus = EmploymentStatus;
     agent;
+    isRental = computed(() => this.offer.type.toString() === 'RENTAL', ...(ngDevMode ? [{ debugName: "isRental" }] : []));
+    isSale = computed(() => this.offer.type.toString() === 'SALE', ...(ngDevMode ? [{ debugName: "isSale" }] : []));
     ngOnInit() {
         this.getOffer();
     }
@@ -1214,7 +1220,7 @@ class PropertyManageOfferDetailComponent extends BaseComponent {
             next: (res) => {
                 this.offer = res.data;
                 this.invoiceOptionDraft.set(res.data.invoiceOption);
-                this.name = this.offer.firstName + ', ' + this.offer.lastName;
+                // this.name = this.offer.firstName + ', ' + this.offer.lastName;
                 this.getProperty(this.offer.propertyId);
             },
         });
@@ -1406,7 +1412,7 @@ class PropertyManageOfferDetailComponent extends BaseComponent {
                         lastName: res.lastName,
                         email: res.email,
                         phone: res.phone,
-                        price: res.price,
+                        amount: res.amount,
                         moveInDate: res.startDate,
                     };
                     this.propertyOfferService.updateOffer(this.id, data).subscribe({
@@ -1433,7 +1439,7 @@ class PropertyManageOfferDetailComponent extends BaseComponent {
     emailApplicant(email) { }
     callApplicant(phone) { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyManageOfferDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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    <div class=\"hidden md:flex gap-2\">\n      @if (offer.status.toString() === 'SUBMITTED') {\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        <button mat-button (click)=\"edit()\" i18n>Edit</button>\n      }\n      <!-- References -->\n      @if (offer.status.toString() === 'HOLDING_DEPOSIT_PAID') {\n        <button mat-flat-button (click)=\"underOffer()\" i18n>Under offer</button>\n      }\n      @if (offer.status.toString() === 'UNDER_OFFER') {\n        <button mat-flat-button (click)=\"rfPassed()\" i18n>References passed</button>\n        <button mat-flat-button (click)=\"rfFailed()\" i18n>References failed</button>\n      }\n      <!-- Completed -->\n      @if (offer.status.toString() === 'MOVE_IN_PAYMENT_PAID') {\n        <button mat-flat-button (click)=\"completed()\" i18n>Completed</button>\n      }\n    </div>\n    <div class=\"block md:hidden\">\n      <button mat-icon-button [matMenuTriggerFor]=\"moreMenu\">\n        <mat-icon>more_vert</mat-icon>\n      </button>\n    </div>\n  </rolatech-toolbar>\n\n  <div class=\"grid gap-4 lg:grid-cols-12 p-4\">\n    <!-- Main column -->\n    <div class=\"lg:col-span-8 space-y-4\">\n      <!-- Summary card -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between gap-3\">\n          <div>\n            <div class=\"text-sm font-semibold\">Offer summary</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Key details for pricing, move-in, and terms.</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 grid gap-3 sm:grid-cols-2\">\n          <div class=\"rounded-xl border border-[--rt-border-color] p-3\">\n            <div class=\"text-xs text-[--rt-text-secondary]\">Offer price</div>\n            <div class=\"mt-1 text-lg font-semibold\">\n              {{ offer.price | price }}\n              <span class=\"text-sm font-medium text-[--rt-text-secondary]\">pcm</span>\n            </div>\n          </div>\n\n          <div class=\"rounded-xl border border-[--rt-border-color] p-3\">\n            <div class=\"text-xs text-[--rt-text-secondary]\">Move-in date</div>\n            <div class=\"mt-1 text-lg font-semibold\">{{ offer.startDate | date: 'mediumDate' }}</div>\n          </div>\n\n          <div class=\"rounded-xl border border-[--rt-border-color] p-3\">\n            <div class=\"text-xs text-[--rt-text-secondary]\">Tenancy term</div>\n            <div class=\"mt-1 text-lg font-semibold\">\n              {{ offer.tenancyDuration }} <span class=\"text-sm font-medium text-[--rt-text-secondary]\">months</span>\n            </div>\n          </div>\n          <div class=\"rounded-xl border border-[--rt-border-color] p-3\">\n            <div class=\"text-xs text-[--rt-text-secondary]\">Number of tenants</div>\n            <div class=\"mt-1 text-lg font-semibold\">\n              {{ offer.numberOfTenants }} <span class=\"text-sm font-medium text-[--rt-text-secondary]\"></span>\n            </div>\n          </div>\n          <div class=\"rounded-xl border border-[--rt-border-color] p-3\">\n            <div class=\"text-xs text-[--rt-text-secondary]\">Employment status</div>\n            <div class=\"mt-1 text-lg font-semibold\">\n              {{ offer.employmentStatus }} <span class=\"text-sm font-medium text-[--rt-text-secondary]\"></span>\n            </div>\n          </div>\n        </div>\n      </section>\n      <!-- Move-in billing -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between gap-3\">\n          <div>\n            <div class=\"text-sm font-semibold\">Move-in billing</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">\n              Choose whether Security Deposit and First Rent are combined or separate invoices.\n            </div>\n          </div>\n\n          <button mat-flat-button type=\"button\" (click)=\"saveInvoiceOption(offer.id)\">Save</button>\n        </div>\n\n        <div class=\"mt-4 rounded-xl border border-[--rt-border-color] bg-[--rt-surface-2] p-3\">\n          <mat-radio-group class=\"block\" [value]=\"offer.invoiceOption\" (change)=\"setInvoiceOption($event.value)\">\n            <div class=\"grid gap-2 sm:grid-cols-2\">\n              <!-- Combined -->\n              <div\n                class=\"rounded-xl border border-[--rt-border-color] bg-[--rt-base-background] p-3 hover:border-[--rt-border-color] transition\"\n              >\n                <div class=\"flex items-start gap-3\">\n                  <mat-radio-button value=\"COMBINED\"></mat-radio-button>\n                  <div class=\"min-w-0\">\n                    <div class=\"text-sm font-semibold\">Combined</div>\n                    <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">\n                      One invoice with 2 lines: Security deposit + First rent.\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Separate -->\n              <div\n                class=\"rounded-xl border border-[--rt-border-color] bg-[--rt-base-background] p-3 hover:border-[--rt-border-color] transition\"\n              >\n                <div class=\"flex items-start gap-3\">\n                  <mat-radio-button value=\"SEPARATE\"></mat-radio-button>\n                  <div class=\"min-w-0\">\n                    <div class=\"text-sm font-semibold\">Separate</div>\n                    <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">\n                      Two invoices: Security deposit invoice, then First rent invoice.\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </mat-radio-group>\n        </div>\n      </section>\n      <!-- Property card -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between gap-3\">\n          <div>\n            <div class=\"text-sm font-semibold\">Property</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Offer property snapshot.</div>\n          </div>\n        </div>\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.title }}</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\">{{ offer.item.amount | price }}</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </section>\n    </div>\n\n    <!-- Right rail -->\n    <div class=\"lg:col-span-4 space-y-4\">\n      <!-- Offer user card -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between\">\n          <div>\n            <div class=\"text-sm font-semibold\">Applicant</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Contact and identity details.</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 flex items-center gap-3\">\n          <div class=\"h-10 w-10 overflow-hidden rounded-full border bg-[--rt-surface-2]\"></div>\n\n          <div class=\"min-w-0 flex-1\">\n            <div class=\"truncate text-sm font-semibold\">{{ name }}</div>\n            <div class=\"truncate text-xs text-[--rt-text-secondary]\">User ID: {{ offer.userId }}</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 space-y-2\">\n          @if (offer.email) {\n            <div class=\"flex items-center gap-2 text-sm\">\n              <mat-icon class=\"!text-base text-[--rt-text-secondary]\">mail</mat-icon>\n              <span class=\"truncate\">{{ offer.email }}</span>\n            </div>\n          }\n          @if (offer.phone) {\n            <div class=\"flex items-center gap-2 text-sm\">\n              <mat-icon class=\"!text-base text-[--rt-text-secondary]\">call</mat-icon>\n              <span class=\"truncate\">{{ offer.phone }}</span>\n            </div>\n          }\n        </div>\n\n        <div class=\"mt-4 grid grid-cols-2 gap-2\">\n          <button mat-stroked-button type=\"button\" [disabled]=\"!offer.email\" (click)=\"emailApplicant(offer.email!)\">\n            Email\n          </button>\n          <button mat-stroked-button type=\"button\" [disabled]=\"!offer.phone\" (click)=\"callApplicant(offer.phone!)\">Call</button>\n        </div>\n      </section>\n      <!-- Offer viewing agent -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between\">\n          <div>\n            <div class=\"text-sm font-semibold\">Agent</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Contact and identity details.</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 flex items-center gap-3\">\n          <div class=\"h-10 w-10 overflow-hidden rounded-full border bg-[--rt-surface-2]\"></div>\n\n          <div class=\"min-w-0 flex-1\">\n            <div class=\"truncate text-sm font-semibold\">{{ name }}</div>\n            <div class=\"truncate text-xs text-[--rt-text-secondary]\">Agent ID: {{ offer.agentId }}</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 space-y-2\">\n          @if (offer.email) {\n            <div class=\"flex items-center gap-2 text-sm\">\n              <mat-icon class=\"!text-base text-[--rt-text-secondary]\">mail</mat-icon>\n              <span class=\"truncate\">{{ offer.email }}</span>\n            </div>\n          }\n          @if (agent) {\n            <div class=\"flex items-center gap-2 text-sm\">\n              <mat-icon class=\"!text-base text-[--rt-text-secondary]\">call</mat-icon>\n              <span class=\"truncate\">{{ agent.phone }}</span>\n            </div>\n          }\n        </div>\n\n        <div class=\"mt-4 grid grid-cols-2 gap-2\">\n          <button mat-stroked-button type=\"button\" [disabled]=\"!offer.email\" (click)=\"emailApplicant(offer.email!)\">\n            Email\n          </button>\n          <button mat-stroked-button type=\"button\" [disabled]=\"!offer.phone\" (click)=\"callApplicant(offer.phone!)\">Call</button>\n        </div>\n      </section>\n\n      <!-- Quick actions card (optional) -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"text-sm font-semibold\">Quick actions</div>\n        <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Common operations for this offer.</div>\n        <div class=\"mt-4 space-y-2\">\n          @if (offer.status.toString() === 'SUBMITTED') {\n            <button mat-flat-button type=\"button\" class=\"w-full\" (click)=\"accept()\">Accept</button>\n            <button mat-stroked-button type=\"button\" class=\"w-full\" (click)=\"counter()\">Counter</button>\n            <button mat-stroked-button type=\"button\" class=\"w-full\" (click)=\"reject()\">Reject</button>\n          }\n          @if (offer.status.toString() === 'UNDER_OFFER') {\n            <button mat-flat-button (click)=\"rfPassed()\" class=\"w-full\">References passed</button>\n            <button mat-stroked-button (click)=\"rfFailed()\" class=\"w-full\">References failed</button>\n          }\n        </div>\n      </section>\n    </div>\n  </div>\n\n  <mat-menu #moreMenu=\"matMenu\" xPosition=\"after\" class=\"divide-y divide-light-900\">\n    @if (offer.status.toString() === 'SUBMITTED') {\n      <button mat-menu-item (click)=\"accept()\" i18n>Accept</button>\n      <button mat-menu-item (click)=\"counter()\" i18n>Counter offer</button>\n      <button mat-menu-item (click)=\"reject()\" i18n>Reject</button>\n    }\n    <!-- References -->\n    @if (offer.status.toString() === 'UNDER_OFFER') {\n      <button mat-menu-item (click)=\"rfPassed()\" i18n>References passed</button>\n      <button mat-menu-item (click)=\"rfFailed()\" i18n>References failed</button>\n    }\n    <button mat-menu-item (click)=\"edit()\">Edit</button>\n  </mat-menu>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: 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: MatRadioModule }, { kind: "directive", type: i3$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$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: "ngmodule", type: FormsModule }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: PricePipe, name: "price" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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    <div class=\"hidden md:flex gap-2\">\n      @if (offer.status.toString() === 'SUBMITTED') {\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        <button mat-button (click)=\"edit()\" i18n>Edit</button>\n      }\n      <!-- References -->\n      @if (offer.status.toString() === 'HOLDING_DEPOSIT_PAID') {\n        <button mat-flat-button (click)=\"underOffer()\" i18n>Under offer</button>\n      }\n      @if (offer.status.toString() === 'UNDER_OFFER') {\n        <button mat-flat-button (click)=\"rfPassed()\" i18n>References passed</button>\n        <button mat-flat-button (click)=\"rfFailed()\" i18n>References failed</button>\n      }\n      <!-- Completed -->\n      @if (offer.status.toString() === 'MOVE_IN_PAYMENT_PAID') {\n        <button mat-flat-button (click)=\"completed()\" i18n>Completed</button>\n      }\n    </div>\n    <div class=\"block md:hidden\">\n      <button mat-icon-button [matMenuTriggerFor]=\"moreMenu\">\n        <mat-icon>more_vert</mat-icon>\n      </button>\n    </div>\n  </rolatech-toolbar>\n\n  <div class=\"grid gap-4 lg:grid-cols-12 p-4\">\n    <!-- Main column -->\n    <div class=\"lg:col-span-8 space-y-4\">\n      <!-- Summary card -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between gap-3\">\n          <div>\n            <div class=\"text-sm font-semibold\">Offer summary</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Key details for pricing, move-in, and terms.</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 grid gap-3 sm:grid-cols-2\">\n          <div class=\"rounded-xl border border-[--rt-border-color] p-3\">\n            <div class=\"text-xs text-[--rt-text-secondary]\">Offer amount</div>\n            <div class=\"mt-1 text-lg font-semibold\">\n              {{ offer.rentalTerms?.amount | price }}\n              <span class=\"text-sm font-medium text-[--rt-text-secondary]\">pcm</span>\n            </div>\n          </div>\n\n          <div class=\"rounded-xl border border-[--rt-border-color] p-3\">\n            <div class=\"text-xs text-[--rt-text-secondary]\">Move-in date</div>\n            <div class=\"mt-1 text-lg font-semibold\">{{ offer.rentalTerms?.moveInDate | date: 'mediumDate' }}</div>\n          </div>\n\n          <div class=\"rounded-xl border border-[--rt-border-color] p-3\">\n            <div class=\"text-xs text-[--rt-text-secondary]\">Tenancy term</div>\n            <div class=\"mt-1 text-lg font-semibold\">\n              {{ offer.rentalTerms?.tenancyLengthMonths }}\n              <span class=\"text-sm font-medium text-[--rt-text-secondary]\">months</span>\n            </div>\n          </div>\n          <div class=\"rounded-xl border border-[--rt-border-color] p-3\">\n            <div class=\"text-xs text-[--rt-text-secondary]\">Number of tenants</div>\n            <div class=\"mt-1 text-lg font-semibold\">\n              {{ offer.tenants?.length }} <span class=\"text-sm font-medium text-[--rt-text-secondary]\"></span>\n            </div>\n          </div>\n          <div class=\"rounded-xl border border-[--rt-border-color] p-3\">\n            <div class=\"text-xs text-[--rt-text-secondary]\">Employment status</div>\n            <div class=\"mt-1 text-lg font-semibold\">\n              {{ offer.tenants }} <span class=\"text-sm font-medium text-[--rt-text-secondary]\"></span>\n            </div>\n          </div>\n        </div>\n      </section>\n      <!-- Move-in billing -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between gap-3\">\n          <div>\n            <div class=\"text-sm font-semibold\">Move-in billing</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">\n              Choose whether Security Deposit and First Rent are combined or separate invoices.\n            </div>\n          </div>\n\n          <button mat-flat-button type=\"button\" (click)=\"saveInvoiceOption(offer.id)\">Save</button>\n        </div>\n\n        <div class=\"mt-4 rounded-xl border border-[--rt-border-color] bg-[--rt-surface-2] p-3\">\n          <mat-radio-group class=\"block\" [value]=\"offer.invoiceOption\" (change)=\"setInvoiceOption($event.value)\">\n            <div class=\"grid gap-2 sm:grid-cols-2\">\n              <!-- Combined -->\n              <div\n                class=\"rounded-xl border border-[--rt-border-color] bg-[--rt-base-background] p-3 hover:border-[--rt-border-color] transition\"\n              >\n                <div class=\"flex items-start gap-3\">\n                  <mat-radio-button value=\"COMBINED\"></mat-radio-button>\n                  <div class=\"min-w-0\">\n                    <div class=\"text-sm font-semibold\">Combined</div>\n                    <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">\n                      One invoice with 2 lines: Security deposit + First rent.\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Separate -->\n              <div\n                class=\"rounded-xl border border-[--rt-border-color] bg-[--rt-base-background] p-3 hover:border-[--rt-border-color] transition\"\n              >\n                <div class=\"flex items-start gap-3\">\n                  <mat-radio-button value=\"SEPARATE\"></mat-radio-button>\n                  <div class=\"min-w-0\">\n                    <div class=\"text-sm font-semibold\">Separate</div>\n                    <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">\n                      Two invoices: Security deposit invoice, then First rent invoice.\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </mat-radio-group>\n        </div>\n      </section>\n      <!-- Property card -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between gap-3\">\n          <div>\n            <div class=\"text-sm font-semibold\">Property</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Offer property snapshot.</div>\n          </div>\n        </div>\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.title }}</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\">{{ offer.item.amount | price }}</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </section>\n    </div>\n\n    <!-- Right rail -->\n    <div class=\"lg:col-span-4 space-y-4\">\n      <!-- Offer user card -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between\">\n          <div>\n            <div class=\"text-sm font-semibold\">Applicant</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Contact and identity details.</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 flex items-center gap-3\">\n          <div class=\"h-10 w-10 overflow-hidden rounded-full border bg-[--rt-surface-2]\"></div>\n\n          <div class=\"min-w-0 flex-1\">\n            <div class=\"truncate text-sm font-semibold\">{{ name }}</div>\n            <div class=\"truncate text-xs text-[--rt-text-secondary]\">User ID: {{ offer.id }}</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 space-y-2\">\n          @if (offer.id) {\n            <div class=\"flex items-center gap-2 text-sm\">\n              <mat-icon class=\"!text-base text-[--rt-text-secondary]\">mail</mat-icon>\n              <span class=\"truncate\">{{ offer.id }}</span>\n            </div>\n          }\n          @if (offer.id) {\n            <div class=\"flex items-center gap-2 text-sm\">\n              <mat-icon class=\"!text-base text-[--rt-text-secondary]\">call</mat-icon>\n              <span class=\"truncate\">{{ offer.id }}</span>\n            </div>\n          }\n        </div>\n\n        <div class=\"mt-4 grid grid-cols-2 gap-2\">\n          <button mat-stroked-button type=\"button\" [disabled]=\"!offer.id\" (click)=\"emailApplicant(offer.id!)\">Email</button>\n          <button mat-stroked-button type=\"button\" [disabled]=\"!offer.id\" (click)=\"callApplicant(offer.id!)\">Call</button>\n        </div>\n      </section>\n      <!-- Offer viewing agent -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between\">\n          <div>\n            <div class=\"text-sm font-semibold\">Agent</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Contact and identity details.</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 flex items-center gap-3\">\n          <div class=\"h-10 w-10 overflow-hidden rounded-full border bg-[--rt-surface-2]\"></div>\n\n          <div class=\"min-w-0 flex-1\">\n            <div class=\"truncate text-sm font-semibold\">{{ name }}</div>\n            <div class=\"truncate text-xs text-[--rt-text-secondary]\">Agent ID: {{ offer.agentId }}</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 space-y-2\">\n          @if (offer.id) {\n            <div class=\"flex items-center gap-2 text-sm\">\n              <mat-icon class=\"!text-base text-[--rt-text-secondary]\">mail</mat-icon>\n              <span class=\"truncate\">{{ offer.id }}</span>\n            </div>\n          }\n          @if (agent) {\n            <div class=\"flex items-center gap-2 text-sm\">\n              <mat-icon class=\"!text-base text-[--rt-text-secondary]\">call</mat-icon>\n              <span class=\"truncate\">{{ agent.phone }}</span>\n            </div>\n          }\n        </div>\n\n        <div class=\"mt-4 grid grid-cols-2 gap-2\">\n          <button mat-stroked-button type=\"button\" [disabled]=\"!offer.id\" (click)=\"emailApplicant(offer.id!)\">Email</button>\n          <button mat-stroked-button type=\"button\" [disabled]=\"!offer.id\" (click)=\"callApplicant(offer.id!)\">Call</button>\n        </div>\n      </section>\n\n      <!-- Quick actions card (optional) -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"text-sm font-semibold\">Quick actions</div>\n        <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Common operations for this offer.</div>\n        <div class=\"mt-4 space-y-2\">\n          @if (offer.status.toString() === 'SUBMITTED') {\n            <button mat-flat-button type=\"button\" class=\"w-full\" (click)=\"accept()\">Accept</button>\n            <button mat-stroked-button type=\"button\" class=\"w-full\" (click)=\"counter()\">Counter</button>\n            <button mat-stroked-button type=\"button\" class=\"w-full\" (click)=\"reject()\">Reject</button>\n          }\n          @if (offer.status.toString() === 'UNDER_OFFER') {\n            <button mat-flat-button (click)=\"rfPassed()\" class=\"w-full\">References passed</button>\n            <button mat-stroked-button (click)=\"rfFailed()\" class=\"w-full\">References failed</button>\n          }\n        </div>\n      </section>\n    </div>\n  </div>\n\n  <mat-menu #moreMenu=\"matMenu\" xPosition=\"after\" class=\"divide-y divide-light-900\">\n    @if (offer.status.toString() === 'SUBMITTED') {\n      <button mat-menu-item (click)=\"accept()\" i18n>Accept</button>\n      <button mat-menu-item (click)=\"counter()\" i18n>Counter offer</button>\n      <button mat-menu-item (click)=\"reject()\" i18n>Reject</button>\n    }\n    <!-- References -->\n    @if (offer.status.toString() === 'UNDER_OFFER') {\n      <button mat-menu-item (click)=\"rfPassed()\" i18n>References passed</button>\n      <button mat-menu-item (click)=\"rfFailed()\" i18n>References failed</button>\n    }\n    <button mat-menu-item (click)=\"edit()\">Edit</button>\n  </mat-menu>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.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$3.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: MatMenuModule }, { kind: "component", type: i4$1.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$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.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: MatRadioModule }, { kind: "directive", type: i3$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$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: "ngmodule", type: FormsModule }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: PricePipe, name: "price" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyManageOfferDetailComponent, decorators: [{
             type: Component,
@@ -1447,7 +1453,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         PricePipe,
                         MatRadioModule,
                         FormsModule,
-                    ], template: "@if (offer) {\n  <rolatech-toolbar [title]=\"status[offer.status]\" large link=\"../\">\n    <div class=\"hidden md:flex gap-2\">\n      @if (offer.status.toString() === 'SUBMITTED') {\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        <button mat-button (click)=\"edit()\" i18n>Edit</button>\n      }\n      <!-- References -->\n      @if (offer.status.toString() === 'HOLDING_DEPOSIT_PAID') {\n        <button mat-flat-button (click)=\"underOffer()\" i18n>Under offer</button>\n      }\n      @if (offer.status.toString() === 'UNDER_OFFER') {\n        <button mat-flat-button (click)=\"rfPassed()\" i18n>References passed</button>\n        <button mat-flat-button (click)=\"rfFailed()\" i18n>References failed</button>\n      }\n      <!-- Completed -->\n      @if (offer.status.toString() === 'MOVE_IN_PAYMENT_PAID') {\n        <button mat-flat-button (click)=\"completed()\" i18n>Completed</button>\n      }\n    </div>\n    <div class=\"block md:hidden\">\n      <button mat-icon-button [matMenuTriggerFor]=\"moreMenu\">\n        <mat-icon>more_vert</mat-icon>\n      </button>\n    </div>\n  </rolatech-toolbar>\n\n  <div class=\"grid gap-4 lg:grid-cols-12 p-4\">\n    <!-- Main column -->\n    <div class=\"lg:col-span-8 space-y-4\">\n      <!-- Summary card -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between gap-3\">\n          <div>\n            <div class=\"text-sm font-semibold\">Offer summary</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Key details for pricing, move-in, and terms.</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 grid gap-3 sm:grid-cols-2\">\n          <div class=\"rounded-xl border border-[--rt-border-color] p-3\">\n            <div class=\"text-xs text-[--rt-text-secondary]\">Offer price</div>\n            <div class=\"mt-1 text-lg font-semibold\">\n              {{ offer.price | price }}\n              <span class=\"text-sm font-medium text-[--rt-text-secondary]\">pcm</span>\n            </div>\n          </div>\n\n          <div class=\"rounded-xl border border-[--rt-border-color] p-3\">\n            <div class=\"text-xs text-[--rt-text-secondary]\">Move-in date</div>\n            <div class=\"mt-1 text-lg font-semibold\">{{ offer.startDate | date: 'mediumDate' }}</div>\n          </div>\n\n          <div class=\"rounded-xl border border-[--rt-border-color] p-3\">\n            <div class=\"text-xs text-[--rt-text-secondary]\">Tenancy term</div>\n            <div class=\"mt-1 text-lg font-semibold\">\n              {{ offer.tenancyDuration }} <span class=\"text-sm font-medium text-[--rt-text-secondary]\">months</span>\n            </div>\n          </div>\n          <div class=\"rounded-xl border border-[--rt-border-color] p-3\">\n            <div class=\"text-xs text-[--rt-text-secondary]\">Number of tenants</div>\n            <div class=\"mt-1 text-lg font-semibold\">\n              {{ offer.numberOfTenants }} <span class=\"text-sm font-medium text-[--rt-text-secondary]\"></span>\n            </div>\n          </div>\n          <div class=\"rounded-xl border border-[--rt-border-color] p-3\">\n            <div class=\"text-xs text-[--rt-text-secondary]\">Employment status</div>\n            <div class=\"mt-1 text-lg font-semibold\">\n              {{ offer.employmentStatus }} <span class=\"text-sm font-medium text-[--rt-text-secondary]\"></span>\n            </div>\n          </div>\n        </div>\n      </section>\n      <!-- Move-in billing -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between gap-3\">\n          <div>\n            <div class=\"text-sm font-semibold\">Move-in billing</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">\n              Choose whether Security Deposit and First Rent are combined or separate invoices.\n            </div>\n          </div>\n\n          <button mat-flat-button type=\"button\" (click)=\"saveInvoiceOption(offer.id)\">Save</button>\n        </div>\n\n        <div class=\"mt-4 rounded-xl border border-[--rt-border-color] bg-[--rt-surface-2] p-3\">\n          <mat-radio-group class=\"block\" [value]=\"offer.invoiceOption\" (change)=\"setInvoiceOption($event.value)\">\n            <div class=\"grid gap-2 sm:grid-cols-2\">\n              <!-- Combined -->\n              <div\n                class=\"rounded-xl border border-[--rt-border-color] bg-[--rt-base-background] p-3 hover:border-[--rt-border-color] transition\"\n              >\n                <div class=\"flex items-start gap-3\">\n                  <mat-radio-button value=\"COMBINED\"></mat-radio-button>\n                  <div class=\"min-w-0\">\n                    <div class=\"text-sm font-semibold\">Combined</div>\n                    <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">\n                      One invoice with 2 lines: Security deposit + First rent.\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Separate -->\n              <div\n                class=\"rounded-xl border border-[--rt-border-color] bg-[--rt-base-background] p-3 hover:border-[--rt-border-color] transition\"\n              >\n                <div class=\"flex items-start gap-3\">\n                  <mat-radio-button value=\"SEPARATE\"></mat-radio-button>\n                  <div class=\"min-w-0\">\n                    <div class=\"text-sm font-semibold\">Separate</div>\n                    <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">\n                      Two invoices: Security deposit invoice, then First rent invoice.\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </mat-radio-group>\n        </div>\n      </section>\n      <!-- Property card -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between gap-3\">\n          <div>\n            <div class=\"text-sm font-semibold\">Property</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Offer property snapshot.</div>\n          </div>\n        </div>\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.title }}</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\">{{ offer.item.amount | price }}</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </section>\n    </div>\n\n    <!-- Right rail -->\n    <div class=\"lg:col-span-4 space-y-4\">\n      <!-- Offer user card -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between\">\n          <div>\n            <div class=\"text-sm font-semibold\">Applicant</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Contact and identity details.</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 flex items-center gap-3\">\n          <div class=\"h-10 w-10 overflow-hidden rounded-full border bg-[--rt-surface-2]\"></div>\n\n          <div class=\"min-w-0 flex-1\">\n            <div class=\"truncate text-sm font-semibold\">{{ name }}</div>\n            <div class=\"truncate text-xs text-[--rt-text-secondary]\">User ID: {{ offer.userId }}</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 space-y-2\">\n          @if (offer.email) {\n            <div class=\"flex items-center gap-2 text-sm\">\n              <mat-icon class=\"!text-base text-[--rt-text-secondary]\">mail</mat-icon>\n              <span class=\"truncate\">{{ offer.email }}</span>\n            </div>\n          }\n          @if (offer.phone) {\n            <div class=\"flex items-center gap-2 text-sm\">\n              <mat-icon class=\"!text-base text-[--rt-text-secondary]\">call</mat-icon>\n              <span class=\"truncate\">{{ offer.phone }}</span>\n            </div>\n          }\n        </div>\n\n        <div class=\"mt-4 grid grid-cols-2 gap-2\">\n          <button mat-stroked-button type=\"button\" [disabled]=\"!offer.email\" (click)=\"emailApplicant(offer.email!)\">\n            Email\n          </button>\n          <button mat-stroked-button type=\"button\" [disabled]=\"!offer.phone\" (click)=\"callApplicant(offer.phone!)\">Call</button>\n        </div>\n      </section>\n      <!-- Offer viewing agent -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between\">\n          <div>\n            <div class=\"text-sm font-semibold\">Agent</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Contact and identity details.</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 flex items-center gap-3\">\n          <div class=\"h-10 w-10 overflow-hidden rounded-full border bg-[--rt-surface-2]\"></div>\n\n          <div class=\"min-w-0 flex-1\">\n            <div class=\"truncate text-sm font-semibold\">{{ name }}</div>\n            <div class=\"truncate text-xs text-[--rt-text-secondary]\">Agent ID: {{ offer.agentId }}</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 space-y-2\">\n          @if (offer.email) {\n            <div class=\"flex items-center gap-2 text-sm\">\n              <mat-icon class=\"!text-base text-[--rt-text-secondary]\">mail</mat-icon>\n              <span class=\"truncate\">{{ offer.email }}</span>\n            </div>\n          }\n          @if (agent) {\n            <div class=\"flex items-center gap-2 text-sm\">\n              <mat-icon class=\"!text-base text-[--rt-text-secondary]\">call</mat-icon>\n              <span class=\"truncate\">{{ agent.phone }}</span>\n            </div>\n          }\n        </div>\n\n        <div class=\"mt-4 grid grid-cols-2 gap-2\">\n          <button mat-stroked-button type=\"button\" [disabled]=\"!offer.email\" (click)=\"emailApplicant(offer.email!)\">\n            Email\n          </button>\n          <button mat-stroked-button type=\"button\" [disabled]=\"!offer.phone\" (click)=\"callApplicant(offer.phone!)\">Call</button>\n        </div>\n      </section>\n\n      <!-- Quick actions card (optional) -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"text-sm font-semibold\">Quick actions</div>\n        <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Common operations for this offer.</div>\n        <div class=\"mt-4 space-y-2\">\n          @if (offer.status.toString() === 'SUBMITTED') {\n            <button mat-flat-button type=\"button\" class=\"w-full\" (click)=\"accept()\">Accept</button>\n            <button mat-stroked-button type=\"button\" class=\"w-full\" (click)=\"counter()\">Counter</button>\n            <button mat-stroked-button type=\"button\" class=\"w-full\" (click)=\"reject()\">Reject</button>\n          }\n          @if (offer.status.toString() === 'UNDER_OFFER') {\n            <button mat-flat-button (click)=\"rfPassed()\" class=\"w-full\">References passed</button>\n            <button mat-stroked-button (click)=\"rfFailed()\" class=\"w-full\">References failed</button>\n          }\n        </div>\n      </section>\n    </div>\n  </div>\n\n  <mat-menu #moreMenu=\"matMenu\" xPosition=\"after\" class=\"divide-y divide-light-900\">\n    @if (offer.status.toString() === 'SUBMITTED') {\n      <button mat-menu-item (click)=\"accept()\" i18n>Accept</button>\n      <button mat-menu-item (click)=\"counter()\" i18n>Counter offer</button>\n      <button mat-menu-item (click)=\"reject()\" i18n>Reject</button>\n    }\n    <!-- References -->\n    @if (offer.status.toString() === 'UNDER_OFFER') {\n      <button mat-menu-item (click)=\"rfPassed()\" i18n>References passed</button>\n      <button mat-menu-item (click)=\"rfFailed()\" i18n>References failed</button>\n    }\n    <button mat-menu-item (click)=\"edit()\">Edit</button>\n  </mat-menu>\n}\n" }]
+                    ], template: "@if (offer) {\n  <rolatech-toolbar [title]=\"status[offer.status]\" large link=\"../\">\n    <div class=\"hidden md:flex gap-2\">\n      @if (offer.status.toString() === 'SUBMITTED') {\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        <button mat-button (click)=\"edit()\" i18n>Edit</button>\n      }\n      <!-- References -->\n      @if (offer.status.toString() === 'HOLDING_DEPOSIT_PAID') {\n        <button mat-flat-button (click)=\"underOffer()\" i18n>Under offer</button>\n      }\n      @if (offer.status.toString() === 'UNDER_OFFER') {\n        <button mat-flat-button (click)=\"rfPassed()\" i18n>References passed</button>\n        <button mat-flat-button (click)=\"rfFailed()\" i18n>References failed</button>\n      }\n      <!-- Completed -->\n      @if (offer.status.toString() === 'MOVE_IN_PAYMENT_PAID') {\n        <button mat-flat-button (click)=\"completed()\" i18n>Completed</button>\n      }\n    </div>\n    <div class=\"block md:hidden\">\n      <button mat-icon-button [matMenuTriggerFor]=\"moreMenu\">\n        <mat-icon>more_vert</mat-icon>\n      </button>\n    </div>\n  </rolatech-toolbar>\n\n  <div class=\"grid gap-4 lg:grid-cols-12 p-4\">\n    <!-- Main column -->\n    <div class=\"lg:col-span-8 space-y-4\">\n      <!-- Summary card -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between gap-3\">\n          <div>\n            <div class=\"text-sm font-semibold\">Offer summary</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Key details for pricing, move-in, and terms.</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 grid gap-3 sm:grid-cols-2\">\n          <div class=\"rounded-xl border border-[--rt-border-color] p-3\">\n            <div class=\"text-xs text-[--rt-text-secondary]\">Offer amount</div>\n            <div class=\"mt-1 text-lg font-semibold\">\n              {{ offer.rentalTerms?.amount | price }}\n              <span class=\"text-sm font-medium text-[--rt-text-secondary]\">pcm</span>\n            </div>\n          </div>\n\n          <div class=\"rounded-xl border border-[--rt-border-color] p-3\">\n            <div class=\"text-xs text-[--rt-text-secondary]\">Move-in date</div>\n            <div class=\"mt-1 text-lg font-semibold\">{{ offer.rentalTerms?.moveInDate | date: 'mediumDate' }}</div>\n          </div>\n\n          <div class=\"rounded-xl border border-[--rt-border-color] p-3\">\n            <div class=\"text-xs text-[--rt-text-secondary]\">Tenancy term</div>\n            <div class=\"mt-1 text-lg font-semibold\">\n              {{ offer.rentalTerms?.tenancyLengthMonths }}\n              <span class=\"text-sm font-medium text-[--rt-text-secondary]\">months</span>\n            </div>\n          </div>\n          <div class=\"rounded-xl border border-[--rt-border-color] p-3\">\n            <div class=\"text-xs text-[--rt-text-secondary]\">Number of tenants</div>\n            <div class=\"mt-1 text-lg font-semibold\">\n              {{ offer.tenants?.length }} <span class=\"text-sm font-medium text-[--rt-text-secondary]\"></span>\n            </div>\n          </div>\n          <div class=\"rounded-xl border border-[--rt-border-color] p-3\">\n            <div class=\"text-xs text-[--rt-text-secondary]\">Employment status</div>\n            <div class=\"mt-1 text-lg font-semibold\">\n              {{ offer.tenants }} <span class=\"text-sm font-medium text-[--rt-text-secondary]\"></span>\n            </div>\n          </div>\n        </div>\n      </section>\n      <!-- Move-in billing -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between gap-3\">\n          <div>\n            <div class=\"text-sm font-semibold\">Move-in billing</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">\n              Choose whether Security Deposit and First Rent are combined or separate invoices.\n            </div>\n          </div>\n\n          <button mat-flat-button type=\"button\" (click)=\"saveInvoiceOption(offer.id)\">Save</button>\n        </div>\n\n        <div class=\"mt-4 rounded-xl border border-[--rt-border-color] bg-[--rt-surface-2] p-3\">\n          <mat-radio-group class=\"block\" [value]=\"offer.invoiceOption\" (change)=\"setInvoiceOption($event.value)\">\n            <div class=\"grid gap-2 sm:grid-cols-2\">\n              <!-- Combined -->\n              <div\n                class=\"rounded-xl border border-[--rt-border-color] bg-[--rt-base-background] p-3 hover:border-[--rt-border-color] transition\"\n              >\n                <div class=\"flex items-start gap-3\">\n                  <mat-radio-button value=\"COMBINED\"></mat-radio-button>\n                  <div class=\"min-w-0\">\n                    <div class=\"text-sm font-semibold\">Combined</div>\n                    <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">\n                      One invoice with 2 lines: Security deposit + First rent.\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Separate -->\n              <div\n                class=\"rounded-xl border border-[--rt-border-color] bg-[--rt-base-background] p-3 hover:border-[--rt-border-color] transition\"\n              >\n                <div class=\"flex items-start gap-3\">\n                  <mat-radio-button value=\"SEPARATE\"></mat-radio-button>\n                  <div class=\"min-w-0\">\n                    <div class=\"text-sm font-semibold\">Separate</div>\n                    <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">\n                      Two invoices: Security deposit invoice, then First rent invoice.\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </mat-radio-group>\n        </div>\n      </section>\n      <!-- Property card -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between gap-3\">\n          <div>\n            <div class=\"text-sm font-semibold\">Property</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Offer property snapshot.</div>\n          </div>\n        </div>\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.title }}</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\">{{ offer.item.amount | price }}</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </section>\n    </div>\n\n    <!-- Right rail -->\n    <div class=\"lg:col-span-4 space-y-4\">\n      <!-- Offer user card -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between\">\n          <div>\n            <div class=\"text-sm font-semibold\">Applicant</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Contact and identity details.</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 flex items-center gap-3\">\n          <div class=\"h-10 w-10 overflow-hidden rounded-full border bg-[--rt-surface-2]\"></div>\n\n          <div class=\"min-w-0 flex-1\">\n            <div class=\"truncate text-sm font-semibold\">{{ name }}</div>\n            <div class=\"truncate text-xs text-[--rt-text-secondary]\">User ID: {{ offer.id }}</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 space-y-2\">\n          @if (offer.id) {\n            <div class=\"flex items-center gap-2 text-sm\">\n              <mat-icon class=\"!text-base text-[--rt-text-secondary]\">mail</mat-icon>\n              <span class=\"truncate\">{{ offer.id }}</span>\n            </div>\n          }\n          @if (offer.id) {\n            <div class=\"flex items-center gap-2 text-sm\">\n              <mat-icon class=\"!text-base text-[--rt-text-secondary]\">call</mat-icon>\n              <span class=\"truncate\">{{ offer.id }}</span>\n            </div>\n          }\n        </div>\n\n        <div class=\"mt-4 grid grid-cols-2 gap-2\">\n          <button mat-stroked-button type=\"button\" [disabled]=\"!offer.id\" (click)=\"emailApplicant(offer.id!)\">Email</button>\n          <button mat-stroked-button type=\"button\" [disabled]=\"!offer.id\" (click)=\"callApplicant(offer.id!)\">Call</button>\n        </div>\n      </section>\n      <!-- Offer viewing agent -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between\">\n          <div>\n            <div class=\"text-sm font-semibold\">Agent</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Contact and identity details.</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 flex items-center gap-3\">\n          <div class=\"h-10 w-10 overflow-hidden rounded-full border bg-[--rt-surface-2]\"></div>\n\n          <div class=\"min-w-0 flex-1\">\n            <div class=\"truncate text-sm font-semibold\">{{ name }}</div>\n            <div class=\"truncate text-xs text-[--rt-text-secondary]\">Agent ID: {{ offer.agentId }}</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 space-y-2\">\n          @if (offer.id) {\n            <div class=\"flex items-center gap-2 text-sm\">\n              <mat-icon class=\"!text-base text-[--rt-text-secondary]\">mail</mat-icon>\n              <span class=\"truncate\">{{ offer.id }}</span>\n            </div>\n          }\n          @if (agent) {\n            <div class=\"flex items-center gap-2 text-sm\">\n              <mat-icon class=\"!text-base text-[--rt-text-secondary]\">call</mat-icon>\n              <span class=\"truncate\">{{ agent.phone }}</span>\n            </div>\n          }\n        </div>\n\n        <div class=\"mt-4 grid grid-cols-2 gap-2\">\n          <button mat-stroked-button type=\"button\" [disabled]=\"!offer.id\" (click)=\"emailApplicant(offer.id!)\">Email</button>\n          <button mat-stroked-button type=\"button\" [disabled]=\"!offer.id\" (click)=\"callApplicant(offer.id!)\">Call</button>\n        </div>\n      </section>\n\n      <!-- Quick actions card (optional) -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"text-sm font-semibold\">Quick actions</div>\n        <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Common operations for this offer.</div>\n        <div class=\"mt-4 space-y-2\">\n          @if (offer.status.toString() === 'SUBMITTED') {\n            <button mat-flat-button type=\"button\" class=\"w-full\" (click)=\"accept()\">Accept</button>\n            <button mat-stroked-button type=\"button\" class=\"w-full\" (click)=\"counter()\">Counter</button>\n            <button mat-stroked-button type=\"button\" class=\"w-full\" (click)=\"reject()\">Reject</button>\n          }\n          @if (offer.status.toString() === 'UNDER_OFFER') {\n            <button mat-flat-button (click)=\"rfPassed()\" class=\"w-full\">References passed</button>\n            <button mat-stroked-button (click)=\"rfFailed()\" class=\"w-full\">References failed</button>\n          }\n        </div>\n      </section>\n    </div>\n  </div>\n\n  <mat-menu #moreMenu=\"matMenu\" xPosition=\"after\" class=\"divide-y divide-light-900\">\n    @if (offer.status.toString() === 'SUBMITTED') {\n      <button mat-menu-item (click)=\"accept()\" i18n>Accept</button>\n      <button mat-menu-item (click)=\"counter()\" i18n>Counter offer</button>\n      <button mat-menu-item (click)=\"reject()\" i18n>Reject</button>\n    }\n    <!-- References -->\n    @if (offer.status.toString() === 'UNDER_OFFER') {\n      <button mat-menu-item (click)=\"rfPassed()\" i18n>References passed</button>\n      <button mat-menu-item (click)=\"rfFailed()\" i18n>References failed</button>\n    }\n    <button mat-menu-item (click)=\"edit()\">Edit</button>\n  </mat-menu>\n}\n" }]
         }] });
 
 const propertyManageOffersRoutes = [
@@ -1478,7 +1484,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }] });
 
-const MY_FORMATS$6 = {
+const MY_FORMATS$9 = {
     parse: {
         dateInput: 'YYYY-MM-DD',
     },
@@ -1510,7 +1516,7 @@ class PropertyFilterBar {
         return this.bedroomOptions.filter((o) => o.value !== '0');
     }, ...(ngDevMode ? [{ debugName: "maxBedRoom" }] : []));
     towns = ['London'];
-    market = ['Sales', 'Lettings'];
+    market = ['Sale', 'Rental'];
     types = PropertyType;
     options = model({
         market: '',
@@ -1594,8 +1600,8 @@ class PropertyFilterBar {
                 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/4\">\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/4\">\n        <div class=\"py-1\">Type</div>\n        <div>\n          <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n            <mat-select #select=\"matSelect\" placeholder=\"Type\" [(ngModel)]=\"options().type\">\n              @for (type of types | keyvalue; track type) {\n              <mat-option [value]=\"type.key\"> {{ type.value }} </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/4\">\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/4\">\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"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }], encapsulation: i0.ViewEncapsulation.None });
+            { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$9 },
+        ], 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/4\">\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/4\">\n        <div class=\"py-1\">Type</div>\n        <div>\n          <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n            <mat-select #select=\"matSelect\" placeholder=\"Type\" [(ngModel)]=\"options().type\">\n              @for (type of types | keyvalue; track type) {\n              <mat-option [value]=\"type.key\"> {{ type.value }} </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/4\">\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/4\">\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$3.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: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.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: i4.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: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyFilterBar, decorators: [{
             type: Component,
@@ -1614,7 +1620,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                             useClass: MomentDateAdapter,
                             deps: [MAT_DATE_LOCALE],
                         },
-                        { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$6 },
+                        { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$9 },
                     ], 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/4\">\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/4\">\n        <div class=\"py-1\">Type</div>\n        <div>\n          <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n            <mat-select #select=\"matSelect\" placeholder=\"Type\" [(ngModel)]=\"options().type\">\n              @for (type of types | keyvalue; track type) {\n              <mat-option [value]=\"type.key\"> {{ type.value }} </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/4\">\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/4\">\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: () => [], propDecorators: { search: [{ type: i0.Output, args: ["search"] }], reset: [{ type: i0.Output, args: ["reset"] }], show: [{ type: i0.Input, args: [{ isSignal: true, alias: "show", required: false }] }, { type: i0.Output, args: ["showChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }, { type: i0.Output, args: ["optionsChange"] }] } });
 
@@ -1663,7 +1669,6 @@ class PropertyLayoutComponent extends BaseComponent {
     }
     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.
@@ -1682,7 +1687,7 @@ class PropertyLayoutComponent extends BaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyLayoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", 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$3.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: "21.0.6", ngImport: i0, type: PropertyLayoutComponent, decorators: [{
             type: Component,
@@ -1707,7 +1712,7 @@ class PropertyActionsComponent {
         this.deposit.emit(property);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 {{ displayDeposit() | price }}</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 }, { kind: "pipe", type: PricePipe, name: "price" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 {{ displayDeposit() | price }}</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$3.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 }, { kind: "pipe", type: PricePipe, name: "price" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyActionsComponent, decorators: [{
             type: Component,
@@ -1783,11 +1788,11 @@ class PropertyPricingComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyPricingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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\">{{ displayPrice() | price }}</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>{{ holdingDeposit | price }}</span>\n    </div>\n    <div class=\"flex justify-between items-center font-bold\">\n      <span i18n>Security Deposit</span>\n      <span>{{ securityDeposit | price }}</span>\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "pipe", type: AvailableDatePipe, name: "availableDate" }, { kind: "pipe", type: PricePipe, name: "price" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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() === 'RENTAL' && rentFrequency() === 'MONTHLY') {\n      <div class=\"text-lg font-bold\" i18n>Rent per month</div>\n    }\n    @if (market() === 'RENTAL' && rentFrequency() === 'WEEKLY') {\n      <div class=\"text-lg font-bold\" i18n>Rent per week</div>\n    }\n    @if (market() === 'RENTAL' && rentFrequency() === 'NOT_SPECIFIED') {\n      <div class=\"text-lg font-bold\" i18n>Rent price</div>\n    }\n    @if (market() === 'SALE') {\n      <div class=\"text-lg font-bold\" i18n>Price</div>\n    }\n    <div class=\"text-xl font-bold\">{{ displayPrice() | price }}</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() === 'RENTAL') {\n    <div class=\"flex justify-between items-center\">\n      <span i18n>Holding Deposit</span>\n      <span>{{ holdingDeposit | price }}</span>\n    </div>\n    <div class=\"flex justify-between items-center font-bold\">\n      <span i18n>Security Deposit</span>\n      <span>{{ securityDeposit | price }}</span>\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "pipe", type: AvailableDatePipe, name: "availableDate" }, { kind: "pipe", type: PricePipe, name: "price" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyPricingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-property-pricing', imports: [CommonModule, MatButtonModule, AvailableDatePipe, PricePipe], 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\">{{ displayPrice() | price }}</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>{{ holdingDeposit | price }}</span>\n    </div>\n    <div class=\"flex justify-between items-center font-bold\">\n      <span i18n>Security Deposit</span>\n      <span>{{ securityDeposit | price }}</span>\n    </div>\n  }\n</div>\n" }]
+            args: [{ selector: 'rolatech-property-pricing', imports: [CommonModule, MatButtonModule, AvailableDatePipe, PricePipe], encapsulation: ViewEncapsulation.None, template: "<div class=\"py-3 flex flex-col gap-3\">\n  <div class=\"flex justify-between items-center\">\n    @if (market() === 'RENTAL' && rentFrequency() === 'MONTHLY') {\n      <div class=\"text-lg font-bold\" i18n>Rent per month</div>\n    }\n    @if (market() === 'RENTAL' && rentFrequency() === 'WEEKLY') {\n      <div class=\"text-lg font-bold\" i18n>Rent per week</div>\n    }\n    @if (market() === 'RENTAL' && rentFrequency() === 'NOT_SPECIFIED') {\n      <div class=\"text-lg font-bold\" i18n>Rent price</div>\n    }\n    @if (market() === 'SALE') {\n      <div class=\"text-lg font-bold\" i18n>Price</div>\n    }\n    <div class=\"text-xl font-bold\">{{ displayPrice() | price }}</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() === 'RENTAL') {\n    <div class=\"flex justify-between items-center\">\n      <span i18n>Holding Deposit</span>\n      <span>{{ holdingDeposit | price }}</span>\n    </div>\n    <div class=\"flex justify-between items-center font-bold\">\n      <span i18n>Security Deposit</span>\n      <span>{{ securityDeposit | price }}</span>\n    </div>\n  }\n</div>\n" }]
         }], propDecorators: { property: [{ type: i0.Input, args: [{ isSignal: true, alias: "property", required: true }] }], price: [{ type: i0.Input, args: [{ isSignal: true, alias: "price", required: false }] }] } });
 
 class PropertyInfoComponent extends Loading {
@@ -1801,13 +1806,13 @@ class PropertyInfoComponent extends Loading {
     onShare() { }
     onMore() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyInfoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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" } }, usesInheritance: true, ngImport: i0, template: "@if (loading()) {\n  <div>\n    <div class=\"flex justify-between items-start gap-3\">\n      <!-- title -->\n      <rolatech-skeleton class=\"w-[80%] h-8 mb-3\"></rolatech-skeleton>\n      <!-- action button -->\n      <rolatech-skeleton class=\"w-6 h-6\"></rolatech-skeleton>\n    </div>\n    <div class=\"font-bold mb-3\">\n      <!-- short info -->\n      <rolatech-skeleton class=\"w-[50%] h-6\"></rolatech-skeleton>\n    </div>\n    <!-- description -->\n    <rolatech-skeleton class=\"w-full aspect-video\"></rolatech-skeleton>\n  </div>\n} @else {\n  <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 class=\"font-bold mb-3\">\n      {{ property().size }} sq ft \u00B7 {{ property().bedrooms }} beds \u00B7 {{ property().bathrooms }} bathrooms\n\n      @if (property().market.toString() === 'SALES') {\n        @if (property().type !== 'NOT_SPECIFIED') {\n          {{ type[property().type].toLowerCase() }}\n        }\n        <span> for sale</span>\n      }\n      @if (property().market.toString() === 'LETTINGS') {\n        @if (property().type !== 'NOT_SPECIFIED') {\n          {{ type[property().type].toLowerCase() }}\n        }\n        <span> to rent</span>\n      }\n    </div>\n    <div [innerHTML]=\"property().description\">\n      <!-- {{ property().description }} -->\n    </div>\n  </div>\n}\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: "ngmodule", type: RouterModule }, { kind: "component", type: Skeleton, selector: "rolatech-skeleton" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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" } }, usesInheritance: true, ngImport: i0, template: "@if (loading()) {\n  <div>\n    <div class=\"flex justify-between items-start gap-3\">\n      <!-- title -->\n      <rolatech-skeleton class=\"w-[80%] h-8 mb-3\"></rolatech-skeleton>\n      <!-- action button -->\n      <rolatech-skeleton class=\"w-6 h-6\"></rolatech-skeleton>\n    </div>\n    <div class=\"font-bold mb-3\">\n      <!-- short info -->\n      <rolatech-skeleton class=\"w-[50%] h-6\"></rolatech-skeleton>\n    </div>\n    <!-- description -->\n    <rolatech-skeleton class=\"w-full aspect-video\"></rolatech-skeleton>\n  </div>\n} @else {\n  <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 class=\"font-bold mb-3\">\n      {{ property().size }} sq ft \u00B7 {{ property().bedrooms }} beds \u00B7 {{ property().bathrooms }} bathrooms\n\n      @if (property().market.toString() === 'SALE') {\n        @if (property().type !== 'NOT_SPECIFIED') {\n          {{ type[property().type].toLowerCase() }}\n        }\n        <span> for sale</span>\n      }\n      @if (property().market.toString() === 'RENTAL') {\n        @if (property().type !== 'NOT_SPECIFIED') {\n          {{ type[property().type].toLowerCase() }}\n        }\n        <span> to rent</span>\n      }\n    </div>\n    <div [innerHTML]=\"property().description\">\n      <!-- {{ property().description }} -->\n    </div>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: Skeleton, selector: "rolatech-skeleton" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyInfoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-info', imports: [MatButtonModule, MatIconModule, RouterModule, Skeleton], encapsulation: ViewEncapsulation.None, host: {
                         id: 'rolatech-property-info',
-                    }, template: "@if (loading()) {\n  <div>\n    <div class=\"flex justify-between items-start gap-3\">\n      <!-- title -->\n      <rolatech-skeleton class=\"w-[80%] h-8 mb-3\"></rolatech-skeleton>\n      <!-- action button -->\n      <rolatech-skeleton class=\"w-6 h-6\"></rolatech-skeleton>\n    </div>\n    <div class=\"font-bold mb-3\">\n      <!-- short info -->\n      <rolatech-skeleton class=\"w-[50%] h-6\"></rolatech-skeleton>\n    </div>\n    <!-- description -->\n    <rolatech-skeleton class=\"w-full aspect-video\"></rolatech-skeleton>\n  </div>\n} @else {\n  <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 class=\"font-bold mb-3\">\n      {{ property().size }} sq ft \u00B7 {{ property().bedrooms }} beds \u00B7 {{ property().bathrooms }} bathrooms\n\n      @if (property().market.toString() === 'SALES') {\n        @if (property().type !== 'NOT_SPECIFIED') {\n          {{ type[property().type].toLowerCase() }}\n        }\n        <span> for sale</span>\n      }\n      @if (property().market.toString() === 'LETTINGS') {\n        @if (property().type !== 'NOT_SPECIFIED') {\n          {{ type[property().type].toLowerCase() }}\n        }\n        <span> to rent</span>\n      }\n    </div>\n    <div [innerHTML]=\"property().description\">\n      <!-- {{ property().description }} -->\n    </div>\n  </div>\n}\n" }]
+                    }, template: "@if (loading()) {\n  <div>\n    <div class=\"flex justify-between items-start gap-3\">\n      <!-- title -->\n      <rolatech-skeleton class=\"w-[80%] h-8 mb-3\"></rolatech-skeleton>\n      <!-- action button -->\n      <rolatech-skeleton class=\"w-6 h-6\"></rolatech-skeleton>\n    </div>\n    <div class=\"font-bold mb-3\">\n      <!-- short info -->\n      <rolatech-skeleton class=\"w-[50%] h-6\"></rolatech-skeleton>\n    </div>\n    <!-- description -->\n    <rolatech-skeleton class=\"w-full aspect-video\"></rolatech-skeleton>\n  </div>\n} @else {\n  <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 class=\"font-bold mb-3\">\n      {{ property().size }} sq ft \u00B7 {{ property().bedrooms }} beds \u00B7 {{ property().bathrooms }} bathrooms\n\n      @if (property().market.toString() === 'SALE') {\n        @if (property().type !== 'NOT_SPECIFIED') {\n          {{ type[property().type].toLowerCase() }}\n        }\n        <span> for sale</span>\n      }\n      @if (property().market.toString() === 'RENTAL') {\n        @if (property().type !== 'NOT_SPECIFIED') {\n          {{ type[property().type].toLowerCase() }}\n        }\n        <span> to rent</span>\n      }\n    </div>\n    <div [innerHTML]=\"property().description\">\n      <!-- {{ property().description }} -->\n    </div>\n  </div>\n}\n" }]
         }], propDecorators: { property: [{ type: i0.Input, args: [{ isSignal: true, alias: "property", required: true }] }], wish: [{ type: i0.Output, args: ["wish"] }], inWishList: [{ type: i0.Input, args: [{ isSignal: true, alias: "inWishList", required: false }] }] } });
 
 class PropertySectionComponent {
@@ -1860,7 +1865,7 @@ class PropertyActionContactComponent {
         this.emailAgent.emit(property);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyActionContactComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", 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$3.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$1.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$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i4$1.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: "21.0.6", ngImport: i0, type: PropertyActionContactComponent, decorators: [{
             type: Component,
@@ -2115,7 +2120,6 @@ class PropertyDetailsComponent extends BaseComponent {
     //   if (!v) return [];
     //   const tz = this.timezone();
     //   const provider = tz === 'Asia/Shanghai' ? PropertyVideoProvider.COS : PropertyVideoProvider.YOUTUBE;
-    //   console.log(v);
     //   return v.filter((v) => v.provider === provider);
     // }
     videos = computed(() => {
@@ -2253,8 +2257,9 @@ class PropertyDetailsComponent extends BaseComponent {
         });
     }
     onOffer(e) {
+        const action = this.property()?.market.toString() === 'SALE' ? 'sale' : 'rental';
         if (this.authenticated()) {
-            this.router.navigate([`/properties/${this.id}/offer`]);
+            this.router.navigate([`/properties/${this.id}/offer/${action}`]);
         }
         else {
             this.snackBarService.open('Please sign in');
@@ -2289,7 +2294,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                     ], template: "<rolatech-container>\n  <div class=\"flex flex-col w-full\">\n    @if (loading()) {\n      <rolatech-property-media-skeleton></rolatech-property-media-skeleton>\n\n      <div class=\"flex flex-col md:flex-row gap-3 w-full\">\n        <rolatech-property-info-skeleton class=\"w-full md:w-2/3\"></rolatech-property-info-skeleton>\n        <rolatech-property-agent-skeleton class=\"w-full md:w-1/3\"></rolatech-property-agent-skeleton>\n      </div>\n    } @else {\n      @if (property(); as property) {\n        <rolatech-property-media [media]=\"property.media ? property.media : []\"></rolatech-property-media>\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 (floorplans.length > 0) {\n              <rolatech-property-floorplan [floorplans]=\"floorplans\"></rolatech-property-floorplan>\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      }\n    }\n  </div>\n</rolatech-container>\n" }]
         }], ctorParameters: () => [] });
 
-const MY_FORMATS$5 = {
+const MY_FORMATS$8 = {
     parse: {
         dateInput: 'YYYY-MM-DD',
     },
@@ -2324,8 +2329,8 @@ class PropertyViewingTimeComponent {
                 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    <!-- [max]=\"maxDate\" -->\n    <input\n      matInput\n      placeholder=\"Viewing date\"\n      [matDatepicker]=\"startDatePicker\"\n      [min]=\"minDate\"\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 }] });
+            { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$8 },
+        ], 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    <!-- [max]=\"maxDate\" -->\n    <input\n      matInput\n      placeholder=\"Viewing date\"\n      [matDatepicker]=\"startDatePicker\"\n      [min]=\"minDate\"\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: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.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$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.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: i4.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: i4.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: "21.0.6", ngImport: i0, type: PropertyViewingTimeComponent, decorators: [{
             type: Component,
@@ -2344,11 +2349,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                             useClass: MomentDateAdapter,
                             deps: [MAT_DATE_LOCALE],
                         },
-                        { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$5 },
+                        { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$8 },
                     ], 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    <!-- [max]=\"maxDate\" -->\n    <input\n      matInput\n      placeholder=\"Viewing date\"\n      [matDatepicker]=\"startDatePicker\"\n      [min]=\"minDate\"\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"] }]
         }], propDecorators: { output: [{ type: i0.Output, args: ["output"] }], select: [{ type: i0.Output, args: ["select"] }], proposedTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "proposedTime", required: false }] }] } });
 
-const MY_FORMATS$4 = {
+const MY_FORMATS$7 = {
     parse: {
         dateInput: 'YYYY-MM-DD',
     },
@@ -2425,8 +2430,8 @@ class PropertyViewingRequestComponent extends BaseComponent {
                 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      @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\">{{ property.price | price }}pcm</div>\n        } @else {\n          <div class=\"py-3 text-xl font-bold\">{{ property.price | price }}</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: i3$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$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" }, { kind: "pipe", type: AvailableDatePipe, name: "availableDate" }, { kind: "pipe", type: PricePipe, name: "price" }] });
+            { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$7 },
+        ], 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\">{{ property.price | price }}pcm</div>\n        } @else {\n          <div class=\"py-3 text-xl font-bold\">{{ property.price | price }}</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: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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$3.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: i4.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: i4.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: i3$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$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" }, { kind: "pipe", type: AvailableDatePipe, name: "availableDate" }, { kind: "pipe", type: PricePipe, name: "price" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyViewingRequestComponent, decorators: [{
             type: Component,
@@ -2451,11 +2456,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                             useClass: MomentDateAdapter,
                             deps: [MAT_DATE_LOCALE],
                         },
-                        { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$4 },
+                        { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$7 },
                     ], 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\">{{ property.price | price }}pcm</div>\n        } @else {\n          <div class=\"py-3 text-xl font-bold\">{{ property.price | price }}</div>\n        }\n      }\n    </div>\n  </div>\n</rolatech-container>\n", styles: ["mat-form-field{width:100%}\n"] }]
         }] });
 
-const MY_FORMATS$3 = {
+const MY_FORMATS$6 = {
     parse: {
         dateInput: 'YYYY-MM-DD',
     },
@@ -2482,10 +2487,10 @@ class PropertyOfferComponent extends BaseComponent {
         adverseCreditStatus: '',
         startDate: '',
         notes: '',
-        price: 0,
+        amount: 0,
     };
     get formattedAmount() {
-        return this.offer.price.toFixed(2); // equivalent to | number:'1.2-2'
+        return this.offer.amount.toFixed(2); // equivalent to | number:'1.2-2'
     } // applicantTypes = PropertyApplicantType;
     applicantTypes = Object.keys(PropertyApplicantType); // ['INDIVIDUAL', 'CORPORATE', ...]
     PropertyApplicantType = PropertyApplicantType;
@@ -2493,15 +2498,7 @@ class PropertyOfferComponent extends BaseComponent {
     employmentStatus = EmploymentStatus;
     adverseCreditStatus = AdverseCreditStatus;
     selectedCountry;
-    // property!: Property;
-    // displayPrice = computed(() => {
-    //   return (this.property?.price).toFixed(2);
-    // });
     property = signal(null, ...(ngDevMode ? [{ debugName: "property" }] : []));
-    displayPrice = computed(() => {
-        const p = this.property();
-        return p ? p.price.toFixed(2) : '0.00';
-    }, ...(ngDevMode ? [{ debugName: "displayPrice" }] : []));
     firstImageUrl = computed(() => {
         const p = this.property();
         return p?.media?.[0]?.url || '';
@@ -2522,10 +2519,9 @@ class PropertyOfferComponent extends BaseComponent {
     }
     onAmountChange(event) {
         const inputValue = event.target.value;
-        console.log(inputValue);
         const regex = /^\d*\.?\d{0,2}$/;
         if (regex.test(inputValue)) {
-            this.offer.price = inputValue;
+            this.offer.amount = inputValue;
         }
     }
     getProperty() {
@@ -2561,8 +2557,8 @@ class PropertyOfferComponent extends BaseComponent {
                 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>Offer price</mat-label>\n          <span matTextPrefix>\u00A3&nbsp;</span>\n          <input matInput type=\"text\" placeholder=\"0.00\" [(ngModel)]=\"offer.price\" 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\">{{ property()!.price | price }}pcm</div>\n        } @else {\n          <div class=\"py-3 text-xl font-bold\">{{ property()!.price | price }}</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" }, { kind: "pipe", type: PricePipe, name: "price" }] });
+            { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$6 },
+        ], 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>Offer amount</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\">{{ property()!.price | price }}pcm</div>\n        } @else {\n          <div class=\"py-3 text-xl font-bold\">{{ property()!.price | price }}</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: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.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$2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.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: i4.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: i4.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" }, { kind: "pipe", type: PricePipe, name: "price" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyOfferComponent, decorators: [{
             type: Component,
@@ -2587,8 +2583,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                             useClass: MomentDateAdapter,
                             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>Offer price</mat-label>\n          <span matTextPrefix>\u00A3&nbsp;</span>\n          <input matInput type=\"text\" placeholder=\"0.00\" [(ngModel)]=\"offer.price\" 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\">{{ property()!.price | price }}pcm</div>\n        } @else {\n          <div class=\"py-3 text-xl font-bold\">{{ property()!.price | price }}</div>\n        }\n      }\n    </div>\n  </div>\n</rolatech-container>\n", styles: ["mat-form-field{width:100%}\n"] }]
+                        { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$6 },
+                    ], 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>Offer amount</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\">{{ property()!.price | price }}pcm</div>\n        } @else {\n          <div class=\"py-3 text-xl font-bold\">{{ property()!.price | price }}</div>\n        }\n      }\n    </div>\n  </div>\n</rolatech-container>\n", styles: ["mat-form-field{width:100%}\n"] }]
         }], ctorParameters: () => [] });
 
 class PropertyOfferIndexComponent extends BaseComponent {
@@ -2681,7 +2677,7 @@ class PropertyOfferIndexComponent extends BaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyOfferIndexComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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  @if (loading) {\n    <div class=\"divide-y divide-[--rt-10-percent-layer] flex flex-col\">\n      @for (row of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]; track row) {\n        <rolatech-offer-item-skeleton></rolatech-offer-item-skeleton>\n      }\n    </div>\n  } @else {\n    <rolatech-list>\n      @if (offers() && offers().length > 0) {\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  }\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</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", "block"], 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"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: OfferItemSkeleton, selector: "rolatech-offer-item-skeleton" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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  @if (loading) {\n    <div class=\"divide-y divide-[--rt-10-percent-layer] flex flex-col\">\n      @for (row of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]; track row) {\n        <rolatech-offer-item-skeleton></rolatech-offer-item-skeleton>\n      }\n    </div>\n  } @else {\n    <rolatech-list>\n      @if (offers() && offers().length > 0) {\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  }\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</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", "block"], 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"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: OfferItemSkeleton, selector: "rolatech-offer-item-skeleton" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyOfferIndexComponent, decorators: [{
             type: Component,
@@ -2807,7 +2803,7 @@ class PropertyViewingIndexComponent extends BaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyViewingIndexComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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(); as viewings) {\n      @for (item of viewings; track item) {\n        <rolatech-property-viewing-item\n          [loading]=\"loading\"\n          [routerLink]=\"['./', item.id]\"\n          [viewing]=\"item\"\n        ></rolatech-property-viewing-item>\n      }\n    } @else {\n      <rolatech-empty></rolatech-empty>\n    }\n  </rolatech-list>\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</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", "block"], 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"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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(); as viewings) {\n      @for (item of viewings; track item) {\n        <rolatech-property-viewing-item\n          [loading]=\"loading\"\n          [routerLink]=\"['./', item.id]\"\n          [viewing]=\"item\"\n        ></rolatech-property-viewing-item>\n      }\n    } @else {\n      <rolatech-empty></rolatech-empty>\n    }\n  </rolatech-list>\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</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", "block"], 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"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyViewingIndexComponent, decorators: [{
             type: Component,
@@ -2860,6 +2856,9 @@ class PropertyOfferDetailComponent extends BaseComponent {
     propertyOfferService = inject(PropertyOfferService);
     authUserService = inject(AuthUserService);
     paymentService = inject(PaymentService);
+    isRental = computed(() => this.offer.type.toString() === 'RENTAL', ...(ngDevMode ? [{ debugName: "isRental" }] : []));
+    isSale = computed(() => this.offer.type.toString() === 'SALE', ...(ngDevMode ? [{ debugName: "isSale" }] : []));
+    expandedTenantIndexes = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedTenantIndexes" }] : []));
     offer;
     info = false;
     loadingTimeline = false;
@@ -2902,6 +2901,7 @@ class PropertyOfferDetailComponent extends BaseComponent {
         this.propertyOfferService.getOffer(id).subscribe({
             next: (res) => {
                 this.offer = res.data;
+                console.log(this.offer);
                 this.getProperty(this.offer.propertyId);
                 this.calculateDeposit();
                 // this.findAgentInfo();
@@ -2999,8 +2999,232 @@ class PropertyOfferDetailComponent extends BaseComponent {
             },
         });
     }
+    copy() { }
+    copyText(redactContact) {
+        this.propertyOfferService.getCopyText(this.id).subscribe({
+            next: (res) => {
+                navigator.clipboard.writeText(res.data.text);
+                this.snackBarService.open('Copied');
+            },
+        });
+    }
+    statusClass(status) {
+        return {
+            'bg-green-100 text-green-700': ['ACCEPTED', 'REFERENCES_PASSED'].includes(status),
+            'bg-yellow-100 text-yellow-700': ['SUBMITTED', 'REFERENCING'].includes(status),
+            'bg-red-100 text-red-700': ['REJECTED', 'REFERENCES_FAILED', 'CANCELLED'].includes(status),
+        };
+    }
+    statusHint(status) {
+        switch (status) {
+            case 'SUBMITTED':
+                return 'Awaiting landlord or agent response.';
+            case 'ACCEPTED':
+                return 'Accepted in principle. Next steps required.';
+            case 'REFERENCING':
+                return 'Referencing checks in progress.';
+            default:
+                return '';
+        }
+    }
+    // ---- label maps (for tooltips / pretty labels)
+    paymentFrequencyLabel = {
+        MONTHLY: 'Monthly',
+        QUARTERLY: 'Quarterly',
+        SEMI_ANNUALLY: 'Semi-annually',
+        ANNUALLY: 'Annually',
+    };
+    furnitureRequirementLabel = {
+        FURNISHED: 'Furnished',
+        UNFURNISHED: 'Unfurnished',
+    };
+    applicantTypeLabel = {
+        INDIVIDUAL: 'Individual',
+        CORPORATE: 'Corporate',
+        STUDENT: 'Student',
+    };
+    employmentStatusLabel = {
+        EMPLOYED: 'Employed',
+        SELF_EMPLOYED: 'Self-employed',
+        UNEMPLOYED: 'Unemployed',
+    };
+    visaStatusLabel = {
+        CITIZEN: 'Citizen',
+        WORK_VISA: 'Work visa',
+        STUDENT_VISA: 'Student visa',
+        OTHER: 'Other',
+    };
+    adverseCreditStatusLabel = {
+        NONE: 'None',
+        CCJ: 'CCJ',
+        BANKRUPTCY: 'Bankruptcy',
+        IVA: 'IVA',
+        OTHER: 'Other',
+    };
+    genderLabel = {
+        MALE: 'Male',
+        FEMALE: 'Female',
+        OTHER: 'Other',
+        PREFER_NOT_TO_SAY: 'Prefer not to say',
+    };
+    salePaymentMethodLabel = {
+        CASH: 'Cash',
+        MORTGAGE: 'Mortgage',
+    };
+    invoiceOptionLabel = {
+        COMBINED: 'Combined',
+        SEPARATE: 'Separate',
+    };
+    // ---- view helpers
+    statusBadgeClass(status) {
+        const ok = [
+            PropertyOfferStatus.ACCEPTED,
+            PropertyOfferStatus.REFERENCES_PASSED,
+            PropertyOfferStatus.CONTRACT_SIGNED,
+            PropertyOfferStatus.MOVE_IN_PAYMENT_PAID,
+            PropertyOfferStatus.COMPLETED,
+        ];
+        const warn = [
+            PropertyOfferStatus.SUBMITTED,
+            PropertyOfferStatus.UNDER_OFFER,
+            PropertyOfferStatus.HOLDING_DEPOSIT_PENDING,
+            PropertyOfferStatus.REFERENCING,
+            PropertyOfferStatus.CONTRACT_PENDING,
+            PropertyOfferStatus.SECURITY_DEPOSIT_PENDING,
+            PropertyOfferStatus.FIRST_RENT_PENDING,
+        ];
+        const bad = [
+            PropertyOfferStatus.REJECTED,
+            PropertyOfferStatus.COUNTERED,
+            PropertyOfferStatus.REFERENCES_FAILED,
+            PropertyOfferStatus.CONTRACT_FAILED,
+            PropertyOfferStatus.FAILED,
+            PropertyOfferStatus.WITHDRAWN,
+            PropertyOfferStatus.EXPIRED,
+            PropertyOfferStatus.CANCELLED,
+        ];
+        if (ok.includes(status))
+            return 'bg-green-50 text-green-700 border-green-200';
+        if (warn.includes(status))
+            return 'bg-yellow-50 text-yellow-800 border-yellow-200';
+        if (bad.includes(status))
+            return 'bg-red-50 text-red-700 border-red-200';
+        return 'bg-gray-50 text-gray-700 border-gray-200';
+    }
+    asText(v) {
+        if (v === null || v === undefined)
+            return '—';
+        if (typeof v === 'string' && v.trim() === '')
+            return '—';
+        return String(v);
+    }
+    asBool(v) {
+        if (v === null || v === undefined)
+            return '—';
+        return v ? 'Yes' : 'No';
+    }
+    asMoney(amount) {
+        if (amount === null || amount === undefined)
+            return '—';
+        try {
+            return new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'GBP' }).format(amount);
+        }
+        catch {
+            return String(amount);
+        }
+    }
+    asList(list) {
+        if (!list || list.length === 0)
+            return '—';
+        return list.join(', ');
+    }
+    firstMediaUrl(o) {
+        const m = o.item?.media?.[0];
+        return m?.url ?? null;
+    }
+    fullAddress(a) {
+        if (!a)
+            return '—';
+        const parts = [a.line1, a.line2, a.city, a.postcode, a.country].filter((p) => !!p && p.trim() !== '');
+        return parts.length ? parts.join(', ') : '—';
+    }
+    isEmptyAddress(a) {
+        if (!a)
+            return true;
+        const parts = [a.line1, a.line2, a.city, a.postcode, a.country].map((v) => (v ?? '').trim());
+        return parts.every((v) => v === '');
+    }
+    isIndividual(t) {
+        return t.applicantType === 'INDIVIDUAL';
+    }
+    isCorporate(t) {
+        return t.applicantType === 'CORPORATE';
+    }
+    isStudent(t) {
+        return t.applicantType === 'STUDENT';
+    }
+    isEmptyGuarantor(g) {
+        if (!g)
+            return true;
+        // treat "guarantor": { "address": {} } as empty
+        const addressEmpty = this.isEmptyAddress(g.address);
+        const fields = [
+            g.fullName,
+            g.dob,
+            g.relationship,
+            g.phone,
+            g.email,
+            g.employmentStatus,
+            g.companyName,
+            g.jobTitle,
+            g.annualSalary,
+            g.companyNumber,
+            g.taxReturnSubmitted,
+        ];
+        const fieldsEmpty = fields.every((v) => v === null || v === undefined || (typeof v === 'string' && v.trim() === ''));
+        return addressEmpty && fieldsEmpty;
+    }
+    isTenantExpandedByIndex(index) {
+        return this.expandedTenantIndexes().has(index);
+    }
+    toggleTenantByIndex(index) {
+        this.expandedTenantIndexes.update((prev) => {
+            const next = new Set(prev);
+            if (next.has(index)) {
+                next.delete(index);
+            }
+            else {
+                next.add(index);
+            }
+            return next;
+        });
+    }
+    expandAllTenantsByIndex(count) {
+        const next = new Set();
+        for (let i = 0; i < count; i++) {
+            next.add(i);
+        }
+        this.expandedTenantIndexes.set(next);
+    }
+    collapseAllTenantsByIndex() {
+        this.expandedTenantIndexes.set(new Set());
+    }
+    ageFromDob(dob) {
+        if (!dob)
+            return '—';
+        const birth = new Date(dob);
+        if (Number.isNaN(birth.getTime()))
+            return '—';
+        const today = new Date();
+        let age = today.getFullYear() - birth.getFullYear();
+        const m = today.getMonth() - birth.getMonth();
+        if (m < 0 || (m === 0 && today.getDate() < birth.getDate())) {
+            age--;
+        }
+        return age >= 0 ? `${age}` : '—';
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyOfferDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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.title }}</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\">{{ offer.item.amount | price }}</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>Offer price</span>\n            <span class=\"text-sm\" i18n>{{ offer.price | price }}</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\">{{ holdingDeposit | price }}</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\">{{ securityDeposit | price }}</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>\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() === 'SUBMITTED') {\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() === 'ACCEPTED') {\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: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: DuePipe, name: "due" }, { kind: "pipe", type: PricePipe, name: "price" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: PropertyOfferDetailComponent, isStandalone: true, selector: "rolatech-property-offer-detail", usesInheritance: true, ngImport: i0, template: "<!-- offer-detail.page.html -->\n@if (offer; as o) {\n  <div class=\"min-h-full\">\n    <div class=\"max-w-7xl mx-auto px-4 lg:px-6 py-6 space-y-6\">\n      <!-- Header -->\n      <section class=\"flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between\">\n        <div class=\"space-y-1\">\n          <h1 class=\"text-xl font-semibold text-[--rt-text-primary]\">Offer #{{ o.id }}</h1>\n          <div class=\"text-sm text-[--rt-text-secondary]\">\n            <span class=\"font-medium\">{{ o.type }}</span>\n            <span class=\"mx-2\">\u2022</span>\n            <span>Property {{ o.propertyId }}</span>\n          </div>\n\n          <div class=\"flex flex-wrap gap-2 text-xs\">\n            <span class=\"px-2 py-1 rounded-full border bg-[--rt-raised-background]\"> userId: {{ asText(o.userId) }} </span>\n            <span class=\"px-2 py-1 rounded-full border bg-[--rt-raised-background]\"> agentId: {{ asText(o.agentId) }} </span>\n            <span class=\"px-2 py-1 rounded-full border bg-[--rt-raised-background]\">\n              invoice: {{ invoiceOptionLabel[o.invoiceOption] }}\n            </span>\n          </div>\n        </div>\n\n        <div class=\"flex items-center gap-2\">\n          <span class=\"px-3 py-1 rounded-full border text-xs font-medium\" [ngClass]=\"statusBadgeClass(o.status)\">\n            {{ o.status }}\n          </span>\n        </div>\n      </section>\n\n      <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-6\">\n        <!-- Main -->\n        <div class=\"lg:col-span-8 space-y-6\">\n          <!-- Item / Property -->\n          <section class=\"rounded-2xl border bg-[--rt-raised-background] overflow-hidden\">\n            <div class=\"p-4 flex items-start justify-between\">\n              <div>\n                <div class=\"text-sm font-semibold text-[--rt-text-primary]\">Property item</div>\n                <div class=\"text-xs text-[--rt-text-secondary]\">OfferItem snapshot</div>\n              </div>\n              <span class=\"text-xs px-2 py-1 rounded-full border bg-[--rt-base-background]\">\n                propertyId: {{ asText(o.item?.propertyId) }}\n              </span>\n            </div>\n\n            <div class=\"p-4 pt-0 flex flex-col gap-4\">\n              <div class=\"flex flex-col lg:flex-row gap-4\">\n                <div class=\"w-full lg:w-72\">\n                  <img\n                    class=\"w-full h-44 rounded-xl object-cover bg-gray-100\"\n                    [src]=\"firstMediaUrl(o) ?? '/assets/placeholder.jpg'\"\n                    [alt]=\"o.item?.title ?? 'Property'\"\n                  />\n                </div>\n\n                <div class=\"flex-1 space-y-2\">\n                  <div class=\"text-base font-semibold\">{{ asText(o.item?.title) }}</div>\n\n                  <div class=\"grid grid-cols-2 gap-3 text-sm pt-2\">\n                    <div>\n                      <div class=\"text-xs text-[--rt-text-secondary]\">Amount</div>\n                      <div class=\"font-medium\">{{ asMoney(o.item?.amount) }}</div>\n                    </div>\n                    <div>\n                      <div class=\"text-xs text-[--rt-text-secondary]\">Agent ID</div>\n                      <div class=\"font-medium\">{{ asText(o.item?.agentId) }}</div>\n                    </div>\n\n                    <div>\n                      <div class=\"text-xs text-[--rt-text-secondary]\">Bedrooms</div>\n                      <div class=\"font-medium\">{{ asText(o.item?.bedrooms) }}</div>\n                    </div>\n                    <div>\n                      <div class=\"text-xs text-[--rt-text-secondary]\">Bathrooms</div>\n                      <div class=\"font-medium\">{{ asText(o.item?.bathrooms) }}</div>\n                    </div>\n\n                    <div>\n                      <div class=\"text-xs text-[--rt-text-secondary]\">Receptions</div>\n                      <div class=\"font-medium\">{{ asText(o.item?.receptions) }}</div>\n                    </div>\n                    <div>\n                      <div class=\"text-xs text-[--rt-text-secondary]\">Media count</div>\n                      <div class=\"font-medium\">{{ asText(o.item?.media?.length ?? 0) }}</div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </section>\n\n          <!-- Rental terms -->\n          @if (isRental()) {\n            <section class=\"rounded-2xl border bg-[--rt-raised-background] p-4 space-y-3\">\n              <div class=\"flex items-start justify-between\">\n                <div>\n                  <div class=\"text-sm font-semibold\">Rental terms</div>\n                  <div class=\"text-xs text-[--rt-text-secondary]\">o.rentalTerms</div>\n                </div>\n              </div>\n\n              @if (o.rentalTerms; as rt) {\n                <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm\">\n                  <div>\n                    <div class=\"text-xs text-[--rt-text-secondary]\">Amount</div>\n                    <div class=\"font-medium\">{{ asMoney(rt.amount) }}</div>\n                  </div>\n\n                  <div>\n                    <div class=\"text-xs text-[--rt-text-secondary]\">Move-in date</div>\n                    <div class=\"font-medium\">{{ asText(rt.moveInDate) }}</div>\n                  </div>\n\n                  <div>\n                    <div class=\"text-xs text-[--rt-text-secondary]\">Payment frequency</div>\n                    <div class=\"font-medium\">\n                      @if (rt.paymentFrequency) {\n                        {{ paymentFrequencyLabel[rt.paymentFrequency] }}\n                      } @else {\n                        \u2014\n                      }\n                    </div>\n                  </div>\n\n                  <div>\n                    <div class=\"text-xs text-[--rt-text-secondary]\">Tenancy length (months)</div>\n                    <div class=\"font-medium\">{{ asText(rt.tenancyLengthMonths) }}</div>\n                  </div>\n\n                  <div>\n                    <div class=\"text-xs text-[--rt-text-secondary]\">Break clause (months)</div>\n                    <div class=\"font-medium\">{{ asText(rt.breakClauseMonths) }}</div>\n                  </div>\n\n                  <div>\n                    <div class=\"text-xs text-[--rt-text-secondary]\">Pets</div>\n                    <div class=\"font-medium\">{{ asList(rt.pets) }}</div>\n                  </div>\n\n                  <div>\n                    <div class=\"text-xs text-[--rt-text-secondary]\">Smoker</div>\n                    <div class=\"font-medium\">{{ asBool(rt.smoker) }}</div>\n                  </div>\n\n                  <div>\n                    <div class=\"text-xs text-[--rt-text-secondary]\">Furniture requirement</div>\n                    <div class=\"font-medium\">\n                      @if (rt.furnitureRequirement) {\n                        {{ furnitureRequirementLabel[rt.furnitureRequirement] }}\n                      } @else {\n                        \u2014\n                      }\n                    </div>\n                  </div>\n\n                  <div class=\"sm:col-span-2\">\n                    <div class=\"text-xs text-[--rt-text-secondary]\">Additional requests</div>\n                    <div class=\"font-medium whitespace-pre-wrap\">{{ asText(rt.additionalRequests) }}</div>\n                  </div>\n                </div>\n              } @else {\n                <div class=\"text-sm text-[--rt-text-secondary]\">No rental terms</div>\n              }\n            </section>\n          }\n\n          <!-- Sale details -->\n          @if (isSale()) {\n            <section class=\"rounded-2xl border bg-[--rt-raised-background] p-4 space-y-3\">\n              <div class=\"flex items-start justify-between\">\n                <div>\n                  <div class=\"text-sm font-semibold\">Sale details</div>\n                  <div class=\"text-xs text-[--rt-text-secondary]\">o.sale</div>\n                </div>\n              </div>\n\n              @if (o.sale; as s) {\n                <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm\">\n                  <div>\n                    <div class=\"text-xs text-[--rt-text-secondary]\">Amount</div>\n                    <div class=\"font-medium\">{{ asMoney(s.amount) }}</div>\n                  </div>\n\n                  <div>\n                    <div class=\"text-xs text-[--rt-text-secondary]\">Payment method</div>\n                    <div class=\"font-medium\">\n                      @if (s.paymentMethod) {\n                        {{ salePaymentMethodLabel[s.paymentMethod] }}\n                      } @else {\n                        \u2014\n                      }\n                    </div>\n                  </div>\n\n                  <div>\n                    <div class=\"text-xs text-[--rt-text-secondary]\">Buyer name</div>\n                    <div class=\"font-medium\">{{ asText(s.buyerName) }}</div>\n                  </div>\n\n                  <div>\n                    <div class=\"text-xs text-[--rt-text-secondary]\">Phone</div>\n                    <div class=\"font-medium\">{{ asText(s.phone) }}</div>\n                  </div>\n\n                  <div>\n                    <div class=\"text-xs text-[--rt-text-secondary]\">Email</div>\n                    <div class=\"font-medium\">{{ asText(s.email) }}</div>\n                  </div>\n\n                  <div>\n                    <div class=\"text-xs text-[--rt-text-secondary]\">Proposed exchange date</div>\n                    <div class=\"font-medium\">{{ asText(s.proposedExchangeDate) }}</div>\n                  </div>\n\n                  <div class=\"sm:col-span-2\">\n                    <div class=\"text-xs text-[--rt-text-secondary]\">Solicitor company</div>\n                    <div class=\"font-medium\">{{ asText(s.solicitorCompanyName) }}</div>\n                  </div>\n                </div>\n              } @else {\n                <div class=\"text-sm text-[--rt-text-secondary]\">No sale details</div>\n              }\n            </section>\n          }\n\n          <!-- Tenants -->\n          @if (isRental()) {\n            <section class=\"rounded-2xl border bg-[--rt-raised-background] p-4 space-y-3\">\n              <div class=\"flex items-start justify-between gap-3\">\n                <div>\n                  <div class=\"text-sm font-semibold\">Tenants</div>\n                  <div class=\"text-xs text-[--rt-text-secondary]\">o.tenants</div>\n                </div>\n\n                <div class=\"flex items-center gap-2\">\n                  <button\n                    type=\"button\"\n                    class=\"text-xs px-3 py-1 rounded-full border bg-[--rt-base-background] hover:bg-[--rt-raised-background]\"\n                    (click)=\"expandAllTenantsByIndex(o.tenants!.length)\"\n                    [disabled]=\"(o.tenants?.length ?? 0) === 0\"\n                  >\n                    Expand all\n                  </button>\n\n                  <button\n                    type=\"button\"\n                    class=\"text-xs px-3 py-1 rounded-full border bg-[--rt-base-background] hover:bg-[--rt-raised-background]\"\n                    (click)=\"collapseAllTenantsByIndex()\"\n                    [disabled]=\"expandedTenantIndexes().size === 0\"\n                  >\n                    Collapse all\n                  </button>\n\n                  <span class=\"text-xs px-2 py-1 rounded-full border bg-[--rt-base-background]\">\n                    count: {{ asText(o.tenants?.length ?? 0) }}\n                  </span>\n                </div>\n              </div>\n\n              @if ((o.tenants?.length ?? 0) > 0) {\n                <div class=\"space-y-3\">\n                  @for (t of o.tenants!; track $index) {\n                    <div class=\"rounded-xl border bg-[--rt-base-background] overflow-hidden\">\n                      <!-- Collapsed header row -->\n                      <button\n                        type=\"button\"\n                        class=\"w-full text-left p-4 flex items-start justify-between gap-3 hover:bg-[--rt-raised-background]\"\n                        (click)=\"toggleTenantByIndex($index)\"\n                      >\n                        <div class=\"min-w-0 space-y-1\">\n                          <div class=\"text-sm font-semibold truncate\">{{ asText(t.fullName) }}</div>\n                          <div class=\"text-xs text-[--rt-text-secondary] truncate\">\n                            {{ asText(t.email) }} \u00B7 {{ asText(t.phone) }}\n                          </div>\n\n                          <div class=\"flex flex-wrap gap-2 pt-1 text-xs\">\n                            <span class=\"px-2 py-1 rounded-full border\">\n                              @if (t.applicantType) {\n                                {{ applicantTypeLabel[t.applicantType] }}\n                              } @else {\n                                Applicant: \u2014\n                              }\n                            </span>\n\n                            <span class=\"px-2 py-1 rounded-full border\">\n                              @if (t.employmentStatus) {\n                                {{ employmentStatusLabel[t.employmentStatus] }}\n                              } @else {\n                                Employment: \u2014\n                              }\n                            </span>\n\n                            <span class=\"px-2 py-1 rounded-full border\">\n                              @if (t.adverseCreditStatus) {\n                                {{ adverseCreditStatusLabel[t.adverseCreditStatus] }}\n                              } @else {\n                                Credit: \u2014\n                              }\n                            </span>\n\n                            <span class=\"px-2 py-1 rounded-full border\">\n                              @if (t.visaStatus) {\n                                {{ visaStatusLabel[t.visaStatus] }}\n                              } @else {\n                                Visa: \u2014\n                              }\n                            </span>\n                          </div>\n                        </div>\n\n                        <div class=\"flex items-center gap-2 shrink-0\">\n                          @if (t.guarantor && !isEmptyGuarantor(t.guarantor)) {\n                            <span class=\"text-xs px-2 py-1 rounded-full border bg-yellow-50 text-yellow-800 border-yellow-200\">\n                              Guarantor\n                            </span>\n                          }\n\n                          <span class=\"text-xs px-2 py-1 rounded-full border bg-[--rt-base-background]\">\n                            {{ isTenantExpandedByIndex($index) ? 'Expanded' : 'Collapsed' }}\n                          </span>\n\n                          <svg\n                            class=\"w-4 h-4 transition-transform\"\n                            [class.rotate-180]=\"isTenantExpandedByIndex($index)\"\n                            viewBox=\"0 0 20 20\"\n                            fill=\"currentColor\"\n                            aria-hidden=\"true\"\n                          >\n                            <path\n                              fill-rule=\"evenodd\"\n                              d=\"M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.936a.75.75 0 1 1 1.08 1.04l-4.24 4.5a.75.75 0 0 1-1.08 0l-4.24-4.5a.75.75 0 0 1 .02-1.06z\"\n                              clip-rule=\"evenodd\"\n                            />\n                          </svg>\n                        </div>\n                      </button>\n\n                      <!-- Expanded content -->\n                      @if (isTenantExpandedByIndex($index)) {\n                        <div class=\"p-4 border-t space-y-4\">\n                          <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm\">\n                            <div>\n                              <div class=\"text-xs text-[--rt-text-secondary]\">Tenant ID</div>\n                              <div class=\"font-medium\">{{ t.id }}</div>\n                            </div>\n\n                            <div>\n                              <div class=\"text-xs text-[--rt-text-secondary]\">Age</div>\n                              <div class=\"font-medium\">{{ ageFromDob(t.dob) }}</div>\n                            </div>\n\n                            <div>\n                              <div class=\"text-xs text-[--rt-text-secondary]\">Gender</div>\n                              <div class=\"font-medium\">\n                                @if (t.gender) {\n                                  {{ genderLabel[t.gender] }}\n                                } @else {\n                                  \u2014\n                                }\n                              </div>\n                            </div>\n\n                            <div>\n                              <div class=\"text-xs text-[--rt-text-secondary]\">Nationality</div>\n                              <div class=\"font-medium\">{{ asText(t.nationality) }}</div>\n                            </div>\n\n                            <div class=\"sm:col-span-2\">\n                              <div class=\"text-xs text-[--rt-text-secondary]\">Address</div>\n                              <div class=\"font-medium\">{{ fullAddress(t.address) }}</div>\n                            </div>\n                          </div>\n\n                          <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Individual \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n                          @if (isIndividual(t)) {\n                            <div class=\"rounded-xl border p-3 space-y-2\">\n                              <div class=\"text-xs font-semibold\">Individual employment</div>\n\n                              <div>\n                                <div class=\"text-xs text-[--rt-text-secondary]\">Employment status</div>\n                                <div class=\"font-medium\">\n                                  @if (t.employmentStatus) {\n                                    {{ employmentStatusLabel[t.employmentStatus] }}\n                                  } @else {\n                                    \u2014\n                                  }\n                                </div>\n                              </div>\n\n                              <div>\n                                <div class=\"text-xs text-[--rt-text-secondary]\">Company</div>\n                                <div class=\"font-medium\">{{ asText(t.companyName) }}</div>\n                              </div>\n\n                              <div>\n                                <div class=\"text-xs text-[--rt-text-secondary]\">Job title</div>\n                                <div class=\"font-medium\">{{ asText(t.jobTitle) }}</div>\n                              </div>\n\n                              <div>\n                                <div class=\"text-xs text-[--rt-text-secondary]\">Annual salary</div>\n                                <div class=\"font-medium\">{{ asMoney(t.annualSalary) }}</div>\n                              </div>\n\n                              <div>\n                                <div class=\"text-xs text-[--rt-text-secondary]\">Tax return submitted</div>\n                                <div class=\"font-medium\">{{ asBool(t.taxReturnSubmitted) }}</div>\n                              </div>\n                            </div>\n                          }\n                          <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Corporate \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n                          @if (isCorporate(t)) {\n                            <div class=\"rounded-xl border p-3 space-y-2\">\n                              <div class=\"text-xs font-semibold\">Corporate applicant</div>\n\n                              <div>\n                                <div class=\"text-xs text-[--rt-text-secondary]\">Company name</div>\n                                <div class=\"font-medium\">{{ asText(t.corporateCompanyName) }}</div>\n                              </div>\n\n                              <div>\n                                <div class=\"text-xs text-[--rt-text-secondary]\">Company number</div>\n                                <div class=\"font-medium\">{{ asText(t.corporateCompanyNumber) }}</div>\n                              </div>\n\n                              <div>\n                                <div class=\"text-xs text-[--rt-text-secondary]\">Job title</div>\n                                <div class=\"font-medium\">{{ asText(t.corporateJobTitle) }}</div>\n                              </div>\n                            </div>\n                          }\n\n                          <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Student \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n                          @if (isStudent(t)) {\n                            <div class=\"rounded-xl border p-3 space-y-2\">\n                              <div class=\"text-xs font-semibold\">Student details</div>\n\n                              <div>\n                                <div class=\"text-xs text-[--rt-text-secondary]\">University</div>\n                                <div class=\"font-medium\">{{ asText(t.universityName) }}</div>\n                              </div>\n\n                              <div>\n                                <div class=\"text-xs text-[--rt-text-secondary]\">Course</div>\n                                <div class=\"font-medium\">{{ asText(t.courseTitle) }}</div>\n                              </div>\n\n                              <div>\n                                <div class=\"text-xs text-[--rt-text-secondary]\">Year of study</div>\n                                <div class=\"font-medium\">{{ asText(t.yearOfStudy) }}</div>\n                              </div>\n                            </div>\n                          }\n\n                          <!-- Guarantor (optional + hidden when empty) -->\n                          @if (t.guarantor && !isEmptyGuarantor(t.guarantor)) {\n                            <div class=\"rounded-xl border p-4 space-y-3\">\n                              <div class=\"flex items-start justify-between\">\n                                <div>\n                                  <div class=\"text-sm font-semibold\">Guarantor</div>\n                                  <div class=\"text-xs text-[--rt-text-secondary]\">t.guarantor</div>\n                                </div>\n                              </div>\n\n                              @if (t.guarantor; as g) {\n                                <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm\">\n                                  @if (g.fullName) {\n                                    <div>\n                                      <div class=\"text-xs text-[--rt-text-secondary]\">Full name</div>\n                                      <div class=\"font-medium\">{{ g.fullName }}</div>\n                                    </div>\n                                  }\n                                  @if (g.relationship) {\n                                    <div>\n                                      <div class=\"text-xs text-[--rt-text-secondary]\">Relationship</div>\n                                      <div class=\"font-medium\">{{ g.relationship }}</div>\n                                    </div>\n                                  }\n                                  @if (g.dob) {\n                                    <div>\n                                      <div class=\"text-xs text-[--rt-text-secondary]\">Age</div>\n                                      <div class=\"font-medium\">{{ ageFromDob(t.dob) }}</div>\n                                    </div>\n                                  }\n                                  @if (g.employmentStatus) {\n                                    <div>\n                                      <div class=\"text-xs text-[--rt-text-secondary]\">Employment status</div>\n                                      <div class=\"font-medium\">{{ employmentStatusLabel[g.employmentStatus] }}</div>\n                                    </div>\n                                  }\n                                  @if (g.phone) {\n                                    <div>\n                                      <div class=\"text-xs text-[--rt-text-secondary]\">Phone</div>\n                                      <div class=\"font-medium\">{{ g.phone }}</div>\n                                    </div>\n                                  }\n                                  @if (g.email) {\n                                    <div>\n                                      <div class=\"text-xs text-[--rt-text-secondary]\">Email</div>\n                                      <div class=\"font-medium\">{{ g.email }}</div>\n                                    </div>\n                                  }\n\n                                  @if (!isEmptyAddress(g.address)) {\n                                    <div class=\"sm:col-span-2\">\n                                      <div class=\"text-xs text-[--rt-text-secondary]\">Address</div>\n                                      <div class=\"font-medium\">{{ fullAddress(g.address) }}</div>\n                                    </div>\n                                  }\n\n                                  @if (g.companyName) {\n                                    <div>\n                                      <div class=\"text-xs text-[--rt-text-secondary]\">Company name</div>\n                                      <div class=\"font-medium\">{{ g.companyName }}</div>\n                                    </div>\n                                  }\n                                  @if (g.jobTitle) {\n                                    <div>\n                                      <div class=\"text-xs text-[--rt-text-secondary]\">Job title</div>\n                                      <div class=\"font-medium\">{{ g.jobTitle }}</div>\n                                    </div>\n                                  }\n                                  @if (g.annualSalary !== null && g.annualSalary !== undefined) {\n                                    <div>\n                                      <div class=\"text-xs text-[--rt-text-secondary]\">Annual salary</div>\n                                      <div class=\"font-medium\">{{ asMoney(g.annualSalary) }}</div>\n                                    </div>\n                                  }\n                                  @if (g.companyNumber) {\n                                    <div>\n                                      <div class=\"text-xs text-[--rt-text-secondary]\">Company number</div>\n                                      <div class=\"font-medium\">{{ g.companyNumber }}</div>\n                                    </div>\n                                  }\n                                  @if (g.taxReturnSubmitted !== null && g.taxReturnSubmitted !== undefined) {\n                                    <div>\n                                      <div class=\"text-xs text-[--rt-text-secondary]\">Tax return submitted</div>\n                                      <div class=\"font-medium\">{{ asBool(g.taxReturnSubmitted) }}</div>\n                                    </div>\n                                  }\n                                </div>\n                              }\n                            </div>\n                          }\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              } @else {\n                <div class=\"text-sm text-[--rt-text-secondary]\">No tenants</div>\n              }\n            </section>\n          }\n        </div>\n\n        <!-- Side -->\n        <aside class=\"lg:col-span-4 space-y-6\">\n          <!-- Offer core -->\n          <section class=\"rounded-2xl border bg-[--rt-raised-background] p-4 space-y-3\">\n            <div>\n              <div class=\"text-sm font-semibold\">Offer</div>\n              <div class=\"text-xs text-[--rt-text-secondary]\">Core fields</div>\n            </div>\n\n            <div class=\"grid grid-cols-1 gap-3 text-sm\">\n              <div class=\"flex items-center justify-between gap-3\">\n                <span class=\"text-[--rt-text-secondary]\">Type</span>\n                <span class=\"font-medium\">{{ asText(o.type) }}</span>\n              </div>\n\n              <div class=\"flex items-center justify-between gap-3\">\n                <span class=\"text-[--rt-text-secondary]\">Status</span>\n                <span class=\"font-medium\">{{ asText(o.status) }}</span>\n              </div>\n\n              <div class=\"flex items-center justify-between gap-3\">\n                <span class=\"text-[--rt-text-secondary]\">Invoice option</span>\n                <span class=\"font-medium\">{{ invoiceOptionLabel[o.invoiceOption] }}</span>\n              </div>\n\n              <div class=\"flex items-center justify-between gap-3\">\n                <span class=\"text-[--rt-text-secondary]\">Property ID</span>\n                <span class=\"font-medium\">{{ asText(o.propertyId) }}</span>\n              </div>\n\n              <div class=\"flex items-center justify-between gap-3\">\n                <span class=\"text-[--rt-text-secondary]\">Item amount</span>\n                <span class=\"font-medium\">{{ asMoney(o.item?.amount) }}</span>\n              </div>\n\n              @if (isRental()) {\n                <div class=\"flex items-center justify-between gap-3\">\n                  <span class=\"text-[--rt-text-secondary]\">Tenants</span>\n                  <span class=\"font-medium\">{{ asText(o.tenants?.length ?? 0) }}</span>\n                </div>\n              }\n            </div>\n          </section>\n        </aside>\n      </div>\n    </div>\n  </div>\n} @else {\n  <div class=\"max-w-7xl mx-auto px-4 lg:px-6 py-10\">\n    <div class=\"rounded-2xl border bg-[--rt-raised-background] p-6\">\n      <div class=\"h-5 w-48 bg-gray-200 rounded\"></div>\n      <div class=\"mt-3 h-4 w-72 bg-gray-200 rounded\"></div>\n      <div class=\"mt-6 grid grid-cols-1 lg:grid-cols-2 gap-4\">\n        <div class=\"h-40 bg-gray-200 rounded-xl\"></div>\n        <div class=\"h-40 bg-gray-200 rounded-xl\"></div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyOfferDetailComponent, decorators: [{
             type: Component,
@@ -3016,7 +3240,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         RouterLink,
                         DuePipe,
                         PricePipe,
-                    ], 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.title }}</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\">{{ offer.item.amount | price }}</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>Offer price</span>\n            <span class=\"text-sm\" i18n>{{ offer.price | price }}</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\">{{ holdingDeposit | price }}</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\">{{ securityDeposit | price }}</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>\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() === 'SUBMITTED') {\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() === 'ACCEPTED') {\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: "<!-- offer-detail.page.html -->\n@if (offer; as o) {\n  <div class=\"min-h-full\">\n    <div class=\"max-w-7xl mx-auto px-4 lg:px-6 py-6 space-y-6\">\n      <!-- Header -->\n      <section class=\"flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between\">\n        <div class=\"space-y-1\">\n          <h1 class=\"text-xl font-semibold text-[--rt-text-primary]\">Offer #{{ o.id }}</h1>\n          <div class=\"text-sm text-[--rt-text-secondary]\">\n            <span class=\"font-medium\">{{ o.type }}</span>\n            <span class=\"mx-2\">\u2022</span>\n            <span>Property {{ o.propertyId }}</span>\n          </div>\n\n          <div class=\"flex flex-wrap gap-2 text-xs\">\n            <span class=\"px-2 py-1 rounded-full border bg-[--rt-raised-background]\"> userId: {{ asText(o.userId) }} </span>\n            <span class=\"px-2 py-1 rounded-full border bg-[--rt-raised-background]\"> agentId: {{ asText(o.agentId) }} </span>\n            <span class=\"px-2 py-1 rounded-full border bg-[--rt-raised-background]\">\n              invoice: {{ invoiceOptionLabel[o.invoiceOption] }}\n            </span>\n          </div>\n        </div>\n\n        <div class=\"flex items-center gap-2\">\n          <span class=\"px-3 py-1 rounded-full border text-xs font-medium\" [ngClass]=\"statusBadgeClass(o.status)\">\n            {{ o.status }}\n          </span>\n        </div>\n      </section>\n\n      <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-6\">\n        <!-- Main -->\n        <div class=\"lg:col-span-8 space-y-6\">\n          <!-- Item / Property -->\n          <section class=\"rounded-2xl border bg-[--rt-raised-background] overflow-hidden\">\n            <div class=\"p-4 flex items-start justify-between\">\n              <div>\n                <div class=\"text-sm font-semibold text-[--rt-text-primary]\">Property item</div>\n                <div class=\"text-xs text-[--rt-text-secondary]\">OfferItem snapshot</div>\n              </div>\n              <span class=\"text-xs px-2 py-1 rounded-full border bg-[--rt-base-background]\">\n                propertyId: {{ asText(o.item?.propertyId) }}\n              </span>\n            </div>\n\n            <div class=\"p-4 pt-0 flex flex-col gap-4\">\n              <div class=\"flex flex-col lg:flex-row gap-4\">\n                <div class=\"w-full lg:w-72\">\n                  <img\n                    class=\"w-full h-44 rounded-xl object-cover bg-gray-100\"\n                    [src]=\"firstMediaUrl(o) ?? '/assets/placeholder.jpg'\"\n                    [alt]=\"o.item?.title ?? 'Property'\"\n                  />\n                </div>\n\n                <div class=\"flex-1 space-y-2\">\n                  <div class=\"text-base font-semibold\">{{ asText(o.item?.title) }}</div>\n\n                  <div class=\"grid grid-cols-2 gap-3 text-sm pt-2\">\n                    <div>\n                      <div class=\"text-xs text-[--rt-text-secondary]\">Amount</div>\n                      <div class=\"font-medium\">{{ asMoney(o.item?.amount) }}</div>\n                    </div>\n                    <div>\n                      <div class=\"text-xs text-[--rt-text-secondary]\">Agent ID</div>\n                      <div class=\"font-medium\">{{ asText(o.item?.agentId) }}</div>\n                    </div>\n\n                    <div>\n                      <div class=\"text-xs text-[--rt-text-secondary]\">Bedrooms</div>\n                      <div class=\"font-medium\">{{ asText(o.item?.bedrooms) }}</div>\n                    </div>\n                    <div>\n                      <div class=\"text-xs text-[--rt-text-secondary]\">Bathrooms</div>\n                      <div class=\"font-medium\">{{ asText(o.item?.bathrooms) }}</div>\n                    </div>\n\n                    <div>\n                      <div class=\"text-xs text-[--rt-text-secondary]\">Receptions</div>\n                      <div class=\"font-medium\">{{ asText(o.item?.receptions) }}</div>\n                    </div>\n                    <div>\n                      <div class=\"text-xs text-[--rt-text-secondary]\">Media count</div>\n                      <div class=\"font-medium\">{{ asText(o.item?.media?.length ?? 0) }}</div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </section>\n\n          <!-- Rental terms -->\n          @if (isRental()) {\n            <section class=\"rounded-2xl border bg-[--rt-raised-background] p-4 space-y-3\">\n              <div class=\"flex items-start justify-between\">\n                <div>\n                  <div class=\"text-sm font-semibold\">Rental terms</div>\n                  <div class=\"text-xs text-[--rt-text-secondary]\">o.rentalTerms</div>\n                </div>\n              </div>\n\n              @if (o.rentalTerms; as rt) {\n                <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm\">\n                  <div>\n                    <div class=\"text-xs text-[--rt-text-secondary]\">Amount</div>\n                    <div class=\"font-medium\">{{ asMoney(rt.amount) }}</div>\n                  </div>\n\n                  <div>\n                    <div class=\"text-xs text-[--rt-text-secondary]\">Move-in date</div>\n                    <div class=\"font-medium\">{{ asText(rt.moveInDate) }}</div>\n                  </div>\n\n                  <div>\n                    <div class=\"text-xs text-[--rt-text-secondary]\">Payment frequency</div>\n                    <div class=\"font-medium\">\n                      @if (rt.paymentFrequency) {\n                        {{ paymentFrequencyLabel[rt.paymentFrequency] }}\n                      } @else {\n                        \u2014\n                      }\n                    </div>\n                  </div>\n\n                  <div>\n                    <div class=\"text-xs text-[--rt-text-secondary]\">Tenancy length (months)</div>\n                    <div class=\"font-medium\">{{ asText(rt.tenancyLengthMonths) }}</div>\n                  </div>\n\n                  <div>\n                    <div class=\"text-xs text-[--rt-text-secondary]\">Break clause (months)</div>\n                    <div class=\"font-medium\">{{ asText(rt.breakClauseMonths) }}</div>\n                  </div>\n\n                  <div>\n                    <div class=\"text-xs text-[--rt-text-secondary]\">Pets</div>\n                    <div class=\"font-medium\">{{ asList(rt.pets) }}</div>\n                  </div>\n\n                  <div>\n                    <div class=\"text-xs text-[--rt-text-secondary]\">Smoker</div>\n                    <div class=\"font-medium\">{{ asBool(rt.smoker) }}</div>\n                  </div>\n\n                  <div>\n                    <div class=\"text-xs text-[--rt-text-secondary]\">Furniture requirement</div>\n                    <div class=\"font-medium\">\n                      @if (rt.furnitureRequirement) {\n                        {{ furnitureRequirementLabel[rt.furnitureRequirement] }}\n                      } @else {\n                        \u2014\n                      }\n                    </div>\n                  </div>\n\n                  <div class=\"sm:col-span-2\">\n                    <div class=\"text-xs text-[--rt-text-secondary]\">Additional requests</div>\n                    <div class=\"font-medium whitespace-pre-wrap\">{{ asText(rt.additionalRequests) }}</div>\n                  </div>\n                </div>\n              } @else {\n                <div class=\"text-sm text-[--rt-text-secondary]\">No rental terms</div>\n              }\n            </section>\n          }\n\n          <!-- Sale details -->\n          @if (isSale()) {\n            <section class=\"rounded-2xl border bg-[--rt-raised-background] p-4 space-y-3\">\n              <div class=\"flex items-start justify-between\">\n                <div>\n                  <div class=\"text-sm font-semibold\">Sale details</div>\n                  <div class=\"text-xs text-[--rt-text-secondary]\">o.sale</div>\n                </div>\n              </div>\n\n              @if (o.sale; as s) {\n                <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm\">\n                  <div>\n                    <div class=\"text-xs text-[--rt-text-secondary]\">Amount</div>\n                    <div class=\"font-medium\">{{ asMoney(s.amount) }}</div>\n                  </div>\n\n                  <div>\n                    <div class=\"text-xs text-[--rt-text-secondary]\">Payment method</div>\n                    <div class=\"font-medium\">\n                      @if (s.paymentMethod) {\n                        {{ salePaymentMethodLabel[s.paymentMethod] }}\n                      } @else {\n                        \u2014\n                      }\n                    </div>\n                  </div>\n\n                  <div>\n                    <div class=\"text-xs text-[--rt-text-secondary]\">Buyer name</div>\n                    <div class=\"font-medium\">{{ asText(s.buyerName) }}</div>\n                  </div>\n\n                  <div>\n                    <div class=\"text-xs text-[--rt-text-secondary]\">Phone</div>\n                    <div class=\"font-medium\">{{ asText(s.phone) }}</div>\n                  </div>\n\n                  <div>\n                    <div class=\"text-xs text-[--rt-text-secondary]\">Email</div>\n                    <div class=\"font-medium\">{{ asText(s.email) }}</div>\n                  </div>\n\n                  <div>\n                    <div class=\"text-xs text-[--rt-text-secondary]\">Proposed exchange date</div>\n                    <div class=\"font-medium\">{{ asText(s.proposedExchangeDate) }}</div>\n                  </div>\n\n                  <div class=\"sm:col-span-2\">\n                    <div class=\"text-xs text-[--rt-text-secondary]\">Solicitor company</div>\n                    <div class=\"font-medium\">{{ asText(s.solicitorCompanyName) }}</div>\n                  </div>\n                </div>\n              } @else {\n                <div class=\"text-sm text-[--rt-text-secondary]\">No sale details</div>\n              }\n            </section>\n          }\n\n          <!-- Tenants -->\n          @if (isRental()) {\n            <section class=\"rounded-2xl border bg-[--rt-raised-background] p-4 space-y-3\">\n              <div class=\"flex items-start justify-between gap-3\">\n                <div>\n                  <div class=\"text-sm font-semibold\">Tenants</div>\n                  <div class=\"text-xs text-[--rt-text-secondary]\">o.tenants</div>\n                </div>\n\n                <div class=\"flex items-center gap-2\">\n                  <button\n                    type=\"button\"\n                    class=\"text-xs px-3 py-1 rounded-full border bg-[--rt-base-background] hover:bg-[--rt-raised-background]\"\n                    (click)=\"expandAllTenantsByIndex(o.tenants!.length)\"\n                    [disabled]=\"(o.tenants?.length ?? 0) === 0\"\n                  >\n                    Expand all\n                  </button>\n\n                  <button\n                    type=\"button\"\n                    class=\"text-xs px-3 py-1 rounded-full border bg-[--rt-base-background] hover:bg-[--rt-raised-background]\"\n                    (click)=\"collapseAllTenantsByIndex()\"\n                    [disabled]=\"expandedTenantIndexes().size === 0\"\n                  >\n                    Collapse all\n                  </button>\n\n                  <span class=\"text-xs px-2 py-1 rounded-full border bg-[--rt-base-background]\">\n                    count: {{ asText(o.tenants?.length ?? 0) }}\n                  </span>\n                </div>\n              </div>\n\n              @if ((o.tenants?.length ?? 0) > 0) {\n                <div class=\"space-y-3\">\n                  @for (t of o.tenants!; track $index) {\n                    <div class=\"rounded-xl border bg-[--rt-base-background] overflow-hidden\">\n                      <!-- Collapsed header row -->\n                      <button\n                        type=\"button\"\n                        class=\"w-full text-left p-4 flex items-start justify-between gap-3 hover:bg-[--rt-raised-background]\"\n                        (click)=\"toggleTenantByIndex($index)\"\n                      >\n                        <div class=\"min-w-0 space-y-1\">\n                          <div class=\"text-sm font-semibold truncate\">{{ asText(t.fullName) }}</div>\n                          <div class=\"text-xs text-[--rt-text-secondary] truncate\">\n                            {{ asText(t.email) }} \u00B7 {{ asText(t.phone) }}\n                          </div>\n\n                          <div class=\"flex flex-wrap gap-2 pt-1 text-xs\">\n                            <span class=\"px-2 py-1 rounded-full border\">\n                              @if (t.applicantType) {\n                                {{ applicantTypeLabel[t.applicantType] }}\n                              } @else {\n                                Applicant: \u2014\n                              }\n                            </span>\n\n                            <span class=\"px-2 py-1 rounded-full border\">\n                              @if (t.employmentStatus) {\n                                {{ employmentStatusLabel[t.employmentStatus] }}\n                              } @else {\n                                Employment: \u2014\n                              }\n                            </span>\n\n                            <span class=\"px-2 py-1 rounded-full border\">\n                              @if (t.adverseCreditStatus) {\n                                {{ adverseCreditStatusLabel[t.adverseCreditStatus] }}\n                              } @else {\n                                Credit: \u2014\n                              }\n                            </span>\n\n                            <span class=\"px-2 py-1 rounded-full border\">\n                              @if (t.visaStatus) {\n                                {{ visaStatusLabel[t.visaStatus] }}\n                              } @else {\n                                Visa: \u2014\n                              }\n                            </span>\n                          </div>\n                        </div>\n\n                        <div class=\"flex items-center gap-2 shrink-0\">\n                          @if (t.guarantor && !isEmptyGuarantor(t.guarantor)) {\n                            <span class=\"text-xs px-2 py-1 rounded-full border bg-yellow-50 text-yellow-800 border-yellow-200\">\n                              Guarantor\n                            </span>\n                          }\n\n                          <span class=\"text-xs px-2 py-1 rounded-full border bg-[--rt-base-background]\">\n                            {{ isTenantExpandedByIndex($index) ? 'Expanded' : 'Collapsed' }}\n                          </span>\n\n                          <svg\n                            class=\"w-4 h-4 transition-transform\"\n                            [class.rotate-180]=\"isTenantExpandedByIndex($index)\"\n                            viewBox=\"0 0 20 20\"\n                            fill=\"currentColor\"\n                            aria-hidden=\"true\"\n                          >\n                            <path\n                              fill-rule=\"evenodd\"\n                              d=\"M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.936a.75.75 0 1 1 1.08 1.04l-4.24 4.5a.75.75 0 0 1-1.08 0l-4.24-4.5a.75.75 0 0 1 .02-1.06z\"\n                              clip-rule=\"evenodd\"\n                            />\n                          </svg>\n                        </div>\n                      </button>\n\n                      <!-- Expanded content -->\n                      @if (isTenantExpandedByIndex($index)) {\n                        <div class=\"p-4 border-t space-y-4\">\n                          <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm\">\n                            <div>\n                              <div class=\"text-xs text-[--rt-text-secondary]\">Tenant ID</div>\n                              <div class=\"font-medium\">{{ t.id }}</div>\n                            </div>\n\n                            <div>\n                              <div class=\"text-xs text-[--rt-text-secondary]\">Age</div>\n                              <div class=\"font-medium\">{{ ageFromDob(t.dob) }}</div>\n                            </div>\n\n                            <div>\n                              <div class=\"text-xs text-[--rt-text-secondary]\">Gender</div>\n                              <div class=\"font-medium\">\n                                @if (t.gender) {\n                                  {{ genderLabel[t.gender] }}\n                                } @else {\n                                  \u2014\n                                }\n                              </div>\n                            </div>\n\n                            <div>\n                              <div class=\"text-xs text-[--rt-text-secondary]\">Nationality</div>\n                              <div class=\"font-medium\">{{ asText(t.nationality) }}</div>\n                            </div>\n\n                            <div class=\"sm:col-span-2\">\n                              <div class=\"text-xs text-[--rt-text-secondary]\">Address</div>\n                              <div class=\"font-medium\">{{ fullAddress(t.address) }}</div>\n                            </div>\n                          </div>\n\n                          <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Individual \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n                          @if (isIndividual(t)) {\n                            <div class=\"rounded-xl border p-3 space-y-2\">\n                              <div class=\"text-xs font-semibold\">Individual employment</div>\n\n                              <div>\n                                <div class=\"text-xs text-[--rt-text-secondary]\">Employment status</div>\n                                <div class=\"font-medium\">\n                                  @if (t.employmentStatus) {\n                                    {{ employmentStatusLabel[t.employmentStatus] }}\n                                  } @else {\n                                    \u2014\n                                  }\n                                </div>\n                              </div>\n\n                              <div>\n                                <div class=\"text-xs text-[--rt-text-secondary]\">Company</div>\n                                <div class=\"font-medium\">{{ asText(t.companyName) }}</div>\n                              </div>\n\n                              <div>\n                                <div class=\"text-xs text-[--rt-text-secondary]\">Job title</div>\n                                <div class=\"font-medium\">{{ asText(t.jobTitle) }}</div>\n                              </div>\n\n                              <div>\n                                <div class=\"text-xs text-[--rt-text-secondary]\">Annual salary</div>\n                                <div class=\"font-medium\">{{ asMoney(t.annualSalary) }}</div>\n                              </div>\n\n                              <div>\n                                <div class=\"text-xs text-[--rt-text-secondary]\">Tax return submitted</div>\n                                <div class=\"font-medium\">{{ asBool(t.taxReturnSubmitted) }}</div>\n                              </div>\n                            </div>\n                          }\n                          <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Corporate \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n                          @if (isCorporate(t)) {\n                            <div class=\"rounded-xl border p-3 space-y-2\">\n                              <div class=\"text-xs font-semibold\">Corporate applicant</div>\n\n                              <div>\n                                <div class=\"text-xs text-[--rt-text-secondary]\">Company name</div>\n                                <div class=\"font-medium\">{{ asText(t.corporateCompanyName) }}</div>\n                              </div>\n\n                              <div>\n                                <div class=\"text-xs text-[--rt-text-secondary]\">Company number</div>\n                                <div class=\"font-medium\">{{ asText(t.corporateCompanyNumber) }}</div>\n                              </div>\n\n                              <div>\n                                <div class=\"text-xs text-[--rt-text-secondary]\">Job title</div>\n                                <div class=\"font-medium\">{{ asText(t.corporateJobTitle) }}</div>\n                              </div>\n                            </div>\n                          }\n\n                          <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Student \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n                          @if (isStudent(t)) {\n                            <div class=\"rounded-xl border p-3 space-y-2\">\n                              <div class=\"text-xs font-semibold\">Student details</div>\n\n                              <div>\n                                <div class=\"text-xs text-[--rt-text-secondary]\">University</div>\n                                <div class=\"font-medium\">{{ asText(t.universityName) }}</div>\n                              </div>\n\n                              <div>\n                                <div class=\"text-xs text-[--rt-text-secondary]\">Course</div>\n                                <div class=\"font-medium\">{{ asText(t.courseTitle) }}</div>\n                              </div>\n\n                              <div>\n                                <div class=\"text-xs text-[--rt-text-secondary]\">Year of study</div>\n                                <div class=\"font-medium\">{{ asText(t.yearOfStudy) }}</div>\n                              </div>\n                            </div>\n                          }\n\n                          <!-- Guarantor (optional + hidden when empty) -->\n                          @if (t.guarantor && !isEmptyGuarantor(t.guarantor)) {\n                            <div class=\"rounded-xl border p-4 space-y-3\">\n                              <div class=\"flex items-start justify-between\">\n                                <div>\n                                  <div class=\"text-sm font-semibold\">Guarantor</div>\n                                  <div class=\"text-xs text-[--rt-text-secondary]\">t.guarantor</div>\n                                </div>\n                              </div>\n\n                              @if (t.guarantor; as g) {\n                                <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm\">\n                                  @if (g.fullName) {\n                                    <div>\n                                      <div class=\"text-xs text-[--rt-text-secondary]\">Full name</div>\n                                      <div class=\"font-medium\">{{ g.fullName }}</div>\n                                    </div>\n                                  }\n                                  @if (g.relationship) {\n                                    <div>\n                                      <div class=\"text-xs text-[--rt-text-secondary]\">Relationship</div>\n                                      <div class=\"font-medium\">{{ g.relationship }}</div>\n                                    </div>\n                                  }\n                                  @if (g.dob) {\n                                    <div>\n                                      <div class=\"text-xs text-[--rt-text-secondary]\">Age</div>\n                                      <div class=\"font-medium\">{{ ageFromDob(t.dob) }}</div>\n                                    </div>\n                                  }\n                                  @if (g.employmentStatus) {\n                                    <div>\n                                      <div class=\"text-xs text-[--rt-text-secondary]\">Employment status</div>\n                                      <div class=\"font-medium\">{{ employmentStatusLabel[g.employmentStatus] }}</div>\n                                    </div>\n                                  }\n                                  @if (g.phone) {\n                                    <div>\n                                      <div class=\"text-xs text-[--rt-text-secondary]\">Phone</div>\n                                      <div class=\"font-medium\">{{ g.phone }}</div>\n                                    </div>\n                                  }\n                                  @if (g.email) {\n                                    <div>\n                                      <div class=\"text-xs text-[--rt-text-secondary]\">Email</div>\n                                      <div class=\"font-medium\">{{ g.email }}</div>\n                                    </div>\n                                  }\n\n                                  @if (!isEmptyAddress(g.address)) {\n                                    <div class=\"sm:col-span-2\">\n                                      <div class=\"text-xs text-[--rt-text-secondary]\">Address</div>\n                                      <div class=\"font-medium\">{{ fullAddress(g.address) }}</div>\n                                    </div>\n                                  }\n\n                                  @if (g.companyName) {\n                                    <div>\n                                      <div class=\"text-xs text-[--rt-text-secondary]\">Company name</div>\n                                      <div class=\"font-medium\">{{ g.companyName }}</div>\n                                    </div>\n                                  }\n                                  @if (g.jobTitle) {\n                                    <div>\n                                      <div class=\"text-xs text-[--rt-text-secondary]\">Job title</div>\n                                      <div class=\"font-medium\">{{ g.jobTitle }}</div>\n                                    </div>\n                                  }\n                                  @if (g.annualSalary !== null && g.annualSalary !== undefined) {\n                                    <div>\n                                      <div class=\"text-xs text-[--rt-text-secondary]\">Annual salary</div>\n                                      <div class=\"font-medium\">{{ asMoney(g.annualSalary) }}</div>\n                                    </div>\n                                  }\n                                  @if (g.companyNumber) {\n                                    <div>\n                                      <div class=\"text-xs text-[--rt-text-secondary]\">Company number</div>\n                                      <div class=\"font-medium\">{{ g.companyNumber }}</div>\n                                    </div>\n                                  }\n                                  @if (g.taxReturnSubmitted !== null && g.taxReturnSubmitted !== undefined) {\n                                    <div>\n                                      <div class=\"text-xs text-[--rt-text-secondary]\">Tax return submitted</div>\n                                      <div class=\"font-medium\">{{ asBool(g.taxReturnSubmitted) }}</div>\n                                    </div>\n                                  }\n                                </div>\n                              }\n                            </div>\n                          }\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              } @else {\n                <div class=\"text-sm text-[--rt-text-secondary]\">No tenants</div>\n              }\n            </section>\n          }\n        </div>\n\n        <!-- Side -->\n        <aside class=\"lg:col-span-4 space-y-6\">\n          <!-- Offer core -->\n          <section class=\"rounded-2xl border bg-[--rt-raised-background] p-4 space-y-3\">\n            <div>\n              <div class=\"text-sm font-semibold\">Offer</div>\n              <div class=\"text-xs text-[--rt-text-secondary]\">Core fields</div>\n            </div>\n\n            <div class=\"grid grid-cols-1 gap-3 text-sm\">\n              <div class=\"flex items-center justify-between gap-3\">\n                <span class=\"text-[--rt-text-secondary]\">Type</span>\n                <span class=\"font-medium\">{{ asText(o.type) }}</span>\n              </div>\n\n              <div class=\"flex items-center justify-between gap-3\">\n                <span class=\"text-[--rt-text-secondary]\">Status</span>\n                <span class=\"font-medium\">{{ asText(o.status) }}</span>\n              </div>\n\n              <div class=\"flex items-center justify-between gap-3\">\n                <span class=\"text-[--rt-text-secondary]\">Invoice option</span>\n                <span class=\"font-medium\">{{ invoiceOptionLabel[o.invoiceOption] }}</span>\n              </div>\n\n              <div class=\"flex items-center justify-between gap-3\">\n                <span class=\"text-[--rt-text-secondary]\">Property ID</span>\n                <span class=\"font-medium\">{{ asText(o.propertyId) }}</span>\n              </div>\n\n              <div class=\"flex items-center justify-between gap-3\">\n                <span class=\"text-[--rt-text-secondary]\">Item amount</span>\n                <span class=\"font-medium\">{{ asMoney(o.item?.amount) }}</span>\n              </div>\n\n              @if (isRental()) {\n                <div class=\"flex items-center justify-between gap-3\">\n                  <span class=\"text-[--rt-text-secondary]\">Tenants</span>\n                  <span class=\"font-medium\">{{ asText(o.tenants?.length ?? 0) }}</span>\n                </div>\n              }\n            </div>\n          </section>\n        </aside>\n      </div>\n    </div>\n  </div>\n} @else {\n  <div class=\"max-w-7xl mx-auto px-4 lg:px-6 py-10\">\n    <div class=\"rounded-2xl border bg-[--rt-raised-background] p-6\">\n      <div class=\"h-5 w-48 bg-gray-200 rounded\"></div>\n      <div class=\"mt-3 h-4 w-72 bg-gray-200 rounded\"></div>\n      <div class=\"mt-6 grid grid-cols-1 lg:grid-cols-2 gap-4\">\n        <div class=\"h-40 bg-gray-200 rounded-xl\"></div>\n        <div class=\"h-40 bg-gray-200 rounded-xl\"></div>\n      </div>\n    </div>\n  </div>\n}\n" }]
         }] });
 
 class PropertyViewingDetailComponent extends BaseComponent {
@@ -3061,7 +3285,7 @@ class PropertyViewingDetailComponent extends BaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyViewingDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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      @if (viewing.item) {\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]=\"['../../', viewing.item.propertyId]\"\n          >\n            <div class=\"min-w-24 w-24 object-cover aspect-video rounded-md mr-3\">\n              @defer {\n                <rolatech-thumbnail [src]=\"viewing.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>{{ viewing.item.title }}</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\">{{ viewing.item.price | price }}</div>\n                </div>\n              </div>\n            </div>\n            <div class=\"hidden md:flex flex-col px-3\"></div>\n          </div>\n        </div>\n      }\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: PricePipe, name: "price" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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      @if (viewing.item) {\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]=\"['../../', viewing.item.propertyId]\"\n          >\n            <div class=\"min-w-24 w-24 object-cover aspect-video rounded-md mr-3\">\n              @defer {\n                <rolatech-thumbnail [src]=\"viewing.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>{{ viewing.item.title }}</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\">{{ viewing.item.price | price }}</div>\n                </div>\n              </div>\n            </div>\n            <div class=\"hidden md:flex flex-col px-3\"></div>\n          </div>\n        </div>\n      }\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$3.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$3.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: PricePipe, name: "price" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyViewingDetailComponent, decorators: [{
             type: Component,
@@ -3116,6 +3340,928 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                     ], 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" }]
         }] });
 
+function uid() {
+    // local-only UI identity (not sent to backend)
+    return (globalThis.crypto?.randomUUID?.() ?? Math.random().toString(16).slice(2));
+}
+class OfferFormFacade {
+    fb = inject(FormBuilder);
+    api = inject(PropertyOfferService);
+    offerType = signal('RENTAL', ...(ngDevMode ? [{ debugName: "offerType" }] : []));
+    propertyId = signal('', ...(ngDevMode ? [{ debugName: "propertyId" }] : [])); // set from route or selection
+    submitting = signal(false, ...(ngDevMode ? [{ debugName: "submitting" }] : []));
+    submitError = signal(null, ...(ngDevMode ? [{ debugName: "submitError" }] : []));
+    // Root form contains both rental + sale; submit picks correct shape.
+    form = signal(this.buildForm(), ...(ngDevMode ? [{ debugName: "form" }] : []));
+    tenantsArray = computed(() => this.form().get('tenants'), ...(ngDevMode ? [{ debugName: "tenantsArray" }] : []));
+    tenantIds = computed(() => this.tenantsArray().controls.map((c) => c.get('id')?.value), ...(ngDevMode ? [{ debugName: "tenantIds" }] : []));
+    // ✅ version signal to notify computed when FormArray mutates
+    tenantsVersion = signal(0, ...(ngDevMode ? [{ debugName: "tenantsVersion" }] : []));
+    tenantCount = computed(() => {
+        this.tenantsVersion(); // ✅ make it reactive
+        return this.tenantsArray().length;
+    }, ...(ngDevMode ? [{ debugName: "tenantCount" }] : []));
+    canRemoveTenant = computed(() => this.tenantCount() > 1, ...(ngDevMode ? [{ debugName: "canRemoveTenant" }] : []));
+    /** keys used by TenantListSection -> registry.reset(keys) */
+    tenantClientKeys = computed(() => {
+        this.tenantsVersion(); // ✅ recompute on add/remove/replace
+        return this.tenantsArray().controls.map((c) => c.get('clientKey')?.value);
+    }, ...(ngDevMode ? [{ debugName: "tenantClientKeys" }] : []));
+    isRental = computed(() => this.offerType() === 'RENTAL', ...(ngDevMode ? [{ debugName: "isRental" }] : []));
+    isSale = computed(() => this.offerType() === 'SALE', ...(ngDevMode ? [{ debugName: "isSale" }] : []));
+    rentalGroup = computed(() => this.form().get('rental'), ...(ngDevMode ? [{ debugName: "rentalGroup" }] : []));
+    saleGroup = computed(() => this.form().get('sale'), ...(ngDevMode ? [{ debugName: "saleGroup" }] : []));
+    constructor() {
+        // Keep validators synced with offer type & applicant type
+        effect(() => {
+            const type = this.offerType();
+            this.applyTypeValidators(type);
+        });
+        // Ensure at least 1 tenant for rental
+        effect(() => {
+            if (this.isRental()) {
+                if (this.tenantsArray().length === 0)
+                    this.addTenant();
+            }
+            else {
+                // if switching to sale, optionally clear tenants
+                // (keep them if you want; here we clear to avoid accidental submission)
+                while (this.tenantsArray().length > 0)
+                    this.tenantsArray().removeAt(0);
+            }
+        });
+    }
+    setOfferType(type) {
+        this.offerType.set(type);
+    }
+    setPropertyId(id) {
+        this.propertyId.set(id);
+    }
+    /** -------- tenant ops -------- */
+    addTenant() {
+        if (this.tenantsArray().length >= 6)
+            return;
+        this.tenantsArray().push(this.buildTenantGroup());
+        this.tenantsVersion.update((v) => v + 1);
+    }
+    removeTenantByClientKey(clientKey) {
+        if (!clientKey)
+            return;
+        const arr = this.tenantsArray();
+        if (!arr || !arr.controls?.length)
+            return;
+        // ✅ safest: use getRawValue() to avoid any disabled-control surprises
+        const idx = arr.controls.findIndex((c) => {
+            const key = c.get('clientKey')?.getRawValue?.() ?? c.get('clientKey')?.value;
+            return key === clientKey;
+        });
+        if (idx < 0)
+            return;
+        // ✅ remove
+        arr.removeAt(idx);
+        // ✅ notify signal-based views (@for keys) to recompute
+        this.tenantsVersion.update((v) => v + 1);
+        // ✅ keep validators consistent (optional but recommended)
+        this.applyTenantDynamicValidators();
+        // ✅ if you have any UI state that depends on current tenant count, update here
+    }
+    removeTenantById(id) {
+        const idx = this.tenantsArray().controls.findIndex((c) => c.get('id')?.value === id);
+        if (idx >= 0)
+            this.tenantsArray().removeAt(idx);
+    }
+    tenantGroupById(id) {
+        const g = this.tenantsArray().controls.find((c) => c.get('id')?.value === id);
+        if (!g)
+            throw new Error(`Tenant form group not found for id=${id}`);
+        return g;
+    }
+    tenantGroupByClientKey(clientKey) {
+        const g = this.tenantsArray().controls.find((c) => c.get('clientKey')?.value === clientKey);
+        if (!g)
+            throw new Error(`Tenant group not found for clientKey=${clientKey}`);
+        return g;
+    }
+    async submit() {
+        this.submitError.set(null);
+        // mark all touched
+        this.form().markAllAsTouched();
+        this.form().updateValueAndValidity();
+        if (this.form().invalid) {
+            this.submitError.set('Please check the form. Some fields are missing or invalid.');
+            return null;
+        }
+        this.submitting.set(true);
+        try {
+            if (this.isRental()) {
+                const payload = this.toCreateRentalPayload();
+                return (await firstValueFrom(this.api.createRental(payload))).data;
+            }
+            const payload = this.toCreateSalePayload();
+            return (await firstValueFrom(this.api.createSale(payload))).data;
+        }
+        catch (e) {
+            this.submitError.set(e?.message ?? 'Failed to submit offer.');
+            return null;
+        }
+        finally {
+            this.submitting.set(false);
+        }
+    }
+    // ---------- private ----------
+    buildForm() {
+        return this.fb.group({
+            // Rental terms
+            rental: this.fb.group({
+                amount: new FormControl(null),
+                moveInDate: new FormControl(null),
+                paymentFrequency: new FormControl(null),
+                tenancyLengthMonths: new FormControl(null),
+                breakClauseMonths: new FormControl(null),
+                // ✅ pets as array
+                pets: this.fb.control([], { nonNullable: true }),
+                smoker: new FormControl(null),
+                furnitureRequirement: new FormControl(null),
+                additionalRequests: new FormControl(null),
+            }),
+            // Tenants for rental
+            tenants: this.fb.array([]),
+            // Sale details
+            sale: this.fb.group({
+                amount: new FormControl(null),
+                buyerName: new FormControl(null),
+                email: new FormControl(null),
+                phone: new FormControl(null),
+                paymentMethod: new FormControl(null),
+                proposedExchangeDate: new FormControl(null),
+                solicitorCompanyName: new FormControl(null),
+            }),
+        });
+    }
+    buildTenantGroup() {
+        return this.fb.group({
+            clientKey: this.fb.control(uid(), { nonNullable: true }), // UI-only
+            id: this.fb.control(null), // backend id when saved
+            fullName: this.fb.control(null, [Validators.required]),
+            dob: this.fb.control(null, [Validators.required]),
+            gender: this.fb.control(null, [Validators.required]),
+            nationality: this.fb.control(null, [Validators.required]),
+            visaStatus: this.fb.control(null, [Validators.required]),
+            phone: this.fb.control(null, [Validators.required]),
+            email: this.fb.control(null, [Validators.required, Validators.email]),
+            address: this.fb.group({
+                line1: this.fb.control(null, [Validators.required]),
+                line2: this.fb.control(null),
+                city: this.fb.control(null, [Validators.required]),
+                postcode: this.fb.control(null, [Validators.required]),
+                country: this.fb.control(null, [Validators.required]),
+            }),
+            adverseCreditStatus: this.fb.control(null, [Validators.required]),
+            applicantType: this.fb.control(null, [Validators.required]),
+            employmentStatus: this.fb.control(null),
+            companyName: this.fb.control(null),
+            jobTitle: this.fb.control(null),
+            annualSalary: this.fb.control(null),
+            companyNumber: this.fb.control(null),
+            taxReturnSubmitted: this.fb.control(null),
+            corporateCompanyName: this.fb.control(null),
+            corporateCompanyNumber: this.fb.control(null),
+            corporateJobTitle: this.fb.control(null),
+            universityName: this.fb.control(null),
+            courseTitle: this.fb.control(null),
+            yearOfStudy: this.fb.control(null),
+            guarantor: this.fb.group({
+                fullName: this.fb.control(null),
+                dob: this.fb.control(null),
+                relationship: this.fb.control(null),
+                phone: this.fb.control(null),
+                email: this.fb.control(null),
+                address: this.fb.group({
+                    line1: this.fb.control(null),
+                    line2: this.fb.control(null),
+                    city: this.fb.control(null),
+                    postcode: this.fb.control(null),
+                    country: this.fb.control(null),
+                }),
+                employmentStatus: this.fb.control(null),
+                companyName: this.fb.control(null),
+                jobTitle: this.fb.control(null),
+                annualSalary: this.fb.control(null),
+                companyNumber: this.fb.control(null),
+                taxReturnSubmitted: this.fb.control(null),
+            }),
+        });
+    }
+    buildTenantGroup1() {
+        return this.fb.group({
+            // ✅ local-only identity for UI tracking
+            clientKey: this.fb.control(uid(), { nonNullable: true }),
+            // ✅ backend id (null until saved)
+            id: this.fb.control(null),
+            fullName: this.fb.control(null),
+            dob: new FormControl(null),
+            gender: new FormControl(null),
+            nationality: new FormControl(null),
+            visaStatus: new FormControl(null),
+            phone: new FormControl(null),
+            email: new FormControl(null),
+            address: this.fb.group({
+                line1: new FormControl(null),
+                line2: new FormControl(null),
+                city: new FormControl(null),
+                postcode: new FormControl(null),
+                country: new FormControl(null),
+            }),
+            adverseCreditStatus: new FormControl(null),
+            applicantType: new FormControl(null),
+            // Individual fields
+            employmentStatus: new FormControl(null),
+            companyName: new FormControl(null),
+            jobTitle: new FormControl(null),
+            annualSalary: new FormControl(null),
+            companyNumber: new FormControl(null),
+            taxReturnSubmitted: new FormControl(null),
+            // Corporate
+            corporateCompanyName: new FormControl(null),
+            corporateCompanyNumber: new FormControl(null),
+            corporateJobTitle: new FormControl(null),
+            // Student
+            universityName: new FormControl(null),
+            courseTitle: new FormControl(null),
+            yearOfStudy: new FormControl(null),
+            guarantor: this.fb.group({
+                fullName: new FormControl(null),
+                dob: new FormControl(null),
+                relationship: new FormControl(null),
+                phone: new FormControl(null),
+                email: new FormControl(null),
+                address: this.fb.group({
+                    line1: new FormControl(null),
+                    line2: new FormControl(null),
+                    city: new FormControl(null),
+                    postcode: new FormControl(null),
+                    country: new FormControl(null),
+                }),
+                employmentStatus: new FormControl(null),
+                companyName: new FormControl(null),
+                jobTitle: new FormControl(null),
+                annualSalary: new FormControl(null),
+                companyNumber: new FormControl(null),
+                taxReturnSubmitted: new FormControl(null),
+            }),
+        });
+    }
+    applyTypeValidators(type) {
+        const rental = this.form().get('rental');
+        const sale = this.form().get('sale');
+        // Clear all
+        for (const ctrl of Object.values(rental.controls))
+            ctrl.clearValidators();
+        for (const ctrl of Object.values(sale.controls))
+            ctrl.clearValidators();
+        if (type === 'RENTAL') {
+            rental.get('amount')?.setValidators([Validators.required, Validators.min(1)]);
+            rental.get('moveInDate')?.setValidators([Validators.required]);
+            rental.get('paymentFrequency')?.setValidators([Validators.required]);
+            rental.get('tenancyLengthMonths')?.setValidators([Validators.required, Validators.min(1)]);
+            rental.get('breakClauseMonths')?.setValidators([Validators.required, Validators.min(0)]);
+            rental.get('pets')?.setValidators([Validators.required]);
+            rental.get('smoker')?.setValidators([Validators.required]);
+            rental.get('furnitureRequirement')?.setValidators([Validators.required]);
+            // Tenant-level validators are applied in tenant sections (by facade helper)
+            this.applyTenantDynamicValidators();
+        }
+        if (type === 'SALE') {
+            sale.get('amount')?.setValidators([Validators.required, Validators.min(1)]);
+            sale.get('buyerName')?.setValidators([Validators.required]);
+            sale.get('email')?.setValidators([Validators.required, Validators.email]);
+            sale.get('phone')?.setValidators([Validators.required]);
+            sale.get('paymentMethod')?.setValidators([Validators.required]);
+            sale.get('proposedExchangeDate')?.setValidators([Validators.required]);
+            sale.get('solicitorCompanyName')?.setValidators([Validators.required]);
+        }
+        rental.updateValueAndValidity({ emitEvent: false });
+        sale.updateValueAndValidity({ emitEvent: false });
+        this.form().updateValueAndValidity({ emitEvent: false });
+    }
+    applyTenantDynamicValidators() {
+        // Dynamic rules:
+        // - applicantType required
+        // - if INDIVIDUAL: employmentStatus required; if UNEMPLOYED => guarantor required
+        // - if STUDENT => guarantor required
+        // - if CORPORATE: corporate fields required; guarantor optional
+        for (const g of this.tenantsArray().controls) {
+            g.get('fullName')?.setValidators([Validators.required]);
+            g.get('dob')?.setValidators([Validators.required]);
+            g.get('gender')?.setValidators([Validators.required]);
+            g.get('nationality')?.setValidators([Validators.required]);
+            g.get('visaStatus')?.setValidators([Validators.required]);
+            g.get('phone')?.setValidators([Validators.required]);
+            g.get('email')?.setValidators([Validators.required, Validators.email]);
+            g.get('address.line1')?.setValidators?.([Validators.required]);
+            g.get('adverseCreditStatus')?.setValidators([Validators.required]);
+            g.get('applicantType')?.setValidators([Validators.required]);
+            // clear variant validators first
+            g.get('employmentStatus')?.clearValidators();
+            g.get('companyName')?.clearValidators();
+            g.get('jobTitle')?.clearValidators();
+            g.get('annualSalary')?.clearValidators();
+            g.get('companyNumber')?.clearValidators();
+            g.get('taxReturnSubmitted')?.clearValidators();
+            g.get('corporateCompanyName')?.clearValidators();
+            g.get('corporateCompanyNumber')?.clearValidators();
+            g.get('corporateJobTitle')?.clearValidators();
+            g.get('universityName')?.clearValidators();
+            g.get('courseTitle')?.clearValidators();
+            g.get('yearOfStudy')?.clearValidators();
+            const guarantor = g.get('guarantor');
+            for (const c of Object.values(guarantor.controls)) {
+                if (c instanceof FormControl)
+                    c.clearValidators();
+            }
+            guarantor.get('address').controls['line1']?.clearValidators?.();
+            const applicantType = g.get('applicantType')?.value;
+            const employmentStatus = g.get('employmentStatus')?.value;
+            if (applicantType === 'INDIVIDUAL') {
+                g.get('employmentStatus')?.setValidators([Validators.required]);
+                if (employmentStatus === 'EMPLOYED') {
+                    g.get('companyName')?.setValidators([Validators.required]);
+                    g.get('jobTitle')?.setValidators([Validators.required]);
+                    g.get('annualSalary')?.setValidators([Validators.required, Validators.min(1)]);
+                }
+                if (employmentStatus === 'SELF_EMPLOYED') {
+                    g.get('companyName')?.setValidators([Validators.required]);
+                    g.get('jobTitle')?.setValidators([Validators.required]);
+                    g.get('annualSalary')?.setValidators([Validators.required, Validators.min(1)]);
+                    g.get('companyNumber')?.setValidators([Validators.required]);
+                    g.get('taxReturnSubmitted')?.setValidators([Validators.required]);
+                }
+                if (employmentStatus === 'UNEMPLOYED') {
+                    this.requireGuarantor(guarantor);
+                }
+            }
+            if (applicantType === 'CORPORATE') {
+                g.get('corporateCompanyName')?.setValidators([Validators.required]);
+                g.get('corporateCompanyNumber')?.setValidators([Validators.required]);
+                g.get('corporateJobTitle')?.setValidators([Validators.required]);
+                // guarantor optional
+            }
+            if (applicantType === 'STUDENT') {
+                g.get('universityName')?.setValidators([Validators.required]);
+                g.get('courseTitle')?.setValidators([Validators.required]);
+                g.get('yearOfStudy')?.setValidators([Validators.required, Validators.min(1)]);
+                this.requireGuarantor(guarantor);
+            }
+            g.updateValueAndValidity({ emitEvent: false });
+            guarantor.updateValueAndValidity({ emitEvent: false });
+        }
+    }
+    requireGuarantor(guarantor) {
+        guarantor.get('fullName')?.setValidators([Validators.required]);
+        guarantor.get('dob')?.setValidators([Validators.required]);
+        guarantor.get('relationship')?.setValidators([Validators.required]);
+        guarantor.get('phone')?.setValidators([Validators.required]);
+        guarantor.get('email')?.setValidators([Validators.required, Validators.email]);
+        const addr = guarantor.get('address');
+        addr.get('line1')?.setValidators([Validators.required]);
+        addr.get('city')?.setValidators([Validators.required]);
+        addr.get('postcode')?.setValidators([Validators.required]);
+        addr.get('country')?.setValidators([Validators.required]);
+        guarantor.get('employmentStatus')?.setValidators([Validators.required]);
+    }
+    toCreateRentalPayload() {
+        const v = this.form().value;
+        const tenants = (v.tenants ?? []).map((t) => {
+            const { id, clientKey, ...rest } = t; // ✅ strip both
+            return rest;
+        });
+        // Ensure dynamic validators apply before reading
+        this.applyTenantDynamicValidators();
+        const d = v.rental.moveInDate;
+        const moveInDate = d
+            ? d.toISOString().slice(0, 10) // YYYY-MM-DD
+            : null;
+        return {
+            propertyId: this.propertyId(),
+            rental: {
+                amount: v.rental.amount,
+                moveInDate: moveInDate,
+                paymentFrequency: v.rental.paymentFrequency,
+                tenancyLengthMonths: v.rental.tenancyLengthMonths,
+                breakClauseMonths: v.rental.breakClauseMonths,
+                pets: v.rental.pets,
+                smoker: v.rental.smoker,
+                furnitureRequirement: v.rental.furnitureRequirement,
+                additionalRequests: v.rental.additionalRequests,
+            },
+            tenants,
+        };
+    }
+    toCreateSalePayload() {
+        const v = this.form().value;
+        return {
+            propertyId: this.propertyId(),
+            sale: {
+                amount: v.sale.amount,
+                buyerName: v.sale.buyerName,
+                email: v.sale.email,
+                phone: v.sale.phone,
+                paymentMethod: v.sale.paymentMethod,
+                proposedExchangeDate: v.sale.proposedExchangeDate,
+                solicitorCompanyName: v.sale.solicitorCompanyName,
+            },
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OfferFormFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OfferFormFacade, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OfferFormFacade, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+const MY_FORMATS$5 = {
+    parse: {
+        dateInput: 'YYYY-MM-DD',
+    },
+    display: {
+        dateInput: 'YYYY-MM-DD',
+        monthYearLabel: 'MMM YYYY',
+        dateA11yLabel: 'YYYY-MM-DD',
+        monthYearA11yLabel: 'MMMM YYYY',
+    },
+};
+class RentalOfferTermsSection {
+    facade = inject(OfferFormFacade);
+    rental = this.facade.rentalGroup();
+    petsControl = computed(() => {
+        const c = this.rental.get('pets');
+        if (!c)
+            throw new Error('Rental form missing control: pets');
+        return c;
+    }, ...(ngDevMode ? [{ debugName: "petsControl" }] : []));
+    pets = signal([], ...(ngDevMode ? [{ debugName: "pets" }] : []));
+    separatorKeysCodes = [ENTER, COMMA];
+    minDate = new Date();
+    addPet(event) {
+        const raw = (event.value ?? '').trim();
+        event.chipInput?.clear();
+        if (!raw)
+            return;
+        const normalized = this.normalizePet(raw);
+        const curr = this.petsControl().value ?? [];
+        // ✅ prevent duplicates (case-insensitive)
+        const exists = curr.some((x) => x.toLowerCase() === normalized.toLowerCase());
+        if (exists)
+            return;
+        this.pets.set([...curr, normalized]);
+        this.petsControl().setValue([...curr, normalized]);
+        this.petsControl().markAsDirty();
+        this.petsControl().updateValueAndValidity();
+    }
+    removePet(pet) {
+        const curr = this.petsControl().value ?? [];
+        const next = curr.filter((x) => x !== pet);
+        this.pets.set(next); // Manually update signal
+        this.petsControl().setValue(next);
+        this.petsControl().markAsDirty();
+        this.petsControl().updateValueAndValidity();
+    }
+    normalizePet(v) {
+        // Keep it user-friendly: trim, collapse spaces, Title Case
+        const cleaned = v.replace(/\s+/g, ' ').trim();
+        if (!cleaned)
+            return cleaned;
+        return cleaned.charAt(0).toUpperCase() + cleaned.slice(1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RentalOfferTermsSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: RentalOfferTermsSection, isStandalone: true, selector: "rolatech-rental-offer-terms-section", providers: [
+            {
+                provide: DateAdapter,
+                useClass: MomentDateAdapter,
+                deps: [MAT_DATE_LOCALE],
+            },
+            { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$5 },
+        ], ngImport: i0, template: "<div class=\"grid\" [formGroup]=\"rental\">\n  <div class=\"grid grid-cols-12 gap-3\">\n    <mat-form-field class=\"col-span-4\">\n      <mat-label>Offer amount (PCM)</mat-label>\n      <input matInput type=\"number\" formControlName=\"amount\" />\n    </mat-form-field>\n\n    <mat-form-field class=\"col-span-4\">\n      <mat-label>Move-in date</mat-label>\n      <input matInput [min]=\"minDate\" (focus)=\"dp.open()\" [matDatepicker]=\"dp\" formControlName=\"moveInDate\" readonly />\n      <mat-datepicker-toggle matIconSuffix [for]=\"dp\"></mat-datepicker-toggle>\n      <mat-datepicker #dp></mat-datepicker>\n    </mat-form-field>\n    <mat-form-field class=\"col-span-4\">\n      <mat-label>Payment frequency</mat-label>\n      <mat-select formControlName=\"paymentFrequency\">\n        <mat-option value=\"MONTHLY\">Monthly</mat-option>\n        <mat-option value=\"QUARTERLY\">Quarterly</mat-option>\n        <mat-option value=\"SEMI_ANNUALLY\">Semi-annually</mat-option>\n        <mat-option value=\"ANNUALLY\">Annually</mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"grid grid-cols-12 gap-3\">\n    <mat-form-field class=\"col-span-4\">\n      <mat-label>Tenancy length (months)</mat-label>\n      <input matInput type=\"number\" formControlName=\"tenancyLengthMonths\" />\n    </mat-form-field>\n\n    <mat-form-field class=\"col-span-4\">\n      <mat-label>Break clause (months)</mat-label>\n      <input matInput type=\"number\" formControlName=\"breakClauseMonths\" />\n    </mat-form-field>\n    <mat-form-field class=\"col-span-4\">\n      <mat-label>Furniture</mat-label>\n      <mat-select formControlName=\"furnitureRequirement\">\n        <mat-option value=\"FURNISHED\">Furnished</mat-option>\n        <mat-option value=\"UNFURNISHED\">Unfurnished</mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <!-- <mat-form-field class=\"span2\">\n    <mat-label>Pet (type all pets)</mat-label>\n    <input matInput formControlName=\"pets\" />\n    <mat-hint>Please type all pets manually</mat-hint>\n  </mat-form-field> -->\n  <mat-form-field appearance=\"fill\" class=\"w-full\">\n    <mat-chip-grid #chipGrid aria-label=\"Pets\">\n      @for (p of pets(); track p) {\n      <mat-chip-row (removed)=\"removePet(p)\">\n        {{ p }}\n        <button matChipRemove [attr.aria-label]=\"'remove ' + p\">\n          <mat-icon>cancel</mat-icon>\n        </button>\n      </mat-chip-row>\n      }\n\n      <input\n        placeholder=\"Add a pet (e.g., Dog, Cat)\"\n        [matChipInputFor]=\"chipGrid\"\n        [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n        (matChipInputTokenEnd)=\"addPet($event)\"\n      />\n    </mat-chip-grid>\n\n    <mat-hint>Press Enter or comma to add multiple pets.</mat-hint>\n  </mat-form-field>\n  <!--\n  <mat-chip-listbox multiple [formControl]=\"petsControl()\" aria-label=\"Pets\">\n    <mat-chip-option value=\"DOG\"> <mat-icon>pets</mat-icon> Dog </mat-chip-option>\n\n    <mat-chip-option value=\"CAT\"> <mat-icon>pets</mat-icon> Cat </mat-chip-option>\n\n    <mat-chip-option value=\"SMALL_ANIMAL\"> <mat-icon>pets</mat-icon> Small animal </mat-chip-option>\n\n    <mat-chip-option value=\"BIRD\"> <mat-icon>flutter_dash</mat-icon> Bird </mat-chip-option>\n\n    <mat-chip-option value=\"REPTILE\"> <mat-icon>pest_control</mat-icon> Reptile </mat-chip-option>\n  </mat-chip-listbox> -->\n\n  @if (petsControl().value.length) {\n  <p class=\"hint\">Landlord approval may still be required.</p>\n  }\n\n  <mat-slide-toggle class=\"py-3\" formControlName=\"smoker\">Smoker</mat-slide-toggle>\n\n  <mat-form-field class=\"span2\">\n    <mat-label>Additional requests</mat-label>\n    <textarea matInput rows=\"3\" formControlName=\"additionalRequests\"></textarea>\n  </mat-form-field>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: i4.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: i4.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: MatNativeDateModule }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i6$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1$4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i1$4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i1$4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1$4.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: AngularComponentsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RentalOfferTermsSection, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-rental-offer-terms-section', imports: [
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatDatepickerModule,
+                        MatNativeDateModule,
+                        MatSlideToggleModule,
+                        MatChipsModule,
+                        MatIcon,
+                        AngularComponentsModule,
+                    ], providers: [
+                        {
+                            provide: DateAdapter,
+                            useClass: MomentDateAdapter,
+                            deps: [MAT_DATE_LOCALE],
+                        },
+                        { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$5 },
+                    ], template: "<div class=\"grid\" [formGroup]=\"rental\">\n  <div class=\"grid grid-cols-12 gap-3\">\n    <mat-form-field class=\"col-span-4\">\n      <mat-label>Offer amount (PCM)</mat-label>\n      <input matInput type=\"number\" formControlName=\"amount\" />\n    </mat-form-field>\n\n    <mat-form-field class=\"col-span-4\">\n      <mat-label>Move-in date</mat-label>\n      <input matInput [min]=\"minDate\" (focus)=\"dp.open()\" [matDatepicker]=\"dp\" formControlName=\"moveInDate\" readonly />\n      <mat-datepicker-toggle matIconSuffix [for]=\"dp\"></mat-datepicker-toggle>\n      <mat-datepicker #dp></mat-datepicker>\n    </mat-form-field>\n    <mat-form-field class=\"col-span-4\">\n      <mat-label>Payment frequency</mat-label>\n      <mat-select formControlName=\"paymentFrequency\">\n        <mat-option value=\"MONTHLY\">Monthly</mat-option>\n        <mat-option value=\"QUARTERLY\">Quarterly</mat-option>\n        <mat-option value=\"SEMI_ANNUALLY\">Semi-annually</mat-option>\n        <mat-option value=\"ANNUALLY\">Annually</mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"grid grid-cols-12 gap-3\">\n    <mat-form-field class=\"col-span-4\">\n      <mat-label>Tenancy length (months)</mat-label>\n      <input matInput type=\"number\" formControlName=\"tenancyLengthMonths\" />\n    </mat-form-field>\n\n    <mat-form-field class=\"col-span-4\">\n      <mat-label>Break clause (months)</mat-label>\n      <input matInput type=\"number\" formControlName=\"breakClauseMonths\" />\n    </mat-form-field>\n    <mat-form-field class=\"col-span-4\">\n      <mat-label>Furniture</mat-label>\n      <mat-select formControlName=\"furnitureRequirement\">\n        <mat-option value=\"FURNISHED\">Furnished</mat-option>\n        <mat-option value=\"UNFURNISHED\">Unfurnished</mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <!-- <mat-form-field class=\"span2\">\n    <mat-label>Pet (type all pets)</mat-label>\n    <input matInput formControlName=\"pets\" />\n    <mat-hint>Please type all pets manually</mat-hint>\n  </mat-form-field> -->\n  <mat-form-field appearance=\"fill\" class=\"w-full\">\n    <mat-chip-grid #chipGrid aria-label=\"Pets\">\n      @for (p of pets(); track p) {\n      <mat-chip-row (removed)=\"removePet(p)\">\n        {{ p }}\n        <button matChipRemove [attr.aria-label]=\"'remove ' + p\">\n          <mat-icon>cancel</mat-icon>\n        </button>\n      </mat-chip-row>\n      }\n\n      <input\n        placeholder=\"Add a pet (e.g., Dog, Cat)\"\n        [matChipInputFor]=\"chipGrid\"\n        [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n        (matChipInputTokenEnd)=\"addPet($event)\"\n      />\n    </mat-chip-grid>\n\n    <mat-hint>Press Enter or comma to add multiple pets.</mat-hint>\n  </mat-form-field>\n  <!--\n  <mat-chip-listbox multiple [formControl]=\"petsControl()\" aria-label=\"Pets\">\n    <mat-chip-option value=\"DOG\"> <mat-icon>pets</mat-icon> Dog </mat-chip-option>\n\n    <mat-chip-option value=\"CAT\"> <mat-icon>pets</mat-icon> Cat </mat-chip-option>\n\n    <mat-chip-option value=\"SMALL_ANIMAL\"> <mat-icon>pets</mat-icon> Small animal </mat-chip-option>\n\n    <mat-chip-option value=\"BIRD\"> <mat-icon>flutter_dash</mat-icon> Bird </mat-chip-option>\n\n    <mat-chip-option value=\"REPTILE\"> <mat-icon>pest_control</mat-icon> Reptile </mat-chip-option>\n  </mat-chip-listbox> -->\n\n  @if (petsControl().value.length) {\n  <p class=\"hint\">Landlord approval may still be required.</p>\n  }\n\n  <mat-slide-toggle class=\"py-3\" formControlName=\"smoker\">Smoker</mat-slide-toggle>\n\n  <mat-form-field class=\"span2\">\n    <mat-label>Additional requests</mat-label>\n    <textarea matInput rows=\"3\" formControlName=\"additionalRequests\"></textarea>\n  </mat-form-field>\n</div>\n" }]
+        }] });
+
+class TenantRegistryService {
+    keys = [];
+    cursor = 0;
+    signature = '';
+    resetIfChanged(keys) {
+        const sig = (keys ?? []).join('|'); // good enough signature for stable keys
+        if (sig === this.signature)
+            return; // ✅ do NOT reset during same render
+        this.signature = sig;
+        this.keys = [...keys];
+        this.cursor = 0;
+    }
+    consumeNextKey() {
+        const key = this.keys[this.cursor];
+        if (!key) {
+            throw new Error(`TenantRegistryService: no key at cursor=${this.cursor}. ` +
+                `keys.length=${this.keys.length}. Did you resetIfChanged() before rendering cards?`);
+        }
+        this.cursor++;
+        return key;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TenantRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TenantRegistryService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TenantRegistryService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const MY_FORMATS$4 = {
+    parse: {
+        dateInput: 'YYYY-MM-DD',
+    },
+    display: {
+        dateInput: 'YYYY-MM-DD',
+        monthYearLabel: 'MMM YYYY',
+        dateA11yLabel: 'YYYY-MM-DD',
+        monthYearA11yLabel: 'MMMM YYYY',
+    },
+};
+class TenantBasicInfoSection {
+    cc = inject(ControlContainer);
+    // ✅ lazy read (never null once parent [formGroup] exists)
+    g = computed(() => this.cc.control, ...(ngDevMode ? [{ debugName: "g" }] : []));
+    // ✅ computed depends on g()
+    address = computed(() => this.g().get('address'), ...(ngDevMode ? [{ debugName: "address" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TenantBasicInfoSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: TenantBasicInfoSection, isStandalone: true, selector: "rolatech-tenant-basic-info-section", providers: [
+            {
+                provide: DateAdapter,
+                useClass: MomentDateAdapter,
+                deps: [MAT_DATE_LOCALE],
+            },
+            { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$4 },
+        ], ngImport: i0, template: "<div class=\"text-lg\">Basic info</div>\n<div class=\"grid\" [formGroup]=\"g()\">\n  <div class=\"grid grid-cols-12 gap-3\">\n    <mat-form-field class=\"col-span-4\">\n      <mat-label>Full name</mat-label>\n      <input matInput formControlName=\"fullName\" />\n    </mat-form-field>\n\n    <mat-form-field class=\"col-span-4\">\n      <mat-label>Date of birth</mat-label>\n      <input matInput [matDatepicker]=\"dp\" formControlName=\"dob\" readonly />\n      <mat-datepicker-toggle matIconSuffix [for]=\"dp\"></mat-datepicker-toggle>\n      <mat-datepicker #dp></mat-datepicker>\n    </mat-form-field>\n\n    <mat-form-field class=\"col-span-4\">\n      <mat-label>Gender</mat-label>\n      <mat-select formControlName=\"gender\">\n        <mat-option value=\"MALE\">Male</mat-option>\n        <mat-option value=\"FEMALE\">Female</mat-option>\n        <mat-option value=\"OTHER\">Other</mat-option>\n        <mat-option value=\"PREFER_NOT_TO_SAY\">Prefer not to say</mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n  <div class=\"grid grid-cols-12 gap-3\">\n    <mat-form-field class=\"col-span-4\">\n      <mat-label>Nationality</mat-label>\n      <input matInput formControlName=\"nationality\" />\n    </mat-form-field>\n\n    <mat-form-field class=\"col-span-4\">\n      <mat-label>Visa status</mat-label>\n      <mat-select formControlName=\"visaStatus\">\n        <mat-option value=\"CITIZEN\">Citizen</mat-option>\n        <mat-option value=\"WORK_VISA\">Work visa</mat-option>\n        <mat-option value=\"STUDENT_VISA\">Student visa</mat-option>\n        <mat-option value=\"OTHER\">Other</mat-option>\n      </mat-select>\n    </mat-form-field>\n\n    <mat-form-field class=\"col-span-4\">\n      <mat-label>Adverse credit status</mat-label>\n      <mat-select formControlName=\"adverseCreditStatus\">\n        <mat-option value=\"NONE\">None</mat-option>\n        <mat-option value=\"CCJ\">CCJ</mat-option>\n        <mat-option value=\"BANKRUPTCY\">Bankruptcy</mat-option>\n        <mat-option value=\"IVA\">IVA</mat-option>\n        <mat-option value=\"OTHER\">Other</mat-option>\n      </mat-select>\n    </mat-form-field>\n    <mat-form-field class=\"col-span-6\">\n      <mat-label>Phone</mat-label>\n      <input matInput formControlName=\"phone\" />\n    </mat-form-field>\n\n    <mat-form-field class=\"col-span-6\">\n      <mat-label>Email</mat-label>\n      <input matInput formControlName=\"email\" />\n    </mat-form-field>\n  </div>\n\n  <div [formGroup]=\"address()\">\n    <h5>Current address</h5>\n    <div class=\"grid grid-cols-12 gap-3\">\n      <mat-form-field class=\"col-span-6\">\n        <mat-label>Line 1</mat-label>\n        <input matInput formControlName=\"line1\" />\n      </mat-form-field>\n\n      <mat-form-field class=\"col-span-6\">\n        <mat-label>Line 2</mat-label>\n        <input matInput formControlName=\"line2\" />\n      </mat-form-field>\n\n      <mat-form-field class=\"col-span-4\">\n        <mat-label>City</mat-label>\n        <input matInput formControlName=\"city\" />\n      </mat-form-field>\n\n      <mat-form-field class=\"col-span-4\">\n        <mat-label>Postcode</mat-label>\n        <input matInput formControlName=\"postcode\" />\n      </mat-form-field>\n\n      <mat-form-field class=\"col-span-4\">\n        <mat-label>Country</mat-label>\n        <input matInput formControlName=\"country\" />\n      </mat-form-field>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: i4.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: i4.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: MatNativeDateModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TenantBasicInfoSection, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-tenant-basic-info-section', imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatSelectModule, MatDatepickerModule, MatNativeDateModule], providers: [
+                        {
+                            provide: DateAdapter,
+                            useClass: MomentDateAdapter,
+                            deps: [MAT_DATE_LOCALE],
+                        },
+                        { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$4 },
+                    ], template: "<div class=\"text-lg\">Basic info</div>\n<div class=\"grid\" [formGroup]=\"g()\">\n  <div class=\"grid grid-cols-12 gap-3\">\n    <mat-form-field class=\"col-span-4\">\n      <mat-label>Full name</mat-label>\n      <input matInput formControlName=\"fullName\" />\n    </mat-form-field>\n\n    <mat-form-field class=\"col-span-4\">\n      <mat-label>Date of birth</mat-label>\n      <input matInput [matDatepicker]=\"dp\" formControlName=\"dob\" readonly />\n      <mat-datepicker-toggle matIconSuffix [for]=\"dp\"></mat-datepicker-toggle>\n      <mat-datepicker #dp></mat-datepicker>\n    </mat-form-field>\n\n    <mat-form-field class=\"col-span-4\">\n      <mat-label>Gender</mat-label>\n      <mat-select formControlName=\"gender\">\n        <mat-option value=\"MALE\">Male</mat-option>\n        <mat-option value=\"FEMALE\">Female</mat-option>\n        <mat-option value=\"OTHER\">Other</mat-option>\n        <mat-option value=\"PREFER_NOT_TO_SAY\">Prefer not to say</mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n  <div class=\"grid grid-cols-12 gap-3\">\n    <mat-form-field class=\"col-span-4\">\n      <mat-label>Nationality</mat-label>\n      <input matInput formControlName=\"nationality\" />\n    </mat-form-field>\n\n    <mat-form-field class=\"col-span-4\">\n      <mat-label>Visa status</mat-label>\n      <mat-select formControlName=\"visaStatus\">\n        <mat-option value=\"CITIZEN\">Citizen</mat-option>\n        <mat-option value=\"WORK_VISA\">Work visa</mat-option>\n        <mat-option value=\"STUDENT_VISA\">Student visa</mat-option>\n        <mat-option value=\"OTHER\">Other</mat-option>\n      </mat-select>\n    </mat-form-field>\n\n    <mat-form-field class=\"col-span-4\">\n      <mat-label>Adverse credit status</mat-label>\n      <mat-select formControlName=\"adverseCreditStatus\">\n        <mat-option value=\"NONE\">None</mat-option>\n        <mat-option value=\"CCJ\">CCJ</mat-option>\n        <mat-option value=\"BANKRUPTCY\">Bankruptcy</mat-option>\n        <mat-option value=\"IVA\">IVA</mat-option>\n        <mat-option value=\"OTHER\">Other</mat-option>\n      </mat-select>\n    </mat-form-field>\n    <mat-form-field class=\"col-span-6\">\n      <mat-label>Phone</mat-label>\n      <input matInput formControlName=\"phone\" />\n    </mat-form-field>\n\n    <mat-form-field class=\"col-span-6\">\n      <mat-label>Email</mat-label>\n      <input matInput formControlName=\"email\" />\n    </mat-form-field>\n  </div>\n\n  <div [formGroup]=\"address()\">\n    <h5>Current address</h5>\n    <div class=\"grid grid-cols-12 gap-3\">\n      <mat-form-field class=\"col-span-6\">\n        <mat-label>Line 1</mat-label>\n        <input matInput formControlName=\"line1\" />\n      </mat-form-field>\n\n      <mat-form-field class=\"col-span-6\">\n        <mat-label>Line 2</mat-label>\n        <input matInput formControlName=\"line2\" />\n      </mat-form-field>\n\n      <mat-form-field class=\"col-span-4\">\n        <mat-label>City</mat-label>\n        <input matInput formControlName=\"city\" />\n      </mat-form-field>\n\n      <mat-form-field class=\"col-span-4\">\n        <mat-label>Postcode</mat-label>\n        <input matInput formControlName=\"postcode\" />\n      </mat-form-field>\n\n      <mat-form-field class=\"col-span-4\">\n        <mat-label>Country</mat-label>\n        <input matInput formControlName=\"country\" />\n      </mat-form-field>\n    </div>\n  </div>\n</div>\n" }]
+        }] });
+
+class CorporateSection {
+    cc = inject(ControlContainer);
+    g = computed(() => this.cc.control, ...(ngDevMode ? [{ debugName: "g" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CorporateSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: CorporateSection, isStandalone: true, selector: "rolatech-corporate-section", ngImport: i0, template: "<h4>Corporate applicant</h4>\n\n<div class=\"grid grid-cols-12 gap-3\" [formGroup]=\"g()\">\n  <mat-form-field class=\"col-span-4\">\n    <mat-label>Company name</mat-label>\n    <input matInput formControlName=\"corporateCompanyName\" />\n  </mat-form-field>\n\n  <mat-form-field class=\"col-span-4\">\n    <mat-label>Company number</mat-label>\n    <input matInput formControlName=\"corporateCompanyNumber\" />\n  </mat-form-field>\n\n  <mat-form-field class=\"col-span-4\">\n    <mat-label>Job title</mat-label>\n    <input matInput formControlName=\"corporateJobTitle\" />\n  </mat-form-field>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CorporateSection, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-corporate-section', imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule], template: "<h4>Corporate applicant</h4>\n\n<div class=\"grid grid-cols-12 gap-3\" [formGroup]=\"g()\">\n  <mat-form-field class=\"col-span-4\">\n    <mat-label>Company name</mat-label>\n    <input matInput formControlName=\"corporateCompanyName\" />\n  </mat-form-field>\n\n  <mat-form-field class=\"col-span-4\">\n    <mat-label>Company number</mat-label>\n    <input matInput formControlName=\"corporateCompanyNumber\" />\n  </mat-form-field>\n\n  <mat-form-field class=\"col-span-4\">\n    <mat-label>Job title</mat-label>\n    <input matInput formControlName=\"corporateJobTitle\" />\n  </mat-form-field>\n</div>\n" }]
+        }] });
+
+class EmploymentSection {
+    cc = inject(ControlContainer);
+    g = computed(() => this.cc.control, ...(ngDevMode ? [{ debugName: "g" }] : []));
+    isEmployed() {
+        return this.g().get('employmentStatus')?.value === 'EMPLOYED';
+    }
+    isSelfEmployed() {
+        return this.g().get('employmentStatus')?.value === 'SELF_EMPLOYED';
+    }
+    isUnemployed() {
+        return this.g().get('employmentStatus')?.value === 'UNEMPLOYED';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EmploymentSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: EmploymentSection, isStandalone: true, selector: "rolatech-employment-section", ngImport: i0, template: "<h4>Employment</h4>\n\n<div class=\"grid grid-cols-12 gap-3\" [formGroup]=\"g()\">\n  <mat-form-field class=\"col-span-12\">\n    <mat-label>Employment status</mat-label>\n    <mat-select formControlName=\"employmentStatus\">\n      <mat-option value=\"EMPLOYED\">Employed</mat-option>\n      <mat-option value=\"SELF_EMPLOYED\">Self-employed</mat-option>\n      <mat-option value=\"UNEMPLOYED\">Unemployed</mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  @if (isEmployed() || isSelfEmployed()) {\n  <mat-form-field class=\"col-span-4\">\n    <mat-label>Company name</mat-label>\n    <input matInput formControlName=\"companyName\" />\n  </mat-form-field>\n\n  <mat-form-field class=\"col-span-4\">\n    <mat-label>Job title</mat-label>\n    <input matInput formControlName=\"jobTitle\" />\n  </mat-form-field>\n\n  <mat-form-field class=\"col-span-4\">\n    <mat-label>Annual salary</mat-label>\n    <input matInput type=\"number\" formControlName=\"annualSalary\" />\n  </mat-form-field>\n  } @if (isSelfEmployed()) {\n  <mat-form-field class=\"col-span-4\">\n    <mat-label>Company number</mat-label>\n    <input matInput formControlName=\"companyNumber\" />\n  </mat-form-field>\n\n  <mat-slide-toggle class=\"col-span-12\" formControlName=\"taxReturnSubmitted\">Tax return submitted</mat-slide-toggle>\n  } @if (isUnemployed()) {\n  <p class=\"col-span-12 hint\">Guarantor is required when unemployed.</p>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.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: MatSelectModule }, { kind: "component", type: i4.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: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i6$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EmploymentSection, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-employment-section', imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatSelectModule, MatSlideToggleModule], template: "<h4>Employment</h4>\n\n<div class=\"grid grid-cols-12 gap-3\" [formGroup]=\"g()\">\n  <mat-form-field class=\"col-span-12\">\n    <mat-label>Employment status</mat-label>\n    <mat-select formControlName=\"employmentStatus\">\n      <mat-option value=\"EMPLOYED\">Employed</mat-option>\n      <mat-option value=\"SELF_EMPLOYED\">Self-employed</mat-option>\n      <mat-option value=\"UNEMPLOYED\">Unemployed</mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  @if (isEmployed() || isSelfEmployed()) {\n  <mat-form-field class=\"col-span-4\">\n    <mat-label>Company name</mat-label>\n    <input matInput formControlName=\"companyName\" />\n  </mat-form-field>\n\n  <mat-form-field class=\"col-span-4\">\n    <mat-label>Job title</mat-label>\n    <input matInput formControlName=\"jobTitle\" />\n  </mat-form-field>\n\n  <mat-form-field class=\"col-span-4\">\n    <mat-label>Annual salary</mat-label>\n    <input matInput type=\"number\" formControlName=\"annualSalary\" />\n  </mat-form-field>\n  } @if (isSelfEmployed()) {\n  <mat-form-field class=\"col-span-4\">\n    <mat-label>Company number</mat-label>\n    <input matInput formControlName=\"companyNumber\" />\n  </mat-form-field>\n\n  <mat-slide-toggle class=\"col-span-12\" formControlName=\"taxReturnSubmitted\">Tax return submitted</mat-slide-toggle>\n  } @if (isUnemployed()) {\n  <p class=\"col-span-12 hint\">Guarantor is required when unemployed.</p>\n  }\n</div>\n" }]
+        }] });
+
+const MY_FORMATS$3 = {
+    parse: {
+        dateInput: 'YYYY-MM-DD',
+    },
+    display: {
+        dateInput: 'YYYY-MM-DD',
+        monthYearLabel: 'MMM YYYY',
+        dateA11yLabel: 'YYYY-MM-DD',
+        monthYearA11yLabel: 'MMMM YYYY',
+    },
+};
+class GuarantorSection {
+    cc = inject(ControlContainer);
+    /** tenant group (parent wrapper) */
+    tenant = computed(() => this.cc.control, ...(ngDevMode ? [{ debugName: "tenant" }] : []));
+    /** guarantor subgroup */
+    guarantor = computed(() => this.tenant().get('guarantor'), ...(ngDevMode ? [{ debugName: "guarantor" }] : []));
+    /** address subgroup under guarantor */
+    guarantorAddress = computed(() => this.guarantor().get('address'), ...(ngDevMode ? [{ debugName: "guarantorAddress" }] : []));
+    requirementHint() {
+        const t = this.tenant();
+        const applicantType = t.get('applicantType')?.value;
+        const employmentStatus = t.get('employmentStatus')?.value;
+        if (applicantType === 'STUDENT')
+            return 'Required';
+        if (applicantType === 'INDIVIDUAL' && employmentStatus === 'UNEMPLOYED')
+            return 'Required';
+        return 'Optional';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GuarantorSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: GuarantorSection, isStandalone: true, selector: "rolatech-guarantor-section", providers: [
+            {
+                provide: DateAdapter,
+                useClass: MomentDateAdapter,
+                deps: [MAT_DATE_LOCALE],
+            },
+            { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$3 },
+        ], ngImport: i0, template: "<mat-expansion-panel class=\"z-0\">\n  <mat-expansion-panel-header>\n    <mat-panel-title>Guarantor</mat-panel-title>\n    <mat-panel-description>{{ requirementHint() }}</mat-panel-description>\n  </mat-expansion-panel-header>\n\n  <div [formGroup]=\"guarantor()\">\n    <div class=\"grid grid-cols-12 gap-3\">\n      <mat-form-field class=\"col-span-4\">\n        <mat-label>Full name</mat-label>\n        <input matInput formControlName=\"fullName\" />\n      </mat-form-field>\n\n      <mat-form-field class=\"col-span-4\">\n        <mat-label>Date of birth</mat-label>\n        <input matInput [matDatepicker]=\"dp\" formControlName=\"dob\" readonly />\n        <mat-datepicker-toggle matIconSuffix [for]=\"dp\"></mat-datepicker-toggle>\n        <mat-datepicker #dp></mat-datepicker>\n      </mat-form-field>\n\n      <mat-form-field class=\"col-span-4\">\n        <mat-label>Relationship</mat-label>\n        <input matInput formControlName=\"relationship\" />\n      </mat-form-field>\n\n      <mat-form-field class=\"col-span-4\">\n        <mat-label>Phone</mat-label>\n        <input matInput formControlName=\"phone\" />\n      </mat-form-field>\n\n      <mat-form-field class=\"col-span-4\">\n        <mat-label>Email</mat-label>\n        <input matInput formControlName=\"email\" />\n      </mat-form-field>\n\n      <mat-form-field class=\"col-span-4\">\n        <mat-label>Employment status</mat-label>\n        <mat-select formControlName=\"employmentStatus\">\n          <mat-option value=\"EMPLOYED\">Employed</mat-option>\n          <mat-option value=\"SELF_EMPLOYED\">Self-employed</mat-option>\n          <mat-option value=\"UNEMPLOYED\">Unemployed</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n\n    <div [formGroup]=\"guarantorAddress()\">\n      <h5>Address</h5>\n      <div class=\"grid grid-cols-12 gap-3\">\n        <mat-form-field class=\"col-span-6\">\n          <mat-label>Line 1</mat-label>\n          <input matInput formControlName=\"line1\" />\n        </mat-form-field>\n\n        <mat-form-field class=\"col-span-6\">\n          <mat-label>Line 2</mat-label>\n          <input matInput formControlName=\"line2\" />\n        </mat-form-field>\n\n        <mat-form-field class=\"col-span-4\">\n          <mat-label>City</mat-label>\n          <input matInput formControlName=\"city\" />\n        </mat-form-field>\n\n        <mat-form-field class=\"col-span-4\">\n          <mat-label>Postcode</mat-label>\n          <input matInput formControlName=\"postcode\" />\n        </mat-form-field>\n\n        <mat-form-field class=\"col-span-4\">\n          <mat-label>Country</mat-label>\n          <input matInput formControlName=\"country\" />\n        </mat-form-field>\n      </div>\n    </div>\n  </div>\n</mat-expansion-panel>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i2$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2$4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i2$4.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: i4.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: i4.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: MatNativeDateModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GuarantorSection, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-guarantor-section', imports: [
+                        ReactiveFormsModule,
+                        MatExpansionModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatDatepickerModule,
+                        MatNativeDateModule,
+                    ], providers: [
+                        {
+                            provide: DateAdapter,
+                            useClass: MomentDateAdapter,
+                            deps: [MAT_DATE_LOCALE],
+                        },
+                        { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$3 },
+                    ], template: "<mat-expansion-panel class=\"z-0\">\n  <mat-expansion-panel-header>\n    <mat-panel-title>Guarantor</mat-panel-title>\n    <mat-panel-description>{{ requirementHint() }}</mat-panel-description>\n  </mat-expansion-panel-header>\n\n  <div [formGroup]=\"guarantor()\">\n    <div class=\"grid grid-cols-12 gap-3\">\n      <mat-form-field class=\"col-span-4\">\n        <mat-label>Full name</mat-label>\n        <input matInput formControlName=\"fullName\" />\n      </mat-form-field>\n\n      <mat-form-field class=\"col-span-4\">\n        <mat-label>Date of birth</mat-label>\n        <input matInput [matDatepicker]=\"dp\" formControlName=\"dob\" readonly />\n        <mat-datepicker-toggle matIconSuffix [for]=\"dp\"></mat-datepicker-toggle>\n        <mat-datepicker #dp></mat-datepicker>\n      </mat-form-field>\n\n      <mat-form-field class=\"col-span-4\">\n        <mat-label>Relationship</mat-label>\n        <input matInput formControlName=\"relationship\" />\n      </mat-form-field>\n\n      <mat-form-field class=\"col-span-4\">\n        <mat-label>Phone</mat-label>\n        <input matInput formControlName=\"phone\" />\n      </mat-form-field>\n\n      <mat-form-field class=\"col-span-4\">\n        <mat-label>Email</mat-label>\n        <input matInput formControlName=\"email\" />\n      </mat-form-field>\n\n      <mat-form-field class=\"col-span-4\">\n        <mat-label>Employment status</mat-label>\n        <mat-select formControlName=\"employmentStatus\">\n          <mat-option value=\"EMPLOYED\">Employed</mat-option>\n          <mat-option value=\"SELF_EMPLOYED\">Self-employed</mat-option>\n          <mat-option value=\"UNEMPLOYED\">Unemployed</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n\n    <div [formGroup]=\"guarantorAddress()\">\n      <h5>Address</h5>\n      <div class=\"grid grid-cols-12 gap-3\">\n        <mat-form-field class=\"col-span-6\">\n          <mat-label>Line 1</mat-label>\n          <input matInput formControlName=\"line1\" />\n        </mat-form-field>\n\n        <mat-form-field class=\"col-span-6\">\n          <mat-label>Line 2</mat-label>\n          <input matInput formControlName=\"line2\" />\n        </mat-form-field>\n\n        <mat-form-field class=\"col-span-4\">\n          <mat-label>City</mat-label>\n          <input matInput formControlName=\"city\" />\n        </mat-form-field>\n\n        <mat-form-field class=\"col-span-4\">\n          <mat-label>Postcode</mat-label>\n          <input matInput formControlName=\"postcode\" />\n        </mat-form-field>\n\n        <mat-form-field class=\"col-span-4\">\n          <mat-label>Country</mat-label>\n          <input matInput formControlName=\"country\" />\n        </mat-form-field>\n      </div>\n    </div>\n  </div>\n</mat-expansion-panel>\n" }]
+        }] });
+
+class StudentSection {
+    cc = inject(ControlContainer);
+    g = computed(() => this.cc.control, ...(ngDevMode ? [{ debugName: "g" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: StudentSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: StudentSection, isStandalone: true, selector: "rolatech-student-section", ngImport: i0, template: "<h4>Student</h4>\n\n<div class=\"grid\" [formGroup]=\"g()\">\n  <mat-form-field class=\"span2\">\n    <mat-label>University name</mat-label>\n    <input matInput formControlName=\"universityName\" />\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Course title</mat-label>\n    <input matInput formControlName=\"courseTitle\" />\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Year of study</mat-label>\n    <input matInput type=\"number\" formControlName=\"yearOfStudy\" />\n  </mat-form-field>\n\n  <p class=\"hint\">Guarantor is required for student applicants.</p>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: StudentSection, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-student-section', imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule], template: "<h4>Student</h4>\n\n<div class=\"grid\" [formGroup]=\"g()\">\n  <mat-form-field class=\"span2\">\n    <mat-label>University name</mat-label>\n    <input matInput formControlName=\"universityName\" />\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Course title</mat-label>\n    <input matInput formControlName=\"courseTitle\" />\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Year of study</mat-label>\n    <input matInput type=\"number\" formControlName=\"yearOfStudy\" />\n  </mat-form-field>\n\n  <p class=\"hint\">Guarantor is required for student applicants.</p>\n</div>\n" }]
+        }] });
+
+const TENANT_FORM = new InjectionToken('TENANT_FORM');
+const TENANT_KEY = new InjectionToken('TENANT_KEY');
+
+class TenantApplicantTypeSection {
+    cc = inject(ControlContainer);
+    facade = inject(OfferFormFacade);
+    g = computed(() => this.cc.control, ...(ngDevMode ? [{ debugName: "g" }] : []));
+    constructor() {
+        effect(() => {
+            // react when applicantType/employmentStatus changes
+            void this.g().get('applicantType')?.value;
+            void this.g().get('employmentStatus')?.value;
+            this.facade.applyTenantDynamicValidators();
+        });
+    }
+    hintText() {
+        const t = this.g().get('applicantType')?.value;
+        if (t === 'INDIVIDUAL')
+            return 'Employment may be required depending on your status.';
+        if (t === 'CORPORATE')
+            return 'Please provide company details.';
+        if (t === 'STUDENT')
+            return 'Student applicants require a guarantor.';
+        return 'Select the applicant type to continue.';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TenantApplicantTypeSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: TenantApplicantTypeSection, isStandalone: true, selector: "rolatech-tenant-applicant-type-section", ngImport: i0, template: "<h4>Applicant type</h4>\n\n<div class=\"grid\" [formGroup]=\"g()\">\n  <mat-form-field>\n    <mat-label>Applicant type</mat-label>\n    <mat-select formControlName=\"applicantType\">\n      <mat-option value=\"INDIVIDUAL\">Individual</mat-option>\n      <mat-option value=\"CORPORATE\">Corporate</mat-option>\n      <mat-option value=\"STUDENT\">Student</mat-option>\n    </mat-select>\n  </mat-form-field>\n</div>\n\n<p class=\"hint py-3\">{{ hintText() }}</p>\n", styles: [".grid{display:grid;grid-template-columns:1fr;gap:12px}.hint{margin:8px 0 0;opacity:.75}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.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: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TenantApplicantTypeSection, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-tenant-applicant-type-section', imports: [ReactiveFormsModule, MatFormFieldModule, MatSelectModule], template: "<h4>Applicant type</h4>\n\n<div class=\"grid\" [formGroup]=\"g()\">\n  <mat-form-field>\n    <mat-label>Applicant type</mat-label>\n    <mat-select formControlName=\"applicantType\">\n      <mat-option value=\"INDIVIDUAL\">Individual</mat-option>\n      <mat-option value=\"CORPORATE\">Corporate</mat-option>\n      <mat-option value=\"STUDENT\">Student</mat-option>\n    </mat-select>\n  </mat-form-field>\n</div>\n\n<p class=\"hint py-3\">{{ hintText() }}</p>\n", styles: [".grid{display:grid;grid-template-columns:1fr;gap:12px}.hint{margin:8px 0 0;opacity:.75}\n"] }]
+        }], ctorParameters: () => [] });
+
+class TenantCard {
+    facade = inject(OfferFormFacade);
+    // ✅ signal input (Angular 20) — not @Input
+    clientKey = input.required(...(ngDevMode ? [{ debugName: "clientKey" }] : []));
+    // ✅ resolve tenant group lazily AFTER input exists
+    tenantGroup = computed(() => this.facade.tenantGroupByClientKey(this.clientKey()), ...(ngDevMode ? [{ debugName: "tenantGroup" }] : []));
+    tenantId = computed(() => this.tenantGroup().get('id')?.value, ...(ngDevMode ? [{ debugName: "tenantId" }] : []));
+    subtitle = computed(() => {
+        const g = this.tenantGroup();
+        const name = g.get('fullName')?.value ?? '';
+        const type = g.get('applicantType')?.value ?? '';
+        const email = g.get('email')?.value ?? '';
+        return [name || 'Unnamed', type || 'No applicant type', email || 'No email'].join(' • ');
+    }, ...(ngDevMode ? [{ debugName: "subtitle" }] : []));
+    isIndividual() {
+        return this.tenantGroup().get('applicantType')?.value === 'INDIVIDUAL';
+    }
+    isCorporate() {
+        return this.tenantGroup().get('applicantType')?.value === 'CORPORATE';
+    }
+    isStudent() {
+        return this.tenantGroup().get('applicantType')?.value === 'STUDENT';
+    }
+    removeTenant() {
+        this.facade.removeTenantByClientKey(this.clientKey());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TenantCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TenantCard, isStandalone: true, selector: "rolatech-tenant-card", inputs: { clientKey: { classPropertyName: "clientKey", publicName: "clientKey", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+            {
+                provide: TENANT_FORM,
+                useFactory: () => {
+                    const facade = inject(OfferFormFacade);
+                    const registry = inject(TenantRegistryService);
+                    const clientKey = registry.consumeNextKey();
+                    return facade.tenantGroupByClientKey(clientKey);
+                },
+            },
+        ], ngImport: i0, template: "<div>\n  <div class=\"flex justify-between items-center\">\n    <div class=\"flex flex-col\">\n      <div>\n        <span class=\"text-lg font-bold\"> Tenant </span>\n        @if (tenantId()) {\n        <span class=\"pill\">Saved</span>\n        } @else {\n        <span class=\"pill pill-warn\">Not saved</span>\n        }\n      </div>\n\n      <div>{{ subtitle() }}</div>\n    </div>\n    <button\n      mat-icon-button\n      type=\"button\"\n      aria-label=\"Remove tenant\"\n      [disabled]=\"!facade.canRemoveTenant()\"\n      (click)=\"removeTenant()\"\n    >\n      <mat-icon>delete</mat-icon>\n    </button>\n  </div>\n\n  <div class=\"py-2\" [formGroup]=\"tenantGroup()\">\n    <rolatech-tenant-basic-info-section />\n    <mat-divider class=\"py-2\"></mat-divider>\n\n    <rolatech-tenant-applicant-type-section />\n    <mat-divider class=\"py-2\"></mat-divider>\n\n    @if (isIndividual()) {\n    <rolatech-employment-section />\n    <mat-divider class=\"py-2\"></mat-divider>\n    } @if (isCorporate()) {\n    <rolatech-corporate-section />\n    <mat-divider class=\"py-2\"></mat-divider>\n    } @if (isStudent()) {\n    <rolatech-student-section />\n    <mat-divider class=\"py-2\"></mat-divider>\n    }\n\n    <rolatech-guarantor-section />\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i2$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: TenantBasicInfoSection, selector: "rolatech-tenant-basic-info-section" }, { kind: "component", type: TenantApplicantTypeSection, selector: "rolatech-tenant-applicant-type-section" }, { kind: "component", type: EmploymentSection, selector: "rolatech-employment-section" }, { kind: "component", type: CorporateSection, selector: "rolatech-corporate-section" }, { kind: "component", type: StudentSection, selector: "rolatech-student-section" }, { kind: "component", type: GuarantorSection, selector: "rolatech-guarantor-section" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TenantCard, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-tenant-card', imports: [
+                        ReactiveFormsModule,
+                        MatCardModule,
+                        MatDividerModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        TenantBasicInfoSection,
+                        TenantApplicantTypeSection,
+                        EmploymentSection,
+                        CorporateSection,
+                        StudentSection,
+                        GuarantorSection,
+                    ], providers: [
+                        {
+                            provide: TENANT_FORM,
+                            useFactory: () => {
+                                const facade = inject(OfferFormFacade);
+                                const registry = inject(TenantRegistryService);
+                                const clientKey = registry.consumeNextKey();
+                                return facade.tenantGroupByClientKey(clientKey);
+                            },
+                        },
+                    ], template: "<div>\n  <div class=\"flex justify-between items-center\">\n    <div class=\"flex flex-col\">\n      <div>\n        <span class=\"text-lg font-bold\"> Tenant </span>\n        @if (tenantId()) {\n        <span class=\"pill\">Saved</span>\n        } @else {\n        <span class=\"pill pill-warn\">Not saved</span>\n        }\n      </div>\n\n      <div>{{ subtitle() }}</div>\n    </div>\n    <button\n      mat-icon-button\n      type=\"button\"\n      aria-label=\"Remove tenant\"\n      [disabled]=\"!facade.canRemoveTenant()\"\n      (click)=\"removeTenant()\"\n    >\n      <mat-icon>delete</mat-icon>\n    </button>\n  </div>\n\n  <div class=\"py-2\" [formGroup]=\"tenantGroup()\">\n    <rolatech-tenant-basic-info-section />\n    <mat-divider class=\"py-2\"></mat-divider>\n\n    <rolatech-tenant-applicant-type-section />\n    <mat-divider class=\"py-2\"></mat-divider>\n\n    @if (isIndividual()) {\n    <rolatech-employment-section />\n    <mat-divider class=\"py-2\"></mat-divider>\n    } @if (isCorporate()) {\n    <rolatech-corporate-section />\n    <mat-divider class=\"py-2\"></mat-divider>\n    } @if (isStudent()) {\n    <rolatech-student-section />\n    <mat-divider class=\"py-2\"></mat-divider>\n    }\n\n    <rolatech-guarantor-section />\n  </div>\n</div>\n" }]
+        }], propDecorators: { clientKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientKey", required: true }] }] } });
+
+class TenantListSection {
+    facade = inject(OfferFormFacade);
+    registry = inject(TenantRegistryService);
+    keys = this.facade.tenantClientKeys; // computed signal in facade
+    constructor() {
+        // Critical: reset registry before <rt-tenant-card> instances render/consume keys
+        effect(() => {
+            this.registry.resetIfChanged(this.keys());
+        });
+    }
+    addTenant() {
+        this.facade.addTenant();
+    }
+    tenantName(key) {
+        const g = this.facade.tenantGroupByClientKey(key);
+        return g.get('fullName')?.value || '—';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TenantListSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TenantListSection, isStandalone: true, selector: "rolatech-tenant-list-section", providers: [TenantRegistryService], ngImport: i0, template: "<div class=\"text-xl py-3\">Tenants</div>\n<mat-accordion multi>\n  @for (key of keys(); track key) {\n  <mat-expansion-panel>\n    <mat-expansion-panel-header>\n      <mat-panel-title>Tenant {{ $index + 1 }}</mat-panel-title>\n      <mat-panel-description>{{ tenantName(key) }}</mat-panel-description>\n    </mat-expansion-panel-header>\n    <rolatech-tenant-card [clientKey]=\"key\" />\n  </mat-expansion-panel>\n  }\n</mat-accordion>\n<div class=\"py-3\">\n  <button mat-flat-button type=\"button\" (click)=\"addTenant()\">Add tenant</button>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.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: MatExpansionModule }, { kind: "directive", type: i2$4.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2$4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i2$4.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: TenantCard, selector: "rolatech-tenant-card", inputs: ["clientKey"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TenantListSection, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-tenant-list-section', imports: [MatButtonModule, MatExpansionModule, TenantCard], providers: [TenantRegistryService], template: "<div class=\"text-xl py-3\">Tenants</div>\n<mat-accordion multi>\n  @for (key of keys(); track key) {\n  <mat-expansion-panel>\n    <mat-expansion-panel-header>\n      <mat-panel-title>Tenant {{ $index + 1 }}</mat-panel-title>\n      <mat-panel-description>{{ tenantName(key) }}</mat-panel-description>\n    </mat-expansion-panel-header>\n    <rolatech-tenant-card [clientKey]=\"key\" />\n  </mat-expansion-panel>\n  }\n</mat-accordion>\n<div class=\"py-3\">\n  <button mat-flat-button type=\"button\" (click)=\"addTenant()\">Add tenant</button>\n</div>\n" }]
+        }], ctorParameters: () => [] });
+
+class PropertyOfferRentalForm {
+    facade = inject(OfferFormFacade);
+    constructor() {
+        effect(() => {
+            // keep dynamic validators current when any tenant values change
+            this.facade.applyTenantDynamicValidators();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyOfferRentalForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: PropertyOfferRentalForm, isStandalone: true, selector: "rolatech-property-offer-rental-form", ngImport: i0, template: "<rolatech-rental-offer-terms-section />\n<rolatech-tenant-list-section />\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: RentalOfferTermsSection, selector: "rolatech-rental-offer-terms-section" }, { kind: "component", type: TenantListSection, selector: "rolatech-tenant-list-section" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyOfferRentalForm, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-offer-rental-form', imports: [MatDividerModule, RentalOfferTermsSection, TenantListSection], template: "<rolatech-rental-offer-terms-section />\n<rolatech-tenant-list-section />\n" }]
+        }], ctorParameters: () => [] });
+
+class SaleOfferSection {
+    facade = inject(OfferFormFacade);
+    sale = this.facade.saleGroup();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SaleOfferSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: SaleOfferSection, isStandalone: true, selector: "rolatech-sale-offer-section", ngImport: i0, template: "<div class=\"grid\" [formGroup]=\"sale\">\n  <mat-form-field>\n    <mat-label>Offer amount</mat-label>\n    <input matInput type=\"number\" formControlName=\"amount\" />\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Buyer name</mat-label>\n    <input matInput formControlName=\"buyerName\" />\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Email</mat-label>\n    <input matInput formControlName=\"email\" />\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Phone</mat-label>\n    <input matInput formControlName=\"phone\" />\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Payment method</mat-label>\n    <mat-select formControlName=\"paymentMethod\">\n      <mat-option value=\"CASH\">Cash</mat-option>\n      <mat-option value=\"MORTGAGE\">Mortgage</mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Proposed exchange date</mat-label>\n    <input matInput [matDatepicker]=\"dp2\" formControlName=\"proposedExchangeDate\" />\n    <mat-datepicker-toggle matIconSuffix [for]=\"dp2\"></mat-datepicker-toggle>\n    <mat-datepicker #dp2></mat-datepicker>\n  </mat-form-field>\n\n  <mat-form-field class=\"span2\">\n    <mat-label>Solicitor company name</mat-label>\n    <input matInput formControlName=\"solicitorCompanyName\" />\n  </mat-form-field>\n</div>\n", styles: [".grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.span2{grid-column:span 2}@media(max-width:900px){.grid{grid-template-columns:1fr}.span2{grid-column:span 1}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: i4.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: i4.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: MatNativeDateModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SaleOfferSection, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-sale-offer-section', imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatSelectModule, MatDatepickerModule, MatNativeDateModule], template: "<div class=\"grid\" [formGroup]=\"sale\">\n  <mat-form-field>\n    <mat-label>Offer amount</mat-label>\n    <input matInput type=\"number\" formControlName=\"amount\" />\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Buyer name</mat-label>\n    <input matInput formControlName=\"buyerName\" />\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Email</mat-label>\n    <input matInput formControlName=\"email\" />\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Phone</mat-label>\n    <input matInput formControlName=\"phone\" />\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Payment method</mat-label>\n    <mat-select formControlName=\"paymentMethod\">\n      <mat-option value=\"CASH\">Cash</mat-option>\n      <mat-option value=\"MORTGAGE\">Mortgage</mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Proposed exchange date</mat-label>\n    <input matInput [matDatepicker]=\"dp2\" formControlName=\"proposedExchangeDate\" />\n    <mat-datepicker-toggle matIconSuffix [for]=\"dp2\"></mat-datepicker-toggle>\n    <mat-datepicker #dp2></mat-datepicker>\n  </mat-form-field>\n\n  <mat-form-field class=\"span2\">\n    <mat-label>Solicitor company name</mat-label>\n    <input matInput formControlName=\"solicitorCompanyName\" />\n  </mat-form-field>\n</div>\n", styles: [".grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.span2{grid-column:span 2}@media(max-width:900px){.grid{grid-template-columns:1fr}.span2{grid-column:span 1}}\n"] }]
+        }] });
+
+class PropertyOfferSaleForm {
+    facade = inject(OfferFormFacade);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyOfferSaleForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: PropertyOfferSaleForm, isStandalone: true, selector: "rolatech-property-offer-sale-form", ngImport: i0, template: "<rolatech-sale-offer-section />\n", styles: [""], dependencies: [{ kind: "component", type: SaleOfferSection, selector: "rolatech-sale-offer-section" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyOfferSaleForm, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-offer-sale-form', imports: [SaleOfferSection], template: "<rolatech-sale-offer-section />\n" }]
+        }] });
+
+class PropertyOfferCreate {
+    route = inject(ActivatedRoute);
+    router = inject(Router);
+    snack = inject(MatSnackBar);
+    facade = inject(OfferFormFacade);
+    titleService = inject(TitleService);
+    propertyService = inject(PropertyService);
+    offerTypeLabel = computed(() => (this.facade.offerType() === 'RENTAL' ? 'Rental offer' : 'Sale offer'), ...(ngDevMode ? [{ debugName: "offerTypeLabel" }] : []));
+    property = signal(null, ...(ngDevMode ? [{ debugName: "property" }] : []));
+    firstImageUrl = computed(() => {
+        const p = this.property();
+        return p?.media?.[0]?.url || '';
+    }, ...(ngDevMode ? [{ debugName: "firstImageUrl" }] : []));
+    constructor() {
+        effect(() => {
+            const typeParam = (this.route.snapshot.paramMap.get('type') ?? 'rental').toLowerCase();
+            const type = typeParam === 'sale' ? 'SALE' : 'RENTAL';
+            this.facade.setOfferType(type);
+            // demo: propertyId could come from route query or selection
+            const propertyId = this.route.snapshot.params['id'] ?? 'PROPERTY-ID';
+            this.facade.setPropertyId(propertyId);
+            const p = this.property();
+            if (p) {
+                this.titleService.setTitle(p.title);
+            }
+        });
+    }
+    ngOnInit() {
+        this.getProperty();
+    }
+    getProperty() {
+        const id = this.route.snapshot.params['id'];
+        this.propertyService.get(id).subscribe({
+            next: (res) => {
+                this.property.set(res.data);
+                // this.titleService.setTitle(`${this.property.title}`);
+            },
+        });
+    }
+    async submit() {
+        const res = await this.facade.submit();
+        if (!res)
+            return;
+        this.snack.open('Offer submitted', 'OK', { duration: 2500 });
+        await this.router.navigate([`/properties/offers/${res.id}`]);
+        // await this.router.navigate(['../', res.id], { relativeTo: this.route });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyOfferCreate, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: PropertyOfferCreate, isStandalone: true, selector: "rolatech-property-offer-create", providers: [OfferFormFacade], 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-3/4\">\n      <div class=\"\">\n        <div class=\"text-xl font-bold py-2\">Create Offer</div>\n        <div>{{ offerTypeLabel() }}</div>\n\n        <div class=\"content\">\n          @if (facade.isRental()) {\n          <rolatech-property-offer-rental-form />\n          } @else {\n          <rolatech-property-offer-sale-form />\n          }\n        </div>\n\n        <div class=\"actions\">\n          <button mat-raised-button [disabled]=\"facade.submitting()\" (click)=\"submit()\">Submit</button>\n        </div>\n\n        @if (facade.submitError()) {\n        <p class=\"error\">{{ facade.submitError() }}</p>\n        }\n      </div>\n    </div>\n    <div class=\"w-full md:w-1/4 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\">{{ property()!.price | price }}pcm</div>\n      } @else {\n      <div class=\"py-3 text-xl font-bold\">{{ property()!.price | price }}</div>\n      } }\n    </div>\n  </div>\n</rolatech-container>\n", styles: [""], dependencies: [{ kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: ThumbnailComponent, selector: "rolatech-thumbnail", inputs: ["src", "size", "mode", "ratio", "width", "height"] }, { kind: "ngmodule", type: MatStepperModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.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: MatSnackBarModule }, { kind: "component", type: PropertyOfferRentalForm, selector: "rolatech-property-offer-rental-form" }, { kind: "component", type: PropertyOfferSaleForm, selector: "rolatech-property-offer-sale-form" }, { kind: "pipe", type: PricePipe, name: "price" }, { kind: "pipe", type: AvailableDatePipe, name: "availableDate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyOfferCreate, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-offer-create', imports: [
+                        ContainerComponent,
+                        ThumbnailComponent,
+                        PricePipe,
+                        AvailableDatePipe,
+                        MatStepperModule,
+                        MatButtonModule,
+                        MatSnackBarModule,
+                        PropertyOfferRentalForm,
+                        PropertyOfferSaleForm,
+                    ], providers: [OfferFormFacade], 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-3/4\">\n      <div class=\"\">\n        <div class=\"text-xl font-bold py-2\">Create Offer</div>\n        <div>{{ offerTypeLabel() }}</div>\n\n        <div class=\"content\">\n          @if (facade.isRental()) {\n          <rolatech-property-offer-rental-form />\n          } @else {\n          <rolatech-property-offer-sale-form />\n          }\n        </div>\n\n        <div class=\"actions\">\n          <button mat-raised-button [disabled]=\"facade.submitting()\" (click)=\"submit()\">Submit</button>\n        </div>\n\n        @if (facade.submitError()) {\n        <p class=\"error\">{{ facade.submitError() }}</p>\n        }\n      </div>\n    </div>\n    <div class=\"w-full md:w-1/4 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\">{{ property()!.price | price }}pcm</div>\n      } @else {\n      <div class=\"py-3 text-xl font-bold\">{{ property()!.price | price }}</div>\n      } }\n    </div>\n  </div>\n</rolatech-container>\n" }]
+        }], ctorParameters: () => [] });
+
 const propertyRoutes = [
     {
         path: '',
@@ -3123,7 +4269,7 @@ const propertyRoutes = [
         children: [
             {
                 path: '',
-                loadComponent: () => import('./rolatech-angular-property-property-index.component-NrUqyPEq.mjs').then((x) => x.PropertyIndexComponent),
+                loadComponent: () => import('./rolatech-angular-property-property-index.component-AsdseVx6.mjs').then((x) => x.PropertyIndexComponent),
             },
         ],
     },
@@ -3162,6 +4308,10 @@ const propertyRoutes = [
         canActivate: [AuthGuard],
         component: PropertyOfferComponent,
     },
+    {
+        path: ':id/offer/:type', // type = rental | sale
+        component: PropertyOfferCreate,
+    },
     {
         path: ':id',
         component: PropertyDetailsComponent,
@@ -3295,7 +4445,7 @@ class PropertyManageIndexComponent extends BaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyManageIndexComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 }], usesInheritance: 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=\"bg-[--rt-rasised-background] h-full\">\n    <div class=\"flex flex-wrap px-2\">\n      @for (row of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]; track row) {\n        <rolatech-property-manage-item-skeleton></rolatech-property-manage-item-skeleton>\n      }\n    </div>\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 px-2\">\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: i2$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: PropertyManageItemComponent, selector: "rolatech-property-manage-item", inputs: ["property", "thumbnail", "list"] }, { kind: "component", type: SearchBar, selector: "rolatech-search-bar", inputs: ["show"], outputs: ["showChange", "search", "close"] }, { kind: "component", type: PropertyManageItemSkeleton, selector: "rolatech-property-manage-item-skeleton", inputs: ["loading", "list"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 }], usesInheritance: 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=\"bg-[--rt-rasised-background] h-full\">\n    <div class=\"flex flex-wrap px-2\">\n      @for (row of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]; track row) {\n        <rolatech-property-manage-item-skeleton></rolatech-property-manage-item-skeleton>\n      }\n    </div>\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 px-2\">\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$3.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$3.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: i2$3.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: PropertyManageItemComponent, selector: "rolatech-property-manage-item", inputs: ["property", "thumbnail", "list"] }, { kind: "component", type: SearchBar, selector: "rolatech-search-bar", inputs: ["show"], outputs: ["showChange", "search", "close"] }, { kind: "component", type: PropertyManageItemSkeleton, selector: "rolatech-property-manage-item-skeleton", inputs: ["loading", "list"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyManageIndexComponent, decorators: [{
             type: Component,
@@ -3338,7 +4488,7 @@ class PropertyManageCreateComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyManageCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", 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],[formArray],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]):not([formArray]),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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", 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$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.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$2.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$3.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: "21.0.6", ngImport: i0, type: PropertyManageCreateComponent, decorators: [{
             type: Component,
@@ -3400,7 +4550,7 @@ class PropertyManageLayoutComponent extends BaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyManageLayoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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=\"./floorplans\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Floorplans</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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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=\"./floorplans\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Floorplans</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$3.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: "21.0.6", ngImport: i0, type: PropertyManageLayoutComponent, decorators: [{
             type: Component,
@@ -3506,7 +4656,7 @@ class PropertyManageInfoComponent extends BaseComponent {
                 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],[formArray],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]):not([formArray]),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" }] });
+        ], 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$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.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$2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.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: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.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: "21.0.6", ngImport: i0, type: PropertyManageInfoComponent, decorators: [{
             type: Component,
@@ -3737,7 +4887,7 @@ class PropertyManageSectionItemComponent {
         this.selectedImg = this.section().media ? first(this.section().media) : null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyManageSectionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.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$2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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$3.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$3.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$1.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$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.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$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyManageSectionItemComponent, decorators: [{
             type: Component,
@@ -3905,7 +5055,7 @@ class PropertyManageSectionsComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyManageSectionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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$3.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: "21.0.6", ngImport: i0, type: PropertyManageSectionsComponent, decorators: [{
             type: Component,
@@ -4019,7 +5169,7 @@ class PropertyManageFeaturesComponent extends BaseComponent {
         return binding;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyManageFeaturesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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$5.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$3.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: "21.0.6", ngImport: i0, type: PropertyManageFeaturesComponent, decorators: [{
             type: Component,
@@ -4150,7 +5300,6 @@ class PropertyManageLocationComponent extends BaseComponent {
                 includedPrimaryTypes: ['street_address', 'postal_code'],
             };
             this.autocompleteService.getPlacePredictions(request, (predictions, status) => {
-                console.log(predictions);
                 if (status === google.maps.places.PlacesServiceStatus.OK && predictions) {
                     this.predictions = predictions;
                 }
@@ -4175,7 +5324,7 @@ class PropertyManageLocationComponent extends BaseComponent {
     }
     searchSchools(lat, lng, radius = 2000) { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyManageLocationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.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$3.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: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.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: "21.0.6", ngImport: i0, type: PropertyManageLocationComponent, decorators: [{
             type: Component,
@@ -4209,7 +5358,7 @@ class PropertyVideoYoutubeAddComponent {
         this.output.emit(this.url);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyVideoYoutubeAddComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", 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: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.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$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyVideoYoutubeAddComponent, decorators: [{
             type: Component,
@@ -4267,7 +5416,7 @@ class PropertyVideoItem {
         this.video().duration = videoElement.duration;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyVideoItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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$3.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$3.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: "21.0.6", ngImport: i0, type: PropertyVideoItem, decorators: [{
             type: Component,
@@ -4543,7 +5692,7 @@ class PropertyManageVideoComponent extends BaseComponent {
         return fileChunkList;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyManageVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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", "block"], 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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$3.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", "block"], 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: "21.0.6", ngImport: i0, type: PropertyManageVideoComponent, decorators: [{
             type: Component,
@@ -4674,7 +5823,7 @@ class PropertyManageHighlights extends BaseComponent {
         // optionally log _e
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyManageHighlights, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 var(--rt-border-color);border-radius:12px;background:var(--rt-base-background)}\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],[formArray],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]):not([formArray]),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: i5$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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 var(--rt-border-color);border-radius:12px;background:var(--rt-base-background)}\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$3.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$3.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: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i4$4.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$4.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$4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i5.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: "21.0.6", ngImport: i0, type: PropertyManageHighlights, decorators: [{
             type: Component,
@@ -4734,7 +5883,7 @@ class PropertyManageEpc extends BaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyManageEpc, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", 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: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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$3.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: "21.0.6", ngImport: i0, type: PropertyManageEpc, decorators: [{
             type: Component,
@@ -5015,7 +6164,6 @@ class PropertyManageViewingsDetailComponent extends BaseComponent {
         this.dialogService.confirmed().subscribe({
             next: (result) => {
                 if (result) {
-                    console.log(result);
                     this.propertyService.confirmViewing(this.id, item.id).subscribe({
                         next: (res) => {
                             this.viewingTimeConfirmed = true;
@@ -5026,7 +6174,7 @@ class PropertyManageViewingsDetailComponent extends BaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyManageViewingsDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 (viewing.item) {\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]=\"viewing.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 class=\"font-bold\">{{ viewing.item.title }}</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\">{{ viewing.item.price | price }}</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: PricePipe, name: "price" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 (viewing.item) {\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]=\"viewing.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 class=\"font-bold\">{{ viewing.item.title }}</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\">{{ viewing.item.price | price }}</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$3.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: PricePipe, name: "price" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyManageViewingsDetailComponent, decorators: [{
             type: Component,
@@ -5036,7 +6184,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 const propertyManageViewingsRoutes = [
     {
         path: '',
-        loadComponent: () => import('./rolatech-angular-property-property-manage-viewings-index.component-BSp_3pRk.mjs').then((x) => x.PropertyManageViewingsIndexComponent),
+        loadComponent: () => import('./rolatech-angular-property-property-manage-viewings-index.component-D4Bj5Mwp.mjs').then((x) => x.PropertyManageViewingsIndexComponent),
     },
     {
         path: ':id',
@@ -5144,7 +6292,7 @@ class LettingManageIndex extends BaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LettingManageIndex, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: LettingManageIndex, isStandalone: true, selector: "rolatech-letting-manage-index", usesInheritance: true, ngImport: i0, template: "<rolatech-toolbar title=\"My listings\"> </rolatech-toolbar>\n@if (loading) {\n<div class=\"bg-[--rt-rasised-background] h-full\">\n  <!-- <rolatech-property-manage-filter></rolatech-property-manage-filter> -->\n  <div class=\"flex flex-wrap px-2\">\n    @for (row of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; track row) {\n    <rolatech-property-manage-item-skeleton></rolatech-property-manage-item-skeleton>\n    }\n  </div>\n</div>\n} @else {\n<div class=\"bg-[--rt-rasised-background] h-full\">\n  <div class=\"flex flex-wrap px-2\">\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  [pageIndex]=\"pageIndex()\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  (page)=\"onPage($event)\"\n  hidePageSize\n  showFirstLastButtons\n>\n</mat-paginator>\n", styles: ["rolatech-letting-manage-index{display:flex;flex-direction:column;--rt-letting-view-items-per-row: 1;--rt-property-view-items-per-row: 1}@media(min-width:600px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 2;--rt-property-view-items-per-row: 2}}@media(min-width:768px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 3;--rt-property-view-items-per-row: 3}}@media(min-width:1280px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 3;--rt-property-view-items-per-row: 3}}@media(min-width:1536px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 4;--rt-property-view-items-per-row: 4}}@media(min-width:1920px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 5;--rt-property-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: "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"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: PropertyManageItemSkeleton, selector: "rolatech-property-manage-item-skeleton", inputs: ["loading", "list"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: LettingManageIndex, isStandalone: true, selector: "rolatech-letting-manage-index", usesInheritance: true, ngImport: i0, template: "<rolatech-toolbar title=\"My listings\"> </rolatech-toolbar>\n@if (loading) {\n<div class=\"bg-[--rt-rasised-background] h-full\">\n  <!-- <rolatech-property-manage-filter></rolatech-property-manage-filter> -->\n  <div class=\"flex flex-wrap px-2\">\n    @for (row of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; track row) {\n    <rolatech-property-manage-item-skeleton></rolatech-property-manage-item-skeleton>\n    }\n  </div>\n</div>\n} @else {\n<div class=\"bg-[--rt-rasised-background] h-full\">\n  <div class=\"flex flex-wrap px-2\">\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  [pageIndex]=\"pageIndex()\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  (page)=\"onPage($event)\"\n  hidePageSize\n  showFirstLastButtons\n>\n</mat-paginator>\n", styles: ["rolatech-letting-manage-index{display:flex;flex-direction:column;--rt-letting-view-items-per-row: 1;--rt-property-view-items-per-row: 1}@media(min-width:600px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 2;--rt-property-view-items-per-row: 2}}@media(min-width:768px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 3;--rt-property-view-items-per-row: 3}}@media(min-width:1280px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 3;--rt-property-view-items-per-row: 3}}@media(min-width:1536px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 4;--rt-property-view-items-per-row: 4}}@media(min-width:1920px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 5;--rt-property-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: "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"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: PropertyManageItemSkeleton, selector: "rolatech-property-manage-item-skeleton", inputs: ["loading", "list"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LettingManageIndex, decorators: [{
             type: Component,
@@ -5177,7 +6325,7 @@ class LettingActions {
         this.deposit.emit(letting);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LettingActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 {{ displayDeposit() | price}}</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 }, { kind: "pipe", type: PricePipe, name: "price" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 {{ displayDeposit() | price}}</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$3.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 }, { kind: "pipe", type: PricePipe, name: "price" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LettingActions, decorators: [{
             type: Component,
@@ -5193,7 +6341,7 @@ class LettingActionContact {
         this.emailAgent.emit(property);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LettingActionContact, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", 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$3.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: "21.0.6", ngImport: i0, type: LettingActionContact, decorators: [{
             type: Component,
@@ -5429,7 +6577,7 @@ class LettingManageViewingRequest extends BaseComponent {
                 deps: [MAT_DATE_LOCALE],
             },
             { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$1 },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col-reverse md:flex-row w-full p-4 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", 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: "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"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col-reverse md:flex-row w-full p-4 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", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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$3.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: i4.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: i4.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: "21.0.6", ngImport: i0, type: LettingManageViewingRequest, decorators: [{
             type: Component,
@@ -5475,10 +6623,10 @@ class LettingManageOfferRequest extends BaseComponent {
     offer = {
         startDate: '',
         notes: '',
-        price: 0,
+        amount: 0,
     };
     get formattedAmount() {
-        return this.offer.price.toFixed(2); // equivalent to | number:'1.2-2'
+        return this.offer.amount.toFixed(2); // equivalent to | number:'1.2-2'
     }
     property;
     minDate = new Date();
@@ -5490,10 +6638,9 @@ class LettingManageOfferRequest extends BaseComponent {
     }
     onAmountChange(event) {
         const inputValue = event.target.value;
-        console.log(inputValue);
         const regex = /^\d*\.?\d{0,2}$/;
         if (regex.test(inputValue)) {
-            this.offer.price = inputValue;
+            this.offer.amount = inputValue;
         }
     }
     getProperty() {
@@ -5537,7 +6684,7 @@ class LettingManageOfferRequest extends BaseComponent {
                 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>Offer price</mat-label>\n          <span matTextPrefix>\u00A3&nbsp;</span>\n          <input matInput type=\"text\" placeholder=\"0.00\" [(ngModel)]=\"offer.price\" 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"] }] });
+        ], 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>Offer amount</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: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.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$2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.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: i4.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: i4.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: "21.0.6", ngImport: i0, type: LettingManageOfferRequest, decorators: [{
             type: Component,
@@ -5561,7 +6708,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                             deps: [MAT_DATE_LOCALE],
                         },
                         { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
-                    ], 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>Offer price</mat-label>\n          <span matTextPrefix>\u00A3&nbsp;</span>\n          <input matInput type=\"text\" placeholder=\"0.00\" [(ngModel)]=\"offer.price\" 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"] }]
+                    ], 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>Offer amount</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"] }]
         }] });
 
 const lettingManageRoutes = [
@@ -5613,7 +6760,7 @@ class TenantManageIndex {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TenantManageIndex, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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$3.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: "21.0.6", ngImport: i0, type: TenantManageIndex, decorators: [{
             type: Component,
@@ -5671,7 +6818,7 @@ class TenantManageCreate {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TenantManageCreate, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.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: i4.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: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.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: "21.0.6", ngImport: i0, type: TenantManageCreate, decorators: [{
             type: Component,
@@ -5782,7 +6929,7 @@ class PropertyAgentViewingIndex extends BaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyAgentViewingIndex, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: PropertyAgentViewingIndex, isStandalone: true, selector: "rolatech-property-agent-viewing-index", usesInheritance: true, ngImport: i0, template: "<rolatech-toolbar title=\"Viewings\">\n  <div class=\"flex items-center gap-2\"></div>\n</rolatech-toolbar>\n<rolatech-tabs [select]=\"select\">\n  @for (item of links; track item) { @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</rolatech-tabs>\n<div>\n  @if (viewings(); as viewings) { @for (item of viewings; track $index) {\n  <rolatech-property-viewing-item\n    [loading]=\"loading\"\n    [routerLink]=\"['./', item.id]\"\n    [viewing]=\"item\"\n  ></rolatech-property-viewing-item>\n  } } @else {\n  <rolatech-empty></rolatech-empty>\n  }\n</div>\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: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: TabsComponent, selector: "rolatech-tabs", inputs: ["select", "loading", "block"], 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: EmptyComponent, selector: "rolatech-empty" }, { kind: "component", type: PropertyViewingItemComponent, selector: "rolatech-property-viewing-item", inputs: ["viewing"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: PropertyAgentViewingIndex, isStandalone: true, selector: "rolatech-property-agent-viewing-index", usesInheritance: true, ngImport: i0, template: "<rolatech-toolbar title=\"Viewings\">\n  <div class=\"flex items-center gap-2\"></div>\n</rolatech-toolbar>\n<rolatech-tabs [select]=\"select\">\n  @for (item of links; track item) { @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</rolatech-tabs>\n<div>\n  @if (viewings(); as viewings) { @for (item of viewings; track $index) {\n  <rolatech-property-viewing-item\n    [loading]=\"loading\"\n    [routerLink]=\"['./', item.id]\"\n    [viewing]=\"item\"\n  ></rolatech-property-viewing-item>\n  } } @else {\n  <rolatech-empty></rolatech-empty>\n  }\n</div>\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: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: TabsComponent, selector: "rolatech-tabs", inputs: ["select", "loading", "block"], 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: EmptyComponent, selector: "rolatech-empty" }, { kind: "component", type: PropertyViewingItemComponent, selector: "rolatech-property-viewing-item", inputs: ["viewing"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyAgentViewingIndex, decorators: [{
             type: Component,
@@ -5857,7 +7004,6 @@ class PropertyAgentViewingDetail extends BaseComponent {
         this.dialogService.confirmed().subscribe({
             next: (result) => {
                 if (result) {
-                    console.log(result);
                     this.propertyService.confirmViewing(this.id, item.id).subscribe({
                         next: (res) => {
                             this.viewingTimeConfirmed = true;
@@ -5868,7 +7014,7 @@ class PropertyAgentViewingDetail extends BaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyAgentViewingDetail, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: PropertyAgentViewingDetail, isStandalone: true, selector: "rolatech-property-agent-viewing-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    </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) { @if (item.date === viewing.viewingDate && item.time ===\n      viewing.viewingTime) {\n      <div class=\"ml-3\"><button mat-flat-button i18n disabled=\"\">Confirmed</button></div>\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 label=\"Employment status\" [title]=\"employmentStatus[viewing.employmentStatus]\"></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\">{{ property.price | price }}</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: PricePipe, name: "price" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: PropertyAgentViewingDetail, isStandalone: true, selector: "rolatech-property-agent-viewing-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    </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) { @if (item.date === viewing.viewingDate && item.time ===\n      viewing.viewingTime) {\n      <div class=\"ml-3\"><button mat-flat-button i18n disabled=\"\">Confirmed</button></div>\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 label=\"Employment status\" [title]=\"employmentStatus[viewing.employmentStatus]\"></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\">{{ property.price | price }}</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$3.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: PricePipe, name: "price" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyAgentViewingDetail, decorators: [{
             type: Component,
@@ -5897,6 +7043,8 @@ class PropertyAgentOfferDetail extends BaseComponent {
     status = PropertyOfferStatus;
     employmentStatus = EmploymentStatus;
     agent;
+    isRental = computed(() => this.offer.type.toString() === 'RENTAL', ...(ngDevMode ? [{ debugName: "isRental" }] : []));
+    isSale = computed(() => this.offer.type.toString() === 'SALE', ...(ngDevMode ? [{ debugName: "isSale" }] : []));
     ngOnInit() {
         this.getOffer();
     }
@@ -5904,7 +7052,7 @@ class PropertyAgentOfferDetail extends BaseComponent {
         this.propertyOfferService.getOffer(this.id).subscribe({
             next: (res) => {
                 this.offer = res.data;
-                this.name = this.offer.firstName + ', ' + this.offer.lastName;
+                // this.name = this.isRental()? this.offer.rentalTerms?.tenancyLengthMonths
                 this.getProperty(this.offer.propertyId);
             },
         });
@@ -6078,11 +7226,11 @@ class PropertyAgentOfferDetail extends BaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyAgentOfferDetail, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: PropertyAgentOfferDetail, isStandalone: true, selector: "rolatech-property-agent-offer-detail", usesInheritance: true, ngImport: i0, template: "@if (offer) {\n<rolatech-toolbar [title]=\"status[offer.status]\" large link=\"../\">\n  @if (offer.status.toString() === 'SUBMITTED') {\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  <!-- References -->\n  @if (offer.status.toString() === 'HOLDING_DEPOSIT_PAID') {\n  <button mat-flat-button (click)=\"underOffer()\" i18n>Under offer</button>\n  } @if (offer.status.toString() === 'UNDER_OFFER') {\n  <button mat-flat-button (click)=\"rfPassed()\" i18n>References passed</button>\n  <button mat-flat-button (click)=\"rfFailed()\" i18n>References failed</button>\n  }\n  <!-- Completed -->\n  @if (offer.status.toString() === 'MOVE_IN_PAYMENT_PAID') {\n  <button mat-flat-button (click)=\"completed()\" i18n>Completed</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    </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.title }}</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\">{{ offer.item.amount.toFixed(2) | price}}</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: PricePipe, name: "price" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: PropertyAgentOfferDetail, isStandalone: true, selector: "rolatech-property-agent-offer-detail", usesInheritance: true, ngImport: i0, template: "@if (offer) {\n<rolatech-toolbar [title]=\"status[offer.status]\" large link=\"../\">\n  @if (offer.status.toString() === 'SUBMITTED') {\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  <!-- References -->\n  @if (offer.status.toString() === 'HOLDING_DEPOSIT_PAID') {\n  <button mat-flat-button (click)=\"underOffer()\" i18n>Under offer</button>\n  } @if (offer.status.toString() === 'UNDER_OFFER') {\n  <button mat-flat-button (click)=\"rfPassed()\" i18n>References passed</button>\n  <button mat-flat-button (click)=\"rfFailed()\" i18n>References failed</button>\n  }\n  <!-- Completed -->\n  @if (offer.status.toString() === 'MOVE_IN_PAYMENT_PAID') {\n  <button mat-flat-button (click)=\"completed()\" i18n>Completed</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    </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.rentalTerms?.moveInDate\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Tenancy duration\" [title]=\"offer.rentalTerms\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Number of tenants\" [title]=\"offer.rentalTerms\"></rolatech-rich-label>\n    </div>\n    <div class=\"flex flex-col md:flex-row gap-1 md:gap-4\">\n      <rolatech-rich-label\n        label=\"Employment status\"\n        [title]=\"employmentStatus[offer.tenants?.[0]?.employmentStatus ?? '']\"\n      ></rolatech-rich-label>\n      <rolatech-rich-label label=\"Employer\" [title]=\"offer.rentalTerms?.moveInDate\"></rolatech-rich-label>\n      @if (offer.rentalTerms) {\n      <rolatech-rich-label label=\"Annual income\" [title]=\"offer.rentalTerms\"></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.title }}</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\">{{ offer.item.amount.toFixed(2) | price}}</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.rentalTerms?.moveInDate\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Tenancy duration\" [title]=\"offer.rentalTerms?.tenancyLengthMonths\"></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$3.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: PricePipe, name: "price" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyAgentOfferDetail, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-property-agent-offer-detail', imports: [CommonModule, ToolbarComponent, RichLabelComponent, ThumbnailComponent, MatButtonModule, PricePipe], template: "@if (offer) {\n<rolatech-toolbar [title]=\"status[offer.status]\" large link=\"../\">\n  @if (offer.status.toString() === 'SUBMITTED') {\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  <!-- References -->\n  @if (offer.status.toString() === 'HOLDING_DEPOSIT_PAID') {\n  <button mat-flat-button (click)=\"underOffer()\" i18n>Under offer</button>\n  } @if (offer.status.toString() === 'UNDER_OFFER') {\n  <button mat-flat-button (click)=\"rfPassed()\" i18n>References passed</button>\n  <button mat-flat-button (click)=\"rfFailed()\" i18n>References failed</button>\n  }\n  <!-- Completed -->\n  @if (offer.status.toString() === 'MOVE_IN_PAYMENT_PAID') {\n  <button mat-flat-button (click)=\"completed()\" i18n>Completed</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    </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.title }}</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\">{{ offer.item.amount.toFixed(2) | price}}</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-agent-offer-detail', imports: [CommonModule, ToolbarComponent, RichLabelComponent, ThumbnailComponent, MatButtonModule, PricePipe], template: "@if (offer) {\n<rolatech-toolbar [title]=\"status[offer.status]\" large link=\"../\">\n  @if (offer.status.toString() === 'SUBMITTED') {\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  <!-- References -->\n  @if (offer.status.toString() === 'HOLDING_DEPOSIT_PAID') {\n  <button mat-flat-button (click)=\"underOffer()\" i18n>Under offer</button>\n  } @if (offer.status.toString() === 'UNDER_OFFER') {\n  <button mat-flat-button (click)=\"rfPassed()\" i18n>References passed</button>\n  <button mat-flat-button (click)=\"rfFailed()\" i18n>References failed</button>\n  }\n  <!-- Completed -->\n  @if (offer.status.toString() === 'MOVE_IN_PAYMENT_PAID') {\n  <button mat-flat-button (click)=\"completed()\" i18n>Completed</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    </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.rentalTerms?.moveInDate\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Tenancy duration\" [title]=\"offer.rentalTerms\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Number of tenants\" [title]=\"offer.rentalTerms\"></rolatech-rich-label>\n    </div>\n    <div class=\"flex flex-col md:flex-row gap-1 md:gap-4\">\n      <rolatech-rich-label\n        label=\"Employment status\"\n        [title]=\"employmentStatus[offer.tenants?.[0]?.employmentStatus ?? '']\"\n      ></rolatech-rich-label>\n      <rolatech-rich-label label=\"Employer\" [title]=\"offer.rentalTerms?.moveInDate\"></rolatech-rich-label>\n      @if (offer.rentalTerms) {\n      <rolatech-rich-label label=\"Annual income\" [title]=\"offer.rentalTerms\"></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.title }}</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\">{{ offer.item.amount.toFixed(2) | price}}</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.rentalTerms?.moveInDate\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Tenancy duration\" [title]=\"offer.rentalTerms?.tenancyLengthMonths\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Phone\" [title]=\"agent.phone\"></rolatech-rich-label>\n    </div>\n    }\n  </div>\n</div>\n}\n" }]
         }] });
 
 class PropertyAgentOfferIndex extends BaseComponent {
@@ -6169,7 +7317,7 @@ class PropertyAgentOfferIndex extends BaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyAgentOfferIndex, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: PropertyAgentOfferIndex, isStandalone: true, selector: "rolatech-property-agent-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) { @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</rolatech-tabs>\n@if (loading) {\n<div class=\"divide-y divide-[--rt-10-percent-layer] flex flex-col px-3\">\n  @for (row of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]; track row) {\n  <rolatech-offer-item-skeleton></rolatech-offer-item-skeleton>\n  }\n</div>\n} @else {\n<rolatech-list>\n  @if (offers()&& offers().length> 0) { @for (item of offers(); track item) {\n  <rolatech-property-offer-item [routerLink]=\"['./', item.id]\" [offer]=\"item\"></rolatech-property-offer-item>\n  } } @else {\n  <rolatech-empty></rolatech-empty>\n  }\n</rolatech-list>\n}\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: [""], 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", "block"], 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" }, { kind: "component", type: OfferItemSkeleton, selector: "rolatech-offer-item-skeleton" }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: PropertyAgentOfferIndex, isStandalone: true, selector: "rolatech-property-agent-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) { @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</rolatech-tabs>\n@if (loading) {\n<div class=\"divide-y divide-[--rt-10-percent-layer] flex flex-col px-3\">\n  @for (row of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]; track row) {\n  <rolatech-offer-item-skeleton></rolatech-offer-item-skeleton>\n  }\n</div>\n} @else {\n<rolatech-list>\n  @if (offers()&& offers().length> 0) { @for (item of offers(); track item) {\n  <rolatech-property-offer-item [routerLink]=\"['./', item.id]\" [offer]=\"item\"></rolatech-property-offer-item>\n  } } @else {\n  <rolatech-empty></rolatech-empty>\n  }\n</rolatech-list>\n}\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: [""], 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", "block"], 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" }, { kind: "component", type: OfferItemSkeleton, selector: "rolatech-offer-item-skeleton" }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyAgentOfferIndex, decorators: [{
             type: Component,
@@ -6217,4 +7365,4 @@ const propertyManageOverviewRoutes = [
  */
 
 export { PropertyOfferTimelineStatus as A, PropertyOfferType as B, PropertyOfferStatus as C, ResidencyStatus as D, EmploymentStatus as E, PropertyApplicantType as F, AdverseCreditStatus as G, BedroomRange as H, PriceRange as I, Market as M, PropertyUtil as P, RentFrequency as R, ViewingTime as V, PropertyViewType as a, PropertyManageItemSkeleton as b, PropertyViewingItemComponent as c, propertyManageOffersRoutes as d, propertyRoutes as e, featureManageRoutes as f, propertyManageRoutes as g, propertyManageViewingsRoutes as h, propertyAgentViewingRoutes as i, propertyAgentOfferRoutes as j, propertyAgentOverviewRoutes as k, lettingManageRoutes as l, propertyManageOverviewRoutes as m, PropertyActionsComponent as n, PropertyItemComponent as o, propertyReviewRoutes as p, PropertyPricingComponent as q, PropertyPriceType as r, PropertyVideoProvider as s, tenantManageRoutes as t, PropertyStatus as u, PropertyType as v, PropertyInventoryStatus as w, PropertyScope as x, PropertyViewingStatus as y, PropertyViewerCategory as z };
-//# sourceMappingURL=rolatech-angular-property-rolatech-angular-property-Du0qae4S.mjs.map
+//# sourceMappingURL=rolatech-angular-property-rolatech-angular-property-BjulA68a.mjs.map