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

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

@@ -1033,7 +1033,7 @@ class PropertyOfferItemComponent {
     offer = input.required(...(ngDevMode ? [{ debugName: "offer" }] : []));
     status = PropertyOfferStatus;
     total = computed(() => {
-        return this.offer().amount.toFixed(2);
+        return this.offer().price.toFixed(2);
     }, ...(ngDevMode ? [{ debugName: "total" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyOfferItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: PropertyOfferItemComponent, isStandalone: true, selector: "rolatech-property-offer-item", inputs: { offer: { classPropertyName: "offer", publicName: "offer", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col hover:bg-[--rt-raised-background] cursor-pointer p-3\">\n  <div>\n    <div class=\"flex justify-between w-full mb-2\">\n      <a class=\"flex items-center gap-3\">\n        <span>Offer ID: {{ offer().id }}</span>\n      </a>\n      <span class=\"font-medium text-sm text-[--rt-brand-color]\">{{ status[offer().status] }}</span>\n    </div>\n    @if (offer().item) {\n      <div class=\"flex flex-row py-2\">\n        @if (offer().item.media) {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            @defer {\n              <rolatech-thumbnail [src]=\"offer().item.media ? offer().item.media[0].url : ''\" size=\"medium\" mode=\"clip\">\n              </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n        } @else {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            <rolatech-image-placeholder></rolatech-image-placeholder>\n          </div>\n        }\n        <div class=\"flex w-full justify-between\">\n          <div class=\"flex justify-between w-full\">\n            <div class=\"flex flex-col\">\n              <div class=\"font-bold\">{{ offer().item.title }}</div>\n              <div class=\"inline-flex gap-1 mt-2\">\n                <div>\n                  <span class=\"mr-1\">{{ offer().item.bedrooms }}</span>\n                  <span i18n>Bedrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ offer().item.bathrooms }}</span>\n                  <span i18n>Bathrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ offer().item.receptions }}</span>\n                  <span i18n>Receptions</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"text-right\">\n              <div class=\"text-sm\">{{ offer().item.amount | price }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: ImagePlaceholderComponent, selector: "rolatech-image-placeholder", inputs: ["ratio"] }, { kind: "pipe", type: PricePipe, name: "price" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
@@ -1180,7 +1180,7 @@ class OfferEdit extends BaseComponent {
                 deps: [MAT_DATE_LOCALE],
             },
             { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$7 },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col gap-2\">\n  <div class=\"flex justify-between gap-3\">\n    <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n      <mat-label>Firstname</mat-label>\n      <input matInput [(ngModel)]=\"offer().firstName\" />\n    </mat-form-field>\n    <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n      <mat-label>Lastname</mat-label>\n      <input matInput [(ngModel)]=\"offer().lastName\" />\n    </mat-form-field>\n  </div>\n  <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n    <mat-label>Email</mat-label>\n    <input matInput [(ngModel)]=\"offer().email\" />\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n    <mat-label>Phone</mat-label>\n    <input matInput [(ngModel)]=\"offer().phone\" />\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n    <mat-label>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$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatOptionModule }] });
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col gap-2\">\n  <div class=\"flex justify-between gap-3\">\n    <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n      <mat-label>Firstname</mat-label>\n      <input matInput [(ngModel)]=\"offer().firstName\" />\n    </mat-form-field>\n    <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n      <mat-label>Lastname</mat-label>\n      <input matInput [(ngModel)]=\"offer().lastName\" />\n    </mat-form-field>\n  </div>\n  <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n    <mat-label>Email</mat-label>\n    <input matInput [(ngModel)]=\"offer().email\" />\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n    <mat-label>Phone</mat-label>\n    <input matInput [(ngModel)]=\"offer().phone\" />\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n    <mat-label>Offer Price</mat-label>\n    <input matInput [(ngModel)]=\"offer().price\" />\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n    <mat-label i18n>Move-in date</mat-label>\n    <!-- [max]=\"maxDate\" -->\n    <input\n      matInput\n      placeholder=\"Move-in date\"\n      [min]=\"minDate\"\n      [matDatepicker]=\"startDatePicker\"\n      (focus)=\"startDatePicker.open()\"\n      [(ngModel)]=\"offer().startDate\"\n      (dateInput)=\"offer().startDate = $event.value.format('YYYY-MM-DD')\"\n      required\n      readonly\n    />\n    <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n    <mat-datepicker #startDatePicker></mat-datepicker>\n  </mat-form-field>\n</div>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatOptionModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OfferEdit, decorators: [{
             type: Component,
@@ -1191,7 +1191,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                             deps: [MAT_DATE_LOCALE],
                         },
                         { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$7 },
-                    ], template: "<div class=\"flex flex-col gap-2\">\n  <div class=\"flex justify-between gap-3\">\n    <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n      <mat-label>Firstname</mat-label>\n      <input matInput [(ngModel)]=\"offer().firstName\" />\n    </mat-form-field>\n    <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n      <mat-label>Lastname</mat-label>\n      <input matInput [(ngModel)]=\"offer().lastName\" />\n    </mat-form-field>\n  </div>\n  <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n    <mat-label>Email</mat-label>\n    <input matInput [(ngModel)]=\"offer().email\" />\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n    <mat-label>Phone</mat-label>\n    <input matInput [(ngModel)]=\"offer().phone\" />\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n    <mat-label>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"] }]
+                    ], template: "<div class=\"flex flex-col gap-2\">\n  <div class=\"flex justify-between gap-3\">\n    <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n      <mat-label>Firstname</mat-label>\n      <input matInput [(ngModel)]=\"offer().firstName\" />\n    </mat-form-field>\n    <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n      <mat-label>Lastname</mat-label>\n      <input matInput [(ngModel)]=\"offer().lastName\" />\n    </mat-form-field>\n  </div>\n  <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n    <mat-label>Email</mat-label>\n    <input matInput [(ngModel)]=\"offer().email\" />\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n    <mat-label>Phone</mat-label>\n    <input matInput [(ngModel)]=\"offer().phone\" />\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n    <mat-label>Offer Price</mat-label>\n    <input matInput [(ngModel)]=\"offer().price\" />\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n    <mat-label i18n>Move-in date</mat-label>\n    <!-- [max]=\"maxDate\" -->\n    <input\n      matInput\n      placeholder=\"Move-in date\"\n      [min]=\"minDate\"\n      [matDatepicker]=\"startDatePicker\"\n      (focus)=\"startDatePicker.open()\"\n      [(ngModel)]=\"offer().startDate\"\n      (dateInput)=\"offer().startDate = $event.value.format('YYYY-MM-DD')\"\n      required\n      readonly\n    />\n    <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n    <mat-datepicker #startDatePicker></mat-datepicker>\n  </mat-form-field>\n</div>\n", styles: ["mat-form-field{width:100%}\n"] }]
         }], propDecorators: { offer: [{ type: i0.Input, args: [{ isSignal: true, alias: "offer", required: true }] }, { type: i0.Output, args: ["offerChange"] }], output: [{ type: i0.Output, args: ["output"] }] } });
 
 class PropertyManageOfferDetailComponent extends BaseComponent {
@@ -1406,7 +1406,7 @@ class PropertyManageOfferDetailComponent extends BaseComponent {
                         lastName: res.lastName,
                         email: res.email,
                         phone: res.phone,
-                        amount: res.amount,
+                        price: res.price,
                         moveInDate: res.startDate,
                     };
                     this.propertyOfferService.updateOffer(this.id, data).subscribe({
@@ -1433,7 +1433,7 @@ class PropertyManageOfferDetailComponent extends BaseComponent {
     emailApplicant(email) { }
     callApplicant(phone) { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyManageOfferDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: PropertyManageOfferDetailComponent, isStandalone: true, selector: "rolatech-property-manage-offer-detail", usesInheritance: true, ngImport: i0, template: "@if (offer) {\n  <rolatech-toolbar [title]=\"status[offer.status]\" large link=\"../\">\n    <div class=\"hidden md:flex gap-2\">\n      @if (offer.status.toString() === 'SUBMITTED') {\n        <button mat-flat-button (click)=\"accept()\" i18n>Accept</button>\n        <button mat-flat-button (click)=\"counter()\" i18n>Counter offer</button>\n        <button mat-button (click)=\"reject()\" i18n>Reject</button>\n        <button mat-button (click)=\"edit()\" i18n>Edit</button>\n      }\n      <!-- References -->\n      @if (offer.status.toString() === 'HOLDING_DEPOSIT_PAID') {\n        <button mat-flat-button (click)=\"underOffer()\" i18n>Under offer</button>\n      }\n      @if (offer.status.toString() === 'UNDER_OFFER') {\n        <button mat-flat-button (click)=\"rfPassed()\" i18n>References passed</button>\n        <button mat-flat-button (click)=\"rfFailed()\" i18n>References failed</button>\n      }\n      <!-- Completed -->\n      @if (offer.status.toString() === 'MOVE_IN_PAYMENT_PAID') {\n        <button mat-flat-button (click)=\"completed()\" i18n>Completed</button>\n      }\n    </div>\n    <div class=\"block md:hidden\">\n      <button mat-icon-button [matMenuTriggerFor]=\"moreMenu\">\n        <mat-icon>more_vert</mat-icon>\n      </button>\n    </div>\n  </rolatech-toolbar>\n\n  <div class=\"grid gap-4 lg:grid-cols-12 p-4\">\n    <!-- Main column -->\n    <div class=\"lg:col-span-8 space-y-4\">\n      <!-- Summary card -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between gap-3\">\n          <div>\n            <div class=\"text-sm font-semibold\">Offer summary</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Key details for pricing, move-in, and terms.</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 grid gap-3 sm:grid-cols-2\">\n          <div class=\"rounded-xl border border-[--rt-border-color] p-3\">\n            <div class=\"text-xs text-[--rt-text-secondary]\">Offer price</div>\n            <div class=\"mt-1 text-lg font-semibold\">\n              {{ offer.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.startDate | date: 'mediumDate' }}</div>\n          </div>\n\n          <div class=\"rounded-xl border border-[--rt-border-color] p-3\">\n            <div class=\"text-xs text-[--rt-text-secondary]\">Tenancy term</div>\n            <div class=\"mt-1 text-lg font-semibold\">\n              {{ offer.tenancyDuration }} <span class=\"text-sm font-medium text-[--rt-text-secondary]\">months</span>\n            </div>\n          </div>\n          <div class=\"rounded-xl border border-[--rt-border-color] p-3\">\n            <div class=\"text-xs text-[--rt-text-secondary]\">Number of tenants</div>\n            <div class=\"mt-1 text-lg font-semibold\">\n              {{ offer.numberOfTenants }} <span class=\"text-sm font-medium text-[--rt-text-secondary]\"></span>\n            </div>\n          </div>\n          <div class=\"rounded-xl border border-[--rt-border-color] p-3\">\n            <div class=\"text-xs text-[--rt-text-secondary]\">Employment status</div>\n            <div class=\"mt-1 text-lg font-semibold\">\n              {{ offer.employmentStatus }} <span class=\"text-sm font-medium text-[--rt-text-secondary]\"></span>\n            </div>\n          </div>\n        </div>\n      </section>\n      <!-- Move-in billing -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between gap-3\">\n          <div>\n            <div class=\"text-sm font-semibold\">Move-in billing</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">\n              Choose whether Security Deposit and First Rent are combined or separate invoices.\n            </div>\n          </div>\n\n          <button mat-flat-button type=\"button\" (click)=\"saveInvoiceOption(offer.id)\">Save</button>\n        </div>\n\n        <div class=\"mt-4 rounded-xl border border-[--rt-border-color] bg-[--rt-surface-2] p-3\">\n          <mat-radio-group class=\"block\" [value]=\"offer.invoiceOption\" (change)=\"setInvoiceOption($event.value)\">\n            <div class=\"grid gap-2 sm:grid-cols-2\">\n              <!-- Combined -->\n              <div\n                class=\"rounded-xl border border-[--rt-border-color] bg-[--rt-base-background] p-3 hover:border-[--rt-border-color] transition\"\n              >\n                <div class=\"flex items-start gap-3\">\n                  <mat-radio-button value=\"COMBINED\"></mat-radio-button>\n                  <div class=\"min-w-0\">\n                    <div class=\"text-sm font-semibold\">Combined</div>\n                    <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">\n                      One invoice with 2 lines: Security deposit + First rent.\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Separate -->\n              <div\n                class=\"rounded-xl border border-[--rt-border-color] bg-[--rt-base-background] p-3 hover:border-[--rt-border-color] transition\"\n              >\n                <div class=\"flex items-start gap-3\">\n                  <mat-radio-button value=\"SEPARATE\"></mat-radio-button>\n                  <div class=\"min-w-0\">\n                    <div class=\"text-sm font-semibold\">Separate</div>\n                    <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">\n                      Two invoices: Security deposit invoice, then First rent invoice.\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </mat-radio-group>\n        </div>\n      </section>\n      <!-- Property card -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between gap-3\">\n          <div>\n            <div class=\"text-sm font-semibold\">Property</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Offer property snapshot.</div>\n          </div>\n        </div>\n        <div class=\"flex items-center py-2\">\n          <div class=\"min-w-24 w-24 object-cover aspect-video rounded-md mr-3\">\n            @defer {\n              <rolatech-thumbnail [src]=\"offer.item.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n          <div class=\"flex w-full justify-between\">\n            <div class=\"flex justify-between w-full\">\n              <div class=\"flex flex-col\">\n                <div>{{ offer.item.title }}</div>\n                <div class=\"inline-flex gap-1 mt-2\">\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.bedrooms }}</span>\n                    <span i18n>Bedrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.bathrooms }}</span>\n                    <span i18n>Bathrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.receptions }}</span>\n                    <span i18n>Receptions</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"text-right\">\n                <div class=\"text-sm\">{{ offer.item.amount | price }}</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </section>\n    </div>\n\n    <!-- Right rail -->\n    <div class=\"lg:col-span-4 space-y-4\">\n      <!-- Offer user card -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between\">\n          <div>\n            <div class=\"text-sm font-semibold\">Applicant</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Contact and identity details.</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 flex items-center gap-3\">\n          <div class=\"h-10 w-10 overflow-hidden rounded-full border bg-[--rt-surface-2]\"></div>\n\n          <div class=\"min-w-0 flex-1\">\n            <div class=\"truncate text-sm font-semibold\">{{ name }}</div>\n            <div class=\"truncate text-xs text-[--rt-text-secondary]\">User ID: {{ offer.userId }}</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 space-y-2\">\n          @if (offer.email) {\n            <div class=\"flex items-center gap-2 text-sm\">\n              <mat-icon class=\"!text-base text-[--rt-text-secondary]\">mail</mat-icon>\n              <span class=\"truncate\">{{ offer.email }}</span>\n            </div>\n          }\n          @if (offer.phone) {\n            <div class=\"flex items-center gap-2 text-sm\">\n              <mat-icon class=\"!text-base text-[--rt-text-secondary]\">call</mat-icon>\n              <span class=\"truncate\">{{ offer.phone }}</span>\n            </div>\n          }\n        </div>\n\n        <div class=\"mt-4 grid grid-cols-2 gap-2\">\n          <button mat-stroked-button type=\"button\" [disabled]=\"!offer.email\" (click)=\"emailApplicant(offer.email!)\">\n            Email\n          </button>\n          <button mat-stroked-button type=\"button\" [disabled]=\"!offer.phone\" (click)=\"callApplicant(offer.phone!)\">Call</button>\n        </div>\n      </section>\n      <!-- Offer viewing agent -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between\">\n          <div>\n            <div class=\"text-sm font-semibold\">Agent</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Contact and identity details.</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 flex items-center gap-3\">\n          <div class=\"h-10 w-10 overflow-hidden rounded-full border bg-[--rt-surface-2]\"></div>\n\n          <div class=\"min-w-0 flex-1\">\n            <div class=\"truncate text-sm font-semibold\">{{ name }}</div>\n            <div class=\"truncate text-xs text-[--rt-text-secondary]\">Agent ID: {{ offer.agentId }}</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 space-y-2\">\n          @if (offer.email) {\n            <div class=\"flex items-center gap-2 text-sm\">\n              <mat-icon class=\"!text-base text-[--rt-text-secondary]\">mail</mat-icon>\n              <span class=\"truncate\">{{ offer.email }}</span>\n            </div>\n          }\n          @if (agent) {\n            <div class=\"flex items-center gap-2 text-sm\">\n              <mat-icon class=\"!text-base text-[--rt-text-secondary]\">call</mat-icon>\n              <span class=\"truncate\">{{ agent.phone }}</span>\n            </div>\n          }\n        </div>\n\n        <div class=\"mt-4 grid grid-cols-2 gap-2\">\n          <button mat-stroked-button type=\"button\" [disabled]=\"!offer.email\" (click)=\"emailApplicant(offer.email!)\">\n            Email\n          </button>\n          <button mat-stroked-button type=\"button\" [disabled]=\"!offer.phone\" (click)=\"callApplicant(offer.phone!)\">Call</button>\n        </div>\n      </section>\n\n      <!-- Quick actions card (optional) -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"text-sm font-semibold\">Quick actions</div>\n        <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Common operations for this offer.</div>\n        <div class=\"mt-4 space-y-2\">\n          @if (offer.status.toString() === 'SUBMITTED') {\n            <button mat-flat-button type=\"button\" class=\"w-full\" (click)=\"accept()\">Accept</button>\n            <button mat-stroked-button type=\"button\" class=\"w-full\" (click)=\"counter()\">Counter</button>\n            <button mat-stroked-button type=\"button\" class=\"w-full\" (click)=\"reject()\">Reject</button>\n          }\n          @if (offer.status.toString() === 'UNDER_OFFER') {\n            <button mat-flat-button (click)=\"rfPassed()\" class=\"w-full\">References passed</button>\n            <button mat-stroked-button (click)=\"rfFailed()\" class=\"w-full\">References failed</button>\n          }\n        </div>\n      </section>\n    </div>\n  </div>\n\n  <mat-menu #moreMenu=\"matMenu\" xPosition=\"after\" class=\"divide-y divide-light-900\">\n    @if (offer.status.toString() === 'SUBMITTED') {\n      <button mat-menu-item (click)=\"accept()\" i18n>Accept</button>\n      <button mat-menu-item (click)=\"counter()\" i18n>Counter offer</button>\n      <button mat-menu-item (click)=\"reject()\" i18n>Reject</button>\n    }\n    <!-- References -->\n    @if (offer.status.toString() === 'UNDER_OFFER') {\n      <button mat-menu-item (click)=\"rfPassed()\" i18n>References passed</button>\n      <button mat-menu-item (click)=\"rfFailed()\" i18n>References failed</button>\n    }\n    <button mat-menu-item (click)=\"edit()\">Edit</button>\n  </mat-menu>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i3$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: PricePipe, name: "price" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: PropertyManageOfferDetailComponent, isStandalone: true, selector: "rolatech-property-manage-offer-detail", usesInheritance: true, ngImport: i0, template: "@if (offer) {\n  <rolatech-toolbar [title]=\"status[offer.status]\" large link=\"../\">\n    <div class=\"hidden md:flex gap-2\">\n      @if (offer.status.toString() === 'SUBMITTED') {\n        <button mat-flat-button (click)=\"accept()\" i18n>Accept</button>\n        <button mat-flat-button (click)=\"counter()\" i18n>Counter offer</button>\n        <button mat-button (click)=\"reject()\" i18n>Reject</button>\n        <button mat-button (click)=\"edit()\" i18n>Edit</button>\n      }\n      <!-- References -->\n      @if (offer.status.toString() === 'HOLDING_DEPOSIT_PAID') {\n        <button mat-flat-button (click)=\"underOffer()\" i18n>Under offer</button>\n      }\n      @if (offer.status.toString() === 'UNDER_OFFER') {\n        <button mat-flat-button (click)=\"rfPassed()\" i18n>References passed</button>\n        <button mat-flat-button (click)=\"rfFailed()\" i18n>References failed</button>\n      }\n      <!-- Completed -->\n      @if (offer.status.toString() === 'MOVE_IN_PAYMENT_PAID') {\n        <button mat-flat-button (click)=\"completed()\" i18n>Completed</button>\n      }\n    </div>\n    <div class=\"block md:hidden\">\n      <button mat-icon-button [matMenuTriggerFor]=\"moreMenu\">\n        <mat-icon>more_vert</mat-icon>\n      </button>\n    </div>\n  </rolatech-toolbar>\n\n  <div class=\"grid gap-4 lg:grid-cols-12 p-4\">\n    <!-- Main column -->\n    <div class=\"lg:col-span-8 space-y-4\">\n      <!-- Summary card -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between gap-3\">\n          <div>\n            <div class=\"text-sm font-semibold\">Offer summary</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Key details for pricing, move-in, and terms.</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 grid gap-3 sm:grid-cols-2\">\n          <div class=\"rounded-xl border border-[--rt-border-color] p-3\">\n            <div class=\"text-xs text-[--rt-text-secondary]\">Offer price</div>\n            <div class=\"mt-1 text-lg font-semibold\">\n              {{ offer.price | price }}\n              <span class=\"text-sm font-medium text-[--rt-text-secondary]\">pcm</span>\n            </div>\n          </div>\n\n          <div class=\"rounded-xl border border-[--rt-border-color] p-3\">\n            <div class=\"text-xs text-[--rt-text-secondary]\">Move-in date</div>\n            <div class=\"mt-1 text-lg font-semibold\">{{ offer.startDate | date: 'mediumDate' }}</div>\n          </div>\n\n          <div class=\"rounded-xl border border-[--rt-border-color] p-3\">\n            <div class=\"text-xs text-[--rt-text-secondary]\">Tenancy term</div>\n            <div class=\"mt-1 text-lg font-semibold\">\n              {{ offer.tenancyDuration }} <span class=\"text-sm font-medium text-[--rt-text-secondary]\">months</span>\n            </div>\n          </div>\n          <div class=\"rounded-xl border border-[--rt-border-color] p-3\">\n            <div class=\"text-xs text-[--rt-text-secondary]\">Number of tenants</div>\n            <div class=\"mt-1 text-lg font-semibold\">\n              {{ offer.numberOfTenants }} <span class=\"text-sm font-medium text-[--rt-text-secondary]\"></span>\n            </div>\n          </div>\n          <div class=\"rounded-xl border border-[--rt-border-color] p-3\">\n            <div class=\"text-xs text-[--rt-text-secondary]\">Employment status</div>\n            <div class=\"mt-1 text-lg font-semibold\">\n              {{ offer.employmentStatus }} <span class=\"text-sm font-medium text-[--rt-text-secondary]\"></span>\n            </div>\n          </div>\n        </div>\n      </section>\n      <!-- Move-in billing -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between gap-3\">\n          <div>\n            <div class=\"text-sm font-semibold\">Move-in billing</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">\n              Choose whether Security Deposit and First Rent are combined or separate invoices.\n            </div>\n          </div>\n\n          <button mat-flat-button type=\"button\" (click)=\"saveInvoiceOption(offer.id)\">Save</button>\n        </div>\n\n        <div class=\"mt-4 rounded-xl border border-[--rt-border-color] bg-[--rt-surface-2] p-3\">\n          <mat-radio-group class=\"block\" [value]=\"offer.invoiceOption\" (change)=\"setInvoiceOption($event.value)\">\n            <div class=\"grid gap-2 sm:grid-cols-2\">\n              <!-- Combined -->\n              <div\n                class=\"rounded-xl border border-[--rt-border-color] bg-[--rt-base-background] p-3 hover:border-[--rt-border-color] transition\"\n              >\n                <div class=\"flex items-start gap-3\">\n                  <mat-radio-button value=\"COMBINED\"></mat-radio-button>\n                  <div class=\"min-w-0\">\n                    <div class=\"text-sm font-semibold\">Combined</div>\n                    <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">\n                      One invoice with 2 lines: Security deposit + First rent.\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Separate -->\n              <div\n                class=\"rounded-xl border border-[--rt-border-color] bg-[--rt-base-background] p-3 hover:border-[--rt-border-color] transition\"\n              >\n                <div class=\"flex items-start gap-3\">\n                  <mat-radio-button value=\"SEPARATE\"></mat-radio-button>\n                  <div class=\"min-w-0\">\n                    <div class=\"text-sm font-semibold\">Separate</div>\n                    <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">\n                      Two invoices: Security deposit invoice, then First rent invoice.\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </mat-radio-group>\n        </div>\n      </section>\n      <!-- Property card -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between gap-3\">\n          <div>\n            <div class=\"text-sm font-semibold\">Property</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Offer property snapshot.</div>\n          </div>\n        </div>\n        <div class=\"flex items-center py-2\">\n          <div class=\"min-w-24 w-24 object-cover aspect-video rounded-md mr-3\">\n            @defer {\n              <rolatech-thumbnail [src]=\"offer.item.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n          <div class=\"flex w-full justify-between\">\n            <div class=\"flex justify-between w-full\">\n              <div class=\"flex flex-col\">\n                <div>{{ offer.item.title }}</div>\n                <div class=\"inline-flex gap-1 mt-2\">\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.bedrooms }}</span>\n                    <span i18n>Bedrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.bathrooms }}</span>\n                    <span i18n>Bathrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.receptions }}</span>\n                    <span i18n>Receptions</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"text-right\">\n                <div class=\"text-sm\">{{ offer.item.amount | price }}</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </section>\n    </div>\n\n    <!-- Right rail -->\n    <div class=\"lg:col-span-4 space-y-4\">\n      <!-- Offer user card -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between\">\n          <div>\n            <div class=\"text-sm font-semibold\">Applicant</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Contact and identity details.</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 flex items-center gap-3\">\n          <div class=\"h-10 w-10 overflow-hidden rounded-full border bg-[--rt-surface-2]\"></div>\n\n          <div class=\"min-w-0 flex-1\">\n            <div class=\"truncate text-sm font-semibold\">{{ name }}</div>\n            <div class=\"truncate text-xs text-[--rt-text-secondary]\">User ID: {{ offer.userId }}</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 space-y-2\">\n          @if (offer.email) {\n            <div class=\"flex items-center gap-2 text-sm\">\n              <mat-icon class=\"!text-base text-[--rt-text-secondary]\">mail</mat-icon>\n              <span class=\"truncate\">{{ offer.email }}</span>\n            </div>\n          }\n          @if (offer.phone) {\n            <div class=\"flex items-center gap-2 text-sm\">\n              <mat-icon class=\"!text-base text-[--rt-text-secondary]\">call</mat-icon>\n              <span class=\"truncate\">{{ offer.phone }}</span>\n            </div>\n          }\n        </div>\n\n        <div class=\"mt-4 grid grid-cols-2 gap-2\">\n          <button mat-stroked-button type=\"button\" [disabled]=\"!offer.email\" (click)=\"emailApplicant(offer.email!)\">\n            Email\n          </button>\n          <button mat-stroked-button type=\"button\" [disabled]=\"!offer.phone\" (click)=\"callApplicant(offer.phone!)\">Call</button>\n        </div>\n      </section>\n      <!-- Offer viewing agent -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between\">\n          <div>\n            <div class=\"text-sm font-semibold\">Agent</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Contact and identity details.</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 flex items-center gap-3\">\n          <div class=\"h-10 w-10 overflow-hidden rounded-full border bg-[--rt-surface-2]\"></div>\n\n          <div class=\"min-w-0 flex-1\">\n            <div class=\"truncate text-sm font-semibold\">{{ name }}</div>\n            <div class=\"truncate text-xs text-[--rt-text-secondary]\">Agent ID: {{ offer.agentId }}</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 space-y-2\">\n          @if (offer.email) {\n            <div class=\"flex items-center gap-2 text-sm\">\n              <mat-icon class=\"!text-base text-[--rt-text-secondary]\">mail</mat-icon>\n              <span class=\"truncate\">{{ offer.email }}</span>\n            </div>\n          }\n          @if (agent) {\n            <div class=\"flex items-center gap-2 text-sm\">\n              <mat-icon class=\"!text-base text-[--rt-text-secondary]\">call</mat-icon>\n              <span class=\"truncate\">{{ agent.phone }}</span>\n            </div>\n          }\n        </div>\n\n        <div class=\"mt-4 grid grid-cols-2 gap-2\">\n          <button mat-stroked-button type=\"button\" [disabled]=\"!offer.email\" (click)=\"emailApplicant(offer.email!)\">\n            Email\n          </button>\n          <button mat-stroked-button type=\"button\" [disabled]=\"!offer.phone\" (click)=\"callApplicant(offer.phone!)\">Call</button>\n        </div>\n      </section>\n\n      <!-- Quick actions card (optional) -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"text-sm font-semibold\">Quick actions</div>\n        <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Common operations for this offer.</div>\n        <div class=\"mt-4 space-y-2\">\n          @if (offer.status.toString() === 'SUBMITTED') {\n            <button mat-flat-button type=\"button\" class=\"w-full\" (click)=\"accept()\">Accept</button>\n            <button mat-stroked-button type=\"button\" class=\"w-full\" (click)=\"counter()\">Counter</button>\n            <button mat-stroked-button type=\"button\" class=\"w-full\" (click)=\"reject()\">Reject</button>\n          }\n          @if (offer.status.toString() === 'UNDER_OFFER') {\n            <button mat-flat-button (click)=\"rfPassed()\" class=\"w-full\">References passed</button>\n            <button mat-stroked-button (click)=\"rfFailed()\" class=\"w-full\">References failed</button>\n          }\n        </div>\n      </section>\n    </div>\n  </div>\n\n  <mat-menu #moreMenu=\"matMenu\" xPosition=\"after\" class=\"divide-y divide-light-900\">\n    @if (offer.status.toString() === 'SUBMITTED') {\n      <button mat-menu-item (click)=\"accept()\" i18n>Accept</button>\n      <button mat-menu-item (click)=\"counter()\" i18n>Counter offer</button>\n      <button mat-menu-item (click)=\"reject()\" i18n>Reject</button>\n    }\n    <!-- References -->\n    @if (offer.status.toString() === 'UNDER_OFFER') {\n      <button mat-menu-item (click)=\"rfPassed()\" i18n>References passed</button>\n      <button mat-menu-item (click)=\"rfFailed()\" i18n>References failed</button>\n    }\n    <button mat-menu-item (click)=\"edit()\">Edit</button>\n  </mat-menu>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i3$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: PricePipe, name: "price" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyManageOfferDetailComponent, decorators: [{
             type: Component,
@@ -1447,7 +1447,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         PricePipe,
                         MatRadioModule,
                         FormsModule,
-                    ], template: "@if (offer) {\n  <rolatech-toolbar [title]=\"status[offer.status]\" large link=\"../\">\n    <div class=\"hidden md:flex gap-2\">\n      @if (offer.status.toString() === 'SUBMITTED') {\n        <button mat-flat-button (click)=\"accept()\" i18n>Accept</button>\n        <button mat-flat-button (click)=\"counter()\" i18n>Counter offer</button>\n        <button mat-button (click)=\"reject()\" i18n>Reject</button>\n        <button mat-button (click)=\"edit()\" i18n>Edit</button>\n      }\n      <!-- References -->\n      @if (offer.status.toString() === 'HOLDING_DEPOSIT_PAID') {\n        <button mat-flat-button (click)=\"underOffer()\" i18n>Under offer</button>\n      }\n      @if (offer.status.toString() === 'UNDER_OFFER') {\n        <button mat-flat-button (click)=\"rfPassed()\" i18n>References passed</button>\n        <button mat-flat-button (click)=\"rfFailed()\" i18n>References failed</button>\n      }\n      <!-- Completed -->\n      @if (offer.status.toString() === 'MOVE_IN_PAYMENT_PAID') {\n        <button mat-flat-button (click)=\"completed()\" i18n>Completed</button>\n      }\n    </div>\n    <div class=\"block md:hidden\">\n      <button mat-icon-button [matMenuTriggerFor]=\"moreMenu\">\n        <mat-icon>more_vert</mat-icon>\n      </button>\n    </div>\n  </rolatech-toolbar>\n\n  <div class=\"grid gap-4 lg:grid-cols-12 p-4\">\n    <!-- Main column -->\n    <div class=\"lg:col-span-8 space-y-4\">\n      <!-- Summary card -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between gap-3\">\n          <div>\n            <div class=\"text-sm font-semibold\">Offer summary</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Key details for pricing, move-in, and terms.</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 grid gap-3 sm:grid-cols-2\">\n          <div class=\"rounded-xl border border-[--rt-border-color] p-3\">\n            <div class=\"text-xs text-[--rt-text-secondary]\">Offer price</div>\n            <div class=\"mt-1 text-lg font-semibold\">\n              {{ offer.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.startDate | date: 'mediumDate' }}</div>\n          </div>\n\n          <div class=\"rounded-xl border border-[--rt-border-color] p-3\">\n            <div class=\"text-xs text-[--rt-text-secondary]\">Tenancy term</div>\n            <div class=\"mt-1 text-lg font-semibold\">\n              {{ offer.tenancyDuration }} <span class=\"text-sm font-medium text-[--rt-text-secondary]\">months</span>\n            </div>\n          </div>\n          <div class=\"rounded-xl border border-[--rt-border-color] p-3\">\n            <div class=\"text-xs text-[--rt-text-secondary]\">Number of tenants</div>\n            <div class=\"mt-1 text-lg font-semibold\">\n              {{ offer.numberOfTenants }} <span class=\"text-sm font-medium text-[--rt-text-secondary]\"></span>\n            </div>\n          </div>\n          <div class=\"rounded-xl border border-[--rt-border-color] p-3\">\n            <div class=\"text-xs text-[--rt-text-secondary]\">Employment status</div>\n            <div class=\"mt-1 text-lg font-semibold\">\n              {{ offer.employmentStatus }} <span class=\"text-sm font-medium text-[--rt-text-secondary]\"></span>\n            </div>\n          </div>\n        </div>\n      </section>\n      <!-- Move-in billing -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between gap-3\">\n          <div>\n            <div class=\"text-sm font-semibold\">Move-in billing</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">\n              Choose whether Security Deposit and First Rent are combined or separate invoices.\n            </div>\n          </div>\n\n          <button mat-flat-button type=\"button\" (click)=\"saveInvoiceOption(offer.id)\">Save</button>\n        </div>\n\n        <div class=\"mt-4 rounded-xl border border-[--rt-border-color] bg-[--rt-surface-2] p-3\">\n          <mat-radio-group class=\"block\" [value]=\"offer.invoiceOption\" (change)=\"setInvoiceOption($event.value)\">\n            <div class=\"grid gap-2 sm:grid-cols-2\">\n              <!-- Combined -->\n              <div\n                class=\"rounded-xl border border-[--rt-border-color] bg-[--rt-base-background] p-3 hover:border-[--rt-border-color] transition\"\n              >\n                <div class=\"flex items-start gap-3\">\n                  <mat-radio-button value=\"COMBINED\"></mat-radio-button>\n                  <div class=\"min-w-0\">\n                    <div class=\"text-sm font-semibold\">Combined</div>\n                    <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">\n                      One invoice with 2 lines: Security deposit + First rent.\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Separate -->\n              <div\n                class=\"rounded-xl border border-[--rt-border-color] bg-[--rt-base-background] p-3 hover:border-[--rt-border-color] transition\"\n              >\n                <div class=\"flex items-start gap-3\">\n                  <mat-radio-button value=\"SEPARATE\"></mat-radio-button>\n                  <div class=\"min-w-0\">\n                    <div class=\"text-sm font-semibold\">Separate</div>\n                    <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">\n                      Two invoices: Security deposit invoice, then First rent invoice.\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </mat-radio-group>\n        </div>\n      </section>\n      <!-- Property card -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between gap-3\">\n          <div>\n            <div class=\"text-sm font-semibold\">Property</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Offer property snapshot.</div>\n          </div>\n        </div>\n        <div class=\"flex items-center py-2\">\n          <div class=\"min-w-24 w-24 object-cover aspect-video rounded-md mr-3\">\n            @defer {\n              <rolatech-thumbnail [src]=\"offer.item.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n          <div class=\"flex w-full justify-between\">\n            <div class=\"flex justify-between w-full\">\n              <div class=\"flex flex-col\">\n                <div>{{ offer.item.title }}</div>\n                <div class=\"inline-flex gap-1 mt-2\">\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.bedrooms }}</span>\n                    <span i18n>Bedrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.bathrooms }}</span>\n                    <span i18n>Bathrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.receptions }}</span>\n                    <span i18n>Receptions</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"text-right\">\n                <div class=\"text-sm\">{{ offer.item.amount | price }}</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </section>\n    </div>\n\n    <!-- Right rail -->\n    <div class=\"lg:col-span-4 space-y-4\">\n      <!-- Offer user card -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between\">\n          <div>\n            <div class=\"text-sm font-semibold\">Applicant</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Contact and identity details.</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 flex items-center gap-3\">\n          <div class=\"h-10 w-10 overflow-hidden rounded-full border bg-[--rt-surface-2]\"></div>\n\n          <div class=\"min-w-0 flex-1\">\n            <div class=\"truncate text-sm font-semibold\">{{ name }}</div>\n            <div class=\"truncate text-xs text-[--rt-text-secondary]\">User ID: {{ offer.userId }}</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 space-y-2\">\n          @if (offer.email) {\n            <div class=\"flex items-center gap-2 text-sm\">\n              <mat-icon class=\"!text-base text-[--rt-text-secondary]\">mail</mat-icon>\n              <span class=\"truncate\">{{ offer.email }}</span>\n            </div>\n          }\n          @if (offer.phone) {\n            <div class=\"flex items-center gap-2 text-sm\">\n              <mat-icon class=\"!text-base text-[--rt-text-secondary]\">call</mat-icon>\n              <span class=\"truncate\">{{ offer.phone }}</span>\n            </div>\n          }\n        </div>\n\n        <div class=\"mt-4 grid grid-cols-2 gap-2\">\n          <button mat-stroked-button type=\"button\" [disabled]=\"!offer.email\" (click)=\"emailApplicant(offer.email!)\">\n            Email\n          </button>\n          <button mat-stroked-button type=\"button\" [disabled]=\"!offer.phone\" (click)=\"callApplicant(offer.phone!)\">Call</button>\n        </div>\n      </section>\n      <!-- Offer viewing agent -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between\">\n          <div>\n            <div class=\"text-sm font-semibold\">Agent</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Contact and identity details.</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 flex items-center gap-3\">\n          <div class=\"h-10 w-10 overflow-hidden rounded-full border bg-[--rt-surface-2]\"></div>\n\n          <div class=\"min-w-0 flex-1\">\n            <div class=\"truncate text-sm font-semibold\">{{ name }}</div>\n            <div class=\"truncate text-xs text-[--rt-text-secondary]\">Agent ID: {{ offer.agentId }}</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 space-y-2\">\n          @if (offer.email) {\n            <div class=\"flex items-center gap-2 text-sm\">\n              <mat-icon class=\"!text-base text-[--rt-text-secondary]\">mail</mat-icon>\n              <span class=\"truncate\">{{ offer.email }}</span>\n            </div>\n          }\n          @if (agent) {\n            <div class=\"flex items-center gap-2 text-sm\">\n              <mat-icon class=\"!text-base text-[--rt-text-secondary]\">call</mat-icon>\n              <span class=\"truncate\">{{ agent.phone }}</span>\n            </div>\n          }\n        </div>\n\n        <div class=\"mt-4 grid grid-cols-2 gap-2\">\n          <button mat-stroked-button type=\"button\" [disabled]=\"!offer.email\" (click)=\"emailApplicant(offer.email!)\">\n            Email\n          </button>\n          <button mat-stroked-button type=\"button\" [disabled]=\"!offer.phone\" (click)=\"callApplicant(offer.phone!)\">Call</button>\n        </div>\n      </section>\n\n      <!-- Quick actions card (optional) -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"text-sm font-semibold\">Quick actions</div>\n        <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Common operations for this offer.</div>\n        <div class=\"mt-4 space-y-2\">\n          @if (offer.status.toString() === 'SUBMITTED') {\n            <button mat-flat-button type=\"button\" class=\"w-full\" (click)=\"accept()\">Accept</button>\n            <button mat-stroked-button type=\"button\" class=\"w-full\" (click)=\"counter()\">Counter</button>\n            <button mat-stroked-button type=\"button\" class=\"w-full\" (click)=\"reject()\">Reject</button>\n          }\n          @if (offer.status.toString() === 'UNDER_OFFER') {\n            <button mat-flat-button (click)=\"rfPassed()\" class=\"w-full\">References passed</button>\n            <button mat-stroked-button (click)=\"rfFailed()\" class=\"w-full\">References failed</button>\n          }\n        </div>\n      </section>\n    </div>\n  </div>\n\n  <mat-menu #moreMenu=\"matMenu\" xPosition=\"after\" class=\"divide-y divide-light-900\">\n    @if (offer.status.toString() === 'SUBMITTED') {\n      <button mat-menu-item (click)=\"accept()\" i18n>Accept</button>\n      <button mat-menu-item (click)=\"counter()\" i18n>Counter offer</button>\n      <button mat-menu-item (click)=\"reject()\" i18n>Reject</button>\n    }\n    <!-- References -->\n    @if (offer.status.toString() === 'UNDER_OFFER') {\n      <button mat-menu-item (click)=\"rfPassed()\" i18n>References passed</button>\n      <button mat-menu-item (click)=\"rfFailed()\" i18n>References failed</button>\n    }\n    <button mat-menu-item (click)=\"edit()\">Edit</button>\n  </mat-menu>\n}\n" }]
+                    ], template: "@if (offer) {\n  <rolatech-toolbar [title]=\"status[offer.status]\" large link=\"../\">\n    <div class=\"hidden md:flex gap-2\">\n      @if (offer.status.toString() === 'SUBMITTED') {\n        <button mat-flat-button (click)=\"accept()\" i18n>Accept</button>\n        <button mat-flat-button (click)=\"counter()\" i18n>Counter offer</button>\n        <button mat-button (click)=\"reject()\" i18n>Reject</button>\n        <button mat-button (click)=\"edit()\" i18n>Edit</button>\n      }\n      <!-- References -->\n      @if (offer.status.toString() === 'HOLDING_DEPOSIT_PAID') {\n        <button mat-flat-button (click)=\"underOffer()\" i18n>Under offer</button>\n      }\n      @if (offer.status.toString() === 'UNDER_OFFER') {\n        <button mat-flat-button (click)=\"rfPassed()\" i18n>References passed</button>\n        <button mat-flat-button (click)=\"rfFailed()\" i18n>References failed</button>\n      }\n      <!-- Completed -->\n      @if (offer.status.toString() === 'MOVE_IN_PAYMENT_PAID') {\n        <button mat-flat-button (click)=\"completed()\" i18n>Completed</button>\n      }\n    </div>\n    <div class=\"block md:hidden\">\n      <button mat-icon-button [matMenuTriggerFor]=\"moreMenu\">\n        <mat-icon>more_vert</mat-icon>\n      </button>\n    </div>\n  </rolatech-toolbar>\n\n  <div class=\"grid gap-4 lg:grid-cols-12 p-4\">\n    <!-- Main column -->\n    <div class=\"lg:col-span-8 space-y-4\">\n      <!-- Summary card -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between gap-3\">\n          <div>\n            <div class=\"text-sm font-semibold\">Offer summary</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Key details for pricing, move-in, and terms.</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 grid gap-3 sm:grid-cols-2\">\n          <div class=\"rounded-xl border border-[--rt-border-color] p-3\">\n            <div class=\"text-xs text-[--rt-text-secondary]\">Offer price</div>\n            <div class=\"mt-1 text-lg font-semibold\">\n              {{ offer.price | price }}\n              <span class=\"text-sm font-medium text-[--rt-text-secondary]\">pcm</span>\n            </div>\n          </div>\n\n          <div class=\"rounded-xl border border-[--rt-border-color] p-3\">\n            <div class=\"text-xs text-[--rt-text-secondary]\">Move-in date</div>\n            <div class=\"mt-1 text-lg font-semibold\">{{ offer.startDate | date: 'mediumDate' }}</div>\n          </div>\n\n          <div class=\"rounded-xl border border-[--rt-border-color] p-3\">\n            <div class=\"text-xs text-[--rt-text-secondary]\">Tenancy term</div>\n            <div class=\"mt-1 text-lg font-semibold\">\n              {{ offer.tenancyDuration }} <span class=\"text-sm font-medium text-[--rt-text-secondary]\">months</span>\n            </div>\n          </div>\n          <div class=\"rounded-xl border border-[--rt-border-color] p-3\">\n            <div class=\"text-xs text-[--rt-text-secondary]\">Number of tenants</div>\n            <div class=\"mt-1 text-lg font-semibold\">\n              {{ offer.numberOfTenants }} <span class=\"text-sm font-medium text-[--rt-text-secondary]\"></span>\n            </div>\n          </div>\n          <div class=\"rounded-xl border border-[--rt-border-color] p-3\">\n            <div class=\"text-xs text-[--rt-text-secondary]\">Employment status</div>\n            <div class=\"mt-1 text-lg font-semibold\">\n              {{ offer.employmentStatus }} <span class=\"text-sm font-medium text-[--rt-text-secondary]\"></span>\n            </div>\n          </div>\n        </div>\n      </section>\n      <!-- Move-in billing -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between gap-3\">\n          <div>\n            <div class=\"text-sm font-semibold\">Move-in billing</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">\n              Choose whether Security Deposit and First Rent are combined or separate invoices.\n            </div>\n          </div>\n\n          <button mat-flat-button type=\"button\" (click)=\"saveInvoiceOption(offer.id)\">Save</button>\n        </div>\n\n        <div class=\"mt-4 rounded-xl border border-[--rt-border-color] bg-[--rt-surface-2] p-3\">\n          <mat-radio-group class=\"block\" [value]=\"offer.invoiceOption\" (change)=\"setInvoiceOption($event.value)\">\n            <div class=\"grid gap-2 sm:grid-cols-2\">\n              <!-- Combined -->\n              <div\n                class=\"rounded-xl border border-[--rt-border-color] bg-[--rt-base-background] p-3 hover:border-[--rt-border-color] transition\"\n              >\n                <div class=\"flex items-start gap-3\">\n                  <mat-radio-button value=\"COMBINED\"></mat-radio-button>\n                  <div class=\"min-w-0\">\n                    <div class=\"text-sm font-semibold\">Combined</div>\n                    <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">\n                      One invoice with 2 lines: Security deposit + First rent.\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Separate -->\n              <div\n                class=\"rounded-xl border border-[--rt-border-color] bg-[--rt-base-background] p-3 hover:border-[--rt-border-color] transition\"\n              >\n                <div class=\"flex items-start gap-3\">\n                  <mat-radio-button value=\"SEPARATE\"></mat-radio-button>\n                  <div class=\"min-w-0\">\n                    <div class=\"text-sm font-semibold\">Separate</div>\n                    <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">\n                      Two invoices: Security deposit invoice, then First rent invoice.\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </mat-radio-group>\n        </div>\n      </section>\n      <!-- Property card -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between gap-3\">\n          <div>\n            <div class=\"text-sm font-semibold\">Property</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Offer property snapshot.</div>\n          </div>\n        </div>\n        <div class=\"flex items-center py-2\">\n          <div class=\"min-w-24 w-24 object-cover aspect-video rounded-md mr-3\">\n            @defer {\n              <rolatech-thumbnail [src]=\"offer.item.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n          <div class=\"flex w-full justify-between\">\n            <div class=\"flex justify-between w-full\">\n              <div class=\"flex flex-col\">\n                <div>{{ offer.item.title }}</div>\n                <div class=\"inline-flex gap-1 mt-2\">\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.bedrooms }}</span>\n                    <span i18n>Bedrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.bathrooms }}</span>\n                    <span i18n>Bathrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.receptions }}</span>\n                    <span i18n>Receptions</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"text-right\">\n                <div class=\"text-sm\">{{ offer.item.amount | price }}</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </section>\n    </div>\n\n    <!-- Right rail -->\n    <div class=\"lg:col-span-4 space-y-4\">\n      <!-- Offer user card -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between\">\n          <div>\n            <div class=\"text-sm font-semibold\">Applicant</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Contact and identity details.</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 flex items-center gap-3\">\n          <div class=\"h-10 w-10 overflow-hidden rounded-full border bg-[--rt-surface-2]\"></div>\n\n          <div class=\"min-w-0 flex-1\">\n            <div class=\"truncate text-sm font-semibold\">{{ name }}</div>\n            <div class=\"truncate text-xs text-[--rt-text-secondary]\">User ID: {{ offer.userId }}</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 space-y-2\">\n          @if (offer.email) {\n            <div class=\"flex items-center gap-2 text-sm\">\n              <mat-icon class=\"!text-base text-[--rt-text-secondary]\">mail</mat-icon>\n              <span class=\"truncate\">{{ offer.email }}</span>\n            </div>\n          }\n          @if (offer.phone) {\n            <div class=\"flex items-center gap-2 text-sm\">\n              <mat-icon class=\"!text-base text-[--rt-text-secondary]\">call</mat-icon>\n              <span class=\"truncate\">{{ offer.phone }}</span>\n            </div>\n          }\n        </div>\n\n        <div class=\"mt-4 grid grid-cols-2 gap-2\">\n          <button mat-stroked-button type=\"button\" [disabled]=\"!offer.email\" (click)=\"emailApplicant(offer.email!)\">\n            Email\n          </button>\n          <button mat-stroked-button type=\"button\" [disabled]=\"!offer.phone\" (click)=\"callApplicant(offer.phone!)\">Call</button>\n        </div>\n      </section>\n      <!-- Offer viewing agent -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"flex items-start justify-between\">\n          <div>\n            <div class=\"text-sm font-semibold\">Agent</div>\n            <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Contact and identity details.</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 flex items-center gap-3\">\n          <div class=\"h-10 w-10 overflow-hidden rounded-full border bg-[--rt-surface-2]\"></div>\n\n          <div class=\"min-w-0 flex-1\">\n            <div class=\"truncate text-sm font-semibold\">{{ name }}</div>\n            <div class=\"truncate text-xs text-[--rt-text-secondary]\">Agent ID: {{ offer.agentId }}</div>\n          </div>\n        </div>\n\n        <div class=\"mt-4 space-y-2\">\n          @if (offer.email) {\n            <div class=\"flex items-center gap-2 text-sm\">\n              <mat-icon class=\"!text-base text-[--rt-text-secondary]\">mail</mat-icon>\n              <span class=\"truncate\">{{ offer.email }}</span>\n            </div>\n          }\n          @if (agent) {\n            <div class=\"flex items-center gap-2 text-sm\">\n              <mat-icon class=\"!text-base text-[--rt-text-secondary]\">call</mat-icon>\n              <span class=\"truncate\">{{ agent.phone }}</span>\n            </div>\n          }\n        </div>\n\n        <div class=\"mt-4 grid grid-cols-2 gap-2\">\n          <button mat-stroked-button type=\"button\" [disabled]=\"!offer.email\" (click)=\"emailApplicant(offer.email!)\">\n            Email\n          </button>\n          <button mat-stroked-button type=\"button\" [disabled]=\"!offer.phone\" (click)=\"callApplicant(offer.phone!)\">Call</button>\n        </div>\n      </section>\n\n      <!-- Quick actions card (optional) -->\n      <section class=\"rounded-2xl border border-[--rt-border-color] bg-[--rt-base-background] p-4\">\n        <div class=\"text-sm font-semibold\">Quick actions</div>\n        <div class=\"mt-1 text-xs text-[--rt-text-secondary]\">Common operations for this offer.</div>\n        <div class=\"mt-4 space-y-2\">\n          @if (offer.status.toString() === 'SUBMITTED') {\n            <button mat-flat-button type=\"button\" class=\"w-full\" (click)=\"accept()\">Accept</button>\n            <button mat-stroked-button type=\"button\" class=\"w-full\" (click)=\"counter()\">Counter</button>\n            <button mat-stroked-button type=\"button\" class=\"w-full\" (click)=\"reject()\">Reject</button>\n          }\n          @if (offer.status.toString() === 'UNDER_OFFER') {\n            <button mat-flat-button (click)=\"rfPassed()\" class=\"w-full\">References passed</button>\n            <button mat-stroked-button (click)=\"rfFailed()\" class=\"w-full\">References failed</button>\n          }\n        </div>\n      </section>\n    </div>\n  </div>\n\n  <mat-menu #moreMenu=\"matMenu\" xPosition=\"after\" class=\"divide-y divide-light-900\">\n    @if (offer.status.toString() === 'SUBMITTED') {\n      <button mat-menu-item (click)=\"accept()\" i18n>Accept</button>\n      <button mat-menu-item (click)=\"counter()\" i18n>Counter offer</button>\n      <button mat-menu-item (click)=\"reject()\" i18n>Reject</button>\n    }\n    <!-- References -->\n    @if (offer.status.toString() === 'UNDER_OFFER') {\n      <button mat-menu-item (click)=\"rfPassed()\" i18n>References passed</button>\n      <button mat-menu-item (click)=\"rfFailed()\" i18n>References failed</button>\n    }\n    <button mat-menu-item (click)=\"edit()\">Edit</button>\n  </mat-menu>\n}\n" }]
         }] });
 
 const propertyManageOffersRoutes = [
@@ -2482,10 +2482,10 @@ class PropertyOfferComponent extends BaseComponent {
         adverseCreditStatus: '',
         startDate: '',
         notes: '',
-        amount: 0,
+        price: 0,
     };
     get formattedAmount() {
-        return this.offer.amount.toFixed(2); // equivalent to | number:'1.2-2'
+        return this.offer.price.toFixed(2); // equivalent to | number:'1.2-2'
     } // applicantTypes = PropertyApplicantType;
     applicantTypes = Object.keys(PropertyApplicantType); // ['INDIVIDUAL', 'CORPORATE', ...]
     PropertyApplicantType = PropertyApplicantType;
@@ -2525,7 +2525,7 @@ class PropertyOfferComponent extends BaseComponent {
         console.log(inputValue);
         const regex = /^\d*\.?\d{0,2}$/;
         if (regex.test(inputValue)) {
-            this.offer.amount = inputValue;
+            this.offer.price = inputValue;
         }
     }
     getProperty() {
@@ -2562,7 +2562,7 @@ class PropertyOfferComponent extends BaseComponent {
                 deps: [MAT_DATE_LOCALE],
             },
             { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$3 },
-        ], usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  <div class=\"flex flex-col-reverse md:flex-row w-full py-2 mb-3 gap-3\">\n    <div class=\"w-full md:w-2/3\">\n      <div>\n        <div class=\"text-xl font-bold py-2 mb-3\">\n          <!-- <span i18n>Offer for </span><span>{{ property()?.title : '' }}</span> -->\n          <span i18n=\"@@offerFor\">Offer for {{ property()?.title }}</span>\n        </div>\n        <div class=\"flex flex-col md:flex-row gap-2\">\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>First name</mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"offer.firstName\" required />\n          </mat-form-field>\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>Last name</mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"offer.lastName\" required />\n          </mat-form-field>\n        </div>\n        <div class=\"flex flex-col md:flex-row gap-2\">\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>Phone</mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"offer.phone\" required />\n          </mat-form-field>\n        </div>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Email</mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"offer.email\" required />\n        </mat-form-field>\n\n        <mat-form-field appearance=\"fill\" floatLabel=\"always\">\n          <mat-label i18n>Asking price</mat-label>\n          <span matTextPrefix>\u00A3&nbsp;</span>\n          <input matInput type=\"text\" placeholder=\"0.00\" [(ngModel)]=\"offer.amount\" required />\n          <!-- <input\n            matInput\n            type=\"number\"\n            placeholder=\"0.00\"\n            [value]=\"formattedAmount\"\n            (input)=\"onAmountChange($event)\"\n            required\n          /> -->\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Tenancy Length</mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"offer.tenancyDuration\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Number Of Tenants</mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"offer.numberOfTenants\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label>Start date</mat-label>\n          <input\n            matInput\n            placeholder=\"Start date\"\n            [matDatepicker]=\"startDatePicker\"\n            [min]=\"minDate\"\n            (focus)=\"startDatePicker.open()\"\n            name=\"startDate\"\n            [(ngModel)]=\"offer.startDate\"\n            (dateInput)=\"offer.startDate = $event.value.format('YYYY-MM-DD')\"\n            readonly\n            required\n          />\n          <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n          <mat-datepicker #startDatePicker></mat-datepicker>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label i18n>Applicant type</mat-label>\n          <mat-select placeholder=\"Applicant type\" [(ngModel)]=\"offer.applicantType\" required>\n            @for (key of applicantTypes; track key) {\n              <mat-option [value]=\"key\">\n                {{ PropertyApplicantType[key] }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <!-- subscriptSizing=\"dynamic\" -->\n        <mat-form-field>\n          <mat-label i18n>Residency status</mat-label>\n          <mat-select placeholder=\"Residency status\" [(ngModel)]=\"offer.residencyStatus\" required>\n            @for (status of residencyStatus | keyvalue; track status) {\n              <mat-option [value]=\"status.key\">\n                {{ status.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label i18n>Employment Status</mat-label>\n          <mat-select placeholder=\"Employment Status\" [(ngModel)]=\"offer.employmentStatus\" required>\n            @for (item of employmentStatus | keyvalue; track item) {\n              <mat-option [value]=\"item.key\">\n                {{ item.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label i18n>AdverseCredit Status</mat-label>\n          <mat-select placeholder=\"AdverseCredit Status\" [(ngModel)]=\"offer.adverseCreditStatus\" required>\n            @for (item of adverseCreditStatus | keyvalue; track item) {\n              <mat-option [value]=\"item.key\">\n                {{ item.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div>\n        <div class=\"text-md py-2\" i18n>Your message(Optional)</div>\n        <mat-form-field appearance=\"fill\">\n          <textarea matInput type=\"text\" [(ngModel)]=\"offer.notes\" cdkTextareaAutosize cdkAutosizeMinRows=\"3\"></textarea>\n        </mat-form-field>\n      </div>\n      <!-- <button mat-flat-button (click)=\"sendRequest()\" i18n>Send request</button> -->\n      <button mat-flat-button (click)=\"sendRequest()\" [disabled]=\"sending\">\n        <span style=\"display: flex; align-items: center\">\n          @if (sending) {\n            <mat-progress-spinner diameter=\"20\" mode=\"indeterminate\" [style.marginRight.px]=\"8\"></mat-progress-spinner>\n          }\n          {{ sending ? 'Requesting...' : 'Send request' }}\n        </span>\n      </button>\n    </div>\n    <div class=\"w-full md:w-1/2 py-2 mb-3\">\n      @if (property()) {\n        <div class=\"text-xl font-bold py-2 mb-3\" i18n>Property info</div>\n        <div>\n          <rolatech-thumbnail [src]=\"firstImageUrl()\" size=\"small\"></rolatech-thumbnail>\n        </div>\n        <div class=\"text-xl font-bold\">{{ property()!.title }}</div>\n        <div class=\"\">Available: {{ property()!.availableDate | availableDate }}</div>\n        @if (property()!.market.toString() === 'LETTINGS' && property()!.rentFrequency.toString() === 'MONTHLY') {\n          <div class=\"py-3 text-xl font-bold\">{{ property()!.price | price }}pcm</div>\n        } @else {\n          <div class=\"py-3 text-xl font-bold\">{{ property()!.price | price }}</div>\n        }\n      }\n    </div>\n  </div>\n</rolatech-container>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i4$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: ThumbnailComponent, selector: "rolatech-thumbnail", inputs: ["src", "size", "mode", "ratio", "width", "height"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: AvailableDatePipe, name: "availableDate" }, { kind: "pipe", type: PricePipe, name: "price" }] });
+        ], usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  <div class=\"flex flex-col-reverse md:flex-row w-full py-2 mb-3 gap-3\">\n    <div class=\"w-full md:w-2/3\">\n      <div>\n        <div class=\"text-xl font-bold py-2 mb-3\">\n          <!-- <span i18n>Offer for </span><span>{{ property()?.title : '' }}</span> -->\n          <span i18n=\"@@offerFor\">Offer for {{ property()?.title }}</span>\n        </div>\n        <div class=\"flex flex-col md:flex-row gap-2\">\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>First name</mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"offer.firstName\" required />\n          </mat-form-field>\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>Last name</mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"offer.lastName\" required />\n          </mat-form-field>\n        </div>\n        <div class=\"flex flex-col md:flex-row gap-2\">\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>Phone</mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"offer.phone\" required />\n          </mat-form-field>\n        </div>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Email</mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"offer.email\" required />\n        </mat-form-field>\n\n        <mat-form-field appearance=\"fill\" floatLabel=\"always\">\n          <mat-label i18n>Offer price</mat-label>\n          <span matTextPrefix>\u00A3&nbsp;</span>\n          <input matInput type=\"text\" placeholder=\"0.00\" [(ngModel)]=\"offer.price\" required />\n          <!-- <input\n            matInput\n            type=\"number\"\n            placeholder=\"0.00\"\n            [value]=\"formattedAmount\"\n            (input)=\"onAmountChange($event)\"\n            required\n          /> -->\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Tenancy Length</mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"offer.tenancyDuration\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Number Of Tenants</mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"offer.numberOfTenants\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label>Start date</mat-label>\n          <input\n            matInput\n            placeholder=\"Start date\"\n            [matDatepicker]=\"startDatePicker\"\n            [min]=\"minDate\"\n            (focus)=\"startDatePicker.open()\"\n            name=\"startDate\"\n            [(ngModel)]=\"offer.startDate\"\n            (dateInput)=\"offer.startDate = $event.value.format('YYYY-MM-DD')\"\n            readonly\n            required\n          />\n          <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n          <mat-datepicker #startDatePicker></mat-datepicker>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label i18n>Applicant type</mat-label>\n          <mat-select placeholder=\"Applicant type\" [(ngModel)]=\"offer.applicantType\" required>\n            @for (key of applicantTypes; track key) {\n              <mat-option [value]=\"key\">\n                {{ PropertyApplicantType[key] }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <!-- subscriptSizing=\"dynamic\" -->\n        <mat-form-field>\n          <mat-label i18n>Residency status</mat-label>\n          <mat-select placeholder=\"Residency status\" [(ngModel)]=\"offer.residencyStatus\" required>\n            @for (status of residencyStatus | keyvalue; track status) {\n              <mat-option [value]=\"status.key\">\n                {{ status.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label i18n>Employment Status</mat-label>\n          <mat-select placeholder=\"Employment Status\" [(ngModel)]=\"offer.employmentStatus\" required>\n            @for (item of employmentStatus | keyvalue; track item) {\n              <mat-option [value]=\"item.key\">\n                {{ item.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label i18n>AdverseCredit Status</mat-label>\n          <mat-select placeholder=\"AdverseCredit Status\" [(ngModel)]=\"offer.adverseCreditStatus\" required>\n            @for (item of adverseCreditStatus | keyvalue; track item) {\n              <mat-option [value]=\"item.key\">\n                {{ item.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div>\n        <div class=\"text-md py-2\" i18n>Your message(Optional)</div>\n        <mat-form-field appearance=\"fill\">\n          <textarea matInput type=\"text\" [(ngModel)]=\"offer.notes\" cdkTextareaAutosize cdkAutosizeMinRows=\"3\"></textarea>\n        </mat-form-field>\n      </div>\n      <!-- <button mat-flat-button (click)=\"sendRequest()\" i18n>Send request</button> -->\n      <button mat-flat-button (click)=\"sendRequest()\" [disabled]=\"sending\">\n        <span style=\"display: flex; align-items: center\">\n          @if (sending) {\n            <mat-progress-spinner diameter=\"20\" mode=\"indeterminate\" [style.marginRight.px]=\"8\"></mat-progress-spinner>\n          }\n          {{ sending ? 'Requesting...' : 'Send request' }}\n        </span>\n      </button>\n    </div>\n    <div class=\"w-full md:w-1/2 py-2 mb-3\">\n      @if (property()) {\n        <div class=\"text-xl font-bold py-2 mb-3\" i18n>Property info</div>\n        <div>\n          <rolatech-thumbnail [src]=\"firstImageUrl()\" size=\"small\"></rolatech-thumbnail>\n        </div>\n        <div class=\"text-xl font-bold\">{{ property()!.title }}</div>\n        <div class=\"\">Available: {{ property()!.availableDate | availableDate }}</div>\n        @if (property()!.market.toString() === 'LETTINGS' && property()!.rentFrequency.toString() === 'MONTHLY') {\n          <div class=\"py-3 text-xl font-bold\">{{ property()!.price | price }}pcm</div>\n        } @else {\n          <div class=\"py-3 text-xl font-bold\">{{ property()!.price | price }}</div>\n        }\n      }\n    </div>\n  </div>\n</rolatech-container>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i4$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: ThumbnailComponent, selector: "rolatech-thumbnail", inputs: ["src", "size", "mode", "ratio", "width", "height"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: AvailableDatePipe, name: "availableDate" }, { kind: "pipe", type: PricePipe, name: "price" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyOfferComponent, decorators: [{
             type: Component,
@@ -2588,7 +2588,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: "<rolatech-container>\n  <div class=\"flex flex-col-reverse md:flex-row w-full py-2 mb-3 gap-3\">\n    <div class=\"w-full md:w-2/3\">\n      <div>\n        <div class=\"text-xl font-bold py-2 mb-3\">\n          <!-- <span i18n>Offer for </span><span>{{ property()?.title : '' }}</span> -->\n          <span i18n=\"@@offerFor\">Offer for {{ property()?.title }}</span>\n        </div>\n        <div class=\"flex flex-col md:flex-row gap-2\">\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>First name</mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"offer.firstName\" required />\n          </mat-form-field>\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>Last name</mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"offer.lastName\" required />\n          </mat-form-field>\n        </div>\n        <div class=\"flex flex-col md:flex-row gap-2\">\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>Phone</mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"offer.phone\" required />\n          </mat-form-field>\n        </div>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Email</mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"offer.email\" required />\n        </mat-form-field>\n\n        <mat-form-field appearance=\"fill\" floatLabel=\"always\">\n          <mat-label i18n>Asking price</mat-label>\n          <span matTextPrefix>\u00A3&nbsp;</span>\n          <input matInput type=\"text\" placeholder=\"0.00\" [(ngModel)]=\"offer.amount\" required />\n          <!-- <input\n            matInput\n            type=\"number\"\n            placeholder=\"0.00\"\n            [value]=\"formattedAmount\"\n            (input)=\"onAmountChange($event)\"\n            required\n          /> -->\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Tenancy Length</mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"offer.tenancyDuration\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Number Of Tenants</mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"offer.numberOfTenants\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label>Start date</mat-label>\n          <input\n            matInput\n            placeholder=\"Start date\"\n            [matDatepicker]=\"startDatePicker\"\n            [min]=\"minDate\"\n            (focus)=\"startDatePicker.open()\"\n            name=\"startDate\"\n            [(ngModel)]=\"offer.startDate\"\n            (dateInput)=\"offer.startDate = $event.value.format('YYYY-MM-DD')\"\n            readonly\n            required\n          />\n          <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n          <mat-datepicker #startDatePicker></mat-datepicker>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label i18n>Applicant type</mat-label>\n          <mat-select placeholder=\"Applicant type\" [(ngModel)]=\"offer.applicantType\" required>\n            @for (key of applicantTypes; track key) {\n              <mat-option [value]=\"key\">\n                {{ PropertyApplicantType[key] }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <!-- subscriptSizing=\"dynamic\" -->\n        <mat-form-field>\n          <mat-label i18n>Residency status</mat-label>\n          <mat-select placeholder=\"Residency status\" [(ngModel)]=\"offer.residencyStatus\" required>\n            @for (status of residencyStatus | keyvalue; track status) {\n              <mat-option [value]=\"status.key\">\n                {{ status.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label i18n>Employment Status</mat-label>\n          <mat-select placeholder=\"Employment Status\" [(ngModel)]=\"offer.employmentStatus\" required>\n            @for (item of employmentStatus | keyvalue; track item) {\n              <mat-option [value]=\"item.key\">\n                {{ item.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label i18n>AdverseCredit Status</mat-label>\n          <mat-select placeholder=\"AdverseCredit Status\" [(ngModel)]=\"offer.adverseCreditStatus\" required>\n            @for (item of adverseCreditStatus | keyvalue; track item) {\n              <mat-option [value]=\"item.key\">\n                {{ item.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div>\n        <div class=\"text-md py-2\" i18n>Your message(Optional)</div>\n        <mat-form-field appearance=\"fill\">\n          <textarea matInput type=\"text\" [(ngModel)]=\"offer.notes\" cdkTextareaAutosize cdkAutosizeMinRows=\"3\"></textarea>\n        </mat-form-field>\n      </div>\n      <!-- <button mat-flat-button (click)=\"sendRequest()\" i18n>Send request</button> -->\n      <button mat-flat-button (click)=\"sendRequest()\" [disabled]=\"sending\">\n        <span style=\"display: flex; align-items: center\">\n          @if (sending) {\n            <mat-progress-spinner diameter=\"20\" mode=\"indeterminate\" [style.marginRight.px]=\"8\"></mat-progress-spinner>\n          }\n          {{ sending ? 'Requesting...' : 'Send request' }}\n        </span>\n      </button>\n    </div>\n    <div class=\"w-full md:w-1/2 py-2 mb-3\">\n      @if (property()) {\n        <div class=\"text-xl font-bold py-2 mb-3\" i18n>Property info</div>\n        <div>\n          <rolatech-thumbnail [src]=\"firstImageUrl()\" size=\"small\"></rolatech-thumbnail>\n        </div>\n        <div class=\"text-xl font-bold\">{{ property()!.title }}</div>\n        <div class=\"\">Available: {{ property()!.availableDate | availableDate }}</div>\n        @if (property()!.market.toString() === 'LETTINGS' && property()!.rentFrequency.toString() === 'MONTHLY') {\n          <div class=\"py-3 text-xl font-bold\">{{ 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"] }]
+                    ], template: "<rolatech-container>\n  <div class=\"flex flex-col-reverse md:flex-row w-full py-2 mb-3 gap-3\">\n    <div class=\"w-full md:w-2/3\">\n      <div>\n        <div class=\"text-xl font-bold py-2 mb-3\">\n          <!-- <span i18n>Offer for </span><span>{{ property()?.title : '' }}</span> -->\n          <span i18n=\"@@offerFor\">Offer for {{ property()?.title }}</span>\n        </div>\n        <div class=\"flex flex-col md:flex-row gap-2\">\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>First name</mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"offer.firstName\" required />\n          </mat-form-field>\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>Last name</mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"offer.lastName\" required />\n          </mat-form-field>\n        </div>\n        <div class=\"flex flex-col md:flex-row gap-2\">\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>Phone</mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"offer.phone\" required />\n          </mat-form-field>\n        </div>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Email</mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"offer.email\" required />\n        </mat-form-field>\n\n        <mat-form-field appearance=\"fill\" floatLabel=\"always\">\n          <mat-label i18n>Offer price</mat-label>\n          <span matTextPrefix>\u00A3&nbsp;</span>\n          <input matInput type=\"text\" placeholder=\"0.00\" [(ngModel)]=\"offer.price\" required />\n          <!-- <input\n            matInput\n            type=\"number\"\n            placeholder=\"0.00\"\n            [value]=\"formattedAmount\"\n            (input)=\"onAmountChange($event)\"\n            required\n          /> -->\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Tenancy Length</mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"offer.tenancyDuration\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Number Of Tenants</mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"offer.numberOfTenants\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label>Start date</mat-label>\n          <input\n            matInput\n            placeholder=\"Start date\"\n            [matDatepicker]=\"startDatePicker\"\n            [min]=\"minDate\"\n            (focus)=\"startDatePicker.open()\"\n            name=\"startDate\"\n            [(ngModel)]=\"offer.startDate\"\n            (dateInput)=\"offer.startDate = $event.value.format('YYYY-MM-DD')\"\n            readonly\n            required\n          />\n          <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n          <mat-datepicker #startDatePicker></mat-datepicker>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label i18n>Applicant type</mat-label>\n          <mat-select placeholder=\"Applicant type\" [(ngModel)]=\"offer.applicantType\" required>\n            @for (key of applicantTypes; track key) {\n              <mat-option [value]=\"key\">\n                {{ PropertyApplicantType[key] }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <!-- subscriptSizing=\"dynamic\" -->\n        <mat-form-field>\n          <mat-label i18n>Residency status</mat-label>\n          <mat-select placeholder=\"Residency status\" [(ngModel)]=\"offer.residencyStatus\" required>\n            @for (status of residencyStatus | keyvalue; track status) {\n              <mat-option [value]=\"status.key\">\n                {{ status.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label i18n>Employment Status</mat-label>\n          <mat-select placeholder=\"Employment Status\" [(ngModel)]=\"offer.employmentStatus\" required>\n            @for (item of employmentStatus | keyvalue; track item) {\n              <mat-option [value]=\"item.key\">\n                {{ item.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label i18n>AdverseCredit Status</mat-label>\n          <mat-select placeholder=\"AdverseCredit Status\" [(ngModel)]=\"offer.adverseCreditStatus\" required>\n            @for (item of adverseCreditStatus | keyvalue; track item) {\n              <mat-option [value]=\"item.key\">\n                {{ item.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div>\n        <div class=\"text-md py-2\" i18n>Your message(Optional)</div>\n        <mat-form-field appearance=\"fill\">\n          <textarea matInput type=\"text\" [(ngModel)]=\"offer.notes\" cdkTextareaAutosize cdkAutosizeMinRows=\"3\"></textarea>\n        </mat-form-field>\n      </div>\n      <!-- <button mat-flat-button (click)=\"sendRequest()\" i18n>Send request</button> -->\n      <button mat-flat-button (click)=\"sendRequest()\" [disabled]=\"sending\">\n        <span style=\"display: flex; align-items: center\">\n          @if (sending) {\n            <mat-progress-spinner diameter=\"20\" mode=\"indeterminate\" [style.marginRight.px]=\"8\"></mat-progress-spinner>\n          }\n          {{ sending ? 'Requesting...' : 'Send request' }}\n        </span>\n      </button>\n    </div>\n    <div class=\"w-full md:w-1/2 py-2 mb-3\">\n      @if (property()) {\n        <div class=\"text-xl font-bold py-2 mb-3\" i18n>Property info</div>\n        <div>\n          <rolatech-thumbnail [src]=\"firstImageUrl()\" size=\"small\"></rolatech-thumbnail>\n        </div>\n        <div class=\"text-xl font-bold\">{{ property()!.title }}</div>\n        <div class=\"\">Available: {{ property()!.availableDate | availableDate }}</div>\n        @if (property()!.market.toString() === 'LETTINGS' && property()!.rentFrequency.toString() === 'MONTHLY') {\n          <div class=\"py-3 text-xl font-bold\">{{ property()!.price | price }}pcm</div>\n        } @else {\n          <div class=\"py-3 text-xl font-bold\">{{ property()!.price | price }}</div>\n        }\n      }\n    </div>\n  </div>\n</rolatech-container>\n", styles: ["mat-form-field{width:100%}\n"] }]
         }], ctorParameters: () => [] });
 
 class PropertyOfferIndexComponent extends BaseComponent {
@@ -3000,7 +3000,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", usesInheritance: true, ngImport: i0, template: "@if (offer) {\n  <rolatech-container>\n    <rolatech-toolbar [title]=\"status[offer.status]\" large link=\"../\">\n      <button mat-flat-button (click)=\"timeline()\">\n        <mat-icon>history</mat-icon>\n        <span i18n>Offer status</span>\n      </button>\n    </rolatech-toolbar>\n    <div>\n      <div class=\"flex justify-between items-center py-2\">\n        <a class=\"text-xl font-bold\">Offer ID: {{ offer.id }}</a>\n      </div>\n\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Property details</div>\n        <hr class=\"mb-2\" />\n        <div\n          class=\"flex items-center py-2 cursor-pointer hover:bg-[--rt-raised-background]\"\n          [routerLink]=\"['../../', offer.item.propertyId]\"\n        >\n          <div class=\"min-w-24 w-24 object-cover aspect-video rounded-md\">\n            @defer {\n              <rolatech-thumbnail [src]=\"offer.item.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n          <div class=\"flex w-full justify-between\">\n            <div class=\"flex justify-between w-full px-2\">\n              <div class=\"flex flex-col\">\n                <div>{{ offer.item.title }}</div>\n                <div class=\"inline-flex gap-1 mt-2\">\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.bedrooms }}</span>\n                    <span i18n>Bedrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.bathrooms }}</span>\n                    <span i18n>Bathrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.receptions }}</span>\n                    <span i18n>Receptions</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"text-right\">\n                <div class=\"text-sm\">{{ offer.item.amount | price }}</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div>\n        <div class=\"mt-3\">\n          <div class=\"text-lg py-2 font-bold\" i18n>Offer info</div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Created at</span>\n            <span class=\"text-sm\"> {{ offer.createdAt }}</span>\n          </div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Start date</span>\n            <span class=\"text-sm\"> {{ offer.startDate }}</span>\n          </div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Asked price</span>\n            <span class=\"text-sm\" i18n>{{ offer.amount | price }}</span>\n          </div>\n          @if (type() === 'LETTINGS') {\n            @if (property) {\n              <div class=\"flex items-center justify-between py-1\">\n                <span class=\"font-medium\" i18n>Deposit due date</span>\n                <span class=\"text-sm\"> {{ offer.startDate | due }}</span>\n              </div>\n              <div class=\"flex items-center justify-between py-1\">\n                <span class=\"font-medium\" i18n>Holding deposit</span>\n                <span class=\"text-sm\">{{ holdingDeposit | price }}</span>\n              </div>\n              <div class=\"flex items-center justify-between py-1\">\n                <span class=\"font-medium\" i18n>Security deposit</span>\n                <span class=\"text-sm\">{{ securityDeposit | price }}</span>\n              </div>\n            }\n          }\n          <div class=\"flex items-baseline justify-between py-1\">\n            <span class=\"font-medium min-w-20\" i18n>Note</span>\n            <!-- <span class=\"text-sm\">{{ offer.note || '' }}</span> -->\n          </div>\n        </div>\n      </div>\n      <!-- safe area -->\n      <div class=\"pb-16 sm:pb-3\"></div>\n      <div class=\"\">\n        <div class=\"flex items-center justify-end\">\n          @if (offer.status.toString() === 'SUBMITTED') {\n            <span\n              class=\"underline text-sm underline-offset-4 mr-6 cursor-pointer hover:text-[--rt-brand-color]\"\n              (click)=\"cancel()\"\n              i18n\n              >Cancel</span\n            >\n          }\n          <!-- @if (offer.status.toString() === 'ACCEPTED') {\n            <button mat-flat-button class=\"min-h-11\" (click)=\"holdingDepositCheckout()\" [disabled]=\"checkouting\">\n              <span style=\"display: flex; align-items: center\">\n                @if (checkouting) {\n                  <mat-progress-spinner diameter=\"20\" mode=\"indeterminate\" [style.marginRight.px]=\"8\"></mat-progress-spinner>\n                }\n                {{ checkouting ? 'Processing...' : 'Pay holding deposit' }}\n              </span>\n            </button>\n          } -->\n          <!-- @if (offer.status.toString() === 'ACCEPTED') {\n            <button mat-flat-button class=\"min-h-11\" (click)=\"securityDepositCheckout()\" [disabled]=\"checkouting\">\n              <span style=\"display: flex; align-items: center\">\n                @if (checkouting) {\n                  <mat-progress-spinner diameter=\"20\" mode=\"indeterminate\" [style.marginRight.px]=\"8\"></mat-progress-spinner>\n                }\n                {{ checkouting ? 'Processing...' : 'Pay security deposit' }}\n              </span>\n            </button>\n          } -->\n          <!-- <button mat-flat-button class=\"w-32 min-h-11\" (click)=\"securityDepositCheckout()\" i18n>Pay security deposit</button> -->\n        </div>\n      </div>\n    </div>\n  </rolatech-container>\n}\n@if (info) {\n  <div\n    [ngClass]=\"loadingTimeline ? 'translate-x-full' : 'translate-none'\"\n    class=\"fixed top-0 right-0 z-[1001] h-screen p-4 overflow-y-auto transition-transform bg-[--rt-raised-background] w-80 sm:w-[300px] shadow-xl\"\n  >\n    <div class=\"flex justify-between items-center sm:p-4\">\n      <div class=\"text-xl font-bold\" i18n>Status</div>\n      <button mat-icon-button (click)=\"info = !info\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n    @if (loadingTimeline) {\n      <div>\n        <rolatech-spinner></rolatech-spinner>\n      </div>\n    } @else {\n      <div class=\"mt-3 p-1 sm:p-4\">\n        <ol class=\"relative boffer-l boffer-[--rt-boffer-color]\">\n          @for (item of timelineData; track item) {\n            <li class=\"mb-8 ml-4\">\n              <div\n                class=\"absolute w-3 h-3 rounded-full mt-1.5 -left-1.5 boffer boffer-[--rt-raised-background] bg-[--rt-text-primary]\"\n              ></div>\n              <div class=\"text-md font-bold mb-1\">{{ timelineStatus[item.status] }}</div>\n              @if (item.status === 'OFFER_RETURN_REJECTED') {\n                <div class=\"text-sm mb-1\">{{ item.return.note }}</div>\n              }\n              @if (item.status === 'OFFER_RETURN_REQUESTED') {\n                <div class=\"text-sm mb-1\">{{ item.return.reason }}</div>\n              }\n              <div class=\"text-sm text-[--rt-text-secondary]\">{{ item.date }}</div>\n            </li>\n          }\n        </ol>\n      </div>\n    }\n  </div>\n}\n\n<div\n  (click)=\"info = !info\"\n  [ngClass]=\"info ? 'visible' : 'invisible'\"\n  class=\"bg-[--rt-10-percent-layer] fixed inset-0 z-[1000]\"\n></div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SpinnerComponent, selector: "rolatech-spinner", inputs: ["title"] }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: DuePipe, name: "due" }, { kind: "pipe", type: PricePipe, name: "price" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: PropertyOfferDetailComponent, isStandalone: true, selector: "rolatech-property-offer-detail", usesInheritance: true, ngImport: i0, template: "@if (offer) {\n  <rolatech-container>\n    <rolatech-toolbar [title]=\"status[offer.status]\" large link=\"../\">\n      <button mat-flat-button (click)=\"timeline()\">\n        <mat-icon>history</mat-icon>\n        <span i18n>Offer status</span>\n      </button>\n    </rolatech-toolbar>\n    <div>\n      <div class=\"flex justify-between items-center py-2\">\n        <a class=\"text-xl font-bold\">Offer ID: {{ offer.id }}</a>\n      </div>\n\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Property details</div>\n        <hr class=\"mb-2\" />\n        <div\n          class=\"flex items-center py-2 cursor-pointer hover:bg-[--rt-raised-background]\"\n          [routerLink]=\"['../../', offer.item.propertyId]\"\n        >\n          <div class=\"min-w-24 w-24 object-cover aspect-video rounded-md\">\n            @defer {\n              <rolatech-thumbnail [src]=\"offer.item.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n          <div class=\"flex w-full justify-between\">\n            <div class=\"flex justify-between w-full px-2\">\n              <div class=\"flex flex-col\">\n                <div>{{ offer.item.title }}</div>\n                <div class=\"inline-flex gap-1 mt-2\">\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.bedrooms }}</span>\n                    <span i18n>Bedrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.bathrooms }}</span>\n                    <span i18n>Bathrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.receptions }}</span>\n                    <span i18n>Receptions</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"text-right\">\n                <div class=\"text-sm\">{{ offer.item.amount | price }}</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div>\n        <div class=\"mt-3\">\n          <div class=\"text-lg py-2 font-bold\" i18n>Offer info</div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Created at</span>\n            <span class=\"text-sm\"> {{ offer.createdAt }}</span>\n          </div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Start date</span>\n            <span class=\"text-sm\"> {{ offer.startDate }}</span>\n          </div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Offer price</span>\n            <span class=\"text-sm\" i18n>{{ offer.price | price }}</span>\n          </div>\n          @if (type() === 'LETTINGS') {\n            @if (property) {\n              <div class=\"flex items-center justify-between py-1\">\n                <span class=\"font-medium\" i18n>Deposit due date</span>\n                <span class=\"text-sm\"> {{ offer.startDate | due }}</span>\n              </div>\n              <div class=\"flex items-center justify-between py-1\">\n                <span class=\"font-medium\" i18n>Holding deposit</span>\n                <span class=\"text-sm\">{{ holdingDeposit | price }}</span>\n              </div>\n              <div class=\"flex items-center justify-between py-1\">\n                <span class=\"font-medium\" i18n>Security deposit</span>\n                <span class=\"text-sm\">{{ securityDeposit | price }}</span>\n              </div>\n            }\n          }\n          <div class=\"flex items-baseline justify-between py-1\">\n            <span class=\"font-medium min-w-20\" i18n>Note</span>\n            <!-- <span class=\"text-sm\">{{ offer.note || '' }}</span> -->\n          </div>\n        </div>\n      </div>\n      <!-- safe area -->\n      <div class=\"pb-16 sm:pb-3\"></div>\n      <div class=\"\">\n        <div class=\"flex items-center justify-end\">\n          @if (offer.status.toString() === 'SUBMITTED') {\n            <span\n              class=\"underline text-sm underline-offset-4 mr-6 cursor-pointer hover:text-[--rt-brand-color]\"\n              (click)=\"cancel()\"\n              i18n\n              >Cancel</span\n            >\n          }\n          <!-- @if (offer.status.toString() === 'ACCEPTED') {\n            <button mat-flat-button class=\"min-h-11\" (click)=\"holdingDepositCheckout()\" [disabled]=\"checkouting\">\n              <span style=\"display: flex; align-items: center\">\n                @if (checkouting) {\n                  <mat-progress-spinner diameter=\"20\" mode=\"indeterminate\" [style.marginRight.px]=\"8\"></mat-progress-spinner>\n                }\n                {{ checkouting ? 'Processing...' : 'Pay holding deposit' }}\n              </span>\n            </button>\n          } -->\n          <!-- @if (offer.status.toString() === 'ACCEPTED') {\n            <button mat-flat-button class=\"min-h-11\" (click)=\"securityDepositCheckout()\" [disabled]=\"checkouting\">\n              <span style=\"display: flex; align-items: center\">\n                @if (checkouting) {\n                  <mat-progress-spinner diameter=\"20\" mode=\"indeterminate\" [style.marginRight.px]=\"8\"></mat-progress-spinner>\n                }\n                {{ checkouting ? 'Processing...' : 'Pay security deposit' }}\n              </span>\n            </button>\n          } -->\n          <!-- <button mat-flat-button class=\"w-32 min-h-11\" (click)=\"securityDepositCheckout()\" i18n>Pay security deposit</button> -->\n        </div>\n      </div>\n    </div>\n  </rolatech-container>\n}\n@if (info) {\n  <div\n    [ngClass]=\"loadingTimeline ? 'translate-x-full' : 'translate-none'\"\n    class=\"fixed top-0 right-0 z-[1001] h-screen p-4 overflow-y-auto transition-transform bg-[--rt-raised-background] w-80 sm:w-[300px] shadow-xl\"\n  >\n    <div class=\"flex justify-between items-center sm:p-4\">\n      <div class=\"text-xl font-bold\" i18n>Status</div>\n      <button mat-icon-button (click)=\"info = !info\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n    @if (loadingTimeline) {\n      <div>\n        <rolatech-spinner></rolatech-spinner>\n      </div>\n    } @else {\n      <div class=\"mt-3 p-1 sm:p-4\">\n        <ol class=\"relative boffer-l boffer-[--rt-boffer-color]\">\n          @for (item of timelineData; track item) {\n            <li class=\"mb-8 ml-4\">\n              <div\n                class=\"absolute w-3 h-3 rounded-full mt-1.5 -left-1.5 boffer boffer-[--rt-raised-background] bg-[--rt-text-primary]\"\n              ></div>\n              <div class=\"text-md font-bold mb-1\">{{ timelineStatus[item.status] }}</div>\n              @if (item.status === 'OFFER_RETURN_REJECTED') {\n                <div class=\"text-sm mb-1\">{{ item.return.note }}</div>\n              }\n              @if (item.status === 'OFFER_RETURN_REQUESTED') {\n                <div class=\"text-sm mb-1\">{{ item.return.reason }}</div>\n              }\n              <div class=\"text-sm text-[--rt-text-secondary]\">{{ item.date }}</div>\n            </li>\n          }\n        </ol>\n      </div>\n    }\n  </div>\n}\n\n<div\n  (click)=\"info = !info\"\n  [ngClass]=\"info ? 'visible' : 'invisible'\"\n  class=\"bg-[--rt-10-percent-layer] fixed inset-0 z-[1000]\"\n></div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SpinnerComponent, selector: "rolatech-spinner", inputs: ["title"] }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: DuePipe, name: "due" }, { kind: "pipe", type: PricePipe, name: "price" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyOfferDetailComponent, decorators: [{
             type: Component,
@@ -3016,7 +3016,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         RouterLink,
                         DuePipe,
                         PricePipe,
-                    ], template: "@if (offer) {\n  <rolatech-container>\n    <rolatech-toolbar [title]=\"status[offer.status]\" large link=\"../\">\n      <button mat-flat-button (click)=\"timeline()\">\n        <mat-icon>history</mat-icon>\n        <span i18n>Offer status</span>\n      </button>\n    </rolatech-toolbar>\n    <div>\n      <div class=\"flex justify-between items-center py-2\">\n        <a class=\"text-xl font-bold\">Offer ID: {{ offer.id }}</a>\n      </div>\n\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Property details</div>\n        <hr class=\"mb-2\" />\n        <div\n          class=\"flex items-center py-2 cursor-pointer hover:bg-[--rt-raised-background]\"\n          [routerLink]=\"['../../', offer.item.propertyId]\"\n        >\n          <div class=\"min-w-24 w-24 object-cover aspect-video rounded-md\">\n            @defer {\n              <rolatech-thumbnail [src]=\"offer.item.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n          <div class=\"flex w-full justify-between\">\n            <div class=\"flex justify-between w-full px-2\">\n              <div class=\"flex flex-col\">\n                <div>{{ offer.item.title }}</div>\n                <div class=\"inline-flex gap-1 mt-2\">\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.bedrooms }}</span>\n                    <span i18n>Bedrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.bathrooms }}</span>\n                    <span i18n>Bathrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.receptions }}</span>\n                    <span i18n>Receptions</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"text-right\">\n                <div class=\"text-sm\">{{ offer.item.amount | price }}</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div>\n        <div class=\"mt-3\">\n          <div class=\"text-lg py-2 font-bold\" i18n>Offer info</div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Created at</span>\n            <span class=\"text-sm\"> {{ offer.createdAt }}</span>\n          </div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Start date</span>\n            <span class=\"text-sm\"> {{ offer.startDate }}</span>\n          </div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Asked price</span>\n            <span class=\"text-sm\" i18n>{{ offer.amount | price }}</span>\n          </div>\n          @if (type() === 'LETTINGS') {\n            @if (property) {\n              <div class=\"flex items-center justify-between py-1\">\n                <span class=\"font-medium\" i18n>Deposit due date</span>\n                <span class=\"text-sm\"> {{ offer.startDate | due }}</span>\n              </div>\n              <div class=\"flex items-center justify-between py-1\">\n                <span class=\"font-medium\" i18n>Holding deposit</span>\n                <span class=\"text-sm\">{{ holdingDeposit | price }}</span>\n              </div>\n              <div class=\"flex items-center justify-between py-1\">\n                <span class=\"font-medium\" i18n>Security deposit</span>\n                <span class=\"text-sm\">{{ securityDeposit | price }}</span>\n              </div>\n            }\n          }\n          <div class=\"flex items-baseline justify-between py-1\">\n            <span class=\"font-medium min-w-20\" i18n>Note</span>\n            <!-- <span class=\"text-sm\">{{ offer.note || '' }}</span> -->\n          </div>\n        </div>\n      </div>\n      <!-- safe area -->\n      <div class=\"pb-16 sm:pb-3\"></div>\n      <div class=\"\">\n        <div class=\"flex items-center justify-end\">\n          @if (offer.status.toString() === 'SUBMITTED') {\n            <span\n              class=\"underline text-sm underline-offset-4 mr-6 cursor-pointer hover:text-[--rt-brand-color]\"\n              (click)=\"cancel()\"\n              i18n\n              >Cancel</span\n            >\n          }\n          <!-- @if (offer.status.toString() === 'ACCEPTED') {\n            <button mat-flat-button class=\"min-h-11\" (click)=\"holdingDepositCheckout()\" [disabled]=\"checkouting\">\n              <span style=\"display: flex; align-items: center\">\n                @if (checkouting) {\n                  <mat-progress-spinner diameter=\"20\" mode=\"indeterminate\" [style.marginRight.px]=\"8\"></mat-progress-spinner>\n                }\n                {{ checkouting ? 'Processing...' : 'Pay holding deposit' }}\n              </span>\n            </button>\n          } -->\n          <!-- @if (offer.status.toString() === 'ACCEPTED') {\n            <button mat-flat-button class=\"min-h-11\" (click)=\"securityDepositCheckout()\" [disabled]=\"checkouting\">\n              <span style=\"display: flex; align-items: center\">\n                @if (checkouting) {\n                  <mat-progress-spinner diameter=\"20\" mode=\"indeterminate\" [style.marginRight.px]=\"8\"></mat-progress-spinner>\n                }\n                {{ checkouting ? 'Processing...' : 'Pay security deposit' }}\n              </span>\n            </button>\n          } -->\n          <!-- <button mat-flat-button class=\"w-32 min-h-11\" (click)=\"securityDepositCheckout()\" i18n>Pay security deposit</button> -->\n        </div>\n      </div>\n    </div>\n  </rolatech-container>\n}\n@if (info) {\n  <div\n    [ngClass]=\"loadingTimeline ? 'translate-x-full' : 'translate-none'\"\n    class=\"fixed top-0 right-0 z-[1001] h-screen p-4 overflow-y-auto transition-transform bg-[--rt-raised-background] w-80 sm:w-[300px] shadow-xl\"\n  >\n    <div class=\"flex justify-between items-center sm:p-4\">\n      <div class=\"text-xl font-bold\" i18n>Status</div>\n      <button mat-icon-button (click)=\"info = !info\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n    @if (loadingTimeline) {\n      <div>\n        <rolatech-spinner></rolatech-spinner>\n      </div>\n    } @else {\n      <div class=\"mt-3 p-1 sm:p-4\">\n        <ol class=\"relative boffer-l boffer-[--rt-boffer-color]\">\n          @for (item of timelineData; track item) {\n            <li class=\"mb-8 ml-4\">\n              <div\n                class=\"absolute w-3 h-3 rounded-full mt-1.5 -left-1.5 boffer boffer-[--rt-raised-background] bg-[--rt-text-primary]\"\n              ></div>\n              <div class=\"text-md font-bold mb-1\">{{ timelineStatus[item.status] }}</div>\n              @if (item.status === 'OFFER_RETURN_REJECTED') {\n                <div class=\"text-sm mb-1\">{{ item.return.note }}</div>\n              }\n              @if (item.status === 'OFFER_RETURN_REQUESTED') {\n                <div class=\"text-sm mb-1\">{{ item.return.reason }}</div>\n              }\n              <div class=\"text-sm text-[--rt-text-secondary]\">{{ item.date }}</div>\n            </li>\n          }\n        </ol>\n      </div>\n    }\n  </div>\n}\n\n<div\n  (click)=\"info = !info\"\n  [ngClass]=\"info ? 'visible' : 'invisible'\"\n  class=\"bg-[--rt-10-percent-layer] fixed inset-0 z-[1000]\"\n></div>\n" }]
+                    ], template: "@if (offer) {\n  <rolatech-container>\n    <rolatech-toolbar [title]=\"status[offer.status]\" large link=\"../\">\n      <button mat-flat-button (click)=\"timeline()\">\n        <mat-icon>history</mat-icon>\n        <span i18n>Offer status</span>\n      </button>\n    </rolatech-toolbar>\n    <div>\n      <div class=\"flex justify-between items-center py-2\">\n        <a class=\"text-xl font-bold\">Offer ID: {{ offer.id }}</a>\n      </div>\n\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Property details</div>\n        <hr class=\"mb-2\" />\n        <div\n          class=\"flex items-center py-2 cursor-pointer hover:bg-[--rt-raised-background]\"\n          [routerLink]=\"['../../', offer.item.propertyId]\"\n        >\n          <div class=\"min-w-24 w-24 object-cover aspect-video rounded-md\">\n            @defer {\n              <rolatech-thumbnail [src]=\"offer.item.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n          <div class=\"flex w-full justify-between\">\n            <div class=\"flex justify-between w-full px-2\">\n              <div class=\"flex flex-col\">\n                <div>{{ offer.item.title }}</div>\n                <div class=\"inline-flex gap-1 mt-2\">\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.bedrooms }}</span>\n                    <span i18n>Bedrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.bathrooms }}</span>\n                    <span i18n>Bathrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.receptions }}</span>\n                    <span i18n>Receptions</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"text-right\">\n                <div class=\"text-sm\">{{ offer.item.amount | price }}</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div>\n        <div class=\"mt-3\">\n          <div class=\"text-lg py-2 font-bold\" i18n>Offer info</div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Created at</span>\n            <span class=\"text-sm\"> {{ offer.createdAt }}</span>\n          </div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Start date</span>\n            <span class=\"text-sm\"> {{ offer.startDate }}</span>\n          </div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Offer price</span>\n            <span class=\"text-sm\" i18n>{{ offer.price | price }}</span>\n          </div>\n          @if (type() === 'LETTINGS') {\n            @if (property) {\n              <div class=\"flex items-center justify-between py-1\">\n                <span class=\"font-medium\" i18n>Deposit due date</span>\n                <span class=\"text-sm\"> {{ offer.startDate | due }}</span>\n              </div>\n              <div class=\"flex items-center justify-between py-1\">\n                <span class=\"font-medium\" i18n>Holding deposit</span>\n                <span class=\"text-sm\">{{ holdingDeposit | price }}</span>\n              </div>\n              <div class=\"flex items-center justify-between py-1\">\n                <span class=\"font-medium\" i18n>Security deposit</span>\n                <span class=\"text-sm\">{{ securityDeposit | price }}</span>\n              </div>\n            }\n          }\n          <div class=\"flex items-baseline justify-between py-1\">\n            <span class=\"font-medium min-w-20\" i18n>Note</span>\n            <!-- <span class=\"text-sm\">{{ offer.note || '' }}</span> -->\n          </div>\n        </div>\n      </div>\n      <!-- safe area -->\n      <div class=\"pb-16 sm:pb-3\"></div>\n      <div class=\"\">\n        <div class=\"flex items-center justify-end\">\n          @if (offer.status.toString() === 'SUBMITTED') {\n            <span\n              class=\"underline text-sm underline-offset-4 mr-6 cursor-pointer hover:text-[--rt-brand-color]\"\n              (click)=\"cancel()\"\n              i18n\n              >Cancel</span\n            >\n          }\n          <!-- @if (offer.status.toString() === 'ACCEPTED') {\n            <button mat-flat-button class=\"min-h-11\" (click)=\"holdingDepositCheckout()\" [disabled]=\"checkouting\">\n              <span style=\"display: flex; align-items: center\">\n                @if (checkouting) {\n                  <mat-progress-spinner diameter=\"20\" mode=\"indeterminate\" [style.marginRight.px]=\"8\"></mat-progress-spinner>\n                }\n                {{ checkouting ? 'Processing...' : 'Pay holding deposit' }}\n              </span>\n            </button>\n          } -->\n          <!-- @if (offer.status.toString() === 'ACCEPTED') {\n            <button mat-flat-button class=\"min-h-11\" (click)=\"securityDepositCheckout()\" [disabled]=\"checkouting\">\n              <span style=\"display: flex; align-items: center\">\n                @if (checkouting) {\n                  <mat-progress-spinner diameter=\"20\" mode=\"indeterminate\" [style.marginRight.px]=\"8\"></mat-progress-spinner>\n                }\n                {{ checkouting ? 'Processing...' : 'Pay security deposit' }}\n              </span>\n            </button>\n          } -->\n          <!-- <button mat-flat-button class=\"w-32 min-h-11\" (click)=\"securityDepositCheckout()\" i18n>Pay security deposit</button> -->\n        </div>\n      </div>\n    </div>\n  </rolatech-container>\n}\n@if (info) {\n  <div\n    [ngClass]=\"loadingTimeline ? 'translate-x-full' : 'translate-none'\"\n    class=\"fixed top-0 right-0 z-[1001] h-screen p-4 overflow-y-auto transition-transform bg-[--rt-raised-background] w-80 sm:w-[300px] shadow-xl\"\n  >\n    <div class=\"flex justify-between items-center sm:p-4\">\n      <div class=\"text-xl font-bold\" i18n>Status</div>\n      <button mat-icon-button (click)=\"info = !info\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n    @if (loadingTimeline) {\n      <div>\n        <rolatech-spinner></rolatech-spinner>\n      </div>\n    } @else {\n      <div class=\"mt-3 p-1 sm:p-4\">\n        <ol class=\"relative boffer-l boffer-[--rt-boffer-color]\">\n          @for (item of timelineData; track item) {\n            <li class=\"mb-8 ml-4\">\n              <div\n                class=\"absolute w-3 h-3 rounded-full mt-1.5 -left-1.5 boffer boffer-[--rt-raised-background] bg-[--rt-text-primary]\"\n              ></div>\n              <div class=\"text-md font-bold mb-1\">{{ timelineStatus[item.status] }}</div>\n              @if (item.status === 'OFFER_RETURN_REJECTED') {\n                <div class=\"text-sm mb-1\">{{ item.return.note }}</div>\n              }\n              @if (item.status === 'OFFER_RETURN_REQUESTED') {\n                <div class=\"text-sm mb-1\">{{ item.return.reason }}</div>\n              }\n              <div class=\"text-sm text-[--rt-text-secondary]\">{{ item.date }}</div>\n            </li>\n          }\n        </ol>\n      </div>\n    }\n  </div>\n}\n\n<div\n  (click)=\"info = !info\"\n  [ngClass]=\"info ? 'visible' : 'invisible'\"\n  class=\"bg-[--rt-10-percent-layer] fixed inset-0 z-[1000]\"\n></div>\n" }]
         }] });
 
 class PropertyViewingDetailComponent extends BaseComponent {
@@ -3123,7 +3123,7 @@ const propertyRoutes = [
         children: [
             {
                 path: '',
-                loadComponent: () => import('./rolatech-angular-property-property-index.component-CtEaT2mj.mjs').then((x) => x.PropertyIndexComponent),
+                loadComponent: () => import('./rolatech-angular-property-property-index.component-NrUqyPEq.mjs').then((x) => x.PropertyIndexComponent),
             },
         ],
     },
@@ -5036,7 +5036,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-Qt4ZkEML.mjs').then((x) => x.PropertyManageViewingsIndexComponent),
+        loadComponent: () => import('./rolatech-angular-property-property-manage-viewings-index.component-BSp_3pRk.mjs').then((x) => x.PropertyManageViewingsIndexComponent),
     },
     {
         path: ':id',
@@ -5475,10 +5475,10 @@ class LettingManageOfferRequest extends BaseComponent {
     offer = {
         startDate: '',
         notes: '',
-        amount: 0,
+        price: 0,
     };
     get formattedAmount() {
-        return this.offer.amount.toFixed(2); // equivalent to | number:'1.2-2'
+        return this.offer.price.toFixed(2); // equivalent to | number:'1.2-2'
     }
     property;
     minDate = new Date();
@@ -5493,7 +5493,7 @@ class LettingManageOfferRequest extends BaseComponent {
         console.log(inputValue);
         const regex = /^\d*\.?\d{0,2}$/;
         if (regex.test(inputValue)) {
-            this.offer.amount = inputValue;
+            this.offer.price = inputValue;
         }
     }
     getProperty() {
@@ -5537,7 +5537,7 @@ class LettingManageOfferRequest extends BaseComponent {
                 deps: [MAT_DATE_LOCALE],
             },
             { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
-        ], usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  <div class=\"flex flex-col-reverse md:flex-row w-full py-2 mb-3 gap-3\">\n    <div class=\"w-full md:w-2/3\">\n      <div>\n        <div class=\"text-xl font-bold py-2 mb-3\">\n          <!-- <span i18n>Offer for </span><span>{{ property()?.title : '' }}</span> -->\n          @if (property) {\n          <span i18n=\"@@offerFor\">Offer for {{ property.title }}</span>\n\n          }\n        </div>\n        <mat-form-field appearance=\"fill\">\n          <mat-label>Select tenant</mat-label>\n          <mat-select [(ngModel)]=\"offer.tenantId\">\n            @for (item of tenants; track $index) {\n            <mat-option [value]=\"item.id\">\n              <div class=\"flex justify-between items-center\">\n                <span class=\"mr-3\">{{ item.firstName }}, {{item.lastName}}</span>\n                <span>{{item.email}}</span>\n              </div>\n            </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\" floatLabel=\"always\">\n          <mat-label i18n>Asking price</mat-label>\n          <span matTextPrefix>\u00A3&nbsp;</span>\n          <input matInput type=\"text\" placeholder=\"0.00\" [(ngModel)]=\"offer.amount\" required />\n          <!-- <input\n            matInput\n            type=\"number\"\n            placeholder=\"0.00\"\n            [value]=\"formattedAmount\"\n            (input)=\"onAmountChange($event)\"\n            required\n          /> -->\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Tenancy Length</mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"offer.tenancyDuration\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label>Start date</mat-label>\n          <input\n            matInput\n            placeholder=\"Start date\"\n            [matDatepicker]=\"startDatePicker\"\n            [min]=\"minDate\"\n            (focus)=\"startDatePicker.open()\"\n            name=\"startDate\"\n            [(ngModel)]=\"offer.startDate\"\n            (dateInput)=\"offer.startDate = $event.value.format('YYYY-MM-DD')\"\n            readonly\n            required\n          />\n          <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n          <mat-datepicker #startDatePicker></mat-datepicker>\n        </mat-form-field>\n      </div>\n      <div>\n        <div class=\"text-md py-2\" i18n>Your message(Optional)</div>\n        <mat-form-field appearance=\"fill\">\n          <textarea matInput type=\"text\" [(ngModel)]=\"offer.notes\" cdkTextareaAutosize cdkAutosizeMinRows=\"3\"></textarea>\n        </mat-form-field>\n      </div>\n      <!-- <button mat-flat-button (click)=\"sendRequest()\" i18n>Send request</button> -->\n      <button mat-flat-button (click)=\"sendRequest()\" [disabled]=\"sending\">\n        <span style=\"display: flex; align-items: center\">\n          @if (sending) {\n          <mat-progress-spinner diameter=\"20\" mode=\"indeterminate\" [style.marginRight.px]=\"8\"></mat-progress-spinner>\n          } {{ sending ? 'Requesting...' : 'Send request' }}\n        </span>\n      </button>\n    </div>\n    @if (property) {\n    <div class=\"w-full md:w-1/2 py-2 mb-3\">\n      <div class=\"text-xl font-bold py-2 mb-3\" i18n>Property info</div>\n      <div>\n        <rolatech-thumbnail [src]=\"property ? property.media[0].url : ''\" size=\"small\"></rolatech-thumbnail>\n      </div>\n      <rolatech-property-pricing [property]=\"property\"></rolatech-property-pricing>\n    </div>\n    }\n  </div>\n</rolatech-container>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i4$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: ThumbnailComponent, selector: "rolatech-thumbnail", inputs: ["src", "size", "mode", "ratio", "width", "height"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: PropertyPricingComponent, selector: "rolatech-property-pricing", inputs: ["property", "price"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  <div class=\"flex flex-col-reverse md:flex-row w-full py-2 mb-3 gap-3\">\n    <div class=\"w-full md:w-2/3\">\n      <div>\n        <div class=\"text-xl font-bold py-2 mb-3\">\n          <!-- <span i18n>Offer for </span><span>{{ property()?.title : '' }}</span> -->\n          @if (property) {\n          <span i18n=\"@@offerFor\">Offer for {{ property.title }}</span>\n\n          }\n        </div>\n        <mat-form-field appearance=\"fill\">\n          <mat-label>Select tenant</mat-label>\n          <mat-select [(ngModel)]=\"offer.tenantId\">\n            @for (item of tenants; track $index) {\n            <mat-option [value]=\"item.id\">\n              <div class=\"flex justify-between items-center\">\n                <span class=\"mr-3\">{{ item.firstName }}, {{item.lastName}}</span>\n                <span>{{item.email}}</span>\n              </div>\n            </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\" floatLabel=\"always\">\n          <mat-label i18n>Offer price</mat-label>\n          <span matTextPrefix>\u00A3&nbsp;</span>\n          <input matInput type=\"text\" placeholder=\"0.00\" [(ngModel)]=\"offer.price\" required />\n          <!-- <input\n            matInput\n            type=\"number\"\n            placeholder=\"0.00\"\n            [value]=\"formattedAmount\"\n            (input)=\"onAmountChange($event)\"\n            required\n          /> -->\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Tenancy Length</mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"offer.tenancyDuration\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label>Start date</mat-label>\n          <input\n            matInput\n            placeholder=\"Start date\"\n            [matDatepicker]=\"startDatePicker\"\n            [min]=\"minDate\"\n            (focus)=\"startDatePicker.open()\"\n            name=\"startDate\"\n            [(ngModel)]=\"offer.startDate\"\n            (dateInput)=\"offer.startDate = $event.value.format('YYYY-MM-DD')\"\n            readonly\n            required\n          />\n          <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n          <mat-datepicker #startDatePicker></mat-datepicker>\n        </mat-form-field>\n      </div>\n      <div>\n        <div class=\"text-md py-2\" i18n>Your message(Optional)</div>\n        <mat-form-field appearance=\"fill\">\n          <textarea matInput type=\"text\" [(ngModel)]=\"offer.notes\" cdkTextareaAutosize cdkAutosizeMinRows=\"3\"></textarea>\n        </mat-form-field>\n      </div>\n      <!-- <button mat-flat-button (click)=\"sendRequest()\" i18n>Send request</button> -->\n      <button mat-flat-button (click)=\"sendRequest()\" [disabled]=\"sending\">\n        <span style=\"display: flex; align-items: center\">\n          @if (sending) {\n          <mat-progress-spinner diameter=\"20\" mode=\"indeterminate\" [style.marginRight.px]=\"8\"></mat-progress-spinner>\n          } {{ sending ? 'Requesting...' : 'Send request' }}\n        </span>\n      </button>\n    </div>\n    @if (property) {\n    <div class=\"w-full md:w-1/2 py-2 mb-3\">\n      <div class=\"text-xl font-bold py-2 mb-3\" i18n>Property info</div>\n      <div>\n        <rolatech-thumbnail [src]=\"property ? property.media[0].url : ''\" size=\"small\"></rolatech-thumbnail>\n      </div>\n      <rolatech-property-pricing [property]=\"property\"></rolatech-property-pricing>\n    </div>\n    }\n  </div>\n</rolatech-container>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i4$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: ThumbnailComponent, selector: "rolatech-thumbnail", inputs: ["src", "size", "mode", "ratio", "width", "height"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: PropertyPricingComponent, selector: "rolatech-property-pricing", inputs: ["property", "price"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LettingManageOfferRequest, decorators: [{
             type: Component,
@@ -5561,7 +5561,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                             deps: [MAT_DATE_LOCALE],
                         },
                         { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
-                    ], template: "<rolatech-container>\n  <div class=\"flex flex-col-reverse md:flex-row w-full py-2 mb-3 gap-3\">\n    <div class=\"w-full md:w-2/3\">\n      <div>\n        <div class=\"text-xl font-bold py-2 mb-3\">\n          <!-- <span i18n>Offer for </span><span>{{ property()?.title : '' }}</span> -->\n          @if (property) {\n          <span i18n=\"@@offerFor\">Offer for {{ property.title }}</span>\n\n          }\n        </div>\n        <mat-form-field appearance=\"fill\">\n          <mat-label>Select tenant</mat-label>\n          <mat-select [(ngModel)]=\"offer.tenantId\">\n            @for (item of tenants; track $index) {\n            <mat-option [value]=\"item.id\">\n              <div class=\"flex justify-between items-center\">\n                <span class=\"mr-3\">{{ item.firstName }}, {{item.lastName}}</span>\n                <span>{{item.email}}</span>\n              </div>\n            </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\" floatLabel=\"always\">\n          <mat-label i18n>Asking price</mat-label>\n          <span matTextPrefix>\u00A3&nbsp;</span>\n          <input matInput type=\"text\" placeholder=\"0.00\" [(ngModel)]=\"offer.amount\" required />\n          <!-- <input\n            matInput\n            type=\"number\"\n            placeholder=\"0.00\"\n            [value]=\"formattedAmount\"\n            (input)=\"onAmountChange($event)\"\n            required\n          /> -->\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Tenancy Length</mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"offer.tenancyDuration\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label>Start date</mat-label>\n          <input\n            matInput\n            placeholder=\"Start date\"\n            [matDatepicker]=\"startDatePicker\"\n            [min]=\"minDate\"\n            (focus)=\"startDatePicker.open()\"\n            name=\"startDate\"\n            [(ngModel)]=\"offer.startDate\"\n            (dateInput)=\"offer.startDate = $event.value.format('YYYY-MM-DD')\"\n            readonly\n            required\n          />\n          <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n          <mat-datepicker #startDatePicker></mat-datepicker>\n        </mat-form-field>\n      </div>\n      <div>\n        <div class=\"text-md py-2\" i18n>Your message(Optional)</div>\n        <mat-form-field appearance=\"fill\">\n          <textarea matInput type=\"text\" [(ngModel)]=\"offer.notes\" cdkTextareaAutosize cdkAutosizeMinRows=\"3\"></textarea>\n        </mat-form-field>\n      </div>\n      <!-- <button mat-flat-button (click)=\"sendRequest()\" i18n>Send request</button> -->\n      <button mat-flat-button (click)=\"sendRequest()\" [disabled]=\"sending\">\n        <span style=\"display: flex; align-items: center\">\n          @if (sending) {\n          <mat-progress-spinner diameter=\"20\" mode=\"indeterminate\" [style.marginRight.px]=\"8\"></mat-progress-spinner>\n          } {{ sending ? 'Requesting...' : 'Send request' }}\n        </span>\n      </button>\n    </div>\n    @if (property) {\n    <div class=\"w-full md:w-1/2 py-2 mb-3\">\n      <div class=\"text-xl font-bold py-2 mb-3\" i18n>Property info</div>\n      <div>\n        <rolatech-thumbnail [src]=\"property ? property.media[0].url : ''\" size=\"small\"></rolatech-thumbnail>\n      </div>\n      <rolatech-property-pricing [property]=\"property\"></rolatech-property-pricing>\n    </div>\n    }\n  </div>\n</rolatech-container>\n", styles: ["mat-form-field{width:100%}\n"] }]
+                    ], template: "<rolatech-container>\n  <div class=\"flex flex-col-reverse md:flex-row w-full py-2 mb-3 gap-3\">\n    <div class=\"w-full md:w-2/3\">\n      <div>\n        <div class=\"text-xl font-bold py-2 mb-3\">\n          <!-- <span i18n>Offer for </span><span>{{ property()?.title : '' }}</span> -->\n          @if (property) {\n          <span i18n=\"@@offerFor\">Offer for {{ property.title }}</span>\n\n          }\n        </div>\n        <mat-form-field appearance=\"fill\">\n          <mat-label>Select tenant</mat-label>\n          <mat-select [(ngModel)]=\"offer.tenantId\">\n            @for (item of tenants; track $index) {\n            <mat-option [value]=\"item.id\">\n              <div class=\"flex justify-between items-center\">\n                <span class=\"mr-3\">{{ item.firstName }}, {{item.lastName}}</span>\n                <span>{{item.email}}</span>\n              </div>\n            </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\" floatLabel=\"always\">\n          <mat-label i18n>Offer price</mat-label>\n          <span matTextPrefix>\u00A3&nbsp;</span>\n          <input matInput type=\"text\" placeholder=\"0.00\" [(ngModel)]=\"offer.price\" required />\n          <!-- <input\n            matInput\n            type=\"number\"\n            placeholder=\"0.00\"\n            [value]=\"formattedAmount\"\n            (input)=\"onAmountChange($event)\"\n            required\n          /> -->\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Tenancy Length</mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"offer.tenancyDuration\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label>Start date</mat-label>\n          <input\n            matInput\n            placeholder=\"Start date\"\n            [matDatepicker]=\"startDatePicker\"\n            [min]=\"minDate\"\n            (focus)=\"startDatePicker.open()\"\n            name=\"startDate\"\n            [(ngModel)]=\"offer.startDate\"\n            (dateInput)=\"offer.startDate = $event.value.format('YYYY-MM-DD')\"\n            readonly\n            required\n          />\n          <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n          <mat-datepicker #startDatePicker></mat-datepicker>\n        </mat-form-field>\n      </div>\n      <div>\n        <div class=\"text-md py-2\" i18n>Your message(Optional)</div>\n        <mat-form-field appearance=\"fill\">\n          <textarea matInput type=\"text\" [(ngModel)]=\"offer.notes\" cdkTextareaAutosize cdkAutosizeMinRows=\"3\"></textarea>\n        </mat-form-field>\n      </div>\n      <!-- <button mat-flat-button (click)=\"sendRequest()\" i18n>Send request</button> -->\n      <button mat-flat-button (click)=\"sendRequest()\" [disabled]=\"sending\">\n        <span style=\"display: flex; align-items: center\">\n          @if (sending) {\n          <mat-progress-spinner diameter=\"20\" mode=\"indeterminate\" [style.marginRight.px]=\"8\"></mat-progress-spinner>\n          } {{ sending ? 'Requesting...' : 'Send request' }}\n        </span>\n      </button>\n    </div>\n    @if (property) {\n    <div class=\"w-full md:w-1/2 py-2 mb-3\">\n      <div class=\"text-xl font-bold py-2 mb-3\" i18n>Property info</div>\n      <div>\n        <rolatech-thumbnail [src]=\"property ? property.media[0].url : ''\" size=\"small\"></rolatech-thumbnail>\n      </div>\n      <rolatech-property-pricing [property]=\"property\"></rolatech-property-pricing>\n    </div>\n    }\n  </div>\n</rolatech-container>\n", styles: ["mat-form-field{width:100%}\n"] }]
         }] });
 
 const lettingManageRoutes = [
@@ -6217,4 +6217,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-DJVfGqvm.mjs.map
+//# sourceMappingURL=rolatech-angular-property-rolatech-angular-property-Du0qae4S.mjs.map