@rolatech/angular-property 20.2.8-beta.2 → 20.2.8-beta.4

package/fesm2022/{rolatech-angular-property-rolatech-angular-property-BRmo5aq4.mjs → rolatech-angular-property-rolatech-angular-property-BLynHPSt.mjs}

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, booleanAttribute, effect, HostBinding, ViewEncapsulation, Component, viewChild, PLATFORM_ID, output, computed, signal, model, EventEmitter, Injectable, Pipe, InjectionToken, ViewChild } from '@angular/core';
+import { inject, ElementRef, input, booleanAttribute, effect, HostBinding, ViewEncapsulation, Component, viewChild, PLATFORM_ID, output, computed, signal, model, Injectable, EventEmitter, Pipe, InjectionToken, ViewChild } from '@angular/core';
 import * as i1$3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i4$1 from '@angular/material/menu';
@@ -13,7 +13,7 @@ import { RouterLink, RouterModule, ActivatedRoute, Router, RouterLinkActive, Rou
 import { ThumbnailComponent, ImagePlaceholderComponent, Skeleton, ToolbarComponent, Loading, ImagePreviewDialogComponent, BaseComponent, AcceptDialogComponent, RejectDialogComponent, RichLabelComponent, AngularComponentsModule, ConfirmationDialogComponent, TabsComponent, TabComponent, EmptyComponent, ListComponent, ContainerComponent, SearchBar, MediaListComponent, MediaListItemComponent, InputComponent, SpinnerComponent } from '@rolatech/angular-components';
 import { PropertyService, FeatureService, PropertyOfferService, InvoiceService, FloorplanService, PropertyHighlightsService, TimeZoneService, PropertyOfferStatus as PropertyOfferStatus$1, 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 { CommonModule, NgClass, isPlatformBrowser, ViewportScroller, Location, KeyValuePipe } from '@angular/common';
 import { PricePipe, APP_CONFIG, AngularCommonModule, OptionsFormatPipe, DecimalDirective, DurationPipe, SafeUrlPipe } from '@rolatech/angular-common';
 import * as i2 from '@angular/material/icon';
 import { MatIconModule, MatIcon } from '@angular/material/icon';
@@ -46,10 +46,10 @@ import { CommentsComponent } from '@rolatech/angular-comment';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i4$2 from '@angular/cdk/text-field';
 import { TextFieldModule } from '@angular/cdk/text-field';
-import * as i5 from '@angular/material/progress-spinner';
-import { MatProgressSpinner, MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i5$1 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule, MatProgressSpinner } from '@angular/material/progress-spinner';
 import { MatStepperModule } from '@angular/material/stepper';
-import * as i6$1 from '@angular/material/slide-toggle';
+import * as i5 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';
@@ -1040,11 +1040,11 @@ class PropertyOfferItemComponent {
         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.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]] });
+    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      <div class=\"flex items-center\">\n        <span class=\"\">Offer: {{ offer().id }}</span>\n        <!-- Type badge -->\n        <span class=\"ml-3 px-2.5 py-1 border border-bg-[--rt-outline] rounded-full text-xs font-semibold\">\n          {{ offer().type }}\n        </span>\n      </div>\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.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" }]
+            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      <div class=\"flex items-center\">\n        <span class=\"\">Offer: {{ offer().id }}</span>\n        <!-- Type badge -->\n        <span class=\"ml-3 px-2.5 py-1 border border-bg-[--rt-outline] rounded-full text-xs font-semibold\">\n          {{ offer().type }}\n        </span>\n      </div>\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 {
@@ -1066,9 +1066,9 @@ class PropertyManageOfferIndexComponent extends BaseComponent {
             icon: 'dashboard',
         },
         {
-            name: 'Created',
+            name: 'Submitted',
             icon: 'category',
-            status: 'created',
+            status: 'submitted',
         },
         {
             name: 'Accepted',
@@ -1158,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$a = {
+const MY_FORMATS$9 = {
     parse: {
         dateInput: 'YYYY-MM-DD',
     },
@@ -1183,7 +1183,7 @@ class OfferEdit extends BaseComponent {
                 useClass: MomentDateAdapter,
                 deps: [MAT_DATE_LOCALE],
             },
-            { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$a },
+            { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$9 },
         ], 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: [{
@@ -1194,16 +1194,291 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                             useClass: MomentDateAdapter,
                             deps: [MAT_DATE_LOCALE],
                         },
-                        { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$a },
+                        { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$9 },
                     ], 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 OfferDetailContext {
+    api = inject(PropertyOfferService);
+    // input
+    offerId = signal(null, ...(ngDevMode ? [{ debugName: "offerId" }] : []));
+    // state (single source of truth)
+    offer = signal(null, ...(ngDevMode ? [{ debugName: "offer" }] : []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    constructor() {
+        effect(() => {
+            const id = this.offerId();
+            if (!id)
+                return;
+            this.fetchOffer(id);
+        });
+    }
+    fetchOffer(id) {
+        this.loading.set(true);
+        this.error.set(null);
+        this.api.getOffer(id).subscribe({
+            next: (res) => {
+                // adapt if your API shape is { data: ... }
+                this.offer.set(res.data ?? res);
+            },
+            error: (err) => {
+                this.error.set('Failed to load offer');
+                console.error(err);
+            },
+            complete: () => {
+                this.loading.set(false);
+            },
+        });
+    }
+    init(id) {
+        this.offerId.set(id);
+    }
+    isRental = computed(() => this.offer()?.type === 'RENTAL', ...(ngDevMode ? [{ debugName: "isRental" }] : []));
+    isSale = computed(() => this.offer()?.type === 'SALE', ...(ngDevMode ? [{ debugName: "isSale" }] : []));
+    invoiceOptionLabel = {
+        COMBINED: 'Combined',
+        SEPARATE: 'Separate',
+    };
+    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(', ');
+    }
+    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}` : '—';
+    }
+    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 === '');
+    }
+    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.type,
+            g.employmentStatus,
+            g.companyName,
+            g.jobTitle,
+            g.annualSalary,
+            g.companyNumber,
+            g.taxReturnSubmitted,
+            g.additionalFinancialSupport,
+        ];
+        const fieldsEmpty = fields.every((v) => v === null || v === undefined || (typeof v === 'string' && v.trim() === ''));
+        return addressEmpty && fieldsEmpty;
+    }
+    isIndividual(t) {
+        return t.applicantType === 'INDIVIDUAL';
+    }
+    isCorporate(t) {
+        return t.applicantType === 'CORPORATE';
+    }
+    isStudent(t) {
+        return t.applicantType === 'STUDENT';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OfferDetailContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OfferDetailContext });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OfferDetailContext, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class OfferRentalTermsCard {
+    ctx = inject(OfferDetailContext);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OfferRentalTermsCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: OfferRentalTermsCard, isStandalone: true, selector: "rolatech-offer-rental-terms-card", host: { classAttribute: "block" }, ngImport: i0, template: "@if (ctx.offer(); as o) {\n<section class=\"rounded-2xl border border-[--rt-outline] p-4 space-y-3\">\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\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\">{{ rt.amount | price }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Move-in date</div>\n      <div class=\"font-medium\">{{ rt.moveInDate ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Payment frequency</div>\n      <div class=\"font-medium\">{{ rt.paymentFrequency ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Tenancy length</div>\n      <div class=\"font-medium\">{{ rt.tenancyLengthMonths ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Break clause</div>\n      <div class=\"font-medium\">{{ rt.breakClauseMonths ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Pets</div>\n      <div class=\"font-medium\">{{ rt.pets.length > 0 ? rt.pets.join(', ') : '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Smoker</div>\n      <div class=\"font-medium\">{{ rt.smoker === null ? '\u2014' : (rt.smoker ? 'Yes' : 'No') }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Furniture</div>\n      <div class=\"font-medium\">{{ rt.furnitureRequirement ?? '\u2014' }}</div>\n    </div>\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\">{{ rt.additionalRequests ?? '\u2014' }}</div>\n    </div>\n  </div>\n  }\n</section>\n}\n", styles: [""], dependencies: [{ kind: "pipe", type: PricePipe, name: "price" }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OfferRentalTermsCard, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-offer-rental-terms-card', imports: [PricePipe], encapsulation: ViewEncapsulation.None, host: { class: 'block' }, template: "@if (ctx.offer(); as o) {\n<section class=\"rounded-2xl border border-[--rt-outline] p-4 space-y-3\">\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\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\">{{ rt.amount | price }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Move-in date</div>\n      <div class=\"font-medium\">{{ rt.moveInDate ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Payment frequency</div>\n      <div class=\"font-medium\">{{ rt.paymentFrequency ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Tenancy length</div>\n      <div class=\"font-medium\">{{ rt.tenancyLengthMonths ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Break clause</div>\n      <div class=\"font-medium\">{{ rt.breakClauseMonths ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Pets</div>\n      <div class=\"font-medium\">{{ rt.pets.length > 0 ? rt.pets.join(', ') : '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Smoker</div>\n      <div class=\"font-medium\">{{ rt.smoker === null ? '\u2014' : (rt.smoker ? 'Yes' : 'No') }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Furniture</div>\n      <div class=\"font-medium\">{{ rt.furnitureRequirement ?? '\u2014' }}</div>\n    </div>\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\">{{ rt.additionalRequests ?? '\u2014' }}</div>\n    </div>\n  </div>\n  }\n</section>\n}\n" }]
+        }] });
+
+class OfferTenantExpanded {
+    ctx = inject(OfferDetailContext);
+    tenant = input.required(...(ngDevMode ? [{ debugName: "tenant" }] : []));
+    formatAddress(a) {
+        const parts = [a?.line1, a?.line2, a?.city, a?.postcode, a?.country].filter((v) => !!v && v.trim() !== '');
+        return parts.length ? parts.join(', ') : '—';
+    }
+    genderLabel = {
+        MALE: 'Male',
+        FEMALE: 'Female',
+        OTHER: 'Other',
+        PREFER_NOT_TO_SAY: 'Prefer not to say',
+    };
+    guarantor = computed(() => this.tenant()?.guarantor ?? null, ...(ngDevMode ? [{ debugName: "guarantor" }] : []));
+    hasGuarantor = computed(() => !!this.guarantor(), ...(ngDevMode ? [{ debugName: "hasGuarantor" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OfferTenantExpanded, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: OfferTenantExpanded, isStandalone: true, selector: "rolatech-offer-tenant-expanded", inputs: { tenant: { classPropertyName: "tenant", publicName: "tenant", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"p-4 border-t border-[--rt-outline] 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]\">Age</div>\n      <div class=\"font-medium\">{{ ctx.ageFromDob(tenant().dob) }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Gender</div>\n      <div class=\"font-medium\">@if (tenant().gender) { {{ genderLabel[tenant().gender!] }} } @else { \u2014 }</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Applicant type</div>\n      <div class=\"font-medium\">{{ tenant().applicantType ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Nationality</div>\n      <div class=\"font-medium\">{{ tenant().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\">{{ formatAddress(tenant().address) }}</div>\n    </div>\n  </div>\n\n  @switch (tenant().applicantType) { @case ('INDIVIDUAL') {\n  <div class=\"rounded-xl border border-[--rt-outline] p-3 space-y-2\">\n    <div class=\"text-xs font-semibold\">Individual</div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Employment</div>\n      <div class=\"font-medium\">{{ tenant().employmentStatus ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Company</div>\n      <div class=\"font-medium\">{{ tenant().companyName ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Job title</div>\n      <div class=\"font-medium\">{{ tenant().jobTitle ?? '\u2014' }}</div>\n    </div>\n  </div>\n  } @case ('CORPORATE') {\n  <div class=\"rounded-xl border border-[--rt-outline] p-3 space-y-2\">\n    <div class=\"text-xs font-semibold\">Corporate</div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Company</div>\n      <div class=\"font-medium\">{{ tenant().corporateCompanyName ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Company number</div>\n      <div class=\"font-medium\">{{ tenant().corporateCompanyNumber ?? '\u2014' }}</div>\n    </div>\n  </div>\n  } @case ('STUDENT') {\n  <div class=\"rounded-xl border border-[--rt-outline] p-3 space-y-2\">\n    <div class=\"text-xs font-semibold\">Student</div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">University</div>\n      <div class=\"font-medium\">{{ tenant().universityName ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Course</div>\n      <div class=\"font-medium\">{{ tenant().courseTitle ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Years of study</div>\n      <div class=\"font-medium\">{{ tenant().yearOfStudy ?? '-' }}</div>\n    </div>\n  </div>\n  } }\n  <!-- \u2705 Guarantor -->\n  @if (hasGuarantor(); as _unused) { @if (guarantor(); as g) {\n  <div class=\"mt-6 rounded-2xl border border-[--rt-outline] p-4\">\n    <div class=\"flex items-center justify-between\">\n      <div class=\"text-sm font-semibold\">Guarantor</div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">{{ g.type }}</div>\n    </div>\n\n    <div class=\"mt-3 grid grid-cols-12 gap-3 text-sm\">\n      <div class=\"col-span-12 lg:col-span-6\">\n        <div class=\"text-xs text-[--rt-text-secondary]\">Full name</div>\n        <div class=\"font-medium\">{{ g.fullName ?? '\u2014' }}</div>\n      </div>\n\n      <div class=\"col-span-12 lg:col-span-3\">\n        <div class=\"text-xs text-[--rt-text-secondary]\">Age</div>\n        <div class=\"font-medium\">{{ ctx.ageFromDob(g.dob) }}</div>\n      </div>\n\n      <div class=\"col-span-12 lg:col-span-3\">\n        <div class=\"text-xs text-[--rt-text-secondary]\">Phone</div>\n        <div class=\"font-medium\">{{ g.phone ?? '\u2014' }}</div>\n      </div>\n\n      <div class=\"col-span-12 lg:col-span-6\">\n        <div class=\"text-xs text-[--rt-text-secondary]\">Email</div>\n        <div class=\"font-medium\">{{ g.email ?? '\u2014' }}</div>\n      </div>\n\n      <div class=\"col-span-12 lg:col-span-6\">\n        <div class=\"text-xs text-[--rt-text-secondary]\">Address</div>\n        @if (g.address; as a) {\n        <div class=\"font-medium\">\n          {{ a.line1 ?? '\u2014' }} @if (a.line2) { <span>, {{ a.line2 }}</span> } @if (a.city) { <span>, {{ a.city }}</span> } @if\n          (a.postcode) { <span>, {{ a.postcode }}</span> } @if (a.country) { <span>, {{ a.country }}</span> }\n        </div>\n        } @else {\n        <div class=\"font-medium\">\u2014</div>\n        }\n      </div>\n\n      <!-- INDIVIDUAL fields -->\n      @if (g.type === 'INDIVIDUAL') {\n      <div class=\"col-span-12 lg:col-span-4\">\n        <div class=\"text-xs text-[--rt-text-secondary]\">Employment status</div>\n        <div class=\"font-medium\">{{ g.employmentStatus ?? '\u2014' }}</div>\n      </div>\n\n      @if (g.employmentStatus === 'EMPLOYED') {\n      <div class=\"col-span-12 lg:col-span-4\">\n        <div class=\"text-xs text-[--rt-text-secondary]\">Job title</div>\n        <div class=\"font-medium\">{{ g.jobTitle ?? '\u2014' }}</div>\n      </div>\n\n      <div class=\"col-span-12 lg:col-span-4\">\n        <div class=\"text-xs text-[--rt-text-secondary]\">Company name</div>\n        <div class=\"font-medium\">{{ g.companyName ?? '\u2014' }}</div>\n      </div>\n\n      <div class=\"col-span-12 lg:col-span-4\">\n        <div class=\"text-xs text-[--rt-text-secondary]\">Annual salary</div>\n        <div class=\"font-medium\">{{ g.annualSalary| price }}</div>\n      </div>\n      } @if (g.employmentStatus === 'SELF_EMPLOYED') {\n      <div class=\"col-span-12 lg:col-span-6\">\n        <div class=\"text-xs text-[--rt-text-secondary]\">Company name</div>\n        <div class=\"font-medium\">{{ g.companyName ?? '\u2014' }}</div>\n      </div>\n\n      <div class=\"col-span-12 lg:col-span-6\">\n        <div class=\"text-xs text-[--rt-text-secondary]\">Annual salary</div>\n        <div class=\"font-medium\">{{ g.annualSalary ?? '\u2014' }}</div>\n      </div>\n      } @if (g.employmentStatus === 'UNEMPLOYED') {\n      <div class=\"col-span-12\">\n        <div class=\"text-xs text-[--rt-text-secondary]\">Additional financial support</div>\n        <div class=\"font-medium whitespace-pre-wrap\">{{ g.additionalFinancialSupport ?? '\u2014' }}</div>\n      </div>\n      } }\n\n      <!-- COMPANY fields (if you later add them on backend) -->\n      @if (g.type === 'COMPANY') {\n      <div class=\"col-span-12\">\n        <div class=\"text-xs text-[--rt-text-secondary]\">Company guarantor</div>\n        <div class=\"font-medium\">\u2014</div>\n      </div>\n      }\n    </div>\n  </div>\n  } }\n</div>\n", styles: [""], dependencies: [{ kind: "pipe", type: PricePipe, name: "price" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OfferTenantExpanded, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-offer-tenant-expanded', imports: [PricePipe], template: "<div class=\"p-4 border-t border-[--rt-outline] 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]\">Age</div>\n      <div class=\"font-medium\">{{ ctx.ageFromDob(tenant().dob) }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Gender</div>\n      <div class=\"font-medium\">@if (tenant().gender) { {{ genderLabel[tenant().gender!] }} } @else { \u2014 }</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Applicant type</div>\n      <div class=\"font-medium\">{{ tenant().applicantType ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Nationality</div>\n      <div class=\"font-medium\">{{ tenant().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\">{{ formatAddress(tenant().address) }}</div>\n    </div>\n  </div>\n\n  @switch (tenant().applicantType) { @case ('INDIVIDUAL') {\n  <div class=\"rounded-xl border border-[--rt-outline] p-3 space-y-2\">\n    <div class=\"text-xs font-semibold\">Individual</div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Employment</div>\n      <div class=\"font-medium\">{{ tenant().employmentStatus ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Company</div>\n      <div class=\"font-medium\">{{ tenant().companyName ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Job title</div>\n      <div class=\"font-medium\">{{ tenant().jobTitle ?? '\u2014' }}</div>\n    </div>\n  </div>\n  } @case ('CORPORATE') {\n  <div class=\"rounded-xl border border-[--rt-outline] p-3 space-y-2\">\n    <div class=\"text-xs font-semibold\">Corporate</div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Company</div>\n      <div class=\"font-medium\">{{ tenant().corporateCompanyName ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Company number</div>\n      <div class=\"font-medium\">{{ tenant().corporateCompanyNumber ?? '\u2014' }}</div>\n    </div>\n  </div>\n  } @case ('STUDENT') {\n  <div class=\"rounded-xl border border-[--rt-outline] p-3 space-y-2\">\n    <div class=\"text-xs font-semibold\">Student</div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">University</div>\n      <div class=\"font-medium\">{{ tenant().universityName ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Course</div>\n      <div class=\"font-medium\">{{ tenant().courseTitle ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Years of study</div>\n      <div class=\"font-medium\">{{ tenant().yearOfStudy ?? '-' }}</div>\n    </div>\n  </div>\n  } }\n  <!-- \u2705 Guarantor -->\n  @if (hasGuarantor(); as _unused) { @if (guarantor(); as g) {\n  <div class=\"mt-6 rounded-2xl border border-[--rt-outline] p-4\">\n    <div class=\"flex items-center justify-between\">\n      <div class=\"text-sm font-semibold\">Guarantor</div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">{{ g.type }}</div>\n    </div>\n\n    <div class=\"mt-3 grid grid-cols-12 gap-3 text-sm\">\n      <div class=\"col-span-12 lg:col-span-6\">\n        <div class=\"text-xs text-[--rt-text-secondary]\">Full name</div>\n        <div class=\"font-medium\">{{ g.fullName ?? '\u2014' }}</div>\n      </div>\n\n      <div class=\"col-span-12 lg:col-span-3\">\n        <div class=\"text-xs text-[--rt-text-secondary]\">Age</div>\n        <div class=\"font-medium\">{{ ctx.ageFromDob(g.dob) }}</div>\n      </div>\n\n      <div class=\"col-span-12 lg:col-span-3\">\n        <div class=\"text-xs text-[--rt-text-secondary]\">Phone</div>\n        <div class=\"font-medium\">{{ g.phone ?? '\u2014' }}</div>\n      </div>\n\n      <div class=\"col-span-12 lg:col-span-6\">\n        <div class=\"text-xs text-[--rt-text-secondary]\">Email</div>\n        <div class=\"font-medium\">{{ g.email ?? '\u2014' }}</div>\n      </div>\n\n      <div class=\"col-span-12 lg:col-span-6\">\n        <div class=\"text-xs text-[--rt-text-secondary]\">Address</div>\n        @if (g.address; as a) {\n        <div class=\"font-medium\">\n          {{ a.line1 ?? '\u2014' }} @if (a.line2) { <span>, {{ a.line2 }}</span> } @if (a.city) { <span>, {{ a.city }}</span> } @if\n          (a.postcode) { <span>, {{ a.postcode }}</span> } @if (a.country) { <span>, {{ a.country }}</span> }\n        </div>\n        } @else {\n        <div class=\"font-medium\">\u2014</div>\n        }\n      </div>\n\n      <!-- INDIVIDUAL fields -->\n      @if (g.type === 'INDIVIDUAL') {\n      <div class=\"col-span-12 lg:col-span-4\">\n        <div class=\"text-xs text-[--rt-text-secondary]\">Employment status</div>\n        <div class=\"font-medium\">{{ g.employmentStatus ?? '\u2014' }}</div>\n      </div>\n\n      @if (g.employmentStatus === 'EMPLOYED') {\n      <div class=\"col-span-12 lg:col-span-4\">\n        <div class=\"text-xs text-[--rt-text-secondary]\">Job title</div>\n        <div class=\"font-medium\">{{ g.jobTitle ?? '\u2014' }}</div>\n      </div>\n\n      <div class=\"col-span-12 lg:col-span-4\">\n        <div class=\"text-xs text-[--rt-text-secondary]\">Company name</div>\n        <div class=\"font-medium\">{{ g.companyName ?? '\u2014' }}</div>\n      </div>\n\n      <div class=\"col-span-12 lg:col-span-4\">\n        <div class=\"text-xs text-[--rt-text-secondary]\">Annual salary</div>\n        <div class=\"font-medium\">{{ g.annualSalary| price }}</div>\n      </div>\n      } @if (g.employmentStatus === 'SELF_EMPLOYED') {\n      <div class=\"col-span-12 lg:col-span-6\">\n        <div class=\"text-xs text-[--rt-text-secondary]\">Company name</div>\n        <div class=\"font-medium\">{{ g.companyName ?? '\u2014' }}</div>\n      </div>\n\n      <div class=\"col-span-12 lg:col-span-6\">\n        <div class=\"text-xs text-[--rt-text-secondary]\">Annual salary</div>\n        <div class=\"font-medium\">{{ g.annualSalary ?? '\u2014' }}</div>\n      </div>\n      } @if (g.employmentStatus === 'UNEMPLOYED') {\n      <div class=\"col-span-12\">\n        <div class=\"text-xs text-[--rt-text-secondary]\">Additional financial support</div>\n        <div class=\"font-medium whitespace-pre-wrap\">{{ g.additionalFinancialSupport ?? '\u2014' }}</div>\n      </div>\n      } }\n\n      <!-- COMPANY fields (if you later add them on backend) -->\n      @if (g.type === 'COMPANY') {\n      <div class=\"col-span-12\">\n        <div class=\"text-xs text-[--rt-text-secondary]\">Company guarantor</div>\n        <div class=\"font-medium\">\u2014</div>\n      </div>\n      }\n    </div>\n  </div>\n  } }\n</div>\n" }]
+        }], propDecorators: { tenant: [{ type: i0.Input, args: [{ isSignal: true, alias: "tenant", required: true }] }] } });
+
+class OfferTenantCard {
+    // ---- signal inputs
+    index = input.required(...(ngDevMode ? [{ debugName: "index" }] : []));
+    expanded = input.required(...(ngDevMode ? [{ debugName: "expanded" }] : []));
+    tenant = input.required(...(ngDevMode ? [{ debugName: "tenant" }] : []));
+    // ---- 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',
+        VISA_HOLDER: 'Visa Holder',
+        WAITING_FOR_VISA: 'Waiting For Visa',
+        NOT_YET_APPLIED_FOR_VISA: 'Not Yet Applied For Visa',
+    };
+    adverseCreditStatusLabel = {
+        NONE: 'None',
+        ACTIVE_CCJ: 'Active Ccj',
+        SATISFIED_CCJ: 'Satisfied Ccj',
+        DEBT_MANAGEMENT_PLAN: 'Debt Management Plan',
+        LOW_CREDIT_SCORE: 'Low Credit Score',
+        OTHER: 'Other',
+    };
+    // ---- callback input instead of Output
+    onToggleInput = input.required(...(ngDevMode ? [{ debugName: "onToggleInput" }] : []));
+    onToggle() {
+        this.onToggleInput()(this.index());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OfferTenantCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: OfferTenantCard, isStandalone: true, selector: "rolatech-offer-tenant-card", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: true, transformFunction: null }, tenant: { classPropertyName: "tenant", publicName: "tenant", isSignal: true, isRequired: true, transformFunction: null }, onToggleInput: { classPropertyName: "onToggleInput", publicName: "onToggleInput", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"rounded-xl border border-[--rt-outline] bg-[--rt-base-background] overflow-hidden\">\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)=\"onToggle()\"\n  >\n    <div class=\"min-w-0 space-y-1\">\n      <div class=\"text-sm font-semibold truncate\">{{ tenant().fullName ?? '--' }}</div>\n      <div class=\"text-xs text-[--rt-text-secondary] truncate\">{{ tenant().email ?? '--' }} \u00B7 {{ tenant().phone ?? '--' }}</div>\n      <div class=\"flex flex-wrap gap-2 pt-1 text-xs\">\n        <span class=\"px-2 py-1 rounded-full border\">\n          @if (tenant().applicantType) { {{ applicantTypeLabel[tenant().applicantType!] }} } @else { Applicant: -- }\n        </span>\n\n        <span class=\"px-2 py-1 rounded-full border\">\n          @if (tenant().employmentStatus) { {{ employmentStatusLabel[tenant().employmentStatus!] }} } @else { Employment: --}\n        </span>\n\n        <span class=\"px-2 py-1 rounded-full border\">\n          @if (tenant().adverseCreditStatus) { {{ adverseCreditStatusLabel[tenant().adverseCreditStatus!] }} } @else { Credit:\n          -- }\n        </span>\n\n        <span class=\"px-2 py-1 rounded-full border\">\n          @if (tenant().visaStatus) { {{ visaStatusLabel[tenant().visaStatus!] }} } @else { Visa: \u2014 }\n        </span>\n      </div>\n    </div>\n\n    <div class=\"flex items-center gap-2 shrink-0\">\n      <span class=\"text-xs px-2 py-1 rounded-full border\"> {{ expanded() ? 'Expanded' : 'Collapsed' }} </span>\n      <svg class=\"w-4 h-4 transition-transform\" [class.rotate-180]=\"expanded()\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\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  @if (expanded()) {\n  <rolatech-offer-tenant-expanded [tenant]=\"tenant()\" />\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: OfferTenantExpanded, selector: "rolatech-offer-tenant-expanded", inputs: ["tenant"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OfferTenantCard, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-offer-tenant-card', imports: [OfferTenantExpanded], template: "<div class=\"rounded-xl border border-[--rt-outline] bg-[--rt-base-background] overflow-hidden\">\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)=\"onToggle()\"\n  >\n    <div class=\"min-w-0 space-y-1\">\n      <div class=\"text-sm font-semibold truncate\">{{ tenant().fullName ?? '--' }}</div>\n      <div class=\"text-xs text-[--rt-text-secondary] truncate\">{{ tenant().email ?? '--' }} \u00B7 {{ tenant().phone ?? '--' }}</div>\n      <div class=\"flex flex-wrap gap-2 pt-1 text-xs\">\n        <span class=\"px-2 py-1 rounded-full border\">\n          @if (tenant().applicantType) { {{ applicantTypeLabel[tenant().applicantType!] }} } @else { Applicant: -- }\n        </span>\n\n        <span class=\"px-2 py-1 rounded-full border\">\n          @if (tenant().employmentStatus) { {{ employmentStatusLabel[tenant().employmentStatus!] }} } @else { Employment: --}\n        </span>\n\n        <span class=\"px-2 py-1 rounded-full border\">\n          @if (tenant().adverseCreditStatus) { {{ adverseCreditStatusLabel[tenant().adverseCreditStatus!] }} } @else { Credit:\n          -- }\n        </span>\n\n        <span class=\"px-2 py-1 rounded-full border\">\n          @if (tenant().visaStatus) { {{ visaStatusLabel[tenant().visaStatus!] }} } @else { Visa: \u2014 }\n        </span>\n      </div>\n    </div>\n\n    <div class=\"flex items-center gap-2 shrink-0\">\n      <span class=\"text-xs px-2 py-1 rounded-full border\"> {{ expanded() ? 'Expanded' : 'Collapsed' }} </span>\n      <svg class=\"w-4 h-4 transition-transform\" [class.rotate-180]=\"expanded()\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\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  @if (expanded()) {\n  <rolatech-offer-tenant-expanded [tenant]=\"tenant()\" />\n  }\n</div>\n" }]
+        }], propDecorators: { index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: true }] }], tenant: [{ type: i0.Input, args: [{ isSignal: true, alias: "tenant", required: true }] }], onToggleInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "onToggleInput", required: true }] }] } });
+
+class OfferTenantsAccordion {
+    ctx = inject(OfferDetailContext);
+    // tenants snapshot from ctx
+    tenants = computed(() => this.ctx.offer()?.tenants ?? [], ...(ngDevMode ? [{ debugName: "tenants" }] : []));
+    // index-based expanded state (per your requirement)
+    expandedIndexes = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedIndexes" }] : []));
+    isExpanded(i) {
+        return this.expandedIndexes().has(i);
+    }
+    toggle = (index) => {
+        this.expandedIndexes.update((prev) => {
+            const next = new Set(prev);
+            if (next.has(index))
+                next.delete(index);
+            else
+                next.add(index);
+            return next;
+        });
+    };
+    expandAll(count) {
+        const next = new Set();
+        for (let i = 0; i < count; i++)
+            next.add(i);
+        this.expandedIndexes.set(next);
+    }
+    collapseAll() {
+        this.expandedIndexes.set(new Set());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OfferTenantsAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: OfferTenantsAccordion, isStandalone: true, selector: "rolatech-offer-tenants-accordion", host: { classAttribute: "block" }, ngImport: i0, template: "@if (tenants(); as ts) {\n<section class=\"rounded-2xl border border-[--rt-outline] 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]\"\n        (click)=\"expandAll(ts.length)\"\n        [disabled]=\"ts.length === 0\"\n      >\n        Expand all\n      </button>\n      <button\n        type=\"button\"\n        class=\"text-xs px-3 py-1 rounded-full border border-[--rt-outline] bg-[--rt-base-background]\"\n        (click)=\"collapseAll()\"\n        [disabled]=\"expandedIndexes().size === 0\"\n      >\n        Collapse all\n      </button>\n      <span class=\"text-xs px-2 py-1 rounded-full border border-[--rt-outline] bg-[--rt-base-background]\"\n        >count: {{ ts.length }}</span\n      >\n    </div>\n  </div>\n\n  @if (ts.length > 0) {\n  <div class=\"space-y-3\">\n    @for (t of ts; track $index) {\n    <rolatech-offer-tenant-card [index]=\"$index\" [expanded]=\"isExpanded($index)\" [tenant]=\"t\" [onToggleInput]=\"toggle\" />\n    }\n  </div>\n  } @else {\n  <div class=\"text-sm text-[--rt-text-secondary]\">No tenants</div>\n  }\n</section>\n}\n", styles: [""], dependencies: [{ kind: "component", type: OfferTenantCard, selector: "rolatech-offer-tenant-card", inputs: ["index", "expanded", "tenant", "onToggleInput"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OfferTenantsAccordion, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-offer-tenants-accordion', imports: [OfferTenantCard], encapsulation: ViewEncapsulation.None, host: { class: 'block' }, template: "@if (tenants(); as ts) {\n<section class=\"rounded-2xl border border-[--rt-outline] 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]\"\n        (click)=\"expandAll(ts.length)\"\n        [disabled]=\"ts.length === 0\"\n      >\n        Expand all\n      </button>\n      <button\n        type=\"button\"\n        class=\"text-xs px-3 py-1 rounded-full border border-[--rt-outline] bg-[--rt-base-background]\"\n        (click)=\"collapseAll()\"\n        [disabled]=\"expandedIndexes().size === 0\"\n      >\n        Collapse all\n      </button>\n      <span class=\"text-xs px-2 py-1 rounded-full border border-[--rt-outline] bg-[--rt-base-background]\"\n        >count: {{ ts.length }}</span\n      >\n    </div>\n  </div>\n\n  @if (ts.length > 0) {\n  <div class=\"space-y-3\">\n    @for (t of ts; track $index) {\n    <rolatech-offer-tenant-card [index]=\"$index\" [expanded]=\"isExpanded($index)\" [tenant]=\"t\" [onToggleInput]=\"toggle\" />\n    }\n  </div>\n  } @else {\n  <div class=\"text-sm text-[--rt-text-secondary]\">No tenants</div>\n  }\n</section>\n}\n" }]
+        }] });
+
+class OfferItemCard {
+    ctx = inject(OfferDetailContext);
+    firstMediaUrl(o) {
+        const m = o.item?.media?.[0];
+        return m?.url ?? null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OfferItemCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: OfferItemCard, isStandalone: true, selector: "rolatech-offer-item-card", host: { classAttribute: "block" }, ngImport: i0, template: "@if (ctx.offer(); as o) {\n<section class=\"rounded-2xl border border-[--rt-outline] overflow-hidden\">\n  <div class=\"p-4 flex items-start justify-between\">\n    <div>\n      <div class=\"text-sm font-semibold\">Property item</div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">property snapshot</div>\n    </div>\n    <span class=\"text-xs px-2 py-1 rounded-full border bg-[--rt-base-background]\"> propertyId: {{ o.item.propertyId }} </span>\n  </div>\n\n  <div class=\"p-4 pt-0 space-y-4\">\n    <div class=\"flex flex-col lg:flex-row gap-4\">\n      <img\n        class=\"w-full lg:w-72 h-44 rounded-xl object-cover bg-gray-100\"\n        [src]=\"firstMediaUrl(o) ?? '/assets/placeholder.jpg'\"\n        [alt]=\"o.item.title\"\n      />\n\n      <div class=\"flex-1 space-y-2\">\n        <div class=\"text-base font-semibold\">{{ 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\">{{ o.item.amount | price }}</div>\n          </div>\n          <div>\n            <div class=\"text-xs text-[--rt-text-secondary]\">Bedrooms</div>\n            <div class=\"font-medium\">{{ o.item.bedrooms }}</div>\n          </div>\n          <div>\n            <div class=\"text-xs text-[--rt-text-secondary]\">Bathrooms</div>\n            <div class=\"font-medium\">{{ o.item.bathrooms }}</div>\n          </div>\n          <div>\n            <div class=\"text-xs text-[--rt-text-secondary]\">Receptions</div>\n            <div class=\"font-medium\">{{ o.item.receptions }}</div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n}\n", styles: [""], dependencies: [{ kind: "pipe", type: PricePipe, name: "price" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OfferItemCard, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-offer-item-card', imports: [PricePipe], host: { class: 'block' }, template: "@if (ctx.offer(); as o) {\n<section class=\"rounded-2xl border border-[--rt-outline] overflow-hidden\">\n  <div class=\"p-4 flex items-start justify-between\">\n    <div>\n      <div class=\"text-sm font-semibold\">Property item</div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">property snapshot</div>\n    </div>\n    <span class=\"text-xs px-2 py-1 rounded-full border bg-[--rt-base-background]\"> propertyId: {{ o.item.propertyId }} </span>\n  </div>\n\n  <div class=\"p-4 pt-0 space-y-4\">\n    <div class=\"flex flex-col lg:flex-row gap-4\">\n      <img\n        class=\"w-full lg:w-72 h-44 rounded-xl object-cover bg-gray-100\"\n        [src]=\"firstMediaUrl(o) ?? '/assets/placeholder.jpg'\"\n        [alt]=\"o.item.title\"\n      />\n\n      <div class=\"flex-1 space-y-2\">\n        <div class=\"text-base font-semibold\">{{ 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\">{{ o.item.amount | price }}</div>\n          </div>\n          <div>\n            <div class=\"text-xs text-[--rt-text-secondary]\">Bedrooms</div>\n            <div class=\"font-medium\">{{ o.item.bedrooms }}</div>\n          </div>\n          <div>\n            <div class=\"text-xs text-[--rt-text-secondary]\">Bathrooms</div>\n            <div class=\"font-medium\">{{ o.item.bathrooms }}</div>\n          </div>\n          <div>\n            <div class=\"text-xs text-[--rt-text-secondary]\">Receptions</div>\n            <div class=\"font-medium\">{{ o.item.receptions }}</div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n}\n" }]
+        }] });
+
 class PropertyManageOfferDetailComponent extends BaseComponent {
     propertyService = inject(PropertyService);
     propertyOfferService = inject(PropertyOfferService);
     authUserService = inject(AuthUserService);
     invoiceService = inject(InvoiceService);
+    ctx = inject(OfferDetailContext);
     invoiceOptionDraft = signal(null, ...(ngDevMode ? [{ debugName: "invoiceOptionDraft" }] : []));
+    invoiceOptionLabel = {
+        COMBINED: 'Combined',
+        SEPARATE: 'Separate',
+    };
     offer;
     name = '';
     property;
@@ -1214,6 +1489,7 @@ class PropertyManageOfferDetailComponent extends BaseComponent {
     isSale = computed(() => this.offer.type.toString() === 'SALE', ...(ngDevMode ? [{ debugName: "isSale" }] : []));
     ngOnInit() {
         this.getOffer();
+        this.ctx.init(this.id);
     }
     getOffer() {
         this.propertyOfferService.getOffer(this.id).subscribe({
@@ -1447,21 +1723,23 @@ class PropertyManageOfferDetailComponent extends BaseComponent {
         });
     }
     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      <button mat-flat-button (click)=\"copyText(true)\">\n        <mat-icon>content_copy</mat-icon>\n        <span i18n>Copy</span>\n      </button>\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    <button mat-menu-item (click)=\"copyText(true)\">\n      <span i18n>Copy</span>\n    </button>\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]] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: PropertyManageOfferDetailComponent, isStandalone: true, selector: "rolatech-property-manage-offer-detail", providers: [OfferDetailContext], 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      <button mat-flat-button (click)=\"copyText(true)\">\n        <mat-icon>content_copy</mat-icon>\n        <span i18n>Copy</span>\n      </button>\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 grid-cols-1 lg:grid-cols-12 gap-4 p-4\">\n    <!-- Main column -->\n    <div class=\"grid grid-cols-1 lg:col-span-8 space-y-4\">\n      <rolatech-offer-item-card />\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>\n      </section>\n\n      <!-- Tenants card -->\n      @if (ctx.isRental()) {\n        <rolatech-offer-rental-terms-card />\n        <rolatech-offer-tenants-accordion />\n      }\n    </div>\n\n    <!-- Right rail -->\n    <div class=\"lg:col-span-4 space-y-4\">\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 grid-cols-1 gap-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      <!-- 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    <button mat-menu-item (click)=\"copyText(true)\">\n      <span i18n>Copy</span>\n    </button>\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: "component", type: OfferRentalTermsCard, selector: "rolatech-offer-rental-terms-card" }, { kind: "component", type: OfferTenantsAccordion, selector: "rolatech-offer-tenants-accordion" }, { kind: "component", type: OfferItemCard, selector: "rolatech-offer-item-card" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: PricePipe, name: "price" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyManageOfferDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-property-manage-offer-detail', imports: [
                         CommonModule,
                         ToolbarComponent,
-                        ThumbnailComponent,
                         MatButtonModule,
                         MatIcon,
                         MatMenuModule,
                         PricePipe,
                         MatRadioModule,
                         FormsModule,
-                    ], template: "@if (offer) {\n  <rolatech-toolbar [title]=\"status[offer.status]\" large link=\"../\">\n    <div class=\"hidden md:flex gap-2\">\n      <button mat-flat-button (click)=\"copyText(true)\">\n        <mat-icon>content_copy</mat-icon>\n        <span i18n>Copy</span>\n      </button>\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    <button mat-menu-item (click)=\"copyText(true)\">\n      <span i18n>Copy</span>\n    </button>\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" }]
+                        OfferRentalTermsCard,
+                        OfferTenantsAccordion,
+                        OfferItemCard,
+                    ], providers: [OfferDetailContext], template: "@if (offer) {\n  <rolatech-toolbar [title]=\"status[offer.status]\" large link=\"../\">\n    <div class=\"hidden md:flex gap-2\">\n      <button mat-flat-button (click)=\"copyText(true)\">\n        <mat-icon>content_copy</mat-icon>\n        <span i18n>Copy</span>\n      </button>\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 grid-cols-1 lg:grid-cols-12 gap-4 p-4\">\n    <!-- Main column -->\n    <div class=\"grid grid-cols-1 lg:col-span-8 space-y-4\">\n      <rolatech-offer-item-card />\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>\n      </section>\n\n      <!-- Tenants card -->\n      @if (ctx.isRental()) {\n        <rolatech-offer-rental-terms-card />\n        <rolatech-offer-tenants-accordion />\n      }\n    </div>\n\n    <!-- Right rail -->\n    <div class=\"lg:col-span-4 space-y-4\">\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 grid-cols-1 gap-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      <!-- 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    <button mat-menu-item (click)=\"copyText(true)\">\n      <span i18n>Copy</span>\n    </button>\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 = [
@@ -1492,7 +1770,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }] });
 
-const MY_FORMATS$9 = {
+const MY_FORMATS$8 = {
     parse: {
         dateInput: 'YYYY-MM-DD',
     },
@@ -1608,7 +1886,7 @@ class PropertyFilterBar {
                 useClass: MomentDateAdapter,
                 deps: [MAT_DATE_LOCALE],
             },
-            { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$9 },
+            { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$8 },
         ], 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: [{
@@ -1628,7 +1906,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$9 },
+                        { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$8 },
                     ], 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"] }] } });
 
@@ -2302,7 +2580,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$8 = {
+const MY_FORMATS$7 = {
     parse: {
         dateInput: 'YYYY-MM-DD',
     },
@@ -2337,7 +2615,7 @@ class PropertyViewingTimeComponent {
                 useClass: MomentDateAdapter,
                 deps: [MAT_DATE_LOCALE],
             },
-            { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$8 },
+            { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$7 },
         ], 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: [{
@@ -2357,11 +2635,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$8 },
+                        { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$7 },
                     ], 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$7 = {
+const MY_FORMATS$6 = {
     parse: {
         dateInput: 'YYYY-MM-DD',
     },
@@ -2399,178 +2677,51 @@ class PropertyViewingRequestComponent extends BaseComponent {
     adverseCreditStatus = AdverseCreditStatus;
     countries = ['United Kingdom', 'China'];
     selectedCountry;
-    displayPrice = computed(() => {
-        return this.property ? this.property.price.toFixed(2) : 0;
-    }, ...(ngDevMode ? [{ debugName: "displayPrice" }] : []));
-    ngOnInit() {
-        this.getProperty();
-        // this.viewing['country'] = this.countries[0];
-    }
-    getProperty() {
-        this.propertyService.get(this.id).subscribe({
-            next: (res) => {
-                this.property = res.data;
-                this.titleService.setTitle(`${this.property.title}`);
-            },
-        });
-    }
-    onCountrySelect(event) {
-        this.viewing['country'] = event.value;
-    }
-    onViewerSelectionChange(event) {
-        this.selectedViewerCategory = event.value;
-    }
-    sendRequest() {
-        this.propertyService.requestViewing(this.id, this.viewing).subscribe({
-            next: (res) => {
-                this.snackBarService.open('Request viewing successfully');
-                this.router.navigate([`/properties/viewings/${res.data.id}`]);
-            },
-            error: (error) => {
-                this.snackBarService.open(error.message);
-            },
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyViewingRequestComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: PropertyViewingRequestComponent, isStandalone: true, selector: "rolatech-property-viewing-request", providers: [
-            {
-                provide: DateAdapter,
-                useClass: MomentDateAdapter,
-                deps: [MAT_DATE_LOCALE],
-            },
-            { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$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,
-            args: [{ selector: 'rolatech-property-viewing-request', imports: [
-                        CommonModule,
-                        ContainerComponent,
-                        MatFormFieldModule,
-                        FormsModule,
-                        MatInputModule,
-                        TextFieldModule,
-                        MatButtonModule,
-                        ThumbnailComponent,
-                        MatSelectModule,
-                        MatDatepickerModule,
-                        MatRadioModule,
-                        PropertyViewingTimeComponent,
-                        AvailableDatePipe,
-                        PricePipe,
-                    ], providers: [
-                        {
-                            provide: DateAdapter,
-                            useClass: MomentDateAdapter,
-                            deps: [MAT_DATE_LOCALE],
-                        },
-                        { 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$6 = {
-    parse: {
-        dateInput: 'YYYY-MM-DD',
-    },
-    display: {
-        dateInput: 'YYYY-MM-DD',
-        monthYearLabel: 'MMM YYYY',
-        dateA11yLabel: 'YYYY-MM-DD',
-        monthYearA11yLabel: 'MMMM YYYY',
-    },
-};
-class PropertyOfferComponent extends BaseComponent {
-    authService = inject(AuthService);
-    authUserService = inject(AuthUserService);
-    propertyService = inject(PropertyService);
-    propertyOfferService = inject(PropertyOfferService);
-    offer = {
-        firstName: '',
-        lastName: '',
-        phone: '',
-        email: '',
-        applicantType: '',
-        residencyStatus: '',
-        employmentStatus: '',
-        adverseCreditStatus: '',
-        startDate: '',
-        notes: '',
-        amount: 0,
-    };
-    get formattedAmount() {
-        return this.offer.amount.toFixed(2); // equivalent to | number:'1.2-2'
-    } // applicantTypes = PropertyApplicantType;
-    applicantTypes = Object.keys(PropertyApplicantType); // ['INDIVIDUAL', 'CORPORATE', ...]
-    PropertyApplicantType = PropertyApplicantType;
-    residencyStatus = ResidencyStatus;
-    employmentStatus = EmploymentStatus;
-    adverseCreditStatus = AdverseCreditStatus;
-    selectedCountry;
-    property = signal(null, ...(ngDevMode ? [{ debugName: "property" }] : []));
-    firstImageUrl = computed(() => {
-        const p = this.property();
-        return p?.media?.[0]?.url || '';
-    }, ...(ngDevMode ? [{ debugName: "firstImageUrl" }] : []));
-    minDate = new Date();
-    sending = false;
-    constructor() {
-        super();
-        effect(() => {
-            const p = this.property();
-            if (p) {
-                this.titleService.setTitle(p.title);
-            }
-        });
-    }
+    displayPrice = computed(() => {
+        return this.property ? this.property.price.toFixed(2) : 0;
+    }, ...(ngDevMode ? [{ debugName: "displayPrice" }] : []));
     ngOnInit() {
         this.getProperty();
-    }
-    onAmountChange(event) {
-        const inputValue = event.target.value;
-        const regex = /^\d*\.?\d{0,2}$/;
-        if (regex.test(inputValue)) {
-            this.offer.amount = inputValue;
-        }
+        // this.viewing['country'] = this.countries[0];
     }
     getProperty() {
         this.propertyService.get(this.id).subscribe({
             next: (res) => {
-                this.property.set(res.data);
-                // this.titleService.setTitle(`${this.property.title}`);
+                this.property = res.data;
+                this.titleService.setTitle(`${this.property.title}`);
             },
         });
     }
-    onCategorySelect(event) {
-        this.offer['category'] = event.value;
+    onCountrySelect(event) {
+        this.viewing['country'] = event.value;
+    }
+    onViewerSelectionChange(event) {
+        this.selectedViewerCategory = event.value;
     }
-    onResidencyStatusSelect(event) { }
     sendRequest() {
-        this.sending = true;
-        this.propertyOfferService.makeOffer(this.id, this.offer).subscribe({
+        this.propertyService.requestViewing(this.id, this.viewing).subscribe({
             next: (res) => {
-                this.sending = false;
-                this.snackBarService.open('Sent successfully');
-                this.router.navigate([`/properties/offers/${res.data.id}`]);
+                this.snackBarService.open('Request viewing successfully');
+                this.router.navigate([`/properties/viewings/${res.data.id}`]);
             },
             error: (error) => {
-                this.sending = false;
                 this.snackBarService.open(error.message);
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyOfferComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: PropertyOfferComponent, isStandalone: true, selector: "rolatech-property-offer", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyViewingRequestComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: PropertyViewingRequestComponent, isStandalone: true, selector: "rolatech-property-viewing-request", providers: [
             {
                 provide: DateAdapter,
                 useClass: MomentDateAdapter,
                 deps: [MAT_DATE_LOCALE],
             },
             { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$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" }] });
+        ], 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: PropertyOfferComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyViewingRequestComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-property-offer', imports: [
+            args: [{ selector: 'rolatech-property-viewing-request', imports: [
                         CommonModule,
                         ContainerComponent,
                         MatFormFieldModule,
@@ -2580,9 +2731,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         MatButtonModule,
                         ThumbnailComponent,
                         MatSelectModule,
-                        KeyValuePipe,
                         MatDatepickerModule,
-                        MatProgressSpinner,
+                        MatRadioModule,
+                        PropertyViewingTimeComponent,
                         AvailableDatePipe,
                         PricePipe,
                     ], providers: [
@@ -2592,8 +2743,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                             deps: [MAT_DATE_LOCALE],
                         },
                         { 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: () => [] });
+                    ], 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"] }]
+        }] });
 
 class PropertyOfferIndexComponent extends BaseComponent {
     propertyService = inject(PropertyService);
@@ -2608,9 +2759,9 @@ class PropertyOfferIndexComponent extends BaseComponent {
             icon: 'dashboard',
         },
         {
-            name: 'Created',
+            name: 'Submitted',
             icon: 'category',
-            status: 'created',
+            status: 'submitted',
         },
         {
             name: 'Accepted',
@@ -2744,231 +2895,99 @@ class PropertyViewingIndexComponent extends BaseComponent {
         {
             name: 'Completed',
             icon: 'category',
-            status: 'completed',
-        },
-        {
-            name: 'Cancelled',
-            icon: 'category',
-            status: 'cancelled',
-        },
-    ];
-    loading = false;
-    viewings = signal([], ...(ngDevMode ? [{ debugName: "viewings" }] : []));
-    meta;
-    pageEvent;
-    length = 100;
-    pageSize = 15;
-    pageSizeOptions = [5, 10, 25, 100];
-    pageIndex = signal(0, ...(ngDevMode ? [{ debugName: "pageIndex" }] : []));
-    ngOnInit() {
-        const sub = this.route.queryParamMap
-            .pipe(map((p) => {
-            const page = p.get('page') ? Number(p.get('page')) : 1;
-            this.pageIndex.set(Math.max(page - 1, 0));
-            const status = p.get('status') || undefined;
-            let filter = '';
-            if (status) {
-                this.select = this.links.findIndex((item) => item.status === status);
-                filter = `status:${status?.toUpperCase()}`;
-            }
-            return {
-                page,
-                filter,
-                limit: p.get('limit') ? Number(p.get('limit')) : 15,
-                sort: p.get('sort') || undefined,
-            };
-        }), 
-        // Cheap deep compare via JSON to avoid spam calls when nothing changed
-        map((o) => JSON.stringify(o)), distinctUntilChanged(), map((s) => JSON.parse(s)), switchMap((params) => {
-            this.loading = true;
-            params['sort'] = 'updatedAt desc';
-            return this.propertyService.findViewingsByUser(params).pipe(finalize(() => (this.loading = false)));
-        }))
-            .subscribe({
-            next: (res) => {
-                this.viewings.set(res.data);
-                this.meta = res.meta;
-                this.length = res.meta.pagination.count;
-                this.loading = false;
-            },
-            error: () => {
-                this.viewings.set([]);
-                this.length = 0;
-                this.loading = false;
-            },
-        });
-        // // auto-unsubscribe on destroy
-        this.destroyRef.onDestroy(() => sub.unsubscribe());
-    }
-    statusCompareFn(t1, t2) {
-        return t1 === t2;
-    }
-    onPage(e) {
-        this.router.navigate([], {
-            queryParams: { page: e.pageIndex + 1, limit: e.pageSize },
-            queryParamsHandling: 'merge',
-            replaceUrl: true, // optional: avoid stacking history on every page click
-        });
-    }
-    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$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,
-            args: [{ selector: 'rolatech-property-viewing-index', imports: [
-                        CommonModule,
-                        ContainerComponent,
-                        RouterModule,
-                        TabsComponent,
-                        TabComponent,
-                        ToolbarComponent,
-                        ListComponent,
-                        EmptyComponent,
-                        MatButtonModule,
-                        MatIconModule,
-                        FormsModule,
-                        MatFormFieldModule,
-                        MatDatepickerModule,
-                        MatOptionModule,
-                        MatInputModule,
-                        MatSelectModule,
-                        MatButtonModule,
-                        PropertyViewingItemComponent,
-                        MatPaginatorModule,
-                    ], 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" }]
-        }] });
-
-class OfferDetailContext {
-    api = inject(PropertyOfferService);
-    // input
-    offerId = signal(null, ...(ngDevMode ? [{ debugName: "offerId" }] : []));
-    // state (single source of truth)
-    offer = signal(null, ...(ngDevMode ? [{ debugName: "offer" }] : []));
-    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
-    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
-    constructor() {
-        effect(() => {
-            const id = this.offerId();
-            if (!id)
-                return;
-            this.fetchOffer(id);
-        });
-    }
-    fetchOffer(id) {
-        this.loading.set(true);
-        this.error.set(null);
-        this.api.getOffer(id).subscribe({
-            next: (res) => {
-                // adapt if your API shape is { data: ... }
-                this.offer.set(res.data ?? res);
-            },
-            error: (err) => {
-                this.error.set('Failed to load offer');
-                console.error(err);
-            },
-            complete: () => {
-                this.loading.set(false);
-            },
-        });
-    }
-    init(id) {
-        this.offerId.set(id);
-    }
-    isRental = computed(() => this.offer()?.type === 'RENTAL', ...(ngDevMode ? [{ debugName: "isRental" }] : []));
-    isSale = computed(() => this.offer()?.type === 'SALE', ...(ngDevMode ? [{ debugName: "isSale" }] : []));
-    invoiceOptionLabel = {
-        COMBINED: 'Combined',
-        SEPARATE: 'Separate',
-    };
-    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(', ');
-    }
-    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}` : '—';
-    }
-    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 === '');
-    }
-    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;
-    }
-    isIndividual(t) {
-        return t.applicantType === 'INDIVIDUAL';
+            status: 'completed',
+        },
+        {
+            name: 'Cancelled',
+            icon: 'category',
+            status: 'cancelled',
+        },
+    ];
+    loading = false;
+    viewings = signal([], ...(ngDevMode ? [{ debugName: "viewings" }] : []));
+    meta;
+    pageEvent;
+    length = 100;
+    pageSize = 15;
+    pageSizeOptions = [5, 10, 25, 100];
+    pageIndex = signal(0, ...(ngDevMode ? [{ debugName: "pageIndex" }] : []));
+    ngOnInit() {
+        const sub = this.route.queryParamMap
+            .pipe(map((p) => {
+            const page = p.get('page') ? Number(p.get('page')) : 1;
+            this.pageIndex.set(Math.max(page - 1, 0));
+            const status = p.get('status') || undefined;
+            let filter = '';
+            if (status) {
+                this.select = this.links.findIndex((item) => item.status === status);
+                filter = `status:${status?.toUpperCase()}`;
+            }
+            return {
+                page,
+                filter,
+                limit: p.get('limit') ? Number(p.get('limit')) : 15,
+                sort: p.get('sort') || undefined,
+            };
+        }), 
+        // Cheap deep compare via JSON to avoid spam calls when nothing changed
+        map((o) => JSON.stringify(o)), distinctUntilChanged(), map((s) => JSON.parse(s)), switchMap((params) => {
+            this.loading = true;
+            params['sort'] = 'updatedAt desc';
+            return this.propertyService.findViewingsByUser(params).pipe(finalize(() => (this.loading = false)));
+        }))
+            .subscribe({
+            next: (res) => {
+                this.viewings.set(res.data);
+                this.meta = res.meta;
+                this.length = res.meta.pagination.count;
+                this.loading = false;
+            },
+            error: () => {
+                this.viewings.set([]);
+                this.length = 0;
+                this.loading = false;
+            },
+        });
+        // // auto-unsubscribe on destroy
+        this.destroyRef.onDestroy(() => sub.unsubscribe());
     }
-    isCorporate(t) {
-        return t.applicantType === 'CORPORATE';
+    statusCompareFn(t1, t2) {
+        return t1 === t2;
     }
-    isStudent(t) {
-        return t.applicantType === 'STUDENT';
+    onPage(e) {
+        this.router.navigate([], {
+            queryParams: { page: e.pageIndex + 1, limit: e.pageSize },
+            queryParamsHandling: 'merge',
+            replaceUrl: true, // optional: avoid stacking history on every page click
+        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OfferDetailContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OfferDetailContext });
+    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$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: OfferDetailContext, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyViewingIndexComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-viewing-index', imports: [
+                        CommonModule,
+                        ContainerComponent,
+                        RouterModule,
+                        TabsComponent,
+                        TabComponent,
+                        ToolbarComponent,
+                        ListComponent,
+                        EmptyComponent,
+                        MatButtonModule,
+                        MatIconModule,
+                        FormsModule,
+                        MatFormFieldModule,
+                        MatDatepickerModule,
+                        MatOptionModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatButtonModule,
+                        PropertyViewingItemComponent,
+                        MatPaginatorModule,
+                    ], 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" }]
+        }] });
 
 class OfferHeaderCard {
     ctx = inject(OfferDetailContext);
@@ -3024,147 +3043,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             args: [{ selector: 'rolatech-offer-header-card', imports: [NgClass], template: "@if (ctx.offer(); as o) {\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: {{ ctx.asText(o.userId) }} </span>\n      <span class=\"px-2 py-1 rounded-full border bg-[--rt-raised-background]\"> agentId: {{ ctx.asText(o.agentId) }} </span>\n      <span class=\"px-2 py-1 rounded-full border bg-[--rt-raised-background]\">\n        invoice: {{ ctx.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" }]
         }] });
 
-class OfferItemCard {
-    ctx = inject(OfferDetailContext);
-    firstMediaUrl(o) {
-        const m = o.item?.media?.[0];
-        return m?.url ?? null;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OfferItemCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: OfferItemCard, isStandalone: true, selector: "rolatech-offer-item-card", ngImport: i0, template: "@if (ctx.offer(); as o) {\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\">Property item</div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">property snapshot</div>\n    </div>\n    <span class=\"text-xs px-2 py-1 rounded-full border bg-[--rt-base-background]\"> propertyId: {{ o.item.propertyId }} </span>\n  </div>\n\n  <div class=\"p-4 pt-0 space-y-4\">\n    <div class=\"flex flex-col lg:flex-row gap-4\">\n      <img\n        class=\"w-full lg:w-72 h-44 rounded-xl object-cover bg-gray-100\"\n        [src]=\"firstMediaUrl(o) ?? '/assets/placeholder.jpg'\"\n        [alt]=\"o.item.title\"\n      />\n\n      <div class=\"flex-1 space-y-2\">\n        <div class=\"text-base font-semibold\">{{ 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\">{{ o.item.amount | price }}</div>\n          </div>\n          <div>\n            <div class=\"text-xs text-[--rt-text-secondary]\">Bedrooms</div>\n            <div class=\"font-medium\">{{ o.item.bedrooms }}</div>\n          </div>\n          <div>\n            <div class=\"text-xs text-[--rt-text-secondary]\">Bathrooms</div>\n            <div class=\"font-medium\">{{ o.item.bathrooms }}</div>\n          </div>\n          <div>\n            <div class=\"text-xs text-[--rt-text-secondary]\">Receptions</div>\n            <div class=\"font-medium\">{{ o.item.receptions }}</div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n}\n", styles: [""], dependencies: [{ kind: "pipe", type: PricePipe, name: "price" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OfferItemCard, decorators: [{
-            type: Component,
-            args: [{ selector: 'rolatech-offer-item-card', imports: [PricePipe], template: "@if (ctx.offer(); as o) {\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\">Property item</div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">property snapshot</div>\n    </div>\n    <span class=\"text-xs px-2 py-1 rounded-full border bg-[--rt-base-background]\"> propertyId: {{ o.item.propertyId }} </span>\n  </div>\n\n  <div class=\"p-4 pt-0 space-y-4\">\n    <div class=\"flex flex-col lg:flex-row gap-4\">\n      <img\n        class=\"w-full lg:w-72 h-44 rounded-xl object-cover bg-gray-100\"\n        [src]=\"firstMediaUrl(o) ?? '/assets/placeholder.jpg'\"\n        [alt]=\"o.item.title\"\n      />\n\n      <div class=\"flex-1 space-y-2\">\n        <div class=\"text-base font-semibold\">{{ 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\">{{ o.item.amount | price }}</div>\n          </div>\n          <div>\n            <div class=\"text-xs text-[--rt-text-secondary]\">Bedrooms</div>\n            <div class=\"font-medium\">{{ o.item.bedrooms }}</div>\n          </div>\n          <div>\n            <div class=\"text-xs text-[--rt-text-secondary]\">Bathrooms</div>\n            <div class=\"font-medium\">{{ o.item.bathrooms }}</div>\n          </div>\n          <div>\n            <div class=\"text-xs text-[--rt-text-secondary]\">Receptions</div>\n            <div class=\"font-medium\">{{ o.item.receptions }}</div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n}\n" }]
-        }] });
-
-class OfferRentalTermsCard {
-    ctx = inject(OfferDetailContext);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OfferRentalTermsCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: OfferRentalTermsCard, isStandalone: true, selector: "rolatech-offer-rental-terms-card", ngImport: i0, template: "@if (ctx.offer(); as o) {\n<section class=\"rounded-2xl border bg-[--rt-raised-background] p-4 space-y-3\">\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\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\">{{ rt.amount ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Move-in date</div>\n      <div class=\"font-medium\">{{ rt.moveInDate ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Payment frequency</div>\n      <div class=\"font-medium\">{{ rt.paymentFrequency ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Tenancy length</div>\n      <div class=\"font-medium\">{{ rt.tenancyLengthMonths ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Break clause</div>\n      <div class=\"font-medium\">{{ rt.breakClauseMonths ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Pets</div>\n      <div class=\"font-medium\">{{ rt.pets.length > 0 ? rt.pets.join(', ') : '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Smoker</div>\n      <div class=\"font-medium\">{{ rt.smoker === null ? '\u2014' : (rt.smoker ? 'Yes' : 'No') }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Furniture</div>\n      <div class=\"font-medium\">{{ rt.furnitureRequirement ?? '\u2014' }}</div>\n    </div>\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\">{{ rt.additionalRequests ?? '\u2014' }}</div>\n    </div>\n  </div>\n  }\n</section>\n}\n", styles: [""], encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OfferRentalTermsCard, decorators: [{
-            type: Component,
-            args: [{ selector: 'rolatech-offer-rental-terms-card', imports: [], encapsulation: ViewEncapsulation.None, template: "@if (ctx.offer(); as o) {\n<section class=\"rounded-2xl border bg-[--rt-raised-background] p-4 space-y-3\">\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\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\">{{ rt.amount ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Move-in date</div>\n      <div class=\"font-medium\">{{ rt.moveInDate ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Payment frequency</div>\n      <div class=\"font-medium\">{{ rt.paymentFrequency ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Tenancy length</div>\n      <div class=\"font-medium\">{{ rt.tenancyLengthMonths ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Break clause</div>\n      <div class=\"font-medium\">{{ rt.breakClauseMonths ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Pets</div>\n      <div class=\"font-medium\">{{ rt.pets.length > 0 ? rt.pets.join(', ') : '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Smoker</div>\n      <div class=\"font-medium\">{{ rt.smoker === null ? '\u2014' : (rt.smoker ? 'Yes' : 'No') }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Furniture</div>\n      <div class=\"font-medium\">{{ rt.furnitureRequirement ?? '\u2014' }}</div>\n    </div>\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\">{{ rt.additionalRequests ?? '\u2014' }}</div>\n    </div>\n  </div>\n  }\n</section>\n}\n" }]
-        }] });
-
 class OfferSaleDetailsCard {
     ctx = inject(OfferDetailContext);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OfferSaleDetailsCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: OfferSaleDetailsCard, isStandalone: true, selector: "rolatech-offer-sale-details-card", ngImport: i0, template: "@if (ctx.offer(); as o) {\n<section class=\"rounded-2xl border bg-[--rt-raised-background] p-4 space-y-3\">\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\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\">{{ s.amount ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Payment method</div>\n      <div class=\"font-medium\">{{ s.paymentMethod ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Buyer name</div>\n      <div class=\"font-medium\">{{ s.buyerName ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Phone</div>\n      <div class=\"font-medium\">{{ s.phone ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Email</div>\n      <div class=\"font-medium\">{{ s.email ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Proposed exchange date</div>\n      <div class=\"font-medium\">{{ s.proposedExchangeDate ?? '\u2014' }}</div>\n    </div>\n    <div class=\"sm:col-span-2\">\n      <div class=\"text-xs text-[--rt-text-secondary]\">Solicitor company</div>\n      <div class=\"font-medium\">{{ s.solicitorCompanyName ?? '\u2014' }}</div>\n    </div>\n  </div>\n  }\n</section>\n}\n", styles: [""] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: OfferSaleDetailsCard, isStandalone: true, selector: "rolatech-offer-sale-details-card", host: { classAttribute: "block" }, ngImport: i0, template: "@if (ctx.offer(); as o) {\n<section class=\"rounded-2xl border border-[--rt-outline] p-4 space-y-3\">\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\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\">{{ s.amount ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Payment method</div>\n      <div class=\"font-medium\">{{ s.paymentMethod ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Buyer name</div>\n      <div class=\"font-medium\">{{ s.buyerName ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Phone</div>\n      <div class=\"font-medium\">{{ s.phone ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Email</div>\n      <div class=\"font-medium\">{{ s.email ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Proposed exchange date</div>\n      <div class=\"font-medium\">{{ s.proposedExchangeDate ?? '\u2014' }}</div>\n    </div>\n    <div class=\"sm:col-span-2\">\n      <div class=\"text-xs text-[--rt-text-secondary]\">Solicitor company</div>\n      <div class=\"font-medium\">{{ s.solicitorCompanyName ?? '\u2014' }}</div>\n    </div>\n  </div>\n  }\n</section>\n}\n", styles: [""] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OfferSaleDetailsCard, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-offer-sale-details-card', imports: [], template: "@if (ctx.offer(); as o) {\n<section class=\"rounded-2xl border bg-[--rt-raised-background] p-4 space-y-3\">\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\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\">{{ s.amount ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Payment method</div>\n      <div class=\"font-medium\">{{ s.paymentMethod ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Buyer name</div>\n      <div class=\"font-medium\">{{ s.buyerName ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Phone</div>\n      <div class=\"font-medium\">{{ s.phone ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Email</div>\n      <div class=\"font-medium\">{{ s.email ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Proposed exchange date</div>\n      <div class=\"font-medium\">{{ s.proposedExchangeDate ?? '\u2014' }}</div>\n    </div>\n    <div class=\"sm:col-span-2\">\n      <div class=\"text-xs text-[--rt-text-secondary]\">Solicitor company</div>\n      <div class=\"font-medium\">{{ s.solicitorCompanyName ?? '\u2014' }}</div>\n    </div>\n  </div>\n  }\n</section>\n}\n" }]
-        }] });
-
-class OfferTenantExpanded {
-    ctx = inject(OfferDetailContext);
-    tenant = input.required(...(ngDevMode ? [{ debugName: "tenant" }] : []));
-    formatAddress(a) {
-        const parts = [a?.line1, a?.line2, a?.city, a?.postcode, a?.country].filter((v) => !!v && v.trim() !== '');
-        return parts.length ? parts.join(', ') : '—';
-    }
-    genderLabel = {
-        MALE: 'Male',
-        FEMALE: 'Female',
-        OTHER: 'Other',
-        PREFER_NOT_TO_SAY: 'Prefer not to say',
-    };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OfferTenantExpanded, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: OfferTenantExpanded, isStandalone: true, selector: "rolatech-offer-tenant-expanded", inputs: { tenant: { classPropertyName: "tenant", publicName: "tenant", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<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]\">Age</div>\n      <div class=\"font-medium\">{{ ctx.ageFromDob(tenant().dob) }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Gender</div>\n      <div class=\"font-medium\">@if (tenant().gender) { {{ genderLabel[tenant().gender!] }} } @else { \u2014 }</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Applicant type</div>\n      <div class=\"font-medium\">{{ tenant().applicantType ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Nationality</div>\n      <div class=\"font-medium\">{{ tenant().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\">{{ formatAddress(tenant().address) }}</div>\n    </div>\n  </div>\n\n  @switch (tenant().applicantType) { @case ('INDIVIDUAL') {\n  <div class=\"rounded-xl border p-3 space-y-2\">\n    <div class=\"text-xs font-semibold\">Individual</div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Employment</div>\n      <div class=\"font-medium\">{{ tenant().employmentStatus ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Company</div>\n      <div class=\"font-medium\">{{ tenant().companyName ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Job title</div>\n      <div class=\"font-medium\">{{ tenant().jobTitle ?? '\u2014' }}</div>\n    </div>\n  </div>\n  } @case ('CORPORATE') {\n  <div class=\"rounded-xl border p-3 space-y-2\">\n    <div class=\"text-xs font-semibold\">Corporate</div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Company</div>\n      <div class=\"font-medium\">{{ tenant().corporateCompanyName ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Company number</div>\n      <div class=\"font-medium\">{{ tenant().corporateCompanyNumber ?? '\u2014' }}</div>\n    </div>\n  </div>\n  } @case ('STUDENT') {\n  <div class=\"rounded-xl border p-3 space-y-2\">\n    <div class=\"text-xs font-semibold\">Student</div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">University</div>\n      <div class=\"font-medium\">{{ tenant().universityName ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Course</div>\n      <div class=\"font-medium\">{{ tenant().courseTitle ?? '\u2014' }}</div>\n    </div>\n  </div>\n  } }\n</div>\n", styles: [""] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OfferTenantExpanded, decorators: [{
-            type: Component,
-            args: [{ selector: 'rolatech-offer-tenant-expanded', imports: [], template: "<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]\">Age</div>\n      <div class=\"font-medium\">{{ ctx.ageFromDob(tenant().dob) }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Gender</div>\n      <div class=\"font-medium\">@if (tenant().gender) { {{ genderLabel[tenant().gender!] }} } @else { \u2014 }</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Applicant type</div>\n      <div class=\"font-medium\">{{ tenant().applicantType ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Nationality</div>\n      <div class=\"font-medium\">{{ tenant().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\">{{ formatAddress(tenant().address) }}</div>\n    </div>\n  </div>\n\n  @switch (tenant().applicantType) { @case ('INDIVIDUAL') {\n  <div class=\"rounded-xl border p-3 space-y-2\">\n    <div class=\"text-xs font-semibold\">Individual</div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Employment</div>\n      <div class=\"font-medium\">{{ tenant().employmentStatus ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Company</div>\n      <div class=\"font-medium\">{{ tenant().companyName ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Job title</div>\n      <div class=\"font-medium\">{{ tenant().jobTitle ?? '\u2014' }}</div>\n    </div>\n  </div>\n  } @case ('CORPORATE') {\n  <div class=\"rounded-xl border p-3 space-y-2\">\n    <div class=\"text-xs font-semibold\">Corporate</div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Company</div>\n      <div class=\"font-medium\">{{ tenant().corporateCompanyName ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Company number</div>\n      <div class=\"font-medium\">{{ tenant().corporateCompanyNumber ?? '\u2014' }}</div>\n    </div>\n  </div>\n  } @case ('STUDENT') {\n  <div class=\"rounded-xl border p-3 space-y-2\">\n    <div class=\"text-xs font-semibold\">Student</div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">University</div>\n      <div class=\"font-medium\">{{ tenant().universityName ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Course</div>\n      <div class=\"font-medium\">{{ tenant().courseTitle ?? '\u2014' }}</div>\n    </div>\n  </div>\n  } }\n</div>\n" }]
-        }], propDecorators: { tenant: [{ type: i0.Input, args: [{ isSignal: true, alias: "tenant", required: true }] }] } });
-
-class OfferTenantCard {
-    // ---- signal inputs
-    index = input.required(...(ngDevMode ? [{ debugName: "index" }] : []));
-    expanded = input.required(...(ngDevMode ? [{ debugName: "expanded" }] : []));
-    tenant = input.required(...(ngDevMode ? [{ debugName: "tenant" }] : []));
-    // ---- 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',
-    };
-    // ---- callback input instead of Output
-    onToggleInput = input.required(...(ngDevMode ? [{ debugName: "onToggleInput" }] : []));
-    onToggle() {
-        this.onToggleInput()(this.index());
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OfferTenantCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: OfferTenantCard, isStandalone: true, selector: "rolatech-offer-tenant-card", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: true, transformFunction: null }, tenant: { classPropertyName: "tenant", publicName: "tenant", isSignal: true, isRequired: true, transformFunction: null }, onToggleInput: { classPropertyName: "onToggleInput", publicName: "onToggleInput", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"rounded-xl border bg-[--rt-base-background] overflow-hidden\">\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)=\"onToggle()\"\n  >\n    <div class=\"min-w-0 space-y-1\">\n      <div class=\"text-sm font-semibold truncate\">{{ tenant().fullName ?? '--' }}</div>\n      <div class=\"text-xs text-[--rt-text-secondary] truncate\">{{ tenant().email ?? '--' }} \u00B7 {{ tenant().phone ?? '--' }}</div>\n      <div class=\"flex flex-wrap gap-2 pt-1 text-xs\">\n        <span class=\"px-2 py-1 rounded-full border\">\n          @if (tenant().applicantType) { {{ applicantTypeLabel[tenant().applicantType!] }} } @else { Applicant: -- }\n        </span>\n\n        <span class=\"px-2 py-1 rounded-full border\">\n          @if (tenant().employmentStatus) { {{ employmentStatusLabel[tenant().employmentStatus!] }} } @else { Employment: --}\n        </span>\n\n        <span class=\"px-2 py-1 rounded-full border\">\n          @if (tenant().adverseCreditStatus) { {{ adverseCreditStatusLabel[tenant().adverseCreditStatus!] }} } @else { Credit:\n          -- }\n        </span>\n\n        <span class=\"px-2 py-1 rounded-full border\">\n          @if (tenant().visaStatus) { {{ visaStatusLabel[tenant().visaStatus!] }} } @else { Visa: \u2014 }\n        </span>\n      </div>\n    </div>\n\n    <div class=\"flex items-center gap-2 shrink-0\">\n      <span class=\"text-xs px-2 py-1 rounded-full border\"> {{ expanded() ? 'Expanded' : 'Collapsed' }} </span>\n      <svg class=\"w-4 h-4 transition-transform\" [class.rotate-180]=\"expanded()\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\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  @if (expanded()) {\n  <rolatech-offer-tenant-expanded [tenant]=\"tenant()\" />\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: OfferTenantExpanded, selector: "rolatech-offer-tenant-expanded", inputs: ["tenant"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OfferTenantCard, decorators: [{
-            type: Component,
-            args: [{ selector: 'rolatech-offer-tenant-card', imports: [OfferTenantExpanded], template: "<div class=\"rounded-xl border bg-[--rt-base-background] overflow-hidden\">\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)=\"onToggle()\"\n  >\n    <div class=\"min-w-0 space-y-1\">\n      <div class=\"text-sm font-semibold truncate\">{{ tenant().fullName ?? '--' }}</div>\n      <div class=\"text-xs text-[--rt-text-secondary] truncate\">{{ tenant().email ?? '--' }} \u00B7 {{ tenant().phone ?? '--' }}</div>\n      <div class=\"flex flex-wrap gap-2 pt-1 text-xs\">\n        <span class=\"px-2 py-1 rounded-full border\">\n          @if (tenant().applicantType) { {{ applicantTypeLabel[tenant().applicantType!] }} } @else { Applicant: -- }\n        </span>\n\n        <span class=\"px-2 py-1 rounded-full border\">\n          @if (tenant().employmentStatus) { {{ employmentStatusLabel[tenant().employmentStatus!] }} } @else { Employment: --}\n        </span>\n\n        <span class=\"px-2 py-1 rounded-full border\">\n          @if (tenant().adverseCreditStatus) { {{ adverseCreditStatusLabel[tenant().adverseCreditStatus!] }} } @else { Credit:\n          -- }\n        </span>\n\n        <span class=\"px-2 py-1 rounded-full border\">\n          @if (tenant().visaStatus) { {{ visaStatusLabel[tenant().visaStatus!] }} } @else { Visa: \u2014 }\n        </span>\n      </div>\n    </div>\n\n    <div class=\"flex items-center gap-2 shrink-0\">\n      <span class=\"text-xs px-2 py-1 rounded-full border\"> {{ expanded() ? 'Expanded' : 'Collapsed' }} </span>\n      <svg class=\"w-4 h-4 transition-transform\" [class.rotate-180]=\"expanded()\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\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  @if (expanded()) {\n  <rolatech-offer-tenant-expanded [tenant]=\"tenant()\" />\n  }\n</div>\n" }]
-        }], propDecorators: { index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: true }] }], tenant: [{ type: i0.Input, args: [{ isSignal: true, alias: "tenant", required: true }] }], onToggleInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "onToggleInput", required: true }] }] } });
-
-class OfferTenantsAccordion {
-    ctx = inject(OfferDetailContext);
-    // tenants snapshot from ctx
-    tenants = computed(() => this.ctx.offer()?.tenants ?? [], ...(ngDevMode ? [{ debugName: "tenants" }] : []));
-    // index-based expanded state (per your requirement)
-    expandedIndexes = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedIndexes" }] : []));
-    isExpanded(i) {
-        return this.expandedIndexes().has(i);
-    }
-    toggle = (index) => {
-        this.expandedIndexes.update((prev) => {
-            const next = new Set(prev);
-            if (next.has(index))
-                next.delete(index);
-            else
-                next.add(index);
-            return next;
-        });
-    };
-    expandAll(count) {
-        const next = new Set();
-        for (let i = 0; i < count; i++)
-            next.add(i);
-        this.expandedIndexes.set(next);
-    }
-    collapseAll() {
-        this.expandedIndexes.set(new Set());
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OfferTenantsAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: OfferTenantsAccordion, isStandalone: true, selector: "rolatech-offer-tenants-accordion", ngImport: i0, template: "@if (tenants(); as ts) {\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]\"\n        (click)=\"expandAll(ts.length)\"\n        [disabled]=\"ts.length === 0\"\n      >\n        Expand all\n      </button>\n      <button\n        type=\"button\"\n        class=\"text-xs px-3 py-1 rounded-full border bg-[--rt-base-background]\"\n        (click)=\"collapseAll()\"\n        [disabled]=\"expandedIndexes().size === 0\"\n      >\n        Collapse all\n      </button>\n      <span class=\"text-xs px-2 py-1 rounded-full border bg-[--rt-base-background]\">count: {{ ts.length }}</span>\n    </div>\n  </div>\n\n  @if (ts.length > 0) {\n  <div class=\"space-y-3\">\n    @for (t of ts; track $index) {\n    <rolatech-offer-tenant-card [index]=\"$index\" [expanded]=\"isExpanded($index)\" [tenant]=\"t\" [onToggleInput]=\"toggle\" />\n    }\n  </div>\n  } @else {\n  <div class=\"text-sm text-[--rt-text-secondary]\">No tenants</div>\n  }\n</section>\n}\n", styles: [""], dependencies: [{ kind: "component", type: OfferTenantCard, selector: "rolatech-offer-tenant-card", inputs: ["index", "expanded", "tenant", "onToggleInput"] }], encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OfferTenantsAccordion, decorators: [{
-            type: Component,
-            args: [{ selector: 'rolatech-offer-tenants-accordion', imports: [OfferTenantCard], encapsulation: ViewEncapsulation.None, template: "@if (tenants(); as ts) {\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]\"\n        (click)=\"expandAll(ts.length)\"\n        [disabled]=\"ts.length === 0\"\n      >\n        Expand all\n      </button>\n      <button\n        type=\"button\"\n        class=\"text-xs px-3 py-1 rounded-full border bg-[--rt-base-background]\"\n        (click)=\"collapseAll()\"\n        [disabled]=\"expandedIndexes().size === 0\"\n      >\n        Collapse all\n      </button>\n      <span class=\"text-xs px-2 py-1 rounded-full border bg-[--rt-base-background]\">count: {{ ts.length }}</span>\n    </div>\n  </div>\n\n  @if (ts.length > 0) {\n  <div class=\"space-y-3\">\n    @for (t of ts; track $index) {\n    <rolatech-offer-tenant-card [index]=\"$index\" [expanded]=\"isExpanded($index)\" [tenant]=\"t\" [onToggleInput]=\"toggle\" />\n    }\n  </div>\n  } @else {\n  <div class=\"text-sm text-[--rt-text-secondary]\">No tenants</div>\n  }\n</section>\n}\n" }]
+            args: [{ selector: 'rolatech-offer-sale-details-card', imports: [], host: { class: 'block' }, template: "@if (ctx.offer(); as o) {\n<section class=\"rounded-2xl border border-[--rt-outline] p-4 space-y-3\">\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\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\">{{ s.amount ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Payment method</div>\n      <div class=\"font-medium\">{{ s.paymentMethod ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Buyer name</div>\n      <div class=\"font-medium\">{{ s.buyerName ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Phone</div>\n      <div class=\"font-medium\">{{ s.phone ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Email</div>\n      <div class=\"font-medium\">{{ s.email ?? '\u2014' }}</div>\n    </div>\n    <div>\n      <div class=\"text-xs text-[--rt-text-secondary]\">Proposed exchange date</div>\n      <div class=\"font-medium\">{{ s.proposedExchangeDate ?? '\u2014' }}</div>\n    </div>\n    <div class=\"sm:col-span-2\">\n      <div class=\"text-xs text-[--rt-text-secondary]\">Solicitor company</div>\n      <div class=\"font-medium\">{{ s.solicitorCompanyName ?? '\u2014' }}</div>\n    </div>\n  </div>\n  }\n</section>\n}\n" }]
         }] });
 
 class OfferSideSummaryCard {
@@ -3174,11 +3060,11 @@ class OfferSideSummaryCard {
         MORTGAGE: 'Mortgage',
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OfferSideSummaryCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: OfferSideSummaryCard, isStandalone: true, selector: "rolatech-offer-side-summary-card", ngImport: i0, template: "@if (ctx.offer(); as o) {\n<section class=\"rounded-2xl border bg-[--rt-raised-background] p-4 space-y-3\">\n  <div>\n    <div class=\"text-sm font-semibold\">Summary</div>\n    <div class=\"text-xs text-[--rt-text-secondary]\">Key fields</div>\n  </div>\n\n  <div class=\"grid grid-cols-1 gap-3 text-sm\">\n    <div class=\"flex items-center justify-between\">\n      <span class=\"text-[--rt-text-secondary]\">Type</span><span class=\"font-medium\">{{ o.type }}</span>\n    </div>\n    <div class=\"flex items-center justify-between\">\n      <span class=\"text-[--rt-text-secondary]\">Status</span><span class=\"font-medium\">{{ o.status }}</span>\n    </div>\n    <div class=\"flex items-center justify-between\">\n      <span class=\"text-[--rt-text-secondary]\">Invoice</span\n      ><span class=\"font-medium\">{{ ctx.invoiceOptionLabel[o.invoiceOption] }}</span>\n    </div>\n    <div class=\"flex items-center justify-between\">\n      <span class=\"text-[--rt-text-secondary]\">Tenants</span><span class=\"font-medium\">{{ o.tenants?.length ?? 0 }}</span>\n    </div>\n    <div class=\"flex items-center justify-between\">\n      <span class=\"text-[--rt-text-secondary]\">Item amount</span><span class=\"font-medium\">{{ o.item.amount | price }}</span>\n    </div>\n    @if (ctx.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\">{{ ctx.asText(o.tenants?.length ?? 0) }}</span>\n    </div>\n    }\n  </div>\n</section>\n}\n", styles: [""], dependencies: [{ kind: "pipe", type: PricePipe, name: "price" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: OfferSideSummaryCard, isStandalone: true, selector: "rolatech-offer-side-summary-card", host: { classAttribute: "block" }, ngImport: i0, template: "@if (ctx.offer(); as o) {\n<section class=\"rounded-2xl border border-[--rt-outline] p-4 space-y-3\">\n  <div>\n    <div class=\"text-sm font-semibold\">Summary</div>\n    <div class=\"text-xs text-[--rt-text-secondary]\">Key fields</div>\n  </div>\n\n  <div class=\"grid grid-cols-1 gap-3 text-sm\">\n    <div class=\"flex items-center justify-between\">\n      <span class=\"text-[--rt-text-secondary]\">Type</span><span class=\"font-medium\">{{ o.type }}</span>\n    </div>\n    <div class=\"flex items-center justify-between\">\n      <span class=\"text-[--rt-text-secondary]\">Status</span><span class=\"font-medium\">{{ o.status }}</span>\n    </div>\n    <div class=\"flex items-center justify-between\">\n      <span class=\"text-[--rt-text-secondary]\">Invoice</span\n      ><span class=\"font-medium\">{{ ctx.invoiceOptionLabel[o.invoiceOption] }}</span>\n    </div>\n    <div class=\"flex items-center justify-between\">\n      <span class=\"text-[--rt-text-secondary]\">Tenants</span><span class=\"font-medium\">{{ o.tenants?.length ?? 0 }}</span>\n    </div>\n    <div class=\"flex items-center justify-between\">\n      <span class=\"text-[--rt-text-secondary]\">Item amount</span><span class=\"font-medium\">{{ o.item.amount | price }}</span>\n    </div>\n    @if (ctx.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\">{{ ctx.asText(o.tenants?.length ?? 0) }}</span>\n    </div>\n    }\n  </div>\n</section>\n}\n", styles: [""], dependencies: [{ kind: "pipe", type: PricePipe, name: "price" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OfferSideSummaryCard, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-offer-side-summary-card', imports: [PricePipe], template: "@if (ctx.offer(); as o) {\n<section class=\"rounded-2xl border bg-[--rt-raised-background] p-4 space-y-3\">\n  <div>\n    <div class=\"text-sm font-semibold\">Summary</div>\n    <div class=\"text-xs text-[--rt-text-secondary]\">Key fields</div>\n  </div>\n\n  <div class=\"grid grid-cols-1 gap-3 text-sm\">\n    <div class=\"flex items-center justify-between\">\n      <span class=\"text-[--rt-text-secondary]\">Type</span><span class=\"font-medium\">{{ o.type }}</span>\n    </div>\n    <div class=\"flex items-center justify-between\">\n      <span class=\"text-[--rt-text-secondary]\">Status</span><span class=\"font-medium\">{{ o.status }}</span>\n    </div>\n    <div class=\"flex items-center justify-between\">\n      <span class=\"text-[--rt-text-secondary]\">Invoice</span\n      ><span class=\"font-medium\">{{ ctx.invoiceOptionLabel[o.invoiceOption] }}</span>\n    </div>\n    <div class=\"flex items-center justify-between\">\n      <span class=\"text-[--rt-text-secondary]\">Tenants</span><span class=\"font-medium\">{{ o.tenants?.length ?? 0 }}</span>\n    </div>\n    <div class=\"flex items-center justify-between\">\n      <span class=\"text-[--rt-text-secondary]\">Item amount</span><span class=\"font-medium\">{{ o.item.amount | price }}</span>\n    </div>\n    @if (ctx.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\">{{ ctx.asText(o.tenants?.length ?? 0) }}</span>\n    </div>\n    }\n  </div>\n</section>\n}\n" }]
+            args: [{ selector: 'rolatech-offer-side-summary-card', imports: [PricePipe], host: { class: 'block' }, template: "@if (ctx.offer(); as o) {\n<section class=\"rounded-2xl border border-[--rt-outline] p-4 space-y-3\">\n  <div>\n    <div class=\"text-sm font-semibold\">Summary</div>\n    <div class=\"text-xs text-[--rt-text-secondary]\">Key fields</div>\n  </div>\n\n  <div class=\"grid grid-cols-1 gap-3 text-sm\">\n    <div class=\"flex items-center justify-between\">\n      <span class=\"text-[--rt-text-secondary]\">Type</span><span class=\"font-medium\">{{ o.type }}</span>\n    </div>\n    <div class=\"flex items-center justify-between\">\n      <span class=\"text-[--rt-text-secondary]\">Status</span><span class=\"font-medium\">{{ o.status }}</span>\n    </div>\n    <div class=\"flex items-center justify-between\">\n      <span class=\"text-[--rt-text-secondary]\">Invoice</span\n      ><span class=\"font-medium\">{{ ctx.invoiceOptionLabel[o.invoiceOption] }}</span>\n    </div>\n    <div class=\"flex items-center justify-between\">\n      <span class=\"text-[--rt-text-secondary]\">Tenants</span><span class=\"font-medium\">{{ o.tenants?.length ?? 0 }}</span>\n    </div>\n    <div class=\"flex items-center justify-between\">\n      <span class=\"text-[--rt-text-secondary]\">Item amount</span><span class=\"font-medium\">{{ o.item.amount | price }}</span>\n    </div>\n    @if (ctx.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\">{{ ctx.asText(o.tenants?.length ?? 0) }}</span>\n    </div>\n    }\n  </div>\n</section>\n}\n" }]
         }] });
 
 class PropertyOfferDetailComponent extends BaseComponent {
@@ -3339,7 +3225,7 @@ class PropertyOfferDetailComponent extends BaseComponent {
         });
     }
     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", providers: [OfferDetailContext], usesInheritance: true, ngImport: i0, template: "@if (ctx.offer(); as o) {\n  <div class=\"max-w-7xl mx-auto px-4 lg:px-6 py-6 space-y-6\">\n    <rolatech-offer-header-card />\n\n    <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-6\">\n      <div class=\"lg:col-span-8 space-y-6 grid\">\n        <rolatech-offer-item-card />\n\n        @if (ctx.isRental()) {\n          <rolatech-offer-rental-terms-card />\n          <rolatech-offer-tenants-accordion />\n        }\n\n        @if (ctx.isSale()) {\n          <rolatech-offer-sale-details-card />\n        }\n      </div>\n\n      <aside class=\"lg:col-span-4 space-y-6\">\n        <rolatech-offer-side-summary-card />\n      </aside>\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-[--rolatech-raised-background] p-6\">Loading\u2026</div>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: OfferHeaderCard, selector: "rolatech-offer-header-card" }, { kind: "component", type: OfferItemCard, selector: "rolatech-offer-item-card" }, { kind: "component", type: OfferRentalTermsCard, selector: "rolatech-offer-rental-terms-card" }, { kind: "component", type: OfferSaleDetailsCard, selector: "rolatech-offer-sale-details-card" }, { kind: "component", type: OfferTenantsAccordion, selector: "rolatech-offer-tenants-accordion" }, { kind: "component", type: OfferSideSummaryCard, selector: "rolatech-offer-side-summary-card" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: PropertyOfferDetailComponent, isStandalone: true, selector: "rolatech-property-offer-detail", providers: [OfferDetailContext], usesInheritance: true, ngImport: i0, template: "@if (ctx.offer(); as o) {\n  <div class=\"max-w-7xl mx-auto px-4 lg:px-6 py-6 space-y-4\">\n    <rolatech-offer-header-card />\n\n    <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-4\">\n      <div class=\"grid grid-cols-1 lg:col-span-8 space-y-4\">\n        <rolatech-offer-item-card />\n\n        @if (ctx.isRental()) {\n          <rolatech-offer-rental-terms-card />\n          <rolatech-offer-tenants-accordion />\n        }\n\n        @if (ctx.isSale()) {\n          <rolatech-offer-sale-details-card />\n        }\n      </div>\n\n      <aside class=\"lg:col-span-4 space-y-4\">\n        <rolatech-offer-side-summary-card />\n      </aside>\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-[--rolatech-raised-background] p-6\">Loading\u2026</div>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: OfferHeaderCard, selector: "rolatech-offer-header-card" }, { kind: "component", type: OfferItemCard, selector: "rolatech-offer-item-card" }, { kind: "component", type: OfferRentalTermsCard, selector: "rolatech-offer-rental-terms-card" }, { kind: "component", type: OfferSaleDetailsCard, selector: "rolatech-offer-sale-details-card" }, { kind: "component", type: OfferTenantsAccordion, selector: "rolatech-offer-tenants-accordion" }, { kind: "component", type: OfferSideSummaryCard, selector: "rolatech-offer-side-summary-card" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyOfferDetailComponent, decorators: [{
             type: Component,
@@ -3353,7 +3239,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         OfferSaleDetailsCard,
                         OfferTenantsAccordion,
                         OfferSideSummaryCard,
-                    ], providers: [OfferDetailContext], template: "@if (ctx.offer(); as o) {\n  <div class=\"max-w-7xl mx-auto px-4 lg:px-6 py-6 space-y-6\">\n    <rolatech-offer-header-card />\n\n    <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-6\">\n      <div class=\"lg:col-span-8 space-y-6 grid\">\n        <rolatech-offer-item-card />\n\n        @if (ctx.isRental()) {\n          <rolatech-offer-rental-terms-card />\n          <rolatech-offer-tenants-accordion />\n        }\n\n        @if (ctx.isSale()) {\n          <rolatech-offer-sale-details-card />\n        }\n      </div>\n\n      <aside class=\"lg:col-span-4 space-y-6\">\n        <rolatech-offer-side-summary-card />\n      </aside>\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-[--rolatech-raised-background] p-6\">Loading\u2026</div>\n  </div>\n}\n" }]
+                    ], providers: [OfferDetailContext], template: "@if (ctx.offer(); as o) {\n  <div class=\"max-w-7xl mx-auto px-4 lg:px-6 py-6 space-y-4\">\n    <rolatech-offer-header-card />\n\n    <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-4\">\n      <div class=\"grid grid-cols-1 lg:col-span-8 space-y-4\">\n        <rolatech-offer-item-card />\n\n        @if (ctx.isRental()) {\n          <rolatech-offer-rental-terms-card />\n          <rolatech-offer-tenants-accordion />\n        }\n\n        @if (ctx.isSale()) {\n          <rolatech-offer-sale-details-card />\n        }\n      </div>\n\n      <aside class=\"lg:col-span-4 space-y-4\">\n        <rolatech-offer-side-summary-card />\n      </aside>\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-[--rolatech-raised-background] p-6\">Loading\u2026</div>\n  </div>\n}\n" }]
         }] });
 
 class PropertyViewingDetailComponent extends BaseComponent {
@@ -3557,6 +3443,7 @@ class OfferFormFacade {
     }
     async submit() {
         this.submitError.set(null);
+        console.log(this.form().value);
         // mark all touched
         this.form().markAllAsTouched();
         this.form().updateValueAndValidity();
@@ -3593,7 +3480,7 @@ class OfferFormFacade {
                 breakClauseMonths: new FormControl(null),
                 // ✅ pets as array
                 pets: this.fb.control([], { nonNullable: true }),
-                smoker: new FormControl(null),
+                smoker: this.fb.control(false, { nonNullable: true }),
                 furnitureRequirement: new FormControl(null),
                 additionalRequests: new FormControl(null),
             }),
@@ -3624,7 +3511,7 @@ class OfferFormFacade {
             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),
+                line2: this.fb.control(null, [Validators.required]),
                 city: this.fb.control(null, [Validators.required]),
                 postcode: this.fb.control(null, [Validators.required]),
                 country: this.fb.control(null, [Validators.required]),
@@ -3656,71 +3543,14 @@ class OfferFormFacade {
                     postcode: this.fb.control(null),
                     country: this.fb.control(null),
                 }),
+                type: 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),
-            }),
-        });
-    }
-    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),
+                additionalFinancialSupport: this.fb.control(null),
             }),
         });
     }
@@ -3837,10 +3667,14 @@ class OfferFormFacade {
         guarantor.get('email')?.setValidators([Validators.required, Validators.email]);
         const addr = guarantor.get('address');
         addr.get('line1')?.setValidators([Validators.required]);
+        addr.get('line2')?.setValidators([Validators.required]);
         addr.get('city')?.setValidators([Validators.required]);
         addr.get('postcode')?.setValidators([Validators.required]);
         addr.get('country')?.setValidators([Validators.required]);
+        guarantor.get('type')?.setValidators([Validators.required]);
         guarantor.get('employmentStatus')?.setValidators([Validators.required]);
+        guarantor.get('taxReturnSubmitted')?.setValidators([Validators.required]);
+        guarantor.get('additionalFinancialSupport')?.setValidators([Validators.required]);
     }
     toCreateRentalPayload() {
         const v = this.form().value;
@@ -3955,7 +3789,7 @@ class RentalOfferTermsSection {
                 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 }] });
+        ], 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 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  @if (petsControl().value.length) {\n  <p class=\"hint\">Landlord approval may still be required.</p>\n  }\n\n  <mat-slide-toggle labelPosition=\"before\" class=\"py-3\" formControlName=\"smoker\">\n    <span class=\"text-lg font-bold\">Smoker</span>\n  </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: i5.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,
@@ -3977,7 +3811,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                             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" }]
+                    ], 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 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  @if (petsControl().value.length) {\n  <p class=\"hint\">Landlord approval may still be required.</p>\n  }\n\n  <mat-slide-toggle labelPosition=\"before\" class=\"py-3\" formControlName=\"smoker\">\n    <span class=\"text-lg font-bold\">Smoker</span>\n  </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 {
@@ -4034,7 +3868,7 @@ class TenantBasicInfoSection {
                 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 }] });
+        ], 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=\"VISA_HOLDER\">Visa Holder</mat-option>\n        <mat-option value=\"WAITING_FOR_VISA\">Waiting For Visa</mat-option>\n        <mat-option value=\"NOT_YET_APPLIED_FOR_VISA\">Not Yet Applied For Visa</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=\"ACTIVE_CCJ\">Active Ccj</mat-option>\n        <mat-option value=\"SATISFIED_CCJ\">Satisfied Ccj</mat-option>\n        <mat-option value=\"DEBT_MANAGEMENT_PLAN\">Debt Management Plan</mat-option>\n        <mat-option value=\"LOW_CREDIT_SCORE\">Low Credit Score</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,
@@ -4045,7 +3879,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                             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" }]
+                    ], 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=\"VISA_HOLDER\">Visa Holder</mat-option>\n        <mat-option value=\"WAITING_FOR_VISA\">Waiting For Visa</mat-option>\n        <mat-option value=\"NOT_YET_APPLIED_FOR_VISA\">Not Yet Applied For Visa</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=\"ACTIVE_CCJ\">Active Ccj</mat-option>\n        <mat-option value=\"SATISFIED_CCJ\">Satisfied Ccj</mat-option>\n        <mat-option value=\"DEBT_MANAGEMENT_PLAN\">Debt Management Plan</mat-option>\n        <mat-option value=\"LOW_CREDIT_SCORE\">Low Credit Score</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 {
@@ -4072,13 +3906,44 @@ class EmploymentSection {
         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"] }] });
+    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: i5.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" }]
         }] });
 
+class GuarantorEmploymentSection {
+    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: GuarantorEmploymentSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: GuarantorEmploymentSection, isStandalone: true, selector: "rolatech-guarantor-employment-section", ngImport: i0, template: "<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  <mat-form-field class=\"col-span-12\">\n    <mat-label>Additional Financial Support</mat-label>\n    <textarea matInput rows=\"2\" formControlName=\"additionalFinancialSupport\"></textarea>\n    <mat-hint\n      >To support this application, please provide details such as UK property ownership, significant savings, or alternative\n      income (e.g., pension, investments).</mat-hint\n    >\n  </mat-form-field>\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: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: i5.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: GuarantorEmploymentSection, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-guarantor-employment-section', imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatSelectModule, MatSlideToggleModule], template: "<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  <mat-form-field class=\"col-span-12\">\n    <mat-label>Additional Financial Support</mat-label>\n    <textarea matInput rows=\"2\" formControlName=\"additionalFinancialSupport\"></textarea>\n    <mat-hint\n      >To support this application, please provide details such as UK property ownership, significant savings, or alternative\n      income (e.g., pension, investments).</mat-hint\n    >\n  </mat-form-field>\n  }\n</div>\n" }]
+        }] });
+
+class GuarantorCompanySection {
+    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: GuarantorCompanySection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: GuarantorCompanySection, isStandalone: true, selector: "rolatech-guarantor-company-section", ngImport: i0, template: "<div class=\"grid grid-cols-12 gap-3\" [formGroup]=\"g()\">\n  <mat-form-field class=\"col-span-12\">\n    <mat-label>Company name</mat-label>\n    <input matInput formControlName=\"companyName\" />\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: GuarantorCompanySection, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-guarantor-company-section', imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule], template: "<div class=\"grid grid-cols-12 gap-3\" [formGroup]=\"g()\">\n  <mat-form-field class=\"col-span-12\">\n    <mat-label>Company name</mat-label>\n    <input matInput formControlName=\"companyName\" />\n  </mat-form-field>\n</div>\n" }]
+        }] });
+
 const MY_FORMATS$3 = {
     parse: {
         dateInput: 'YYYY-MM-DD',
@@ -4108,15 +3973,21 @@ class GuarantorSection {
             return 'Required';
         return 'Optional';
     }
+    isIndividual() {
+        return this.guarantor().get('type')?.value === 'INDIVIDUAL';
+    }
+    isCompany() {
+        return this.guarantor().get('type')?.value === 'COMPANY';
+    }
     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: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.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 }] });
+        ], 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    </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 class=\"grid grid-cols-12\">\n      <mat-form-field class=\"col-span-12\">\n        <mat-label>Guarantor type</mat-label>\n        <mat-select formControlName=\"type\">\n          <mat-option value=\"INDIVIDUAL\">Individual</mat-option>\n          <mat-option value=\"COMPANY\">Company</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n\n    @if (isIndividual()) {\n    <rolatech-guarantor-employment-section />\n    } @if (isCompany()) {\n    <rolatech-guarantor-company-section />\n    }\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 }, { kind: "component", type: GuarantorEmploymentSection, selector: "rolatech-guarantor-employment-section" }, { kind: "component", type: GuarantorCompanySection, selector: "rolatech-guarantor-company-section" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GuarantorSection, decorators: [{
             type: Component,
@@ -4128,6 +3999,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         MatSelectModule,
                         MatDatepickerModule,
                         MatNativeDateModule,
+                        GuarantorEmploymentSection,
+                        GuarantorCompanySection,
                     ], providers: [
                         {
                             provide: DateAdapter,
@@ -4135,7 +4008,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                             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" }]
+                    ], 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    </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 class=\"grid grid-cols-12\">\n      <mat-form-field class=\"col-span-12\">\n        <mat-label>Guarantor type</mat-label>\n        <mat-select formControlName=\"type\">\n          <mat-option value=\"INDIVIDUAL\">Individual</mat-option>\n          <mat-option value=\"COMPANY\">Company</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n\n    @if (isIndividual()) {\n    <rolatech-guarantor-employment-section />\n    } @if (isCompany()) {\n    <rolatech-guarantor-company-section />\n    }\n  </div>\n</mat-expansion-panel>\n" }]
         }] });
 
 class StudentSection {
@@ -4266,11 +4139,11 @@ class TenantListSection {
         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"] }] });
+    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-2\">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-stroked-button type=\"button\" (click)=\"addTenant()\">\n    <mat-icon>add</mat-icon>\n    <span>Add tenant</span>\n  </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"] }, { kind: "component", type: 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: 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" }]
+            args: [{ selector: 'rolatech-tenant-list-section', imports: [MatButtonModule, MatExpansionModule, TenantCard, MatIcon], providers: [TenantRegistryService], template: "<div class=\"text-xl py-2\">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-stroked-button type=\"button\" (click)=\"addTenant()\">\n    <mat-icon>add</mat-icon>\n    <span>Add tenant</span>\n  </button>\n</div>\n" }]
         }], ctorParameters: () => [] });
 
 class PropertyOfferRentalForm {
@@ -4317,7 +4190,7 @@ class PropertyOfferCreate {
     facade = inject(OfferFormFacade);
     titleService = inject(TitleService);
     propertyService = inject(PropertyService);
-    offerTypeLabel = computed(() => (this.facade.offerType() === 'RENTAL' ? 'Rental offer' : 'Sale offer'), ...(ngDevMode ? [{ debugName: "offerTypeLabel" }] : []));
+    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();
@@ -4358,7 +4231,7 @@ class PropertyOfferCreate {
         // 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" }] });
+    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-4 gap-3\">\n    <div class=\"w-full md:w-3/4\">\n      <div class=\"w-full\">\n        <div class=\"text-xl font-bold mb-3\">Create {{ 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        <button class=\"w-full md:w-1/2\" mat-flat-button [disabled]=\"facade.submitting()\" (click)=\"submit()\">\n          {{facade.submitting() ? 'Submitting' : 'Submit'}}\n        </button>\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\">\n      @if (property()) {\n      <div class=\"text-xl font-bold 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,
@@ -4372,7 +4245,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         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" }]
+                    ], providers: [OfferFormFacade], template: "<rolatech-container>\n  <div class=\"flex flex-col-reverse md:flex-row w-full py-4 gap-3\">\n    <div class=\"w-full md:w-3/4\">\n      <div class=\"w-full\">\n        <div class=\"text-xl font-bold mb-3\">Create {{ 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        <button class=\"w-full md:w-1/2\" mat-flat-button [disabled]=\"facade.submitting()\" (click)=\"submit()\">\n          {{facade.submitting() ? 'Submitting' : 'Submit'}}\n        </button>\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\">\n      @if (property()) {\n      <div class=\"text-xl font-bold 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 = [
@@ -4382,7 +4255,7 @@ const propertyRoutes = [
         children: [
             {
                 path: '',
-                loadComponent: () => import('./rolatech-angular-property-property-index.component-CBm6va05.mjs').then((x) => x.PropertyIndexComponent),
+                loadComponent: () => import('./rolatech-angular-property-property-index.component-DB6TnNBc.mjs').then((x) => x.PropertyIndexComponent),
             },
         ],
     },
@@ -4416,13 +4289,9 @@ const propertyRoutes = [
         canActivate: [AuthGuard],
         component: PropertyViewingRequestComponent,
     },
-    {
-        path: ':id/offer',
-        canActivate: [AuthGuard],
-        component: PropertyOfferComponent,
-    },
     {
         path: ':id/offer/:type', // type = rental | sale
+        canActivate: [AuthGuard],
         component: PropertyOfferCreate,
     },
     {
@@ -5936,7 +5805,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$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"] }] });
+    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$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyManageHighlights, decorators: [{
             type: Component,
@@ -6297,7 +6166,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-D3kRpUQx.mjs').then((x) => x.PropertyManageViewingsIndexComponent),
+        loadComponent: () => import('./rolatech-angular-property-property-manage-viewings-index.component-CIYzCY1E.mjs').then((x) => x.PropertyManageViewingsIndexComponent),
     },
     {
         path: ':id',
@@ -7364,9 +7233,9 @@ class PropertyAgentOfferIndex extends BaseComponent {
             icon: 'dashboard',
         },
         {
-            name: 'Created',
+            name: 'Submitted',
             icon: 'category',
-            status: 'created',
+            status: 'submitted',
         },
         {
             name: 'Accepted',
@@ -7486,4 +7355,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-BRmo5aq4.mjs.map
+//# sourceMappingURL=rolatech-angular-property-rolatech-angular-property-BLynHPSt.mjs.map