@rolatech/angular-property 19.0.0-beta.18 → 20.0.0-beta.1

package/fesm2022/rolatech-angular-property-rolatech-angular-property-CO7GI4x7.mjs

@@ -0,0 +1,3467 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, booleanAttribute, effect, HostBinding, ViewEncapsulation, Component, viewChild, PLATFORM_ID, output, computed, model, signal, Pipe, ViewChild } from '@angular/core';
+import * as i1$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i4$2 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatTableModule } from '@angular/material/table';
+import * as i1$4 from '@angular/router';
+import { RouterLink, RouterModule, Router, ActivatedRoute, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { ThumbnailComponent, ImagePlaceholderComponent, ToolbarComponent, SpinnerComponent, ImagePreviewDialogComponent, BaseComponent, AcceptDialogComponent, RejectDialogComponent, RichLabelComponent, AngularComponentsModule, ConfirmationDialogComponent, TabsComponent, TabComponent, EmptyComponent, ContainerComponent, ListComponent, MediaListComponent, MediaListItemComponent } from '@rolatech/angular-components';
+import { PropertyService, FeatureService } from '@rolatech/angular-services';
+import * as i1 from '@angular/common';
+import { CommonModule, NgClass, isPlatformBrowser, ViewportScroller, KeyValuePipe, Location } from '@angular/common';
+import { FixedPipe, AngularCommonModule, OptionsFormatPipe, APP_CONFIG, DecimalDirective } from '@rolatech/angular-common';
+import * as i2 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import { MatDialog } from '@angular/material/dialog';
+import { AuthUserService, AuthService, AuthGuard } from '@rolatech/angular-auth';
+import { GoogleMapsModule } from '@angular/google-maps';
+import * as i1$3 from '@angular/forms';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i2$2 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i1$2 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
+import { startWith, map, defer, forkJoin } from 'rxjs';
+import { ENTER, COMMA } from '@angular/cdk/keycodes';
+import * as i4$1 from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatOptionModule, MAT_DATE_LOCALE, DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
+import _, { findIndex, findLastIndex, first, remove } from 'lodash';
+import * as i2$1 from '@angular/material/divider';
+import { MatDividerModule, MatDivider } from '@angular/material/divider';
+import * as i4 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i5 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i8 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { trigger, state, transition, style, animate } from '@angular/animations';
+import { CommentsComponent } from '@rolatech/angular-comment';
+import { DomSanitizer } from '@angular/platform-browser';
+import * as i4$3 from '@angular/cdk/text-field';
+import { TextFieldModule } from '@angular/cdk/text-field';
+import * as i9 from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
+import { MomentDateAdapter } from '@angular/material-moment-adapter';
+import * as i3 from '@angular/material/progress-spinner';
+import { MatProgressSpinner, MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i8$1 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import * as i1$5 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+
+var PropertyPriceType;
+(function (PropertyPriceType) {
+    PropertyPriceType["FIXED"] = "\u56FA\u5B9A\u4EF7\u683C";
+    PropertyPriceType["PARTIAL"] = "\u652F\u4ED8\u5B9A\u91D1";
+    PropertyPriceType["VARIED"] = "\u591A\u53D8\u7684";
+})(PropertyPriceType || (PropertyPriceType = {}));
+var PropertyVideoTourType;
+(function (PropertyVideoTourType) {
+    PropertyVideoTourType["YOUTUBE"] = "Youtube";
+    PropertyVideoTourType["S3"] = "AWS S3";
+    PropertyVideoTourType["LOCAL"] = "Local server";
+})(PropertyVideoTourType || (PropertyVideoTourType = {}));
+var PropertyStatus;
+(function (PropertyStatus) {
+    PropertyStatus[PropertyStatus["DRAFT"] = 'Draft'] = "DRAFT";
+    PropertyStatus[PropertyStatus["PENDING"] = 'Pending'] = "PENDING";
+    PropertyStatus[PropertyStatus["APPROVED"] = 'Approved'] = "APPROVED";
+    PropertyStatus[PropertyStatus["REJECTED"] = 'Rejected'] = "REJECTED";
+    PropertyStatus[PropertyStatus["AVAILABLE"] = 'Available'] = "AVAILABLE";
+    PropertyStatus[PropertyStatus["SOLD"] = 'Sold'] = "SOLD";
+    PropertyStatus[PropertyStatus["RENTED"] = 'Rented'] = "RENTED";
+    PropertyStatus[PropertyStatus["DELETED"] = 'Deleted'] = "DELETED";
+    PropertyStatus[PropertyStatus["ARCHIVED"] = 'Archived'] = "ARCHIVED";
+})(PropertyStatus || (PropertyStatus = {}));
+var PropertyType;
+(function (PropertyType) {
+    PropertyType["APARTMENT"] = "Apartment";
+    PropertyType["CONDO"] = "Condo";
+    PropertyType["HOUSE"] = "Hourse";
+    PropertyType["TOWNHOUSE"] = "Townhourse";
+    PropertyType["LAND"] = "Land";
+    PropertyType["COMMERCIAL"] = "Commercial";
+    PropertyType["INDUSTRIAL"] = "Industrial";
+    PropertyType["FLAT"] = "Flat";
+    PropertyType["OTHER"] = "Other";
+})(PropertyType || (PropertyType = {}));
+var PropertyInventoryStatus;
+(function (PropertyInventoryStatus) {
+    PropertyInventoryStatus["IN_STOCK"] = "\u6709\u8D27";
+    PropertyInventoryStatus["LOW_STOCK"] = "\u5E93\u5B58\u4E0D\u8DB3";
+    PropertyInventoryStatus["OUT_OF_STOCK"] = "\u552E\u7F44";
+    PropertyInventoryStatus["DISCONTINUED"] = "\u5DF2\u505C\u4EA7";
+})(PropertyInventoryStatus || (PropertyInventoryStatus = {}));
+var PropertyScope;
+(function (PropertyScope) {
+    PropertyScope[PropertyScope["WEB"] = '网站'] = "WEB";
+    PropertyScope[PropertyScope["GLOBAL"] = '全域'] = "GLOBAL";
+})(PropertyScope || (PropertyScope = {}));
+var PropertyViewingStatus;
+(function (PropertyViewingStatus) {
+    PropertyViewingStatus["PENDING"] = "Pending";
+    PropertyViewingStatus["APPROVED"] = "Approved";
+    PropertyViewingStatus["REJECTED"] = "Rejected";
+    PropertyViewingStatus["CANCELLED"] = "Cancelled";
+    PropertyViewingStatus["COMPLETED"] = "Completed";
+})(PropertyViewingStatus || (PropertyViewingStatus = {}));
+var PropertyViewerCategory;
+(function (PropertyViewerCategory) {
+    PropertyViewerCategory["TENANT"] = "Tenant";
+    PropertyViewerCategory["AGENT"] = "Agent";
+})(PropertyViewerCategory || (PropertyViewerCategory = {}));
+var PropertyOfferTimelineStatus;
+(function (PropertyOfferTimelineStatus) {
+    PropertyOfferTimelineStatus["OFFER_CREATED"] = "Offer created";
+    PropertyOfferTimelineStatus["OFFER_ACCEPTED"] = "Offer accepted";
+    PropertyOfferTimelineStatus["OFFER_REJECTED"] = "Offer rejected";
+    PropertyOfferTimelineStatus["OFFER_CLOSED"] = "Offer closed";
+    PropertyOfferTimelineStatus["OFFER_CANCELLED"] = "Offer cancelled";
+    PropertyOfferTimelineStatus["OFFER_HOLDING_DEPOSIT_PAID"] = "Offer holding deposit paid";
+    PropertyOfferTimelineStatus["OFFER_SECURITY_DEPOSIT_PAID"] = "Offer security deposit paid";
+    PropertyOfferTimelineStatus["OFFER_REFUNDED"] = "Offer refunded";
+    PropertyOfferTimelineStatus["OFFER_COMPLETED"] = "Offer completed";
+    PropertyOfferTimelineStatus["OFFER_RETURN_REQUESTED"] = "Offer return requested";
+    PropertyOfferTimelineStatus["OFFER_RETURN_APPROVED"] = "Offer return approved";
+    PropertyOfferTimelineStatus["OFFER_RETURN_REJECTED"] = "Offer return rejected";
+    PropertyOfferTimelineStatus["OFFER_RETURN_PROCESSING"] = "Offer return processing";
+    PropertyOfferTimelineStatus["OFFER_RETURN_REFUNDED"] = "Offer return refunded";
+})(PropertyOfferTimelineStatus || (PropertyOfferTimelineStatus = {}));
+var PropertyOfferType;
+(function (PropertyOfferType) {
+    PropertyOfferType["RENT"] = "Rent";
+    PropertyOfferType["BUY"] = "Buy";
+})(PropertyOfferType || (PropertyOfferType = {}));
+var PropertyOfferStatus;
+(function (PropertyOfferStatus) {
+    PropertyOfferStatus["PENDING"] = "Pending";
+    PropertyOfferStatus["ACCEPTED"] = "Accepted";
+    PropertyOfferStatus["REJECTED"] = "Rejected";
+    PropertyOfferStatus["HOLDING_DEPOSIT_PAID"] = "Holding deposit paid";
+    PropertyOfferStatus["SECURITY_DEPOSIT_PAID"] = "Security deposit paid";
+    PropertyOfferStatus["CANCELLED"] = "Cancelled";
+    PropertyOfferStatus["TENANCY_FINALIZED"] = "Finalized";
+})(PropertyOfferStatus || (PropertyOfferStatus = {}));
+var EmploymentStatus;
+(function (EmploymentStatus) {
+    EmploymentStatus["EMPLOYED"] = "Employed";
+    EmploymentStatus["RETRIED"] = "Retried";
+    EmploymentStatus["SELF_EMPLOYED"] = "Self employed";
+    EmploymentStatus["STUDENT"] = "Student";
+    EmploymentStatus["UNEMPLOYED"] = "UnEmployed";
+})(EmploymentStatus || (EmploymentStatus = {}));
+var ResidencyStatus;
+(function (ResidencyStatus) {
+    ResidencyStatus["UK_CITIZEN"] = "I don't need a visa";
+    ResidencyStatus["VISA_HOLDER"] = "I have a visa";
+    ResidencyStatus["WAITING_FOR_VISA"] = "I am waiting for my visa";
+    ResidencyStatus["NOT_YET_APPLIED_FOR_VISA"] = "I have not yet applied for a visa";
+})(ResidencyStatus || (ResidencyStatus = {}));
+var PropertyApplicantType;
+(function (PropertyApplicantType) {
+    PropertyApplicantType["INDIVIDUAL"] = "Individual";
+    PropertyApplicantType["CORPORATE"] = "Corporate";
+    PropertyApplicantType["STUDENT"] = "Student";
+    PropertyApplicantType["SUBLETTING_COMPANY"] = "Subletting Company";
+})(PropertyApplicantType || (PropertyApplicantType = {}));
+var AdverseCreditStatus;
+(function (AdverseCreditStatus) {
+    AdverseCreditStatus["NONE"] = "None";
+    AdverseCreditStatus["ACTIVE_CCJ"] = "Active CCJ";
+    AdverseCreditStatus["SATISFIED_CCJ"] = "Satisfied CCJ";
+    AdverseCreditStatus["DEBT_MANAGEMENT_PLAN"] = "Debt managment plan";
+    AdverseCreditStatus["LOW_CREDIT_SCORE"] = "Low credit score";
+    AdverseCreditStatus["OTHER"] = "Other";
+})(AdverseCreditStatus || (AdverseCreditStatus = {}));
+const ViewingTime = [
+    '00:00',
+    '00:15',
+    '00:30',
+    '00:45',
+    '01:00',
+    '01:15',
+    '01:30',
+    '01:45',
+    '02:00',
+    '02:15',
+    '02:30',
+    '02:45',
+    '03:00',
+    '03:15',
+    '03:30',
+    '03:45',
+    '04:00',
+    '04:15',
+    '04:30',
+    '04:45',
+    '05:00',
+    '05:15',
+    '05:30',
+    '05:45',
+    '06:00',
+    '06:15',
+    '06:30',
+    '06:45',
+    '07:00',
+    '07:15',
+    '07:30',
+    '07:45',
+    '08:00',
+    '08:15',
+    '08:30',
+    '08:45',
+    '09:00',
+    '09:15',
+    '09:30',
+    '09:45',
+    '10:00',
+    '10:15',
+    '10:30',
+    '10:45',
+    '11:00',
+    '11:15',
+    '11:30',
+    '11:45',
+    '12:00',
+    '12:15',
+    '12:30',
+    '12:45',
+    '13:00',
+    '13:15',
+    '13:30',
+    '13:45',
+    '14:00',
+    '14:15',
+    '14:30',
+    '14:45',
+    '15:00',
+    '15:15',
+    '15:30',
+    '15:45',
+    '16:00',
+    '16:15',
+    '16:30',
+    '16:45',
+    '17:00',
+    '17:15',
+    '17:30',
+    '17:45',
+    '18:00',
+    '18:15',
+    '18:30',
+    '18:45',
+    '19:00',
+    '19:15',
+    '19:30',
+    '19:45',
+    '20:00',
+    '20:15',
+    '20:30',
+    '20:45',
+    '21:00',
+    '21:15',
+    '21:30',
+    '21:45',
+    '22:00',
+    '22:15',
+    '22:30',
+    '22:45',
+    '23:00',
+    '23:15',
+    '23:30',
+    '23:45',
+];
+
+class PropertyManageItemComponent {
+    hasClass = true;
+    el = inject(ElementRef);
+    property = input.required();
+    thumbnail = input();
+    status = PropertyStatus;
+    list = input(false, { transform: booleanAttribute });
+    constructor() {
+        effect(() => {
+            if (this.list()) {
+                this.el.nativeElement.setAttribute('list', '');
+            }
+            else {
+                this.el.nativeElement.removeAttribute('list', '');
+            }
+        });
+    }
+    publish() { }
+    archived() { }
+    delete() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyManageItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: PropertyManageItemComponent, isStandalone: true, selector: "rolatech-property-manage-item", inputs: { property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null }, thumbnail: { classPropertyName: "thumbnail", publicName: "thumbnail", isSignal: true, isRequired: false, transformFunction: null }, list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rolatech-property-manage-item": "this.hasClass" } }, ngImport: i0, template: "<div\n  class=\"flex p-3 bg-[--rt-raised-background] hover:bg-[--rt-raised-background] cursor-pointer rounded-md\"\n  [ngClass]=\"list() ? 'w-full flex-row' : 'flex-col h-full'\"\n>\n  <div>\n    @if (property().media) {\n      <div class=\"object-cover aspect-video rounded-lg\" [ngClass]=\"list() ? 'w-32 mr-3' : ''\">\n        @defer (on viewport()) {\n          <rolatech-thumbnail [src]=\"property().media ? property().media[0].url : ''\" size=\"medium\" mode=\"full\">\n          </rolatech-thumbnail>\n        } @placeholder {\n          <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n        }\n      </div>\n    } @else {\n      <div class=\"object-cover aspect-video rounded-lg\" [ngClass]=\"list() ? 'w-32 mr-3' : ''\">\n        <rolatech-image-placeholder></rolatech-image-placeholder>\n      </div>\n    }\n  </div>\n\n  <div class=\"py-2\">\n    <div class=\"text-lg font-bold\">\n      {{ property().title }}\n    </div>\n  </div>\n  <div class=\"flex-1\"></div>\n  <div class=\"\">\u00A3{{ property().price | fixed }}</div>\n</div>\n", styles: ["rolatech-property-manage-item{--rt-property-view-item-margin: 16px;width:calc(100% / var(--rt-property-view-items-per-row) - var(--rt-property-view-item-margin) - .01px)}rolatech-property-manage-item[list]{--rt-property-view-items-per-row: 1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ImagePlaceholderComponent, selector: "rolatech-image-placeholder" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "pipe", type: FixedPipe, name: "fixed" }], encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [ThumbnailComponent]] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyManageItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-manage-item', imports: [CommonModule, ThumbnailComponent, ImagePlaceholderComponent, MatButtonModule, MatMenuModule, FixedPipe], encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"flex p-3 bg-[--rt-raised-background] hover:bg-[--rt-raised-background] cursor-pointer rounded-md\"\n  [ngClass]=\"list() ? 'w-full flex-row' : 'flex-col h-full'\"\n>\n  <div>\n    @if (property().media) {\n      <div class=\"object-cover aspect-video rounded-lg\" [ngClass]=\"list() ? 'w-32 mr-3' : ''\">\n        @defer (on viewport()) {\n          <rolatech-thumbnail [src]=\"property().media ? property().media[0].url : ''\" size=\"medium\" mode=\"full\">\n          </rolatech-thumbnail>\n        } @placeholder {\n          <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n        }\n      </div>\n    } @else {\n      <div class=\"object-cover aspect-video rounded-lg\" [ngClass]=\"list() ? 'w-32 mr-3' : ''\">\n        <rolatech-image-placeholder></rolatech-image-placeholder>\n      </div>\n    }\n  </div>\n\n  <div class=\"py-2\">\n    <div class=\"text-lg font-bold\">\n      {{ property().title }}\n    </div>\n  </div>\n  <div class=\"flex-1\"></div>\n  <div class=\"\">\u00A3{{ property().price | fixed }}</div>\n</div>\n", styles: ["rolatech-property-manage-item{--rt-property-view-item-margin: 16px;width:calc(100% / var(--rt-property-view-items-per-row) - var(--rt-property-view-item-margin) - .01px)}rolatech-property-manage-item[list]{--rt-property-view-items-per-row: 1}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { hasClass: [{
+                type: HostBinding,
+                args: ['class.rolatech-property-manage-item']
+            }] } });
+
+class PropertyReviewIndexComponent {
+    hasClass = true;
+    paginator = viewChild(MatPaginator);
+    dialog = inject(MatDialog);
+    snackBar = inject(MatSnackBar);
+    propertyService = inject(PropertyService);
+    isLoading = false;
+    isSearch = false;
+    properties = [];
+    ngOnInit() {
+        this.findProperties();
+    }
+    findProperties() {
+        this.propertyService.find({}).subscribe({
+            next: (res) => {
+                this.properties = res.data;
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyReviewIndexComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: PropertyReviewIndexComponent, isStandalone: true, selector: "rolatech-property-review-index", host: { properties: { "class.rolatech-property-manage-index": "this.hasClass" } }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "<rolatech-toolbar title=\"Properties\"> </rolatech-toolbar>\n@if (isLoading) {\n  <div class=\"flex justify-center items-center\">\n    <rolatech-spinner></rolatech-spinner>\n  </div>\n} @else {\n  <div class=\"bg-[--rt-rasised-background] h-full\">\n    <div class=\"flex flex-wrap p-3 gap-3\">\n      @for (item of properties; track $index) {\n        <rolatech-property-manage-item\n          list\n          [property]=\"item\"\n          routerLink=\"./properties/{{ item.id }}\"\n        ></rolatech-property-manage-item>\n      }\n    </div>\n  </div>\n\n  <!-- <mat-paginator\n    #paginator\n    [length]=\"length\"\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"pageEvent = find($event)\"\n    hidePageSize\n    showFirstLastButtons\n  >\n  </mat-paginator> -->\n}\n", styles: ["mat-form-field{width:100%}table{width:100%}td.mat-column-actions{text-align:right;max-width:64px;font-size:.8rem;padding:0 8px}.mat-mdc-header-cell.actions{text-align:right;max-width:64px;width:64px}.mat-mdc-cell:nth-last-child(2),.mat-mdc-header-cell:nth-last-child(2),.mat-mdc-footer-cell:nth-last-child(2){text-align:right;max-width:180px;width:180px}mat-cell:last-of-type,mat-header-cell:last-of-type,mat-footer-cell:last-of-type{text-align:right;padding-right:8px!important}rolatech-property-manage-index{--rt-property-view-items-per-row: 1}@media (min-width: 600px){rolatech-property-manage-index{--rt-property-view-items-per-row: 2}}@media (min-width: 768px){rolatech-property-manage-index{--rt-property-view-items-per-row: 3}}@media (min-width: 1280px){rolatech-property-manage-index{--rt-property-view-items-per-row: 3}}@media (min-width: 1536px){rolatech-property-manage-index{--rt-property-view-items-per-row: 4}}@media (min-width: 1920px){rolatech-property-manage-index{--rt-property-view-items-per-row: 5}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: SpinnerComponent, selector: "rolatech-spinner", inputs: ["title"] }, { kind: "component", type: PropertyManageItemComponent, selector: "rolatech-property-manage-item", inputs: ["property", "thumbnail", "list"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyReviewIndexComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-review-index', imports: [
+                        MatButtonModule,
+                        RouterLink,
+                        MatIconModule,
+                        MatTableModule,
+                        MatMenuModule,
+                        MatPaginatorModule,
+                        ToolbarComponent,
+                        SpinnerComponent,
+                        PropertyManageItemComponent,
+                    ], encapsulation: ViewEncapsulation.None, template: "<rolatech-toolbar title=\"Properties\"> </rolatech-toolbar>\n@if (isLoading) {\n  <div class=\"flex justify-center items-center\">\n    <rolatech-spinner></rolatech-spinner>\n  </div>\n} @else {\n  <div class=\"bg-[--rt-rasised-background] h-full\">\n    <div class=\"flex flex-wrap p-3 gap-3\">\n      @for (item of properties; track $index) {\n        <rolatech-property-manage-item\n          list\n          [property]=\"item\"\n          routerLink=\"./properties/{{ item.id }}\"\n        ></rolatech-property-manage-item>\n      }\n    </div>\n  </div>\n\n  <!-- <mat-paginator\n    #paginator\n    [length]=\"length\"\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"pageEvent = find($event)\"\n    hidePageSize\n    showFirstLastButtons\n  >\n  </mat-paginator> -->\n}\n", styles: ["mat-form-field{width:100%}table{width:100%}td.mat-column-actions{text-align:right;max-width:64px;font-size:.8rem;padding:0 8px}.mat-mdc-header-cell.actions{text-align:right;max-width:64px;width:64px}.mat-mdc-cell:nth-last-child(2),.mat-mdc-header-cell:nth-last-child(2),.mat-mdc-footer-cell:nth-last-child(2){text-align:right;max-width:180px;width:180px}mat-cell:last-of-type,mat-header-cell:last-of-type,mat-footer-cell:last-of-type{text-align:right;padding-right:8px!important}rolatech-property-manage-index{--rt-property-view-items-per-row: 1}@media (min-width: 600px){rolatech-property-manage-index{--rt-property-view-items-per-row: 2}}@media (min-width: 768px){rolatech-property-manage-index{--rt-property-view-items-per-row: 3}}@media (min-width: 1280px){rolatech-property-manage-index{--rt-property-view-items-per-row: 3}}@media (min-width: 1536px){rolatech-property-manage-index{--rt-property-view-items-per-row: 4}}@media (min-width: 1920px){rolatech-property-manage-index{--rt-property-view-items-per-row: 5}}\n"] }]
+        }], propDecorators: { hasClass: [{
+                type: HostBinding,
+                args: ['class.rolatech-property-manage-index']
+            }] } });
+
+class PropertyMediaComponent {
+    dialog = inject(MatDialog);
+    media = input([]);
+    min = input(false);
+    mediaIndex = 0;
+    onImageClick(i) {
+        const dialogRef = this.dialog.open(ImagePreviewDialogComponent, {
+            maxWidth: '80vw',
+            maxHeight: '80vh',
+            height: '80%',
+            width: '80%',
+            panelClass: 'full-screen-modal',
+            data: {
+                media: this.media,
+                selected: i,
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => { });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyMediaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: PropertyMediaComponent, isStandalone: true, selector: "rolatech-property-media", inputs: { media: { classPropertyName: "media", publicName: "media", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div>\n  <div class=\"object-cover aspect-video bg-[--rt-raised-background]\">\n    <rolatech-thumbnail [src]=\"media() ? media()[mediaIndex].url : ''\" size=\"small\"></rolatech-thumbnail>\n  </div>\n  @for (media of media(); track media; let index = $index) {\n    <div\n      class=\"inline-flex flex-row mt-3 mr-3 cursor-pointer rounded-md w-32\"\n      (click)=\"mediaIndex = index\"\n      [ngClass]=\"mediaIndex === index ? '' : 'opacity-30'\"\n    >\n      <rolatech-thumbnail [src]=\"media.url\" size=\"small\"></rolatech-thumbnail>\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThumbnailComponent, selector: "rolatech-thumbnail", inputs: ["src", "size", "mode", "ratio", "width", "height"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyMediaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-media', imports: [NgClass, ThumbnailComponent], encapsulation: ViewEncapsulation.None, template: "<div>\n  <div class=\"object-cover aspect-video bg-[--rt-raised-background]\">\n    <rolatech-thumbnail [src]=\"media() ? media()[mediaIndex].url : ''\" size=\"small\"></rolatech-thumbnail>\n  </div>\n  @for (media of media(); track media; let index = $index) {\n    <div\n      class=\"inline-flex flex-row mt-3 mr-3 cursor-pointer rounded-md w-32\"\n      (click)=\"mediaIndex = index\"\n      [ngClass]=\"mediaIndex === index ? '' : 'opacity-30'\"\n    >\n      <rolatech-thumbnail [src]=\"media.url\" size=\"small\"></rolatech-thumbnail>\n    </div>\n  }\n</div>\n" }]
+        }] });
+
+class PropertyFeaturesComponent {
+    features = input.required();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyFeaturesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: PropertyFeaturesComponent, isStandalone: true, selector: "rolatech-property-features", inputs: { features: { classPropertyName: "features", publicName: "features", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"\">\n  <div class=\"text-2xl font-bold py-3\" i18n>Features</div>\n  <div class=\"flex flex-row flex-wrap items-center font-thin text-sm\">\n    @for (feature of features(); track feature) {\n      <div class=\"flex items-center mr-2\">\n        <mat-icon>check</mat-icon>\n        <span>{{ feature.value.name }}</span>\n      </div>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyFeaturesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-features', imports: [CommonModule, MatIconModule], template: "<div class=\"\">\n  <div class=\"text-2xl font-bold py-3\" i18n>Features</div>\n  <div class=\"flex flex-row flex-wrap items-center font-thin text-sm\">\n    @for (feature of features(); track feature) {\n      <div class=\"flex items-center mr-2\">\n        <mat-icon>check</mat-icon>\n        <span>{{ feature.value.name }}</span>\n      </div>\n    }\n  </div>\n</div>\n" }]
+        }] });
+
+class PropertyLocationComponent {
+    platformId = inject(PLATFORM_ID);
+    location = input.required();
+    mapElementRef = viewChild.required('mapElement');
+    map;
+    autocompleteService;
+    placesService;
+    sessionToken;
+    options = {
+        mapId: '6a8f7b7d56282c69',
+        center: { lat: 51.509865, lng: -0.118092 },
+        zoom: 15,
+    };
+    ngOnInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            google.maps.importLibrary('places').then((res) => {
+                this.map = new google.maps.Map(this.mapElementRef().nativeElement, this.options);
+                this.autocompleteService = new google.maps.places.AutocompleteService();
+                this.placesService = new google.maps.places.PlacesService(document.createElement('div'));
+                this.sessionToken = new google.maps.places.AutocompleteSessionToken();
+                const request = {
+                    input: this.location().postCode,
+                    sessionToken: this.sessionToken,
+                    types: ['geocode'], // Filter to addresses
+                    componentRestrictions: { country: 'gb' },
+                };
+                this.autocompleteService.getPlacePredictions(request, (predictions, status) => {
+                    if (status === google.maps.places.PlacesServiceStatus.OK && predictions && predictions.length > 0) {
+                        const placeId = predictions[0].place_id;
+                        this.getPlaceDetails(placeId);
+                    }
+                });
+            });
+        }
+    }
+    getPlaceDetails(placeId) {
+        this.placesService.getDetails({ placeId }, (place, status) => {
+            if (status === google.maps.places.PlacesServiceStatus.OK) {
+                const location = place.geometry?.location;
+                if (location) {
+                    this.map.setCenter(location);
+                    new google.maps.Marker({
+                        map: this.map,
+                        position: location,
+                    });
+                }
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyLocationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.3", type: PropertyLocationComponent, isStandalone: true, selector: "rolatech-property-location", inputs: { location: { classPropertyName: "location", publicName: "location", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "mapElementRef", first: true, predicate: ["mapElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"\">\n  <div class=\"text-2xl font-bold py-4\" i18n>Location</div>\n  <div class=\"bg-[--rt-raised-background]\">\n    <div class=\"map-container\">\n      <div #mapElement id=\"map\"></div>\n    </div>\n    <!-- <google-map width=\"100%\" #mapRef [options]=\"options\">\n      <map-advanced-marker #marker=\"mapAdvancedMarker\" />\n    </google-map> -->\n  </div>\n</div>\n", styles: [".aspect-ratio-16-9{position:relative;width:100%;padding-bottom:56.25%;height:0}.map-container{position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden}#map{position:absolute;top:0;left:0;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: GoogleMapsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyLocationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-location', imports: [CommonModule, GoogleMapsModule], template: "<div class=\"\">\n  <div class=\"text-2xl font-bold py-4\" i18n>Location</div>\n  <div class=\"bg-[--rt-raised-background]\">\n    <div class=\"map-container\">\n      <div #mapElement id=\"map\"></div>\n    </div>\n    <!-- <google-map width=\"100%\" #mapRef [options]=\"options\">\n      <map-advanced-marker #marker=\"mapAdvancedMarker\" />\n    </google-map> -->\n  </div>\n</div>\n", styles: [".aspect-ratio-16-9{position:relative;width:100%;padding-bottom:56.25%;height:0}.map-container{position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden}#map{position:absolute;top:0;left:0;width:100%;height:100%}\n"] }]
+        }] });
+
+class PropertyReviewDetailComponent extends BaseComponent {
+    propertyService = inject(PropertyService);
+    authUserService = inject(AuthUserService);
+    property;
+    agent;
+    status = PropertyStatus;
+    ngOnInit() {
+        this.getProperty();
+    }
+    getProperty() {
+        this.propertyService.get(this.id).subscribe({
+            next: (res) => {
+                this.property = res.data;
+                this.getAgentPublicInfo(this.property.agentId);
+            },
+        });
+    }
+    getAgentPublicInfo(agentId) {
+        this.authUserService.getPublicUserInfo(agentId).subscribe({
+            next: (res) => {
+                this.agent = res;
+                console.log(this.agent);
+            },
+        });
+    }
+    approve() {
+        const dialogRef = this.dialog.open(AcceptDialogComponent, {
+            width: '400px',
+            data: {
+                title: 'Approve',
+                message: 'Approve this property?',
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.propertyService.reviewApprove(this.id).subscribe({
+                    next: (res) => {
+                        this.property.status = 'ACTIVE';
+                        this.snackBarService.open('Approved');
+                    },
+                    error: (e) => {
+                        this.snackBarService.open(e.message);
+                    },
+                });
+            }
+        });
+    }
+    reject() {
+        const dialogRef = this.dialog.open(RejectDialogComponent, {
+            width: '400px',
+            data: {
+                content: '',
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.propertyService.reviewReject(this.id, result).subscribe({
+                    next: (res) => {
+                        this.snackBarService.open('Rejected');
+                    },
+                    error: (e) => {
+                        this.snackBarService.open(e.message);
+                    },
+                });
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyReviewDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: PropertyReviewDetailComponent, isStandalone: true, selector: "rolatech-property-review-detail", usesInheritance: true, ngImport: i0, template: "@if (property) {\n  <rolatech-toolbar [title]=\"status[property.status]\" large link=\"../../\">\n    <button mat-flat-button (click)=\"approve()\" i18n>Approve</button>\n    <button mat-button (click)=\"reject()\" i18n>Reject</button>\n  </rolatech-toolbar>\n  <div class=\"px-4\">\n    <div>\n      <div class=\"text-lg font-bold py-2\">Property details</div>\n      <hr class=\"mb-2\" />\n      <div class=\"flex items-center py-2\">\n        <div class=\"min-w-16 w-24 object-cover aspect-video rounded-md mr-3\">\n          @defer (on viewport()) {\n            <rolatech-thumbnail [src]=\"property.media[0].url\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n          } @placeholder {\n            <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n          }\n        </div>\n        <div class=\"flex w-full justify-between\">\n          <div class=\"flex justify-between w-full\">\n            <div class=\"flex flex-col\">\n              <div>{{ property.title }}</div>\n              <div class=\"inline-flex gap-1 mt-2\">\n                <div>\n                  <span class=\"mr-1\">{{ property.bedrooms }}</span>\n                  <span i18n>Bedrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ property.bathrooms }}</span>\n                  <span i18n>Bathrooms</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"text-right\">\n              <div class=\"text-sm\">\u00A3{{ property.price | fixed }}</div>\n            </div>\n          </div>\n        </div>\n        <div class=\"hidden md:flex flex-col px-3\"></div>\n      </div>\n      <rolatech-property-media [media]=\"property.media\"></rolatech-property-media>\n      <rolatech-property-features [features]=\"property.features\"></rolatech-property-features>\n      <rolatech-property-location [location]=\"property.location\"></rolatech-property-location>\n    </div>\n    <div class=\"mb-32\">\n      <div class=\"text-lg font-bold py-2\" i18n>Agent</div>\n      <hr class=\"mb-2\" />\n      @if (agent) {\n        <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n          <rolatech-rich-label label=\"Name\" [title]=\"agent.name\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Email\" [title]=\"agent.email\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Phone\" [title]=\"agent.phone\"></rolatech-rich-label>\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: RichLabelComponent, selector: "rolatech-rich-label", inputs: ["label", "title"] }, { kind: "pipe", type: FixedPipe, name: "fixed" }, { kind: "component", type: PropertyMediaComponent, selector: "rolatech-property-media", inputs: ["media", "min"] }, { kind: "component", type: PropertyFeaturesComponent, selector: "rolatech-property-features", inputs: ["features"] }, { kind: "component", type: PropertyLocationComponent, selector: "rolatech-property-location", inputs: ["location"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], deferBlockDependencies: [() => [ThumbnailComponent]] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyReviewDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-review-detail', imports: [
+                        CommonModule,
+                        ToolbarComponent,
+                        ThumbnailComponent,
+                        RichLabelComponent,
+                        FixedPipe,
+                        PropertyMediaComponent,
+                        PropertyFeaturesComponent,
+                        PropertyLocationComponent,
+                        MatButtonModule,
+                    ], template: "@if (property) {\n  <rolatech-toolbar [title]=\"status[property.status]\" large link=\"../../\">\n    <button mat-flat-button (click)=\"approve()\" i18n>Approve</button>\n    <button mat-button (click)=\"reject()\" i18n>Reject</button>\n  </rolatech-toolbar>\n  <div class=\"px-4\">\n    <div>\n      <div class=\"text-lg font-bold py-2\">Property details</div>\n      <hr class=\"mb-2\" />\n      <div class=\"flex items-center py-2\">\n        <div class=\"min-w-16 w-24 object-cover aspect-video rounded-md mr-3\">\n          @defer (on viewport()) {\n            <rolatech-thumbnail [src]=\"property.media[0].url\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n          } @placeholder {\n            <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n          }\n        </div>\n        <div class=\"flex w-full justify-between\">\n          <div class=\"flex justify-between w-full\">\n            <div class=\"flex flex-col\">\n              <div>{{ property.title }}</div>\n              <div class=\"inline-flex gap-1 mt-2\">\n                <div>\n                  <span class=\"mr-1\">{{ property.bedrooms }}</span>\n                  <span i18n>Bedrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ property.bathrooms }}</span>\n                  <span i18n>Bathrooms</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"text-right\">\n              <div class=\"text-sm\">\u00A3{{ property.price | fixed }}</div>\n            </div>\n          </div>\n        </div>\n        <div class=\"hidden md:flex flex-col px-3\"></div>\n      </div>\n      <rolatech-property-media [media]=\"property.media\"></rolatech-property-media>\n      <rolatech-property-features [features]=\"property.features\"></rolatech-property-features>\n      <rolatech-property-location [location]=\"property.location\"></rolatech-property-location>\n    </div>\n    <div class=\"mb-32\">\n      <div class=\"text-lg font-bold py-2\" i18n>Agent</div>\n      <hr class=\"mb-2\" />\n      @if (agent) {\n        <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n          <rolatech-rich-label label=\"Name\" [title]=\"agent.name\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Email\" [title]=\"agent.email\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Phone\" [title]=\"agent.phone\"></rolatech-rich-label>\n        </div>\n      }\n    </div>\n  </div>\n}\n" }]
+        }] });
+
+const propertyReviewRoutes = [
+    {
+        path: '',
+        component: PropertyReviewIndexComponent,
+    },
+    {
+        path: 'properties/:id',
+        component: PropertyReviewDetailComponent,
+    },
+];
+
+class FeatureManageItemComponent {
+    feature = input.required();
+    addOnBlur = true;
+    delete = output();
+    save = output();
+    edit = output();
+    onDelete() {
+        this.delete.emit(this.feature());
+    }
+    onSave() {
+        this.save.emit(this.feature());
+    }
+    onEdit() {
+        this.edit.emit(this.feature());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: FeatureManageItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.3", type: FeatureManageItemComponent, isStandalone: true, selector: "rolatech-feature-manage-item", inputs: { feature: { classPropertyName: "feature", publicName: "feature", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { delete: "delete", save: "save", edit: "edit" }, ngImport: i0, template: "<div class=\"group flex justify-between items-center h-14 hover:bg-[--rt-raised-background] cursor-pointer px-2\">\n  <div class=\"flex\">\n    <div class=\"min-w-[150px] mr-3\">{{ feature().name }}</div>\n    <div class=\"overflow-hidden line-clamp-1\">\n      {{ feature().values! | options }}\n    </div>\n  </div>\n  <div class=\"flex justify-end max-w-24 w-24 invisible group-hover:visible\">\n    <button mat-icon-button (click)=\"onEdit()\">\n      <mat-icon>edit</mat-icon>\n    </button>\n    <button mat-icon-button (click)=\"onDelete()\">\n      <mat-icon>delete</mat-icon>\n    </button>\n  </div>\n</div>\n<mat-divider></mat-divider>\n", styles: ["mat-icon{scale:.9}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "pipe", type: OptionsFormatPipe, name: "options" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: FeatureManageItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-feature-manage-item', imports: [
+                        MatChipsModule,
+                        MatButtonModule,
+                        MatFormFieldModule,
+                        AngularCommonModule,
+                        AngularComponentsModule,
+                        MatIconModule,
+                        OptionsFormatPipe,
+                    ], template: "<div class=\"group flex justify-between items-center h-14 hover:bg-[--rt-raised-background] cursor-pointer px-2\">\n  <div class=\"flex\">\n    <div class=\"min-w-[150px] mr-3\">{{ feature().name }}</div>\n    <div class=\"overflow-hidden line-clamp-1\">\n      {{ feature().values! | options }}\n    </div>\n  </div>\n  <div class=\"flex justify-end max-w-24 w-24 invisible group-hover:visible\">\n    <button mat-icon-button (click)=\"onEdit()\">\n      <mat-icon>edit</mat-icon>\n    </button>\n    <button mat-icon-button (click)=\"onDelete()\">\n      <mat-icon>delete</mat-icon>\n    </button>\n  </div>\n</div>\n<mat-divider></mat-divider>\n", styles: ["mat-icon{scale:.9}\n"] }]
+        }] });
+
+class FeatureManageItemAddComponent {
+    feature = {
+        id: '',
+        name: '',
+        values: [],
+    };
+    addOnBlur = true;
+    separatorKeysCodes = [ENTER, COMMA];
+    cancel = output();
+    save = output();
+    action = true;
+    output = output();
+    onCancel() {
+        this.cancel.emit();
+    }
+    onSave() {
+        this.save.emit(this.feature);
+    }
+    addFeatureValues(event) {
+        const value = (event.value || '').trim();
+        const exists = this.feature.values.some((item) => item.name.toLowerCase() === value.toLowerCase());
+        if (value && !exists) {
+            this.feature.values.push({ id: '', name: value });
+        }
+        event.chipInput.clear();
+    }
+    removeValue(value) {
+        if (value) {
+            const index = this.feature.values.findIndex((item) => item.name === value.name);
+            this.feature.values?.splice(index, 1);
+        }
+    }
+    ngDoCheck() {
+        this.output.emit(this.feature);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: FeatureManageItemAddComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: FeatureManageItemAddComponent, isStandalone: true, selector: "rolatech-feature-manage-item-add", outputs: { cancel: "cancel", save: "save", output: "output" }, ngImport: i0, template: "<div class=\"flex flex-col\">\n  <div class=\"p-1\" i18n>Feature</div>\n  <form>\n    <mat-form-field appearance=\"fill\">\n      <input matInput placeholder=\"Name\" type=\"text\" [(ngModel)]=\"feature.name\" [ngModelOptions]=\"{ standalone: true }\" i18n />\n    </mat-form-field>\n    <mat-form-field>\n      <mat-chip-grid #chipGrid aria-label=\"Enter values\">\n        @for (value of feature.values; track value) {\n          <mat-chip-row\n            (removed)=\"removeValue(value)\"\n            [editable]=\"true\"\n            [aria-description]=\"'press enter to edit ' + value.name\"\n          >\n            {{ value.name }}\n            <button matChipRemove [attr.aria-label]=\"'remove ' + value.name\">\n              <mat-icon>cancel</mat-icon>\n            </button>\n          </mat-chip-row>\n        }\n        <input\n          placeholder=\"Value\"\n          [matChipInputFor]=\"chipGrid\"\n          [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n          [matChipInputAddOnBlur]=\"addOnBlur\"\n          (matChipInputTokenEnd)=\"addFeatureValues($event)\"\n          i18n\n        />\n      </mat-chip-grid>\n    </mat-form-field>\n  </form>\n</div>\n@if (action) {\n  <div class=\"flex items-center justify-end\">\n    <button mat-button (click)=\"onCancel()\" i18n>Cancel</button>\n    <button mat-flat-button (click)=\"onSave()\" i18n>Save</button>\n  </div>\n}\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i1$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i1$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1$2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: FeatureManageItemAddComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-feature-manage-item-add', imports: [MatChipsModule, MatButtonModule, MatFormFieldModule, AngularCommonModule, AngularComponentsModule, MatIconModule], template: "<div class=\"flex flex-col\">\n  <div class=\"p-1\" i18n>Feature</div>\n  <form>\n    <mat-form-field appearance=\"fill\">\n      <input matInput placeholder=\"Name\" type=\"text\" [(ngModel)]=\"feature.name\" [ngModelOptions]=\"{ standalone: true }\" i18n />\n    </mat-form-field>\n    <mat-form-field>\n      <mat-chip-grid #chipGrid aria-label=\"Enter values\">\n        @for (value of feature.values; track value) {\n          <mat-chip-row\n            (removed)=\"removeValue(value)\"\n            [editable]=\"true\"\n            [aria-description]=\"'press enter to edit ' + value.name\"\n          >\n            {{ value.name }}\n            <button matChipRemove [attr.aria-label]=\"'remove ' + value.name\">\n              <mat-icon>cancel</mat-icon>\n            </button>\n          </mat-chip-row>\n        }\n        <input\n          placeholder=\"Value\"\n          [matChipInputFor]=\"chipGrid\"\n          [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n          [matChipInputAddOnBlur]=\"addOnBlur\"\n          (matChipInputTokenEnd)=\"addFeatureValues($event)\"\n          i18n\n        />\n      </mat-chip-grid>\n    </mat-form-field>\n  </form>\n</div>\n@if (action) {\n  <div class=\"flex items-center justify-end\">\n    <button mat-button (click)=\"onCancel()\" i18n>Cancel</button>\n    <button mat-flat-button (click)=\"onSave()\" i18n>Save</button>\n  </div>\n}\n", styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+
+class FeatureManageIndexComponent extends BaseComponent {
+    featureService = inject(FeatureService);
+    features = [];
+    selectedFeatures = [];
+    filteredFeatures;
+    addOnBlur = true;
+    add = false;
+    allowFreeTextAddFeature = false;
+    featureControl = new FormControl();
+    separatorKeysCodes = [ENTER, COMMA];
+    featureInput = viewChild.required('featureInput');
+    matAutocomplete = viewChild('auto');
+    ngOnInit() {
+        this.findFeatures();
+    }
+    findFeatures() {
+        this.featureService.find({}).subscribe({
+            next: (res) => {
+                this.features = res.data || [];
+                this.filteredFeatures = this.featureControl.valueChanges.pipe(startWith(null), map((featureName) => {
+                    return this.filterOnInputChange(featureName);
+                }));
+            },
+        });
+    }
+    saveFeature(feature) {
+        console.log(feature);
+        this.featureService.addFeature(feature).subscribe({
+            next: (res) => {
+                this.features.push(res.data);
+                this.add = false;
+            },
+        });
+    }
+    onUpdateFeature(feature) {
+        const features = {
+            title: 'Edit feature',
+            cancelText: 'Cancel',
+            confirmText: 'Confirm',
+            data: {
+                feature: feature,
+                action: false,
+            },
+            component: FeatureManageItemAddComponent,
+        };
+        this.dialogService.open(features);
+        this.dialogService.confirmed().subscribe({
+            next: (res) => {
+                if (res) {
+                    this.featureService.update(feature.id, res).subscribe({
+                        next: (res) => {
+                            feature.values = res.data.values;
+                        },
+                    });
+                }
+            },
+        });
+    }
+    onDeleteFeature(feature) {
+        const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+            width: '400px',
+            data: {
+                title: 'Delete feature',
+                message: `Confirm delete ${feature.name} ?`,
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.featureService.delete(feature.id).subscribe({
+                    next: (res) => {
+                        const index = this.features.findIndex((item) => item.id === feature.id);
+                        this.features.splice(index, 1);
+                        this.snackBarService.open('Delete successfully');
+                    },
+                });
+            }
+        });
+    }
+    // addFeature(event: MatChipInputEvent) {
+    //   const value = (event.value || '').trim();
+    //   if (value) {
+    //     this.features.push({ id: '', name: value });
+    //   }
+    //   event.chipInput.clear();
+    // }
+    filterOnInputChange(featureName) {
+        const featuresLessSelected = this.features.filter((engineer) => findIndex(this.selectedFeatures, (item) => item.name === engineer.name) < 0);
+        return featureName
+            ? this.filterFeature(featuresLessSelected, featureName)
+            : featuresLessSelected.map((feature) => feature.name);
+    }
+    filterFeature(featureList, featureName) {
+        let filteredFeatureList = [];
+        const filterValue = featureName.toLowerCase();
+        const featuresMatchingFeatureName = featureList.filter((feature) => feature.name.toLowerCase().indexOf(filterValue) === 0);
+        if (featuresMatchingFeatureName.length || this.allowFreeTextAddFeature) {
+            filteredFeatureList = featuresMatchingFeatureName;
+        }
+        else {
+            filteredFeatureList = featureList;
+        }
+        return filteredFeatureList.map((feature) => feature.name);
+    }
+    remove(feature) {
+        const index = findIndex(this.selectedFeatures, (item) => item.name === feature.name);
+        if (index > -1) {
+            this.selectedFeatures.splice(index, 1);
+            this.resetInputs();
+        }
+    }
+    selected(event) {
+        this.selectFeatureByName(event.option.value);
+        this.resetInputs();
+    }
+    selectFeatureByName(featureName) {
+        const foundFeature = this.features.filter((item) => item.name == featureName);
+        this.selectedFeatures.push(foundFeature[0]);
+    }
+    resetInputs() {
+        this.featureInput().nativeElement.value = '';
+        this.featureControl.setValue(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: FeatureManageIndexComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: FeatureManageIndexComponent, isStandalone: true, selector: "rolatech-feature-manage-index", viewQueries: [{ propertyName: "featureInput", first: true, predicate: ["featureInput"], descendants: true, isSignal: true }, { propertyName: "matAutocomplete", first: true, predicate: ["auto"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<rolatech-toolbar title=\"Features\">\n  <div class=\"flex items-center gap-2\">\n    <button mat-flat-button routerLink=\"./create\">\n      <mat-icon>add</mat-icon>\n      <span i18n>Add Feature</span>\n    </button>\n  </div>\n</rolatech-toolbar>\n<div class=\"p-3\">\n  @for (item of features; track $index) {\n    <rolatech-feature-manage-item\n      [feature]=\"item\"\n      (delete)=\"onDeleteFeature($event)\"\n      (edit)=\"onUpdateFeature($event)\"\n    ></rolatech-feature-manage-item>\n  }\n  <div class=\"mt-3\">\n    @if (add) {\n      <rolatech-feature-manage-item-add (save)=\"saveFeature($event)\" (cancel)=\"add = false\"></rolatech-feature-manage-item-add>\n    } @else {\n      <button mat-stroked-button (click)=\"add = true\">\n        <mat-icon>add</mat-icon>\n        <span i18n>Add</span>\n      </button>\n    }\n  </div>\n</div>\n", styles: [".features-chip-list{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: FeatureManageItemComponent, selector: "rolatech-feature-manage-item", inputs: ["feature"], outputs: ["delete", "save", "edit"] }, { kind: "component", type: FeatureManageItemAddComponent, selector: "rolatech-feature-manage-item-add", outputs: ["cancel", "save", "output"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: FeatureManageIndexComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-feature-manage-index', imports: [
+                        MatDividerModule,
+                        FormsModule,
+                        MatFormFieldModule,
+                        MatChipsModule,
+                        MatIconModule,
+                        MatAutocompleteModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        MatOptionModule,
+                        ToolbarComponent,
+                        FeatureManageItemComponent,
+                        FeatureManageItemAddComponent,
+                    ], template: "<rolatech-toolbar title=\"Features\">\n  <div class=\"flex items-center gap-2\">\n    <button mat-flat-button routerLink=\"./create\">\n      <mat-icon>add</mat-icon>\n      <span i18n>Add Feature</span>\n    </button>\n  </div>\n</rolatech-toolbar>\n<div class=\"p-3\">\n  @for (item of features; track $index) {\n    <rolatech-feature-manage-item\n      [feature]=\"item\"\n      (delete)=\"onDeleteFeature($event)\"\n      (edit)=\"onUpdateFeature($event)\"\n    ></rolatech-feature-manage-item>\n  }\n  <div class=\"mt-3\">\n    @if (add) {\n      <rolatech-feature-manage-item-add (save)=\"saveFeature($event)\" (cancel)=\"add = false\"></rolatech-feature-manage-item-add>\n    } @else {\n      <button mat-stroked-button (click)=\"add = true\">\n        <mat-icon>add</mat-icon>\n        <span i18n>Add</span>\n      </button>\n    }\n  </div>\n</div>\n", styles: [".features-chip-list{width:100%}\n"] }]
+        }] });
+
+class FeatureManageDetailComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: FeatureManageDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: FeatureManageDetailComponent, isStandalone: true, selector: "rolatech-feature-manage-detail", ngImport: i0, template: "<p>feature-manage-detail works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: FeatureManageDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-feature-manage-detail', imports: [CommonModule], template: "<p>feature-manage-detail works!</p>\n" }]
+        }] });
+
+const featureManageRoutes = [
+    {
+        path: '',
+        component: FeatureManageIndexComponent,
+    },
+    {
+        path: ':id',
+        component: FeatureManageDetailComponent,
+    },
+];
+
+class PropertyOfferItemComponent {
+    offer = input.required();
+    status = PropertyOfferStatus;
+    total = computed(() => {
+        return (this.offer().amount / 100).toFixed(2);
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyOfferItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: PropertyOfferItemComponent, isStandalone: true, selector: "rolatech-property-offer-item", inputs: { offer: { classPropertyName: "offer", publicName: "offer", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col hover:bg-[--rt-raised-background] cursor-pointer p-3\">\n  <div>\n    <div class=\"flex justify-between w-full mb-2\">\n      <a class=\"flex items-center gap-3\">\n        <span>Offer ID: {{ offer().id }}</span>\n      </a>\n      <span class=\"font-medium text-sm\">{{ status[offer().status] }}</span>\n    </div>\n    <div class=\"flex flex-col overflow-x-scroll scrollbar-hide\">\n      <div class=\"flex flex-row py-2\">\n        @if (offer().property.media) {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            @defer (on viewport()) {\n              <rolatech-thumbnail [src]=\"offer().property.media[0].url\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n        } @else {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            <rolatech-image-placeholder></rolatech-image-placeholder>\n          </div>\n        }\n        <div class=\"flex w-full justify-between\">\n          <div class=\"flex justify-between w-full\">\n            <div class=\"flex flex-col\">\n              <div>{{ offer().property.title }}</div>\n              <div class=\"inline-flex gap-1 mt-2\">\n                <div>\n                  <span class=\"mr-1\">{{ offer().property.bedrooms }}</span>\n                  <span i18n>Bedrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ offer().property.bathrooms }}</span>\n                  <span i18n>Bathrooms</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"text-right\">\n              <div class=\"text-sm\">\u00A3{{ offer().property.price | fixed }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: ImagePlaceholderComponent, selector: "rolatech-image-placeholder" }, { kind: "pipe", type: FixedPipe, name: "fixed" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyOfferItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-offer-item', imports: [MatIconModule, ThumbnailComponent, ImagePlaceholderComponent, FixedPipe], template: "<div class=\"flex flex-col hover:bg-[--rt-raised-background] cursor-pointer p-3\">\n  <div>\n    <div class=\"flex justify-between w-full mb-2\">\n      <a class=\"flex items-center gap-3\">\n        <span>Offer ID: {{ offer().id }}</span>\n      </a>\n      <span class=\"font-medium text-sm\">{{ status[offer().status] }}</span>\n    </div>\n    <div class=\"flex flex-col overflow-x-scroll scrollbar-hide\">\n      <div class=\"flex flex-row py-2\">\n        @if (offer().property.media) {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            @defer (on viewport()) {\n              <rolatech-thumbnail [src]=\"offer().property.media[0].url\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n        } @else {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            <rolatech-image-placeholder></rolatech-image-placeholder>\n          </div>\n        }\n        <div class=\"flex w-full justify-between\">\n          <div class=\"flex justify-between w-full\">\n            <div class=\"flex flex-col\">\n              <div>{{ offer().property.title }}</div>\n              <div class=\"inline-flex gap-1 mt-2\">\n                <div>\n                  <span class=\"mr-1\">{{ offer().property.bedrooms }}</span>\n                  <span i18n>Bedrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ offer().property.bathrooms }}</span>\n                  <span i18n>Bathrooms</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"text-right\">\n              <div class=\"text-sm\">\u00A3{{ offer().property.price | fixed }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+        }] });
+
+class PropertyManageOfferIndexComponent extends BaseComponent {
+    propertyService = inject(PropertyService);
+    select = 0;
+    links = [
+        {
+            name: 'All',
+            icon: 'dashboard',
+        },
+        {
+            name: 'Pending',
+            icon: 'category',
+            status: 'pending',
+        },
+        {
+            name: 'Accepted',
+            icon: 'category',
+            status: 'accepted',
+        },
+        {
+            name: 'Rejected',
+            icon: 'category',
+            status: 'rejected',
+        },
+        {
+            name: 'Cancelled',
+            icon: 'category',
+            status: 'cancelled',
+        },
+    ];
+    filterOptions = {
+        type: '',
+        status: '',
+    };
+    offers = [];
+    ngOnInit() {
+        this.route.queryParams.subscribe(({ status }) => {
+            this.select = this.links.findIndex((item) => item.status === status);
+            if (status) {
+                this.filterOptions.status = status.toUpperCase();
+            }
+            else {
+                delete this.filterOptions.status;
+            }
+            this.findOffers();
+        });
+    }
+    findOffers() {
+        const options = {
+            sort: 'updatedAt desc',
+        };
+        const filterString = this.convertFilterOptions(this.filterOptions);
+        if (filterString) {
+            options['filter'] = filterString;
+        }
+        this.propertyService.findOffersByAgent(options).subscribe({
+            next: (res) => {
+                this.offers = res.data;
+            },
+        });
+    }
+    convertFilterOptions(jsonObj) {
+        return Object.entries(jsonObj)
+            .filter(([key, value]) => value !== '' && value !== undefined)
+            .map(([key, value]) => {
+            return `${key}:${value}`;
+        })
+            .join(',');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyManageOfferIndexComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: PropertyManageOfferIndexComponent, isStandalone: true, selector: "rolatech-property-manage-offer-index", usesInheritance: true, ngImport: i0, template: "<rolatech-toolbar title=\"Offers\">\n  <div class=\"flex items-center gap-2\"></div>\n</rolatech-toolbar>\n<rolatech-tabs [select]=\"select\">\n  @for (item of links; track item) {\n    @if (item.status) {\n      <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n    } @else {\n      <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n    }\n  }\n</rolatech-tabs>\n<div>\n  @if (offers) {\n    @for (item of offers; track $index) {\n      <rolatech-property-offer-item [routerLink]=\"['./', item.id]\" [offer]=\"item\"></rolatech-property-offer-item>\n    }\n  } @else {\n    <rolatech-empty></rolatech-empty>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: TabsComponent, selector: "rolatech-tabs", inputs: ["select", "loading"], outputs: ["selectChange"] }, { kind: "component", type: TabComponent, selector: "rolatech-tab", inputs: ["label"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: PropertyOfferItemComponent, selector: "rolatech-property-offer-item", inputs: ["offer"] }, { kind: "component", type: EmptyComponent, selector: "rolatech-empty" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyManageOfferIndexComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-manage-offer-index', imports: [
+                        CommonModule,
+                        ToolbarComponent,
+                        TabsComponent,
+                        TabComponent,
+                        RouterModule,
+                        PropertyOfferItemComponent,
+                        EmptyComponent,
+                    ], template: "<rolatech-toolbar title=\"Offers\">\n  <div class=\"flex items-center gap-2\"></div>\n</rolatech-toolbar>\n<rolatech-tabs [select]=\"select\">\n  @for (item of links; track item) {\n    @if (item.status) {\n      <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n    } @else {\n      <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n    }\n  }\n</rolatech-tabs>\n<div>\n  @if (offers) {\n    @for (item of offers; track $index) {\n      <rolatech-property-offer-item [routerLink]=\"['./', item.id]\" [offer]=\"item\"></rolatech-property-offer-item>\n    }\n  } @else {\n    <rolatech-empty></rolatech-empty>\n  }\n</div>\n" }]
+        }] });
+
+class PropertyManageOfferDetailComponent extends BaseComponent {
+    propertyService = inject(PropertyService);
+    authUserService = inject(AuthUserService);
+    offer;
+    name = '';
+    property;
+    status = PropertyOfferStatus;
+    employmentStatus = EmploymentStatus;
+    agent;
+    ngOnInit() {
+        this.getOffer();
+    }
+    getOffer() {
+        this.propertyService.getOffer(this.id).subscribe({
+            next: (res) => {
+                this.offer = res.data;
+                this.name = this.offer.firstName + ', ' + this.offer.lastName;
+                this.getProperty(this.offer.propertyId);
+            },
+        });
+    }
+    getProperty(propertyId) {
+        this.propertyService.get(propertyId).subscribe({
+            next: (res) => {
+                this.property = res.data;
+                this.getAgentPublicInfo(this.property.agentId);
+            },
+        });
+    }
+    getAgentPublicInfo(agentId) {
+        this.authUserService.getPublicUserInfo(agentId).subscribe({
+            next: (res) => {
+                this.agent = res;
+                console.log(this.agent);
+            },
+        });
+    }
+    accept() {
+        const dialogRef = this.dialog.open(AcceptDialogComponent, {
+            width: '400px',
+            data: {
+                title: 'Accept offer',
+                message: 'Accept this offer?',
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.propertyService.acceptOffer(this.id).subscribe({
+                    next: (res) => {
+                        this.offer.status = 'ACCEPTED';
+                        this.snackBarService.open('Accepted');
+                    },
+                    error: (e) => {
+                        this.snackBarService.open(e.message);
+                    },
+                });
+            }
+        });
+    }
+    reject() {
+        const dialogRef = this.dialog.open(RejectDialogComponent, {
+            width: '400px',
+            data: {
+                content: '',
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.propertyService.rejectOffer(this.id, { reason: result.content }).subscribe({
+                    next: (res) => {
+                        this.offer.status = 'REJECTED';
+                        this.snackBarService.open('Rejected');
+                    },
+                    error: (e) => {
+                        this.snackBarService.open(e.message);
+                    },
+                });
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyManageOfferDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: PropertyManageOfferDetailComponent, isStandalone: true, selector: "rolatech-property-manage-offer-detail", usesInheritance: true, ngImport: i0, template: "@if (offer) {\n  <rolatech-toolbar [title]=\"status[offer.status]\" large link=\"../\">\n    @if (offer.status.toString() === 'PENDING') {\n      <button mat-flat-button (click)=\"accept()\" i18n>Accept</button>\n      <button mat-button (click)=\"reject()\" i18n>Reject</button>\n    }\n  </rolatech-toolbar>\n  <div class=\"px-4\">\n    <div>\n      <div class=\"text-lg font-bold py-2\">Viewer</div>\n      <hr class=\"mb-2\" />\n      <div class=\"flex flex-col md:flex-row gap-1 md:gap-4\">\n        <rolatech-rich-label label=\"Name\" [title]=\"name\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Email\" [title]=\"offer.email\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Phone\" [title]=\"offer.phone\"></rolatech-rich-label>\n      </div>\n    </div>\n    <div>\n      <div class=\"text-lg font-bold py-2\">Qualification</div>\n      <hr class=\"mb-2\" />\n      <div class=\"flex flex-col md:flex-row gap-1 md:gap-4\">\n        <rolatech-rich-label label=\"Move-in date\" [title]=\"offer.startDate\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Tenancy duration\" [title]=\"offer.tenancyDuration\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Number of tenants\" [title]=\"offer.numberOfTenants\"></rolatech-rich-label>\n      </div>\n      <div class=\"flex flex-col md:flex-row gap-1 md:gap-4\">\n        <rolatech-rich-label label=\"Employment status\" [title]=\"employmentStatus[offer.employmentStatus]\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Employer\" [title]=\"offer.startDate\"></rolatech-rich-label>\n        @if (offer.income) {\n          <rolatech-rich-label label=\"Annual income\" [title]=\"offer.income\"></rolatech-rich-label>\n        }\n      </div>\n    </div>\n    <div>\n      <div class=\"text-lg font-bold py-2\">Property details</div>\n      <hr class=\"mb-2\" />\n      <div class=\"flex items-center py-2\">\n        <div class=\"min-w-16 w-24 object-cover aspect-video rounded-md mr-3\">\n          @defer (on viewport()) {\n            <rolatech-thumbnail [src]=\"offer.item.media[0].url\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n          } @placeholder {\n            <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n          }\n        </div>\n        <div class=\"flex w-full justify-between\">\n          <div class=\"flex justify-between w-full\">\n            <div class=\"flex flex-col\">\n              <div>{{ offer.item.propertyTitle }}</div>\n              <div class=\"inline-flex gap-1 mt-2\">\n                <div>\n                  <span class=\"mr-1\">{{ offer.item.bedrooms }}</span>\n                  <span i18n>Bedrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ offer.item.bathrooms }}</span>\n                  <span i18n>Bathrooms</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"text-right\">\n              <div class=\"text-sm\">\u00A3{{ offer.item.price | fixed }}</div>\n            </div>\n          </div>\n        </div>\n        <div class=\"hidden md:flex flex-col px-3\"></div>\n      </div>\n    </div>\n\n    <div>\n      <div class=\"text-lg font-bold py-2\">Viewing agent</div>\n      <hr class=\"mb-2\" />\n      @if (agent) {\n        <div>\n          <rolatech-rich-label label=\"Move-in date\" [title]=\"offer.startDate\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Tenancy duration\" [title]=\"offer.tenancyDuration\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Phone\" [title]=\"agent.phone\"></rolatech-rich-label>\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: RichLabelComponent, selector: "rolatech-rich-label", inputs: ["label", "title"] }, { kind: "pipe", type: FixedPipe, name: "fixed" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], deferBlockDependencies: [() => [ThumbnailComponent]] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyManageOfferDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-manage-offer-detail', imports: [CommonModule, ToolbarComponent, RichLabelComponent, ThumbnailComponent, FixedPipe, MatButtonModule], template: "@if (offer) {\n  <rolatech-toolbar [title]=\"status[offer.status]\" large link=\"../\">\n    @if (offer.status.toString() === 'PENDING') {\n      <button mat-flat-button (click)=\"accept()\" i18n>Accept</button>\n      <button mat-button (click)=\"reject()\" i18n>Reject</button>\n    }\n  </rolatech-toolbar>\n  <div class=\"px-4\">\n    <div>\n      <div class=\"text-lg font-bold py-2\">Viewer</div>\n      <hr class=\"mb-2\" />\n      <div class=\"flex flex-col md:flex-row gap-1 md:gap-4\">\n        <rolatech-rich-label label=\"Name\" [title]=\"name\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Email\" [title]=\"offer.email\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Phone\" [title]=\"offer.phone\"></rolatech-rich-label>\n      </div>\n    </div>\n    <div>\n      <div class=\"text-lg font-bold py-2\">Qualification</div>\n      <hr class=\"mb-2\" />\n      <div class=\"flex flex-col md:flex-row gap-1 md:gap-4\">\n        <rolatech-rich-label label=\"Move-in date\" [title]=\"offer.startDate\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Tenancy duration\" [title]=\"offer.tenancyDuration\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Number of tenants\" [title]=\"offer.numberOfTenants\"></rolatech-rich-label>\n      </div>\n      <div class=\"flex flex-col md:flex-row gap-1 md:gap-4\">\n        <rolatech-rich-label label=\"Employment status\" [title]=\"employmentStatus[offer.employmentStatus]\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Employer\" [title]=\"offer.startDate\"></rolatech-rich-label>\n        @if (offer.income) {\n          <rolatech-rich-label label=\"Annual income\" [title]=\"offer.income\"></rolatech-rich-label>\n        }\n      </div>\n    </div>\n    <div>\n      <div class=\"text-lg font-bold py-2\">Property details</div>\n      <hr class=\"mb-2\" />\n      <div class=\"flex items-center py-2\">\n        <div class=\"min-w-16 w-24 object-cover aspect-video rounded-md mr-3\">\n          @defer (on viewport()) {\n            <rolatech-thumbnail [src]=\"offer.item.media[0].url\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n          } @placeholder {\n            <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n          }\n        </div>\n        <div class=\"flex w-full justify-between\">\n          <div class=\"flex justify-between w-full\">\n            <div class=\"flex flex-col\">\n              <div>{{ offer.item.propertyTitle }}</div>\n              <div class=\"inline-flex gap-1 mt-2\">\n                <div>\n                  <span class=\"mr-1\">{{ offer.item.bedrooms }}</span>\n                  <span i18n>Bedrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ offer.item.bathrooms }}</span>\n                  <span i18n>Bathrooms</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"text-right\">\n              <div class=\"text-sm\">\u00A3{{ offer.item.price | fixed }}</div>\n            </div>\n          </div>\n        </div>\n        <div class=\"hidden md:flex flex-col px-3\"></div>\n      </div>\n    </div>\n\n    <div>\n      <div class=\"text-lg font-bold py-2\">Viewing agent</div>\n      <hr class=\"mb-2\" />\n      @if (agent) {\n        <div>\n          <rolatech-rich-label label=\"Move-in date\" [title]=\"offer.startDate\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Tenancy duration\" [title]=\"offer.tenancyDuration\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Phone\" [title]=\"agent.phone\"></rolatech-rich-label>\n        </div>\n      }\n    </div>\n  </div>\n}\n" }]
+        }] });
+
+const propertyManageOffersRoutes = [
+    {
+        path: '',
+        component: PropertyManageOfferIndexComponent,
+    },
+    {
+        path: ':id',
+        component: PropertyManageOfferDetailComponent,
+    },
+];
+
+class PropertyFilterComponent {
+    towns = ['London'];
+    filter = model(false);
+    minDate = new Date();
+    propertyFilterIconComponent = defer(() => import('./rolatech-angular-property-property-filter-icon.component-DbzGJdxV.mjs').then((m) => m.PropertyFilterIconComponent));
+    searchOptions = {
+        town: '',
+        startDate: '',
+        endDate: '',
+    };
+    reset() { }
+    search() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: PropertyFilterComponent, isStandalone: true, selector: "rolatech-property-filter", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filter: "filterChange" }, ngImport: i0, template: "<!-- <div class=\"p-3\">\n  <div class=\"bg-white p-3 flex items-center justify-between rounded-md\">\n    <div class=\"flex items-center\">\n      <mat-form-field subscriptSizing=\"dynamic\">\n        <mat-select #select=\"matSelect\" placeholder=\"Town\" i18n-placeholder [(ngModel)]=\"searchOptions.town\">\n          @for (Town of towns; track Town) {\n            <mat-option [value]=\"Town\">\n              {{ Town }}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div class=\"flex gap-3\">\n      <a mat-stroked-button class=\"w-[128px]\" (click)=\"reset()\" i18n>Reset</a>\n      <ng-container *ngComponentOutlet=\"propertyFilterIconComponent | async\"></ng-container>\n      <a mat-flat-button class=\"w-full\" (click)=\"search()\" i18n>Search</a>\n    </div>\n  </div>\n</div> -->\n<div\n  [ngClass]=\"filter() ? 'transition-height duration-500 ease-in-out' : 'md:h-14 h-0 transition-height duration-500 ease-in-out'\"\n>\n  <div\n    class=\"min-w-[256px] md:min-w-[320px] h-full m-3 flex flex-row md:flex-col md:h-full items-center md:items-start shadow-inner shadow-light-400 md:shadow-none overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n  >\n    <div class=\"w-full h-full\">\n      <div class=\"flex flex-col md:flex-row h-in justify-center items-center gap-3\">\n        <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n          <mat-select #select=\"matSelect\" placeholder=\"Town\" [(ngModel)]=\"searchOptions.city\">\n            @for (town of towns; track town) {\n              <mat-option [value]=\"town\">\n                {{ town }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n          <input\n            matInput\n            placeholder=\"Available\"\n            [matDatepicker]=\"startDatePicker\"\n            [min]=\"minDate\"\n            (focus)=\"startDatePicker.open()\"\n            name=\"available\"\n            [(ngModel)]=\"searchOptions.available\"\n            (dateInput)=\"searchOptions.available = $event.value.format('YYYY-MM-DD')\"\n            readonly\n          />\n          <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n          <mat-datepicker #startDatePicker></mat-datepicker>\n        </mat-form-field>\n        <div class=\"flex w-full gap-3\">\n          <a mat-stroked-button class=\"w-[128px]\" (click)=\"reset()\">Reset</a>\n          <ng-container *ngComponentOutlet=\"propertyFilterIconComponent | async\"></ng-container>\n          <a mat-flat-button class=\"w-full\" (click)=\"search()\">Search</a>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i8.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i8.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], animations: [
+            trigger('filter', [
+                state('collapsed', style({ height: '0px', minHeight: '0' })),
+                state('expanded', style({ height: '*' })),
+                transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+            ]),
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-filter', imports: [
+                        CommonModule,
+                        MatButtonModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatOptionModule,
+                        FormsModule,
+                        MatDatepickerModule,
+                    ], animations: [
+                        trigger('filter', [
+                            state('collapsed', style({ height: '0px', minHeight: '0' })),
+                            state('expanded', style({ height: '*' })),
+                            transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+                        ]),
+                    ], template: "<!-- <div class=\"p-3\">\n  <div class=\"bg-white p-3 flex items-center justify-between rounded-md\">\n    <div class=\"flex items-center\">\n      <mat-form-field subscriptSizing=\"dynamic\">\n        <mat-select #select=\"matSelect\" placeholder=\"Town\" i18n-placeholder [(ngModel)]=\"searchOptions.town\">\n          @for (Town of towns; track Town) {\n            <mat-option [value]=\"Town\">\n              {{ Town }}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div class=\"flex gap-3\">\n      <a mat-stroked-button class=\"w-[128px]\" (click)=\"reset()\" i18n>Reset</a>\n      <ng-container *ngComponentOutlet=\"propertyFilterIconComponent | async\"></ng-container>\n      <a mat-flat-button class=\"w-full\" (click)=\"search()\" i18n>Search</a>\n    </div>\n  </div>\n</div> -->\n<div\n  [ngClass]=\"filter() ? 'transition-height duration-500 ease-in-out' : 'md:h-14 h-0 transition-height duration-500 ease-in-out'\"\n>\n  <div\n    class=\"min-w-[256px] md:min-w-[320px] h-full m-3 flex flex-row md:flex-col md:h-full items-center md:items-start shadow-inner shadow-light-400 md:shadow-none overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n  >\n    <div class=\"w-full h-full\">\n      <div class=\"flex flex-col md:flex-row h-in justify-center items-center gap-3\">\n        <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n          <mat-select #select=\"matSelect\" placeholder=\"Town\" [(ngModel)]=\"searchOptions.city\">\n            @for (town of towns; track town) {\n              <mat-option [value]=\"town\">\n                {{ town }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n          <input\n            matInput\n            placeholder=\"Available\"\n            [matDatepicker]=\"startDatePicker\"\n            [min]=\"minDate\"\n            (focus)=\"startDatePicker.open()\"\n            name=\"available\"\n            [(ngModel)]=\"searchOptions.available\"\n            (dateInput)=\"searchOptions.available = $event.value.format('YYYY-MM-DD')\"\n            readonly\n          />\n          <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n          <mat-datepicker #startDatePicker></mat-datepicker>\n        </mat-form-field>\n        <div class=\"flex w-full gap-3\">\n          <a mat-stroked-button class=\"w-[128px]\" (click)=\"reset()\">Reset</a>\n          <ng-container *ngComponentOutlet=\"propertyFilterIconComponent | async\"></ng-container>\n          <a mat-flat-button class=\"w-full\" (click)=\"search()\">Search</a>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+
+class PropertyLayoutComponent extends BaseComponent {
+    propertyService = inject(PropertyService);
+    selectIndex = 0;
+    filter = false;
+    ngOnInit() {
+        this.findCategories();
+    }
+    findCategories() {
+        // this.categoryService.find({}, false).subscribe({
+        //   next: (res: any) => {
+        //     this.categories = res.data;
+        //   },
+        // });
+    }
+    loadPropertyByCategoryIndex(index) {
+        // this.selectIndex = index;
+        // const id = this.categories[index].id;
+        // if (index === 0) {
+        //   this.router.navigate([`./`]);
+        //   // this.propertyService.find({}).subscribe({
+        //   //   next: res => {
+        //   //   }
+        //   // })
+        // } else {
+        //   this.router.navigate([`../categories/${id}`], {
+        //     relativeTo: this.route,
+        //   });
+        // }
+    }
+    nextCategory() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyLayoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: PropertyLayoutComponent, isStandalone: true, selector: "rolatech-property-layout", usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  <div class=\"flex flex-col min-w-[320px] max-w-[1280px] m-auto\">\n    <rolatech-property-filter [(filter)]=\"filter\"></rolatech-property-filter>\n    <div class=\"flex justify-between items-center\">\n      <div class=\"p-3 text-2xl font-medium\" i18n>Properties</div>\n      <button mat-button class=\"md:invisible\" (click)=\"filter = !filter\">\n        <mat-icon>tune</mat-icon>\n        <span>Filter</span>\n      </button>\n    </div>\n    <div class=\"w-full\">\n      <router-outlet></router-outlet>\n    </div>\n  </div>\n</rolatech-container>\n", styles: [".property-layout-active{border-radius:var(--rt-rounded-base, 8px);background-color:var(-rt-base-background, #fff);color:var(--rt-brand-color, #000)}@media (max-width: 768px){.property-layout-active{background-color:var(--rt-text-primary, #000);color:var(--rt-text-primary-inverse, #000)}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1$4.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i1$1.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: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: PropertyFilterComponent, selector: "rolatech-property-filter", inputs: ["filter"], outputs: ["filterChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-layout', imports: [AngularCommonModule, AngularComponentsModule, ContainerComponent, PropertyFilterComponent], template: "<rolatech-container>\n  <div class=\"flex flex-col min-w-[320px] max-w-[1280px] m-auto\">\n    <rolatech-property-filter [(filter)]=\"filter\"></rolatech-property-filter>\n    <div class=\"flex justify-between items-center\">\n      <div class=\"p-3 text-2xl font-medium\" i18n>Properties</div>\n      <button mat-button class=\"md:invisible\" (click)=\"filter = !filter\">\n        <mat-icon>tune</mat-icon>\n        <span>Filter</span>\n      </button>\n    </div>\n    <div class=\"w-full\">\n      <router-outlet></router-outlet>\n    </div>\n  </div>\n</rolatech-container>\n", styles: [".property-layout-active{border-radius:var(--rt-rounded-base, 8px);background-color:var(-rt-base-background, #fff);color:var(--rt-brand-color, #000)}@media (max-width: 768px){.property-layout-active{background-color:var(--rt-text-primary, #000);color:var(--rt-text-primary-inverse, #000)}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"] }]
+        }] });
+
+class PropertyActionsComponent {
+    property = input.required();
+    requestViewing = output();
+    offer = output();
+    deposit = output();
+    displayDeposit = computed(() => {
+        return (this.property().deposit / 100).toFixed(2);
+    });
+    onRequestViewing(property) {
+        this.requestViewing.emit(property);
+    }
+    onOffer(property) {
+        this.offer.emit(property);
+    }
+    onDeposit(property) {
+        this.deposit.emit(property);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: PropertyActionsComponent, isStandalone: true, selector: "rolatech-property-actions", inputs: { property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { requestViewing: "requestViewing", offer: "offer", deposit: "deposit" }, ngImport: i0, template: "<div class=\"flex flex-col gap-3\">\n  <a mat-stroked-button class=\"\" (click)=\"onRequestViewing(property())\" i18n>Request viewing</a>\n  @if (property().priceType && property().priceType.toString() === 'PARTIAL') {\n    <a mat-flat-button class=\"\" (click)=\"onDeposit(property())\" i18n>Pay deposit \u00A3{{ displayDeposit() }}</a>\n  } @else {\n    <a mat-flat-button class=\"\" (click)=\"onOffer(property())\" i18n>Make an offer</a>\n  }\n  <ng-content select=\"rolatech-property-action-contact\"></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatMenuModule }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-actions', imports: [CommonModule, MatButtonModule, MatIconModule, MatMenuModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"flex flex-col gap-3\">\n  <a mat-stroked-button class=\"\" (click)=\"onRequestViewing(property())\" i18n>Request viewing</a>\n  @if (property().priceType && property().priceType.toString() === 'PARTIAL') {\n    <a mat-flat-button class=\"\" (click)=\"onDeposit(property())\" i18n>Pay deposit \u00A3{{ displayDeposit() }}</a>\n  } @else {\n    <a mat-flat-button class=\"\" (click)=\"onOffer(property())\" i18n>Make an offer</a>\n  }\n  <ng-content select=\"rolatech-property-action-contact\"></ng-content>\n</div>\n" }]
+        }] });
+
+class PropertyItemComponent {
+    property = input.required();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: PropertyItemComponent, isStandalone: true, selector: "rolatech-property-item", inputs: { property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col hover:bg-[--rt-raised-background] cursor-pointer p-3\">\n  <div>\n    <div class=\"flex justify-between w-full mb-2\">\n      <a class=\"flex items-center gap-3\">\n        <span>ID: {{ property().id }}</span>\n      </a>\n    </div>\n    <div class=\"flex flex-col overflow-x-scroll scrollbar-hide\">\n      <div class=\"flex flex-row py-2\">\n        @if (property().media) {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            @defer (on viewport()) {\n              <rolatech-thumbnail [src]=\"property().media[0].url\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n        } @else {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            <rolatech-image-placeholder></rolatech-image-placeholder>\n          </div>\n        }\n        <div class=\"flex w-full justify-between\">\n          <div class=\"flex justify-between w-full\">\n            <div class=\"flex flex-col\">\n              <div>{{ property().title }}</div>\n              <div class=\"inline-flex gap-1 mt-2\">\n                <div>\n                  <span class=\"mr-1\">{{ property().bedrooms }}</span>\n                  <span i18n>Bedrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ property().bathrooms }}</span>\n                  <span i18n>Bathrooms</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"text-right\">\n              <div class=\"text-sm\">\u00A3{{ property().price | fixed }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ImagePlaceholderComponent, selector: "rolatech-image-placeholder" }, { kind: "pipe", type: FixedPipe, name: "fixed" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-item', imports: [CommonModule, ThumbnailComponent, ImagePlaceholderComponent, FixedPipe], template: "<div class=\"flex flex-col hover:bg-[--rt-raised-background] cursor-pointer p-3\">\n  <div>\n    <div class=\"flex justify-between w-full mb-2\">\n      <a class=\"flex items-center gap-3\">\n        <span>ID: {{ property().id }}</span>\n      </a>\n    </div>\n    <div class=\"flex flex-col overflow-x-scroll scrollbar-hide\">\n      <div class=\"flex flex-row py-2\">\n        @if (property().media) {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            @defer (on viewport()) {\n              <rolatech-thumbnail [src]=\"property().media[0].url\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n        } @else {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            <rolatech-image-placeholder></rolatech-image-placeholder>\n          </div>\n        }\n        <div class=\"flex w-full justify-between\">\n          <div class=\"flex justify-between w-full\">\n            <div class=\"flex flex-col\">\n              <div>{{ property().title }}</div>\n              <div class=\"inline-flex gap-1 mt-2\">\n                <div>\n                  <span class=\"mr-1\">{{ property().bedrooms }}</span>\n                  <span i18n>Bedrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ property().bathrooms }}</span>\n                  <span i18n>Bathrooms</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"text-right\">\n              <div class=\"text-sm\">\u00A3{{ property().price | fixed }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+        }] });
+
+class PropertyPricingComponent {
+    ngOnInit() {
+        this.calculateDeposit();
+    }
+    property = input.required();
+    // price = computed(() => {
+    //   return (this.property().price / 100).toFixed(2);
+    // });
+    price = input();
+    holdingDeposit;
+    securityDeposit;
+    displayPrice = computed(() => {
+        return (this.property().price / 100).toFixed(2);
+    });
+    calculateDeposit() {
+        const price = this.property().price;
+        this.holdingDeposit = ((price * 12) / 52 / 100).toFixed(2);
+        this.securityDeposit = (((price * 12) / 52 / 100) * 5).toFixed(2);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyPricingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.3", type: PropertyPricingComponent, isStandalone: true, selector: "rolatech-property-pricing", inputs: { property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null }, price: { classPropertyName: "price", publicName: "price", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"py-3\">\n  <div class=\"flex justify-between items-center\">\n    <div class=\"text-lg font-bold\" i18n>Rent per month</div>\n    <div class=\"text-xl font-bold py-3\">\u00A3{{ displayPrice() }}</div>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"py-3\">\n    <div class=\"flex justify-between items-center py-2\">\n      <span i18n>Holding Deposit</span>\n      <span>\u00A3{{ holdingDeposit }}</span>\n    </div>\n    <div class=\"flex justify-between items-center py-2 font-bold\">\n      <span i18n>Security Deposit</span>\n      <span>\u00A3{{ securityDeposit }}</span>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyPricingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-pricing', imports: [CommonModule, MatButtonModule, MatDivider], encapsulation: ViewEncapsulation.None, template: "<div class=\"py-3\">\n  <div class=\"flex justify-between items-center\">\n    <div class=\"text-lg font-bold\" i18n>Rent per month</div>\n    <div class=\"text-xl font-bold py-3\">\u00A3{{ displayPrice() }}</div>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"py-3\">\n    <div class=\"flex justify-between items-center py-2\">\n      <span i18n>Holding Deposit</span>\n      <span>\u00A3{{ holdingDeposit }}</span>\n    </div>\n    <div class=\"flex justify-between items-center py-2 font-bold\">\n      <span i18n>Security Deposit</span>\n      <span>\u00A3{{ securityDeposit }}</span>\n    </div>\n  </div>\n</div>\n" }]
+        }] });
+
+class PropertyInfoComponent {
+    property = input.required();
+    wish = output();
+    inWishList = input(false);
+    onWish(property) {
+        this.wish.emit(property);
+    }
+    onShare() { }
+    onMore() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: PropertyInfoComponent, isStandalone: true, selector: "rolatech-property-info", inputs: { property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null }, inWishList: { classPropertyName: "inWishList", publicName: "inWishList", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { wish: "wish" }, host: { attributes: { "id": "rolatech-property-info" } }, ngImport: i0, template: "<div>\n  <div class=\"flex justify-between items-center\">\n    <div class=\"text-2xl font-medium\">{{ property().title }}</div>\n    <div class=\"flex items-center px-3\">\n      <button mat-icon-button (click)=\"onWish(property())\">\n        @if (inWishList()) {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#5f6368\">\n            <path\n              d=\"m293-203.08 49.62-212.54-164.93-142.84 217.23-18.85L480-777.69l85.08 200.38 217.23 18.85-164.93 142.84L667-203.08 480-315.92 293-203.08Z\"\n            />\n          </svg>\n        } @else {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#5f6368\">\n            <path\n              d=\"m354-287 126-76 126 77-33-144 111-96-146-13-58-136-58 135-146 13 111 97-33 143Zm-61 83.92 49.62-212.54-164.93-142.84 217.23-18.85L480-777.69l85.08 200.38 217.23 18.85-164.93 142.84L667-203.08 480-315.92 293-203.08ZM480-470Z\"\n            />\n          </svg>\n        }\n      </button>\n      <button mat-icon-button (click)=\"onShare()\">\n        <mat-icon>share</mat-icon>\n      </button>\n      <button mat-icon-button (click)=\"onMore()\">\n        <mat-icon>more_vert</mat-icon>\n      </button>\n    </div>\n  </div>\n  <div>\n    {{ property().description }}\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: RouterModule }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyInfoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-info', imports: [MatButtonModule, MatIconModule, RouterModule], encapsulation: ViewEncapsulation.None, host: {
+                        id: 'rolatech-property-info',
+                    }, template: "<div>\n  <div class=\"flex justify-between items-center\">\n    <div class=\"text-2xl font-medium\">{{ property().title }}</div>\n    <div class=\"flex items-center px-3\">\n      <button mat-icon-button (click)=\"onWish(property())\">\n        @if (inWishList()) {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#5f6368\">\n            <path\n              d=\"m293-203.08 49.62-212.54-164.93-142.84 217.23-18.85L480-777.69l85.08 200.38 217.23 18.85-164.93 142.84L667-203.08 480-315.92 293-203.08Z\"\n            />\n          </svg>\n        } @else {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#5f6368\">\n            <path\n              d=\"m354-287 126-76 126 77-33-144 111-96-146-13-58-136-58 135-146 13 111 97-33 143Zm-61 83.92 49.62-212.54-164.93-142.84 217.23-18.85L480-777.69l85.08 200.38 217.23 18.85-164.93 142.84L667-203.08 480-315.92 293-203.08ZM480-470Z\"\n            />\n          </svg>\n        }\n      </button>\n      <button mat-icon-button (click)=\"onShare()\">\n        <mat-icon>share</mat-icon>\n      </button>\n      <button mat-icon-button (click)=\"onMore()\">\n        <mat-icon>more_vert</mat-icon>\n      </button>\n    </div>\n  </div>\n  <div>\n    {{ property().description }}\n  </div>\n</div>\n" }]
+        }] });
+
+class PropertySectionComponent {
+    section = input.required();
+    user = input();
+    username = input();
+    viewportScroller = inject(ViewportScroller);
+    onClickScroller(id) {
+        this.viewportScroller.scrollToAnchor(id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertySectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: PropertySectionComponent, isStandalone: true, selector: "rolatech-property-section", inputs: { section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: true, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, username: { classPropertyName: "username", publicName: "username", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (section(); as section) {\n  <div>\n    @if (section.title) {\n      <div class=\"py-3 flex items-center gap-3\">\n        <span class=\"h-4 w-1 bg-[--rt-brand-color] inline-block\"></span>\n        <span class=\"text-lg font-medium py-1\"> {{ section.title }}</span>\n      </div>\n    }\n    @if (section.description) {\n      <div>\n        {{ section.description }}\n      </div>\n    }\n    @if (section.media) {\n      <div class=\"w-80%\">\n        @for (item of section.media; track item) {\n          <div class=\"py-3\">\n            <rolatech-thumbnail\n              [src]=\"item.url\"\n              size=\"small\"\n              mode=\"full\"\n              [width]=\"item.width\"\n              [height]=\"item.height\"\n            ></rolatech-thumbnail>\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ThumbnailComponent, selector: "rolatech-thumbnail", inputs: ["src", "size", "mode", "ratio", "width", "height"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertySectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-section', imports: [CommonModule, ThumbnailComponent], encapsulation: ViewEncapsulation.None, template: "@if (section(); as section) {\n  <div>\n    @if (section.title) {\n      <div class=\"py-3 flex items-center gap-3\">\n        <span class=\"h-4 w-1 bg-[--rt-brand-color] inline-block\"></span>\n        <span class=\"text-lg font-medium py-1\"> {{ section.title }}</span>\n      </div>\n    }\n    @if (section.description) {\n      <div>\n        {{ section.description }}\n      </div>\n    }\n    @if (section.media) {\n      <div class=\"w-80%\">\n        @for (item of section.media; track item) {\n          <div class=\"py-3\">\n            <rolatech-thumbnail\n              [src]=\"item.url\"\n              size=\"small\"\n              mode=\"full\"\n              [width]=\"item.width\"\n              [height]=\"item.height\"\n            ></rolatech-thumbnail>\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n" }]
+        }] });
+
+class PropertyOwnerRendererComponent {
+    name = input();
+    avatar = input();
+    username = input();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyOwnerRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: PropertyOwnerRendererComponent, isStandalone: true, selector: "rolatech-property-owner-renderer", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, username: { classPropertyName: "username", publicName: "username", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-row items-center py-3\">\n  <div class=\"flex mr-3 gap-2 items-center\">\n    @if (avatar()) {\n      <div class=\"cursor-pointer\" [routerLink]=\"['/', '@' + username()]\">\n        <img [src]=\"avatar()\" class=\"w-11 h-11 rounded-full\" alt />\n      </div>\n    } @else {\n      <div class=\"w-11 h-11 rounded-full bg-[--rt-brand-color]\"></div>\n    }\n    <div class=\"flex items-center text-lg font-bold cursor-pointer\">\n      <a [routerLink]=\"['/', '@' + username()]\">\n        <span>{{ name() }}</span>\n      </a>\n      <mat-icon class=\"verified-icon\">verified</mat-icon>\n    </div>\n  </div>\n</div>\n", styles: ["mat-icon{transform:scale(.8);color:var(--rt-brand-color)}\n"], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyOwnerRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-owner-renderer', imports: [AngularCommonModule, MatIconModule], template: "<div class=\"flex flex-row items-center py-3\">\n  <div class=\"flex mr-3 gap-2 items-center\">\n    @if (avatar()) {\n      <div class=\"cursor-pointer\" [routerLink]=\"['/', '@' + username()]\">\n        <img [src]=\"avatar()\" class=\"w-11 h-11 rounded-full\" alt />\n      </div>\n    } @else {\n      <div class=\"w-11 h-11 rounded-full bg-[--rt-brand-color]\"></div>\n    }\n    <div class=\"flex items-center text-lg font-bold cursor-pointer\">\n      <a [routerLink]=\"['/', '@' + username()]\">\n        <span>{{ name() }}</span>\n      </a>\n      <mat-icon class=\"verified-icon\">verified</mat-icon>\n    </div>\n  </div>\n</div>\n", styles: ["mat-icon{transform:scale(.8);color:var(--rt-brand-color)}\n"] }]
+        }] });
+
+class PropertyVideoTourComponent {
+    sanitizer = inject(DomSanitizer);
+    videoTour = input.required();
+    videoId = computed(() => {
+        return this.sanitizer.bypassSecurityTrustResourceUrl(`https://www.youtube.com/embed/${this.videoTour().videoId}`);
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyVideoTourComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.3", type: PropertyVideoTourComponent, isStandalone: true, selector: "rolatech-property-video-tour", inputs: { videoTour: { classPropertyName: "videoTour", publicName: "videoTour", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"\">\n  <div class=\"text-2xl font-bold py-4\" i18n>Video tour</div>\n  <iframe [src]=\"videoId()\" frameborder=\"0\" allowfullscreen class=\"w-full aspect-video\"></iframe>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyVideoTourComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-video-tour', imports: [CommonModule], template: "<div class=\"\">\n  <div class=\"text-2xl font-bold py-4\" i18n>Video tour</div>\n  <iframe [src]=\"videoId()\" frameborder=\"0\" allowfullscreen class=\"w-full aspect-video\"></iframe>\n</div>\n" }]
+        }] });
+
+class PropertyActionContactComponent {
+    btnRef = viewChild('btnEl', { read: ElementRef });
+    email = input();
+    phone = input();
+    callAgent = output();
+    emailAgent = output();
+    onCallAgent() { }
+    onEmailAgent(property) {
+        this.emailAgent.emit(property);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyActionContactComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.3", type: PropertyActionContactComponent, isStandalone: true, selector: "rolatech-property-action-contact", inputs: { email: { classPropertyName: "email", publicName: "email", isSignal: true, isRequired: false, transformFunction: null }, phone: { classPropertyName: "phone", publicName: "phone", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { callAgent: "callAgent", emailAgent: "emailAgent" }, viewQueries: [{ propertyName: "btnRef", first: true, predicate: ["btnEl"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<a\n  mat-stroked-button\n  class=\"w-full\"\n  #btnEl\n  [matMenuTriggerFor]=\"callMenu\"\n  [matMenuTriggerData]=\"{ width: btnRef()?.nativeElement.offsetWidth }\"\n  (click)=\"onCallAgent()\"\n>\n  <span i18n>Ask a question</span>\n</a>\n<mat-menu #callMenu=\"matMenu\" [overlapTrigger]=\"false\" class=\"custom-menu-panel\">\n  <ng-template matMenuContent let-width=\"width\">\n    <div class=\"menu-content\" [ngStyle]=\"{ width: width + 'px' }\">\n      <a mat-menu-item href=\"mailto:hello@gmail.com\">\n        <span class=\"flex items-center\">\n          <span class=\"flex items-center\">\n            <mat-icon class=\"mr-3\">email</mat-icon>\n          </span>\n          <span i18n>Email</span>\n        </span>\n        <span class=\"pl-9\" i18n>{{ email() }}</span>\n      </a>\n      <hr />\n      <a mat-menu-item [href]=\"'https://wa.me/' + phone()\" target=\"_blank\">\n        <span class=\"flex items-center\">\n          <span class=\"flex items-center\">\n            <mat-icon class=\"mr-3\">call</mat-icon>\n          </span>\n          <span i18n>WhatsApp</span>\n        </span>\n        <span class=\"pl-9\" i18n>{{ phone() }}</span>\n      </a>\n    </div>\n  </ng-template>\n</mat-menu>\n", styles: [".mat-mdc-menu-panel,.custom-menu-panel{max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$2.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$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyActionContactComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-action-contact', imports: [CommonModule, MatButtonModule, MatIconModule, MatMenuModule], encapsulation: ViewEncapsulation.None, template: "<a\n  mat-stroked-button\n  class=\"w-full\"\n  #btnEl\n  [matMenuTriggerFor]=\"callMenu\"\n  [matMenuTriggerData]=\"{ width: btnRef()?.nativeElement.offsetWidth }\"\n  (click)=\"onCallAgent()\"\n>\n  <span i18n>Ask a question</span>\n</a>\n<mat-menu #callMenu=\"matMenu\" [overlapTrigger]=\"false\" class=\"custom-menu-panel\">\n  <ng-template matMenuContent let-width=\"width\">\n    <div class=\"menu-content\" [ngStyle]=\"{ width: width + 'px' }\">\n      <a mat-menu-item href=\"mailto:hello@gmail.com\">\n        <span class=\"flex items-center\">\n          <span class=\"flex items-center\">\n            <mat-icon class=\"mr-3\">email</mat-icon>\n          </span>\n          <span i18n>Email</span>\n        </span>\n        <span class=\"pl-9\" i18n>{{ email() }}</span>\n      </a>\n      <hr />\n      <a mat-menu-item [href]=\"'https://wa.me/' + phone()\" target=\"_blank\">\n        <span class=\"flex items-center\">\n          <span class=\"flex items-center\">\n            <mat-icon class=\"mr-3\">call</mat-icon>\n          </span>\n          <span i18n>WhatsApp</span>\n        </span>\n        <span class=\"pl-9\" i18n>{{ phone() }}</span>\n      </a>\n    </div>\n  </ng-template>\n</mat-menu>\n", styles: [".mat-mdc-menu-panel,.custom-menu-panel{max-width:100%}\n"] }]
+        }] });
+
+class PropertyDetailsComponent extends BaseComponent {
+    authService = inject(AuthService);
+    authUserService = inject(AuthUserService);
+    propertyService = inject(PropertyService);
+    authenticated = this.authService.authenticated;
+    property;
+    fullname = '';
+    username = '';
+    user;
+    inWishList = false;
+    purchased = false;
+    selectedOption;
+    variants = [];
+    selectedVariant;
+    variantOption = signal(undefined);
+    variantOptionChanged = computed(() => {
+        return this.variantOption();
+    });
+    // results: any[] = [];
+    constructor() {
+        super();
+        effect(() => {
+            if (this.authenticated()) {
+                this.wishListCheck();
+            }
+        });
+    }
+    ngOnInit() {
+        this.getProperty();
+    }
+    getProperty() {
+        this.propertyService.get(this.id).subscribe({
+            next: (res) => {
+                this.property = res.data;
+                if (this.property.variants) {
+                    this.variants = this.property.variants;
+                    this.selectedVariant = this.variants[0];
+                    // this.selectedVariant.options.forEach((item) => {
+                    //   this.results.push([item.option.id, item.value.id]);
+                    // });
+                }
+                this.findUserBaseInfo(this.property.agentId);
+                this.titleService.setTitle(`${this.property.title}`);
+            },
+        });
+    }
+    findVariant(optionId, valueId) {
+        return this.variants.find((item) => {
+            const exist = item.options.some((i) => i.option.id === optionId && i.value.id === valueId);
+            if (exist) {
+                return item;
+            }
+            return null;
+        });
+    }
+    findUserBaseInfo(userId) {
+        this.authUserService.getPublicUserInfo(userId).subscribe({
+            next: (res) => {
+                this.fullname = res.name;
+                this.username = res.username;
+                this.user = res;
+            },
+        });
+    }
+    wishListCheck() {
+        this.propertyService.wishListCheck(this.id).subscribe({
+            next: (res) => {
+                this.inWishList = res.data;
+            },
+        });
+    }
+    onWish(e) {
+        if (this.authenticated()) {
+            if (this.inWishList) {
+                this.removeFromWishlist();
+            }
+            else {
+                this.addToWishlist();
+            }
+        }
+        else {
+            this.snackBarService.open('Please sign in');
+        }
+    }
+    onRequestViewing(e) {
+        this.router.navigate([`/properties/${this.id}/viewing/application`]);
+    }
+    removeFromWishlist() {
+        this.propertyService.removeFromWishlist(this.id).subscribe({
+            next: (res) => {
+                this.inWishList = false;
+                this.snackBarService.open('Removed');
+            },
+        });
+    }
+    addToWishlist() {
+        this.propertyService.addToWishlist(this.id).subscribe({
+            next: (res) => {
+                this.inWishList = true;
+                this.snackBarService.open('Added');
+            },
+        });
+    }
+    onOffer(e) {
+        if (this.authenticated()) {
+            this.router.navigate([`/properties/${this.id}/offer`]);
+        }
+        else {
+            this.snackBarService.open('Please sign in');
+        }
+    }
+    onOptionChange(e) {
+        const criteria = [];
+        this.selectedVariant.options.map((item) => {
+            criteria.push({
+                optionId: item.option.id === e.option.id ? e.option.id : item.option.id,
+                valueId: item.option.id === e.option.id ? e.value.id : item.value.id,
+            });
+        });
+        // const criteria = [
+        //   { optionId: '249008855294545920', valueId: '249008855298740224' }, // color: red
+        //   { optionId: '248661715955355648', valueId: '249001130061860865' }, // size: 256GB
+        // ];
+        // Function to check if a variant matches all the criteria
+        const matchesAllCriteria = (variant, criteria) => {
+            return _.every(criteria, (criterion) => {
+                return _.some(variant.options, (o) => o.option.id === criterion.optionId && o.value.id === criterion.valueId);
+            });
+        };
+        // Function to update the criteria based on a matching variant
+        const updateCriteriaFromVariant = (variant) => {
+            return _.map(variant.options, (o) => ({
+                optionId: o.option.id,
+                valueId: o.value.id,
+            }));
+        };
+        // Find the variant that matches all the criteria
+        const matchingVariant = _.find(this.variants, (variant) => matchesAllCriteria(variant, criteria));
+        this.selectedVariant = matchingVariant;
+        // const updatedCriteria = matchingVariant ? updateCriteriaFromVariant(matchingVariant) : [];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: PropertyDetailsComponent, isStandalone: true, selector: "rolatech-property-details", usesInheritance: true, ngImport: i0, template: "@if (property) {\n  <rolatech-container>\n    <div class=\"flex flex-col w-full\">\n      <div class=\"py-3\">\n        <rolatech-property-media [media]=\"property.media\"></rolatech-property-media>\n      </div>\n      <div class=\"flex flex-col md:flex-row gap-3 w-full\">\n        <div class=\"w-full md:w-2/3\">\n          <rolatech-property-info [property]=\"property\" (wish)=\"onWish($event)\" [inWishList]=\"inWishList\">\n          </rolatech-property-info>\n          <rolatech-property-owner-renderer\n            [name]=\"fullname\"\n            [avatar]=\"user?.avatar\"\n            [username]=\"username\"\n          ></rolatech-property-owner-renderer>\n          <mat-divider></mat-divider>\n          <rolatech-property-features [features]=\"property.features\"></rolatech-property-features>\n          <rolatech-property-location [location]=\"property.location\"></rolatech-property-location>\n          @if (property.videoTour) {\n            <rolatech-property-video-tour [videoTour]=\"property.videoTour\"></rolatech-property-video-tour>\n          }\n          <div class=\"flex flex-col\">\n            <div class=\"text-2xl font-bold pt-3\" i18n>Sections</div>\n            @for (section of property.sections; track $index) {\n              <rolatech-property-section [section]=\"section\"></rolatech-property-section>\n            }\n            <rolatech-comments [itemId]=\"property.id\"></rolatech-comments>\n          </div>\n        </div>\n        <div class=\"w-full md:w-1/3\">\n          <rolatech-property-pricing (wish)=\"onWish($event)\" [property]=\"property\"></rolatech-property-pricing>\n          <rolatech-property-actions\n            [property]=\"property\"\n            (offer)=\"onOffer($event)\"\n            (deposit)=\"onOffer($event)\"\n            (requestViewing)=\"onRequestViewing($event)\"\n          >\n            @if (user) {\n              <rolatech-property-action-contact [email]=\"user.email\" [phone]=\"user.phone\"></rolatech-property-action-contact>\n            }\n          </rolatech-property-actions>\n        </div>\n      </div>\n    </div>\n  </rolatech-container>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: PropertyInfoComponent, selector: "rolatech-property-info", inputs: ["property", "inWishList"], outputs: ["wish"] }, { kind: "component", type: PropertyMediaComponent, selector: "rolatech-property-media", inputs: ["media", "min"] }, { kind: "component", type: PropertyPricingComponent, selector: "rolatech-property-pricing", inputs: ["property", "price"] }, { kind: "component", type: PropertySectionComponent, selector: "rolatech-property-section", inputs: ["section", "user", "username"] }, { kind: "component", type: PropertyActionsComponent, selector: "rolatech-property-actions", inputs: ["property"], outputs: ["requestViewing", "offer", "deposit"] }, { kind: "component", type: CommentsComponent, selector: "rolatech-comments", inputs: ["itemId"] }, { kind: "component", type: PropertyOwnerRendererComponent, selector: "rolatech-property-owner-renderer", inputs: ["name", "avatar", "username"] }, { kind: "component", type: PropertyLocationComponent, selector: "rolatech-property-location", inputs: ["location"] }, { kind: "component", type: PropertyFeaturesComponent, selector: "rolatech-property-features", inputs: ["features"] }, { kind: "component", type: PropertyVideoTourComponent, selector: "rolatech-property-video-tour", inputs: ["videoTour"] }, { kind: "component", type: PropertyActionContactComponent, selector: "rolatech-property-action-contact", inputs: ["email", "phone"], outputs: ["callAgent", "emailAgent"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyDetailsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-details', imports: [
+                        AngularCommonModule,
+                        AngularComponentsModule,
+                        ContainerComponent,
+                        PropertyInfoComponent,
+                        PropertyMediaComponent,
+                        PropertyPricingComponent,
+                        PropertySectionComponent,
+                        PropertyActionsComponent,
+                        CommentsComponent,
+                        PropertyOwnerRendererComponent,
+                        PropertyLocationComponent,
+                        PropertyFeaturesComponent,
+                        PropertyVideoTourComponent,
+                        PropertyActionContactComponent,
+                    ], template: "@if (property) {\n  <rolatech-container>\n    <div class=\"flex flex-col w-full\">\n      <div class=\"py-3\">\n        <rolatech-property-media [media]=\"property.media\"></rolatech-property-media>\n      </div>\n      <div class=\"flex flex-col md:flex-row gap-3 w-full\">\n        <div class=\"w-full md:w-2/3\">\n          <rolatech-property-info [property]=\"property\" (wish)=\"onWish($event)\" [inWishList]=\"inWishList\">\n          </rolatech-property-info>\n          <rolatech-property-owner-renderer\n            [name]=\"fullname\"\n            [avatar]=\"user?.avatar\"\n            [username]=\"username\"\n          ></rolatech-property-owner-renderer>\n          <mat-divider></mat-divider>\n          <rolatech-property-features [features]=\"property.features\"></rolatech-property-features>\n          <rolatech-property-location [location]=\"property.location\"></rolatech-property-location>\n          @if (property.videoTour) {\n            <rolatech-property-video-tour [videoTour]=\"property.videoTour\"></rolatech-property-video-tour>\n          }\n          <div class=\"flex flex-col\">\n            <div class=\"text-2xl font-bold pt-3\" i18n>Sections</div>\n            @for (section of property.sections; track $index) {\n              <rolatech-property-section [section]=\"section\"></rolatech-property-section>\n            }\n            <rolatech-comments [itemId]=\"property.id\"></rolatech-comments>\n          </div>\n        </div>\n        <div class=\"w-full md:w-1/3\">\n          <rolatech-property-pricing (wish)=\"onWish($event)\" [property]=\"property\"></rolatech-property-pricing>\n          <rolatech-property-actions\n            [property]=\"property\"\n            (offer)=\"onOffer($event)\"\n            (deposit)=\"onOffer($event)\"\n            (requestViewing)=\"onRequestViewing($event)\"\n          >\n            @if (user) {\n              <rolatech-property-action-contact [email]=\"user.email\" [phone]=\"user.phone\"></rolatech-property-action-contact>\n            }\n          </rolatech-property-actions>\n        </div>\n      </div>\n    </div>\n  </rolatech-container>\n}\n" }]
+        }], ctorParameters: () => [] });
+
+const MY_FORMATS$3 = {
+    parse: {
+        dateInput: 'YYYY-MM-DD',
+    },
+    display: {
+        dateInput: 'YYYY-MM-DD',
+        monthYearLabel: 'MMM YYYY',
+        dateA11yLabel: 'YYYY-MM-DD',
+        monthYearA11yLabel: 'MMMM YYYY',
+    },
+};
+class PropertyViewingTimeComponent {
+    minDate = new Date();
+    maxDate = new Date();
+    output = output();
+    select = output();
+    proposedTime = input({
+        date: '',
+        time: '',
+    });
+    time = ViewingTime;
+    ngOnInit() {
+        this.minDate.setDate(this.minDate.getDate() + 1);
+        this.maxDate.setDate(this.maxDate.getDate() + 4);
+    }
+    ngDoCheck() {
+        this.output.emit(this.proposedTime());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyViewingTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: PropertyViewingTimeComponent, isStandalone: true, selector: "rolatech-property-viewing-time", inputs: { proposedTime: { classPropertyName: "proposedTime", publicName: "proposedTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { output: "output", select: "select" }, providers: [
+            {
+                provide: DateAdapter,
+                useClass: MomentDateAdapter,
+                deps: [MAT_DATE_LOCALE],
+            },
+            { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$3 },
+        ], ngImport: i0, template: "<div class=\"flex flex-col md:flex-row gap-2\">\n  <mat-form-field appearance=\"fill\">\n    <mat-label i18n>Viewing Date</mat-label>\n    <input\n      matInput\n      placeholder=\"Viewing date\"\n      [matDatepicker]=\"startDatePicker\"\n      [min]=\"minDate\"\n      [max]=\"maxDate\"\n      (focus)=\"startDatePicker.open()\"\n      name=\"viewingDate\"\n      [(ngModel)]=\"proposedTime()!.date\"\n      (dateInput)=\"proposedTime()!.date = $event.value.format('YYYY-MM-DD')\"\n      required\n      readonly\n    />\n    <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n    <mat-datepicker #startDatePicker></mat-datepicker>\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\">\n    <mat-label i18n>Viewing time</mat-label>\n    <mat-icon matIconPrefix>schedule</mat-icon>\n    <mat-select [(ngModel)]=\"proposedTime()!.time\" required readonly>\n      @for (d of time; track d) {\n        <mat-option [value]=\"d\">\n          {{ d }}\n        </mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n</div>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i8.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i8.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyViewingTimeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-viewing-time', imports: [
+                        MatFormFieldModule,
+                        MatInputModule,
+                        FormsModule,
+                        MatDatepickerModule,
+                        MatSelectModule,
+                        MatOptionModule,
+                        MatIconModule,
+                        MatButtonModule,
+                    ], providers: [
+                        {
+                            provide: DateAdapter,
+                            useClass: MomentDateAdapter,
+                            deps: [MAT_DATE_LOCALE],
+                        },
+                        { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$3 },
+                    ], template: "<div class=\"flex flex-col md:flex-row gap-2\">\n  <mat-form-field appearance=\"fill\">\n    <mat-label i18n>Viewing Date</mat-label>\n    <input\n      matInput\n      placeholder=\"Viewing date\"\n      [matDatepicker]=\"startDatePicker\"\n      [min]=\"minDate\"\n      [max]=\"maxDate\"\n      (focus)=\"startDatePicker.open()\"\n      name=\"viewingDate\"\n      [(ngModel)]=\"proposedTime()!.date\"\n      (dateInput)=\"proposedTime()!.date = $event.value.format('YYYY-MM-DD')\"\n      required\n      readonly\n    />\n    <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n    <mat-datepicker #startDatePicker></mat-datepicker>\n  </mat-form-field>\n  <mat-form-field appearance=\"fill\">\n    <mat-label i18n>Viewing time</mat-label>\n    <mat-icon matIconPrefix>schedule</mat-icon>\n    <mat-select [(ngModel)]=\"proposedTime()!.time\" required readonly>\n      @for (d of time; track d) {\n        <mat-option [value]=\"d\">\n          {{ d }}\n        </mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n</div>\n", styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+
+const MY_FORMATS$2 = {
+    parse: {
+        dateInput: 'YYYY-MM-DD',
+    },
+    display: {
+        dateInput: 'YYYY-MM-DD',
+        monthYearLabel: 'MMM YYYY',
+        dateA11yLabel: 'YYYY-MM-DD',
+        monthYearA11yLabel: 'MMMM YYYY',
+    },
+};
+class PropertyViewingRequestComponent extends BaseComponent {
+    authService = inject(AuthService);
+    authUserService = inject(AuthUserService);
+    propertyService = inject(PropertyService);
+    property;
+    minDate = new Date();
+    viewing = {
+        firstName: '',
+        lastName: '',
+        email: '',
+        phone: '',
+        viewerCategory: PropertyViewerCategory.TENANT,
+        // tenantCategory: PropertyApplicantType.INDIVIDUAL,
+        proposedSlots: [
+            { date: '', time: '' },
+            { date: '', time: '' },
+            { date: '', time: '' },
+        ],
+    };
+    selectedViewerCategory = 'TENANT';
+    viewerCategory = PropertyViewerCategory;
+    applicantTypes = PropertyApplicantType;
+    residencyStatus = ResidencyStatus;
+    employmentStatus = EmploymentStatus;
+    adverseCreditStatus = AdverseCreditStatus;
+    countries = ['United Kingdom', 'China'];
+    selectedCountry;
+    displayPrice = computed(() => {
+        return this.property ? (this.property.price / 100).toFixed(2) : 0;
+    });
+    ngOnInit() {
+        this.getProperty();
+        // this.viewing['country'] = this.countries[0];
+    }
+    getProperty() {
+        this.propertyService.get(this.id).subscribe({
+            next: (res) => {
+                this.property = res.data;
+                this.titleService.setTitle(`${this.property.title}`);
+            },
+        });
+    }
+    onCountrySelect(event) {
+        this.viewing['country'] = event.value;
+    }
+    onViewerSelectionChange(event) {
+        this.selectedViewerCategory = event.value;
+    }
+    sendRequest() {
+        this.propertyService.requestViewing(this.id, this.viewing).subscribe({
+            next: (res) => {
+                this.snackBarService.open('Request viewing successfully');
+            },
+            error: (error) => {
+                this.snackBarService.open(error.message);
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyViewingRequestComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: PropertyViewingRequestComponent, isStandalone: true, selector: "rolatech-property-viewing-request", providers: [
+            {
+                provide: DateAdapter,
+                useClass: MomentDateAdapter,
+                deps: [MAT_DATE_LOCALE],
+            },
+            { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$2 },
+        ], usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  <div class=\"flex flex-col-reverse md:flex-row w-full py-2 mb-3 gap-3\">\n    <div class=\"w-full md:w-2/3\">\n      <div>\n        <div class=\"text-xl font-bold py-2 mb-3\" i18n>Request a viewing</div>\n        <div class=\"mb-3\">\n          <mat-radio-group\n            aria-label=\"Select an option\"\n            [(ngModel)]=\"viewing.viewerCategory\"\n            (change)=\"onViewerSelectionChange($event)\"\n          >\n            <mat-radio-button [value]=\"viewerCategory.TENANT\" i18n>I'm a tenant</mat-radio-button>\n            <mat-radio-button [value]=\"viewerCategory.AGENT\" i18n>I'm an agent</mat-radio-button>\n          </mat-radio-group>\n        </div>\n        @if (selectedViewerCategory === 'TENANT') {\n          <div class=\"flex flex-col md:flex-row gap-2\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>First name</mat-label>\n              <input matInput type=\"text\" [(ngModel)]=\"viewing.firstName\" />\n            </mat-form-field>\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>Last name</mat-label>\n              <input matInput type=\"text\" [(ngModel)]=\"viewing.lastName\" />\n            </mat-form-field>\n          </div>\n          <div class=\"flex flex-col md:flex-row gap-2\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>Phone</mat-label>\n              <input matInput type=\"text\" [(ngModel)]=\"viewing.phone\" />\n            </mat-form-field>\n          </div>\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>Email</mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"viewing.email\" />\n          </mat-form-field>\n          <mat-form-field>\n            <mat-label i18n>Tenant type</mat-label>\n            <mat-select placeholder=\"Tenant type\" [(ngModel)]=\"viewing.applicantType\">\n              @for (applicantType of applicantTypes | keyvalue; track applicantType) {\n                <mat-option [value]=\"applicantType.key\">\n                  {{ applicantType.value }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        } @else {\n          <div class=\"flex flex-col md:flex-row gap-2\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>Your email</mat-label>\n              <input matInput type=\"text\" [(ngModel)]=\"viewing.email\" />\n            </mat-form-field>\n          </div>\n          <div class=\"flex flex-col md:flex-row gap-2\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>Number of tenants</mat-label>\n              <input matInput type=\"number\" [(ngModel)]=\"viewing.numberOfTenants\" />\n            </mat-form-field>\n          </div>\n          <mat-form-field>\n            <mat-label i18n>Applicant type</mat-label>\n            <mat-select placeholder=\"Applicant type\" [(ngModel)]=\"viewing.applicantType\">\n              @for (applicantType of applicantTypes | keyvalue; track applicantType) {\n                <mat-option [value]=\"applicantType.key\">\n                  {{ applicantType.value }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field appearance=\"fill\">\n            <input\n              matInput\n              placeholder=\"Start date\"\n              [matDatepicker]=\"startDatePicker\"\n              [min]=\"minDate\"\n              (focus)=\"startDatePicker.open()\"\n              name=\"startDate\"\n              [(ngModel)]=\"viewing.startDate\"\n              (dateInput)=\"viewing.startDate = $event.value.format('YYYY-MM-DD')\"\n              readonly\n            />\n            <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n            <mat-datepicker #startDatePicker></mat-datepicker>\n          </mat-form-field>\n          <div class=\"flex flex-col md:flex-row gap-2\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>Tenancy length</mat-label>\n              <span matTextSuffix>months</span>\n              <input matInput type=\"number\" [(ngModel)]=\"viewing.tenancyDuration\" />\n            </mat-form-field>\n          </div>\n          <mat-form-field appearance=\"fill\" floatLabel=\"always\">\n            <mat-label i18n>Annual income(All tenants combined)</mat-label>\n            <span matTextPrefix>\u00A3&nbsp;</span>\n            <input matInput type=\"text\" placeholder=\"00.00\" [(ngModel)]=\"viewing.income\" />\n          </mat-form-field>\n          <mat-form-field>\n            <mat-label i18n>Employment Status</mat-label>\n            <mat-select placeholder=\"Employment Status\" [(ngModel)]=\"viewing.employmentStatus\">\n              @for (item of employmentStatus | keyvalue; track item) {\n                <mat-option [value]=\"item.key\">\n                  {{ item.value }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field>\n            <mat-label i18n>AdverseCredit Status</mat-label>\n            <mat-select placeholder=\"AdverseCredit Status\" [(ngModel)]=\"viewing.adverseCreditStatus\">\n              @for (item of adverseCreditStatus | keyvalue; track item) {\n                <mat-option [value]=\"item.key\">\n                  {{ item.value }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        }\n        <div>\n          <div class=\"mb-3\">\n            <div class=\"text-lg font-bold\" i18n>Viewing date</div>\n            <div class=\"opacity-70\" i18n>\n              Please choose 3 different times on at least 2 different days that would work for you.\n            </div>\n          </div>\n          @for (item of viewing.proposedSlots; track $index) {\n            <rolatech-property-viewing-time [proposedTime]=\"item\"></rolatech-property-viewing-time>\n          }\n        </div>\n      </div>\n      <button mat-flat-button (click)=\"sendRequest()\" i18n>Send request</button>\n    </div>\n    <div class=\"w-full md:w-1/2 py-2 mb-3\">\n      <div class=\"text-xl font-bold py-2 mb-3\" i18n>Property info</div>\n      <div>\n        <rolatech-thumbnail [src]=\"property ? property.media[0].url : ''\" size=\"small\"></rolatech-thumbnail>\n      </div>\n      <div class=\"py-3 text-xl font-bold\">\u00A3{{ displayPrice() }}</div>\n    </div>\n  </div>\n</rolatech-container>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.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: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i8.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i8.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i9.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i9.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: PropertyViewingTimeComponent, selector: "rolatech-property-viewing-time", inputs: ["proposedTime"], outputs: ["output", "select"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyViewingRequestComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-viewing-request', imports: [
+                        CommonModule,
+                        ContainerComponent,
+                        MatFormFieldModule,
+                        FormsModule,
+                        MatInputModule,
+                        TextFieldModule,
+                        MatButtonModule,
+                        ThumbnailComponent,
+                        MatSelectModule,
+                        MatDatepickerModule,
+                        MatRadioModule,
+                        PropertyViewingTimeComponent,
+                    ], providers: [
+                        {
+                            provide: DateAdapter,
+                            useClass: MomentDateAdapter,
+                            deps: [MAT_DATE_LOCALE],
+                        },
+                        { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$2 },
+                    ], template: "<rolatech-container>\n  <div class=\"flex flex-col-reverse md:flex-row w-full py-2 mb-3 gap-3\">\n    <div class=\"w-full md:w-2/3\">\n      <div>\n        <div class=\"text-xl font-bold py-2 mb-3\" i18n>Request a viewing</div>\n        <div class=\"mb-3\">\n          <mat-radio-group\n            aria-label=\"Select an option\"\n            [(ngModel)]=\"viewing.viewerCategory\"\n            (change)=\"onViewerSelectionChange($event)\"\n          >\n            <mat-radio-button [value]=\"viewerCategory.TENANT\" i18n>I'm a tenant</mat-radio-button>\n            <mat-radio-button [value]=\"viewerCategory.AGENT\" i18n>I'm an agent</mat-radio-button>\n          </mat-radio-group>\n        </div>\n        @if (selectedViewerCategory === 'TENANT') {\n          <div class=\"flex flex-col md:flex-row gap-2\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>First name</mat-label>\n              <input matInput type=\"text\" [(ngModel)]=\"viewing.firstName\" />\n            </mat-form-field>\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>Last name</mat-label>\n              <input matInput type=\"text\" [(ngModel)]=\"viewing.lastName\" />\n            </mat-form-field>\n          </div>\n          <div class=\"flex flex-col md:flex-row gap-2\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>Phone</mat-label>\n              <input matInput type=\"text\" [(ngModel)]=\"viewing.phone\" />\n            </mat-form-field>\n          </div>\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>Email</mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"viewing.email\" />\n          </mat-form-field>\n          <mat-form-field>\n            <mat-label i18n>Tenant type</mat-label>\n            <mat-select placeholder=\"Tenant type\" [(ngModel)]=\"viewing.applicantType\">\n              @for (applicantType of applicantTypes | keyvalue; track applicantType) {\n                <mat-option [value]=\"applicantType.key\">\n                  {{ applicantType.value }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        } @else {\n          <div class=\"flex flex-col md:flex-row gap-2\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>Your email</mat-label>\n              <input matInput type=\"text\" [(ngModel)]=\"viewing.email\" />\n            </mat-form-field>\n          </div>\n          <div class=\"flex flex-col md:flex-row gap-2\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>Number of tenants</mat-label>\n              <input matInput type=\"number\" [(ngModel)]=\"viewing.numberOfTenants\" />\n            </mat-form-field>\n          </div>\n          <mat-form-field>\n            <mat-label i18n>Applicant type</mat-label>\n            <mat-select placeholder=\"Applicant type\" [(ngModel)]=\"viewing.applicantType\">\n              @for (applicantType of applicantTypes | keyvalue; track applicantType) {\n                <mat-option [value]=\"applicantType.key\">\n                  {{ applicantType.value }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field appearance=\"fill\">\n            <input\n              matInput\n              placeholder=\"Start date\"\n              [matDatepicker]=\"startDatePicker\"\n              [min]=\"minDate\"\n              (focus)=\"startDatePicker.open()\"\n              name=\"startDate\"\n              [(ngModel)]=\"viewing.startDate\"\n              (dateInput)=\"viewing.startDate = $event.value.format('YYYY-MM-DD')\"\n              readonly\n            />\n            <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n            <mat-datepicker #startDatePicker></mat-datepicker>\n          </mat-form-field>\n          <div class=\"flex flex-col md:flex-row gap-2\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label i18n>Tenancy length</mat-label>\n              <span matTextSuffix>months</span>\n              <input matInput type=\"number\" [(ngModel)]=\"viewing.tenancyDuration\" />\n            </mat-form-field>\n          </div>\n          <mat-form-field appearance=\"fill\" floatLabel=\"always\">\n            <mat-label i18n>Annual income(All tenants combined)</mat-label>\n            <span matTextPrefix>\u00A3&nbsp;</span>\n            <input matInput type=\"text\" placeholder=\"00.00\" [(ngModel)]=\"viewing.income\" />\n          </mat-form-field>\n          <mat-form-field>\n            <mat-label i18n>Employment Status</mat-label>\n            <mat-select placeholder=\"Employment Status\" [(ngModel)]=\"viewing.employmentStatus\">\n              @for (item of employmentStatus | keyvalue; track item) {\n                <mat-option [value]=\"item.key\">\n                  {{ item.value }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field>\n            <mat-label i18n>AdverseCredit Status</mat-label>\n            <mat-select placeholder=\"AdverseCredit Status\" [(ngModel)]=\"viewing.adverseCreditStatus\">\n              @for (item of adverseCreditStatus | keyvalue; track item) {\n                <mat-option [value]=\"item.key\">\n                  {{ item.value }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        }\n        <div>\n          <div class=\"mb-3\">\n            <div class=\"text-lg font-bold\" i18n>Viewing date</div>\n            <div class=\"opacity-70\" i18n>\n              Please choose 3 different times on at least 2 different days that would work for you.\n            </div>\n          </div>\n          @for (item of viewing.proposedSlots; track $index) {\n            <rolatech-property-viewing-time [proposedTime]=\"item\"></rolatech-property-viewing-time>\n          }\n        </div>\n      </div>\n      <button mat-flat-button (click)=\"sendRequest()\" i18n>Send request</button>\n    </div>\n    <div class=\"w-full md:w-1/2 py-2 mb-3\">\n      <div class=\"text-xl font-bold py-2 mb-3\" i18n>Property info</div>\n      <div>\n        <rolatech-thumbnail [src]=\"property ? property.media[0].url : ''\" size=\"small\"></rolatech-thumbnail>\n      </div>\n      <div class=\"py-3 text-xl font-bold\">\u00A3{{ displayPrice() }}</div>\n    </div>\n  </div>\n</rolatech-container>\n", styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+
+const MY_FORMATS$1 = {
+    parse: {
+        dateInput: 'YYYY-MM-DD',
+    },
+    display: {
+        dateInput: 'YYYY-MM-DD',
+        monthYearLabel: 'MMM YYYY',
+        dateA11yLabel: 'YYYY-MM-DD',
+        monthYearA11yLabel: 'MMMM YYYY',
+    },
+};
+class PropertyOfferComponent extends BaseComponent {
+    authService = inject(AuthService);
+    authUserService = inject(AuthUserService);
+    propertyService = inject(PropertyService);
+    offer = {
+        firstName: '',
+        lastName: '',
+        phone: '',
+        email: '',
+        applicantType: '',
+        residencyStatus: '',
+        employmentStatus: '',
+        adverseCreditStatus: '',
+        startDate: '',
+        notes: '',
+        amount: 0,
+    };
+    get formattedAmount() {
+        return this.offer.amount.toFixed(2); // equivalent to | number:'1.2-2'
+    } // applicantTypes = PropertyApplicantType;
+    applicantTypes = Object.keys(PropertyApplicantType); // ['INDIVIDUAL', 'CORPORATE', ...]
+    PropertyApplicantType = PropertyApplicantType;
+    residencyStatus = ResidencyStatus;
+    employmentStatus = EmploymentStatus;
+    adverseCreditStatus = AdverseCreditStatus;
+    selectedCountry;
+    // property!: Property;
+    // displayPrice = computed(() => {
+    //   return (this.property?.price / 100).toFixed(2);
+    // });
+    property = signal(null);
+    displayPrice = computed(() => {
+        const p = this.property();
+        return p ? (p.price / 100).toFixed(2) : '0.00';
+    });
+    firstImageUrl = computed(() => {
+        const p = this.property();
+        return p?.media?.[0]?.url || '';
+    });
+    minDate = new Date();
+    sending = false;
+    constructor() {
+        super();
+        effect(() => {
+            const p = this.property();
+            if (p) {
+                this.titleService.setTitle(p.title);
+            }
+        });
+    }
+    ngOnInit() {
+        this.getProperty();
+    }
+    onAmountChange(event) {
+        const inputValue = event.target.value;
+        console.log(inputValue);
+        const regex = /^\d*\.?\d{0,2}$/;
+        if (regex.test(inputValue)) {
+            this.offer.amount = inputValue;
+        }
+    }
+    getProperty() {
+        this.propertyService.get(this.id).subscribe({
+            next: (res) => {
+                this.property.set(res.data);
+                // this.titleService.setTitle(`${this.property.title}`);
+            },
+        });
+    }
+    onCategorySelect(event) {
+        this.offer['category'] = event.value;
+    }
+    onResidencyStatusSelect(event) { }
+    sendRequest() {
+        this.sending = true;
+        this.propertyService.makeOffer(this.id, this.offer).subscribe({
+            next: (res) => {
+                this.sending = false;
+                this.snackBarService.open('Sent successfully');
+                this.router.navigate([`/properties/offers/${res.data.id}`]);
+            },
+            error: (error) => {
+                this.sending = false;
+                this.snackBarService.open(error.message);
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyOfferComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: PropertyOfferComponent, isStandalone: true, selector: "rolatech-property-offer", providers: [
+            {
+                provide: DateAdapter,
+                useClass: MomentDateAdapter,
+                deps: [MAT_DATE_LOCALE],
+            },
+            { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$1 },
+        ], usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  <div class=\"flex flex-col-reverse md:flex-row w-full py-2 mb-3 gap-3\">\n    <div class=\"w-full md:w-2/3\">\n      <div>\n        <div class=\"text-xl font-bold py-2 mb-3\">\n          <!-- <span i18n>Offer for </span><span>{{ property()?.title : '' }}</span> -->\n          <span i18n=\"@@offerFor\">Offer for {{ property()?.title }}</span>\n        </div>\n        <div class=\"flex flex-col md:flex-row gap-2\">\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>First name</mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"offer.firstName\" required />\n          </mat-form-field>\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>Last name</mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"offer.lastName\" required />\n          </mat-form-field>\n        </div>\n        <div class=\"flex flex-col md:flex-row gap-2\">\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>Phone</mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"offer.phone\" required />\n          </mat-form-field>\n        </div>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Email</mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"offer.email\" required />\n        </mat-form-field>\n\n        <mat-form-field appearance=\"fill\" floatLabel=\"always\">\n          <mat-label i18n>Asking price</mat-label>\n          <span matTextPrefix>\u00A3&nbsp;</span>\n          <input matInput type=\"text\" placeholder=\"0.00\" [(ngModel)]=\"offer.amount\" required />\n          <!-- <input\n            matInput\n            type=\"number\"\n            placeholder=\"0.00\"\n            [value]=\"formattedAmount\"\n            (input)=\"onAmountChange($event)\"\n            required\n          /> -->\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Tenancy Length</mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"offer.tenancyDuration\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Number Of Tenants</mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"offer.numberOfTenants\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label>Start date</mat-label>\n          <input\n            matInput\n            placeholder=\"Start date\"\n            [matDatepicker]=\"startDatePicker\"\n            [min]=\"minDate\"\n            (focus)=\"startDatePicker.open()\"\n            name=\"startDate\"\n            [(ngModel)]=\"offer.startDate\"\n            (dateInput)=\"offer.startDate = $event.value.format('YYYY-MM-DD')\"\n            readonly\n            required\n          />\n          <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n          <mat-datepicker #startDatePicker></mat-datepicker>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label i18n>Applicant type</mat-label>\n          <mat-select placeholder=\"Applicant type\" [(ngModel)]=\"offer.applicantType\" required>\n            @for (key of applicantTypes; track key) {\n              <mat-option [value]=\"key\">\n                {{ PropertyApplicantType[key] }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <!-- subscriptSizing=\"dynamic\" -->\n        <mat-form-field>\n          <mat-label i18n>Residency status</mat-label>\n          <mat-select placeholder=\"Residency status\" [(ngModel)]=\"offer.residencyStatus\" required>\n            @for (status of residencyStatus | keyvalue; track status) {\n              <mat-option [value]=\"status.key\">\n                {{ status.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label i18n>Employment Status</mat-label>\n          <mat-select placeholder=\"Employment Status\" [(ngModel)]=\"offer.employmentStatus\" required>\n            @for (item of employmentStatus | keyvalue; track item) {\n              <mat-option [value]=\"item.key\">\n                {{ item.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label i18n>AdverseCredit Status</mat-label>\n          <mat-select placeholder=\"AdverseCredit Status\" [(ngModel)]=\"offer.adverseCreditStatus\" required>\n            @for (item of adverseCreditStatus | keyvalue; track item) {\n              <mat-option [value]=\"item.key\">\n                {{ item.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div>\n        <div class=\"text-md py-2\" i18n>Your message(Optional)</div>\n        <mat-form-field appearance=\"fill\">\n          <textarea matInput type=\"text\" [(ngModel)]=\"offer.notes\" cdkTextareaAutosize cdkAutosizeMinRows=\"3\"></textarea>\n        </mat-form-field>\n      </div>\n      <!-- <button mat-flat-button (click)=\"sendRequest()\" i18n>Send request</button> -->\n      <button mat-flat-button (click)=\"sendRequest()\" [disabled]=\"sending\">\n        <span style=\"display: flex; align-items: center\">\n          @if (sending) {\n            <mat-progress-spinner diameter=\"20\" mode=\"indeterminate\" [style.marginRight.px]=\"8\"></mat-progress-spinner>\n          }\n          {{ sending ? 'Requesting...' : 'Send request' }}\n        </span>\n      </button>\n    </div>\n    <div class=\"w-full md:w-1/2 py-2 mb-3\">\n      <div class=\"text-xl font-bold py-2 mb-3\" i18n>Property info</div>\n      <div>\n        <rolatech-thumbnail [src]=\"firstImageUrl()\" size=\"small\"></rolatech-thumbnail>\n      </div>\n      <div class=\"py-3 text-xl font-bold\">\u00A3{{ displayPrice() }}</div>\n    </div>\n  </div>\n</rolatech-container>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$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: i4.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$3.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.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: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i8.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i8.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8.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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyOfferComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-offer', imports: [
+                        CommonModule,
+                        ContainerComponent,
+                        MatFormFieldModule,
+                        FormsModule,
+                        MatInputModule,
+                        TextFieldModule,
+                        MatButtonModule,
+                        ThumbnailComponent,
+                        MatSelectModule,
+                        KeyValuePipe,
+                        MatDatepickerModule,
+                        MatProgressSpinner,
+                    ], providers: [
+                        {
+                            provide: DateAdapter,
+                            useClass: MomentDateAdapter,
+                            deps: [MAT_DATE_LOCALE],
+                        },
+                        { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$1 },
+                    ], template: "<rolatech-container>\n  <div class=\"flex flex-col-reverse md:flex-row w-full py-2 mb-3 gap-3\">\n    <div class=\"w-full md:w-2/3\">\n      <div>\n        <div class=\"text-xl font-bold py-2 mb-3\">\n          <!-- <span i18n>Offer for </span><span>{{ property()?.title : '' }}</span> -->\n          <span i18n=\"@@offerFor\">Offer for {{ property()?.title }}</span>\n        </div>\n        <div class=\"flex flex-col md:flex-row gap-2\">\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>First name</mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"offer.firstName\" required />\n          </mat-form-field>\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>Last name</mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"offer.lastName\" required />\n          </mat-form-field>\n        </div>\n        <div class=\"flex flex-col md:flex-row gap-2\">\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>Phone</mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"offer.phone\" required />\n          </mat-form-field>\n        </div>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Email</mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"offer.email\" required />\n        </mat-form-field>\n\n        <mat-form-field appearance=\"fill\" floatLabel=\"always\">\n          <mat-label i18n>Asking price</mat-label>\n          <span matTextPrefix>\u00A3&nbsp;</span>\n          <input matInput type=\"text\" placeholder=\"0.00\" [(ngModel)]=\"offer.amount\" required />\n          <!-- <input\n            matInput\n            type=\"number\"\n            placeholder=\"0.00\"\n            [value]=\"formattedAmount\"\n            (input)=\"onAmountChange($event)\"\n            required\n          /> -->\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Tenancy Length</mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"offer.tenancyDuration\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Number Of Tenants</mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"offer.numberOfTenants\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label>Start date</mat-label>\n          <input\n            matInput\n            placeholder=\"Start date\"\n            [matDatepicker]=\"startDatePicker\"\n            [min]=\"minDate\"\n            (focus)=\"startDatePicker.open()\"\n            name=\"startDate\"\n            [(ngModel)]=\"offer.startDate\"\n            (dateInput)=\"offer.startDate = $event.value.format('YYYY-MM-DD')\"\n            readonly\n            required\n          />\n          <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n          <mat-datepicker #startDatePicker></mat-datepicker>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label i18n>Applicant type</mat-label>\n          <mat-select placeholder=\"Applicant type\" [(ngModel)]=\"offer.applicantType\" required>\n            @for (key of applicantTypes; track key) {\n              <mat-option [value]=\"key\">\n                {{ PropertyApplicantType[key] }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <!-- subscriptSizing=\"dynamic\" -->\n        <mat-form-field>\n          <mat-label i18n>Residency status</mat-label>\n          <mat-select placeholder=\"Residency status\" [(ngModel)]=\"offer.residencyStatus\" required>\n            @for (status of residencyStatus | keyvalue; track status) {\n              <mat-option [value]=\"status.key\">\n                {{ status.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label i18n>Employment Status</mat-label>\n          <mat-select placeholder=\"Employment Status\" [(ngModel)]=\"offer.employmentStatus\" required>\n            @for (item of employmentStatus | keyvalue; track item) {\n              <mat-option [value]=\"item.key\">\n                {{ item.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label i18n>AdverseCredit Status</mat-label>\n          <mat-select placeholder=\"AdverseCredit Status\" [(ngModel)]=\"offer.adverseCreditStatus\" required>\n            @for (item of adverseCreditStatus | keyvalue; track item) {\n              <mat-option [value]=\"item.key\">\n                {{ item.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div>\n        <div class=\"text-md py-2\" i18n>Your message(Optional)</div>\n        <mat-form-field appearance=\"fill\">\n          <textarea matInput type=\"text\" [(ngModel)]=\"offer.notes\" cdkTextareaAutosize cdkAutosizeMinRows=\"3\"></textarea>\n        </mat-form-field>\n      </div>\n      <!-- <button mat-flat-button (click)=\"sendRequest()\" i18n>Send request</button> -->\n      <button mat-flat-button (click)=\"sendRequest()\" [disabled]=\"sending\">\n        <span style=\"display: flex; align-items: center\">\n          @if (sending) {\n            <mat-progress-spinner diameter=\"20\" mode=\"indeterminate\" [style.marginRight.px]=\"8\"></mat-progress-spinner>\n          }\n          {{ sending ? 'Requesting...' : 'Send request' }}\n        </span>\n      </button>\n    </div>\n    <div class=\"w-full md:w-1/2 py-2 mb-3\">\n      <div class=\"text-xl font-bold py-2 mb-3\" i18n>Property info</div>\n      <div>\n        <rolatech-thumbnail [src]=\"firstImageUrl()\" size=\"small\"></rolatech-thumbnail>\n      </div>\n      <div class=\"py-3 text-xl font-bold\">\u00A3{{ displayPrice() }}</div>\n    </div>\n  </div>\n</rolatech-container>\n", styles: ["mat-form-field{width:100%}\n"] }]
+        }], ctorParameters: () => [] });
+
+class PropertyOfferIndexComponent extends BaseComponent {
+    propertyService = inject(PropertyService);
+    offers;
+    offerType = PropertyOfferType;
+    offerStatus = PropertyOfferStatus;
+    filter = false;
+    filterOptions = {
+        type: '',
+        status: '',
+    };
+    select = 0;
+    links = [
+        {
+            name: 'All',
+            icon: 'dashboard',
+        },
+        {
+            name: 'Pending',
+            icon: 'category',
+            status: 'pending',
+        },
+        {
+            name: 'Accepted',
+            icon: 'category',
+            status: 'accepted',
+        },
+        {
+            name: 'Rejected',
+            icon: 'category',
+            status: 'rejected',
+        },
+        {
+            name: 'Cancelled',
+            icon: 'category',
+            status: 'cancelled',
+        },
+    ];
+    ngOnInit() {
+        this.findOffers();
+        this.route.queryParams.subscribe(({ status }) => {
+            this.select = this.links.findIndex((item) => item.status === status);
+            if (status) {
+                this.filterOptions.status = status.toUpperCase();
+            }
+            else {
+                delete this.filterOptions.status;
+            }
+            this.findOffers();
+        });
+    }
+    findOffers() {
+        const options = {
+            sort: 'updatedAt desc',
+        };
+        const filterString = this.convertFilterOptions(this.filterOptions);
+        if (filterString) {
+            options['filter'] = filterString;
+        }
+        this.propertyService.findOffersByUser(options).subscribe({
+            next: (res) => {
+                this.offers = res.data;
+            },
+        });
+    }
+    findProperties(ids) { }
+    resetFilter() {
+        this.filterOptions = {
+            type: '',
+        };
+        this.filter = false;
+        this.findOffers();
+    }
+    statusCompareFn(t1, t2) {
+        return t1 === t2;
+    }
+    convertFilterOptions(jsonObj) {
+        return Object.entries(jsonObj)
+            .filter(([key, value]) => value !== '' && value !== undefined)
+            .map(([key, value]) => {
+            return `${key}:${value}`;
+        })
+            .join(',');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyOfferIndexComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: PropertyOfferIndexComponent, isStandalone: true, selector: "rolatech-property-offer-index", usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  <rolatech-toolbar title=\"Offers\" large> </rolatech-toolbar>\n  <rolatech-tabs [select]=\"select\">\n    @for (item of links; track item) {\n      @if (item.status) {\n        <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n      } @else {\n        <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n      }\n    }\n  </rolatech-tabs>\n  <rolatech-list>\n    @if (offers) {\n      @for (item of offers; track item) {\n        <rolatech-property-offer-item [routerLink]=\"['./', item.id]\" [offer]=\"item\"></rolatech-property-offer-item>\n      }\n    } @else {\n      <rolatech-empty></rolatech-empty>\n    }\n  </rolatech-list>\n</rolatech-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: TabsComponent, selector: "rolatech-tabs", inputs: ["select", "loading"], outputs: ["selectChange"] }, { kind: "component", type: TabComponent, selector: "rolatech-tab", inputs: ["label"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: ListComponent, selector: "rolatech-list" }, { kind: "component", type: EmptyComponent, selector: "rolatech-empty" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: PropertyOfferItemComponent, selector: "rolatech-property-offer-item", inputs: ["offer"] }], animations: [
+            trigger('filter', [
+                state('collapsed', style({ height: '0px', minHeight: '0' })),
+                state('expanded', style({ height: '*' })),
+                transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+            ]),
+        ], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyOfferIndexComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-offer-index', imports: [
+                        CommonModule,
+                        ContainerComponent,
+                        RouterModule,
+                        TabsComponent,
+                        TabComponent,
+                        ToolbarComponent,
+                        ListComponent,
+                        EmptyComponent,
+                        MatButtonModule,
+                        MatIconModule,
+                        FormsModule,
+                        MatFormFieldModule,
+                        MatDatepickerModule,
+                        MatOptionModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatButtonModule,
+                        PropertyOfferItemComponent,
+                    ], animations: [
+                        trigger('filter', [
+                            state('collapsed', style({ height: '0px', minHeight: '0' })),
+                            state('expanded', style({ height: '*' })),
+                            transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+                        ]),
+                    ], encapsulation: ViewEncapsulation.None, template: "<rolatech-container>\n  <rolatech-toolbar title=\"Offers\" large> </rolatech-toolbar>\n  <rolatech-tabs [select]=\"select\">\n    @for (item of links; track item) {\n      @if (item.status) {\n        <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n      } @else {\n        <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n      }\n    }\n  </rolatech-tabs>\n  <rolatech-list>\n    @if (offers) {\n      @for (item of offers; track item) {\n        <rolatech-property-offer-item [routerLink]=\"['./', item.id]\" [offer]=\"item\"></rolatech-property-offer-item>\n      }\n    } @else {\n      <rolatech-empty></rolatech-empty>\n    }\n  </rolatech-list>\n</rolatech-container>\n" }]
+        }] });
+
+class PropertyViewingItemComponent {
+    viewing = input.required();
+    status = PropertyViewingStatus;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyViewingItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: PropertyViewingItemComponent, isStandalone: true, selector: "rolatech-property-viewing-item", inputs: { viewing: { classPropertyName: "viewing", publicName: "viewing", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col hover:bg-[--rt-raised-background] cursor-pointer p-3\">\n  <div>\n    <div class=\"flex justify-between w-full mb-2\">\n      <a class=\"flex items-center gap-3\">\n        <span>Viewing ID: {{ viewing().id }}</span>\n      </a>\n      <span class=\"font-medium text-sm\">{{ status[viewing().status] }}</span>\n    </div>\n    <div class=\"flex flex-col overflow-x-scroll scrollbar-hide\">\n      <div class=\"flex flex-row py-2\">\n        @if (viewing().property.media) {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            @defer (on viewport()) {\n              <rolatech-thumbnail [src]=\"viewing().property.media[0].url\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n        } @else {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            <rolatech-image-placeholder></rolatech-image-placeholder>\n          </div>\n        }\n        <div class=\"flex w-full justify-between\">\n          <div class=\"flex justify-between w-full\">\n            <div class=\"flex flex-col\">\n              <div>{{ viewing().property.title }}</div>\n              <div class=\"inline-flex gap-1 mt-2\">\n                <div>\n                  <span class=\"mr-1\">{{ viewing().property.bedrooms }}</span>\n                  <span i18n>Bedrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ viewing().property.bathrooms }}</span>\n                  <span i18n>Bathrooms</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"text-right\">\n              <div class=\"text-sm\">\u00A3{{ viewing().property.price | fixed }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: ImagePlaceholderComponent, selector: "rolatech-image-placeholder" }, { kind: "pipe", type: FixedPipe, name: "fixed" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyViewingItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-viewing-item', imports: [MatIconModule, ThumbnailComponent, ImagePlaceholderComponent, FixedPipe], template: "<div class=\"flex flex-col hover:bg-[--rt-raised-background] cursor-pointer p-3\">\n  <div>\n    <div class=\"flex justify-between w-full mb-2\">\n      <a class=\"flex items-center gap-3\">\n        <span>Viewing ID: {{ viewing().id }}</span>\n      </a>\n      <span class=\"font-medium text-sm\">{{ status[viewing().status] }}</span>\n    </div>\n    <div class=\"flex flex-col overflow-x-scroll scrollbar-hide\">\n      <div class=\"flex flex-row py-2\">\n        @if (viewing().property.media) {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            @defer (on viewport()) {\n              <rolatech-thumbnail [src]=\"viewing().property.media[0].url\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n        } @else {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            <rolatech-image-placeholder></rolatech-image-placeholder>\n          </div>\n        }\n        <div class=\"flex w-full justify-between\">\n          <div class=\"flex justify-between w-full\">\n            <div class=\"flex flex-col\">\n              <div>{{ viewing().property.title }}</div>\n              <div class=\"inline-flex gap-1 mt-2\">\n                <div>\n                  <span class=\"mr-1\">{{ viewing().property.bedrooms }}</span>\n                  <span i18n>Bedrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ viewing().property.bathrooms }}</span>\n                  <span i18n>Bathrooms</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"text-right\">\n              <div class=\"text-sm\">\u00A3{{ viewing().property.price | fixed }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+        }] });
+
+class PropertyViewingIndexComponent extends BaseComponent {
+    propertyService = inject(PropertyService);
+    viewings;
+    viewerCategory = PropertyViewerCategory;
+    tenantCategory = PropertyApplicantType;
+    viewingStatus = PropertyViewingStatus;
+    filter = false;
+    filterOptions = {
+        type: '',
+        category: '',
+        status: '',
+    };
+    select = 0;
+    links = [
+        {
+            name: 'All',
+            icon: 'dashboard',
+        },
+        {
+            name: 'Completed',
+            icon: 'category',
+            status: 'completed',
+        },
+        {
+            name: 'Cancelled',
+            icon: 'category',
+            status: 'cancelled',
+        },
+    ];
+    ngOnInit() {
+        this.route.queryParams.subscribe(({ status }) => {
+            this.select = this.links.findIndex((item) => item.status === status);
+            if (status) {
+                this.filterOptions.status = status.toUpperCase();
+            }
+            else {
+                delete this.filterOptions.status;
+            }
+            this.findViewings();
+        });
+    }
+    findViewings() {
+        const options = {
+            sort: 'updatedAt desc',
+        };
+        const filterString = this.convertFilterOptions(this.filterOptions);
+        if (filterString) {
+            options['filter'] = filterString;
+        }
+        this.propertyService.findViewingsByUser(options).subscribe({
+            next: (res) => {
+                this.viewings = res.data;
+            },
+        });
+    }
+    findProperties(ids) { }
+    resetFilter() {
+        this.filterOptions = {
+            type: '',
+        };
+        this.filter = false;
+        this.findViewings();
+    }
+    statusCompareFn(t1, t2) {
+        return t1 === t2;
+    }
+    convertFilterOptions(jsonObj) {
+        return Object.entries(jsonObj)
+            .filter(([key, value]) => value !== '' && value !== undefined)
+            .map(([key, value]) => {
+            return `${key}:${value}`;
+        })
+            .join(',');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyViewingIndexComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: PropertyViewingIndexComponent, isStandalone: true, selector: "rolatech-property-viewing-index", usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  <rolatech-toolbar title=\"Viewings\" large> </rolatech-toolbar>\n  <rolatech-tabs [select]=\"select\">\n    @for (item of links; track item) {\n      @if (item.status) {\n        <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n      } @else {\n        <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n      }\n    }\n  </rolatech-tabs>\n  <rolatech-list>\n    @if (viewings) {\n      @for (item of viewings; track item) {\n        <rolatech-property-viewing-item [routerLink]=\"['./', item.id]\" [viewing]=\"item\"></rolatech-property-viewing-item>\n      }\n    } @else {\n      <rolatech-empty></rolatech-empty>\n    }\n  </rolatech-list>\n</rolatech-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: TabsComponent, selector: "rolatech-tabs", inputs: ["select", "loading"], outputs: ["selectChange"] }, { kind: "component", type: TabComponent, selector: "rolatech-tab", inputs: ["label"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: ListComponent, selector: "rolatech-list" }, { kind: "component", type: EmptyComponent, selector: "rolatech-empty" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: PropertyViewingItemComponent, selector: "rolatech-property-viewing-item", inputs: ["viewing"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyViewingIndexComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-viewing-index', imports: [
+                        CommonModule,
+                        ContainerComponent,
+                        RouterModule,
+                        TabsComponent,
+                        TabComponent,
+                        ToolbarComponent,
+                        ListComponent,
+                        EmptyComponent,
+                        MatButtonModule,
+                        MatIconModule,
+                        FormsModule,
+                        MatFormFieldModule,
+                        MatDatepickerModule,
+                        MatOptionModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatButtonModule,
+                        PropertyViewingItemComponent,
+                    ], template: "<rolatech-container>\n  <rolatech-toolbar title=\"Viewings\" large> </rolatech-toolbar>\n  <rolatech-tabs [select]=\"select\">\n    @for (item of links; track item) {\n      @if (item.status) {\n        <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n      } @else {\n        <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n      }\n    }\n  </rolatech-tabs>\n  <rolatech-list>\n    @if (viewings) {\n      @for (item of viewings; track item) {\n        <rolatech-property-viewing-item [routerLink]=\"['./', item.id]\" [viewing]=\"item\"></rolatech-property-viewing-item>\n      }\n    } @else {\n      <rolatech-empty></rolatech-empty>\n    }\n  </rolatech-list>\n</rolatech-container>\n" }]
+        }] });
+
+class DuePipe {
+    transform(value, ...args) {
+        if (value) {
+            const date = new Date(value);
+            date.setDate(date.getDate() - 3);
+            return date.toISOString().split('T')[0];
+        }
+        else {
+            return '';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: DuePipe, isStandalone: true, name: "due" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DuePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'due',
+                }]
+        }] });
+
+class PropertyOfferDetailComponent extends BaseComponent {
+    propertyService = inject(PropertyService);
+    authUserService = inject(AuthUserService);
+    offer;
+    info = false;
+    loadingTimeline = false;
+    timelineData;
+    status = PropertyOfferStatus;
+    timelineStatus = PropertyOfferTimelineStatus;
+    env = inject(APP_CONFIG);
+    location = inject(Location);
+    property;
+    agent;
+    checkouting = false;
+    holdingDeposit;
+    securityDeposit;
+    async ngOnInit() {
+        this.route.params.subscribe((params) => {
+            const id = params['id'];
+            this.get(id);
+        });
+        this.route.queryParams.subscribe(async (params) => {
+            const sessionId = params['session_id'];
+            if (sessionId) {
+                this.propertyService.checkOfferPaymentStatus(this.id, sessionId).subscribe({
+                    next: (res) => {
+                        if (res.status === 'paid') {
+                            this.offer.status = PropertyOfferStatus.HOLDING_DEPOSIT_PAID;
+                            // Show success UI
+                        }
+                    },
+                });
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.checkouting = false;
+    }
+    get(id) {
+        this.propertyService.getOffer(id).subscribe({
+            next: (res) => {
+                this.offer = res.data;
+                this.getProperty(this.offer.propertyId);
+                this.calculateDeposit();
+                // this.findAgentInfo();
+            },
+        });
+    }
+    timeline() {
+        this.info = true;
+        this.loadingTimeline = true;
+        this.propertyService.offerTimeline(this.id).subscribe({
+            next: (res) => {
+                this.timelineData = res.data;
+                this.loadingTimeline = false;
+            },
+            error: (error) => {
+                this.loadingTimeline = false;
+            },
+        });
+    }
+    getProperty(propertyId) {
+        this.propertyService.get(propertyId).subscribe({
+            next: (res) => {
+                this.property = res.data;
+                this.getAgentPublicInfo(this.property.agentId);
+            },
+        });
+    }
+    getAgentPublicInfo(agentId) {
+        this.authUserService.getPublicUserInfo(agentId).subscribe({
+            next: (res) => {
+                this.agent = res;
+            },
+        });
+    }
+    cancel() {
+        this.propertyService.cancelOffer(this.id).subscribe({
+            next: (res) => {
+                this.offer.status = 'CANCELLED';
+                this.snackBarService.open('Cancelled');
+            },
+            error: (error) => {
+                this.snackBarService.open(error.message);
+            },
+        });
+    }
+    calculateDeposit() {
+        const price = this.offer.item.price;
+        this.holdingDeposit = ((price * 12) / 52 / 100).toFixed(2);
+        this.securityDeposit = (((price * 12) / 52 / 100) * 5).toFixed(2);
+    }
+    holdingDepositCheckout() {
+        this.checkouting = true;
+        const data = {
+            successUrl: window.location.href + '?session_id={CHECKOUT_SESSION_ID}',
+            cancelUrl: window.location.href,
+        };
+        this.propertyService.createHoldingDepositCheckout(this.id, data).subscribe({
+            next: (res) => {
+                window.location.href = res.data.checkoutUrl;
+            },
+            error: (error) => {
+                this.checkouting = false;
+            },
+        });
+    }
+    securityDepositCheckout() {
+        this.checkouting = true;
+        const data = {
+            successUrl: window.location.href + '?session_id={CHECKOUT_SESSION_ID}',
+            cancelUrl: window.location.href,
+        };
+        this.propertyService.createSecurityDepositCheckout(this.id, data).subscribe({
+            next: (res) => {
+                window.location.href = res.data.checkoutUrl;
+            },
+            error: (error) => {
+                this.checkouting = false;
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyOfferDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: PropertyOfferDetailComponent, isStandalone: true, selector: "rolatech-property-offer-detail", usesInheritance: true, ngImport: i0, template: "@if (offer) {\n  <rolatech-container>\n    <rolatech-toolbar [title]=\"status[offer.status]\" large link=\"../\">\n      <button mat-flat-button (click)=\"timeline()\">\n        <mat-icon>history</mat-icon>\n        <span i18n>Offer status</span>\n      </button>\n    </rolatech-toolbar>\n    <div>\n      <div class=\"flex justify-between items-center py-2\">\n        <a class=\"text-xl font-bold\">Offer ID: {{ offer.id }}</a>\n      </div>\n\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Property details</div>\n        <hr class=\"mb-2\" />\n        <div\n          class=\"flex items-center py-2 cursor-pointer hover:bg-[--rt-raised-background]\"\n          [routerLink]=\"['../../', offer.item.propertyId]\"\n        >\n          <div class=\"min-w-16 w-24 object-cover aspect-video rounded-md mr-3\">\n            @defer (on viewport()) {\n              <rolatech-thumbnail [src]=\"offer.item.media[0].url\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n          <div class=\"flex w-full justify-between\">\n            <div class=\"flex justify-between w-full\">\n              <div class=\"flex flex-col\">\n                <div>{{ offer.item.propertyTitle }}</div>\n                <div class=\"inline-flex gap-1 mt-2\">\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.bedrooms }}</span>\n                    <span i18n>Bedrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.bathrooms }}</span>\n                    <span i18n>Bathrooms</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"text-right\">\n                <div class=\"text-sm\">\u00A3{{ offer.item.price | fixed }}</div>\n              </div>\n            </div>\n          </div>\n          <div class=\"hidden md:flex flex-col px-3\"></div>\n        </div>\n      </div>\n      <div>\n        <div class=\"mt-3\">\n          <div class=\"text-lg py-2 font-bold\" i18n>Offer info</div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Created at</span>\n            <span class=\"text-sm\"> {{ offer.createdAt }}</span>\n          </div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Start date</span>\n            <span class=\"text-sm\"> {{ offer.startDate }}</span>\n          </div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Asked price</span>\n            <span class=\"text-sm\" i18n>\u00A3{{ offer.amount | fixed }}</span>\n          </div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Deposit due date</span>\n            <span class=\"text-sm\"> {{ offer.startDate | due }}</span>\n          </div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Holding deposit</span>\n            <span class=\"text-sm\">\u00A3{{ holdingDeposit }}</span>\n          </div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Security deposit</span>\n            <span class=\"text-sm\">\u00A3{{ securityDeposit }}</span>\n          </div>\n          <div class=\"flex items-baseline justify-between py-1\">\n            <span class=\"font-medium min-w-20\" i18n>Note</span>\n            <!-- <span class=\"text-sm\">{{ offer.note || '' }}</span> -->\n          </div>\n        </div>\n        <div id=\"payment-element\"></div>\n        @if (offer.status.toString() === 'CREATED' || offer.status.toString() === 'PAID') {\n          <div class=\"mt-6\">\n            <div class=\"text-lg pb-3 font-medium\" i18n>Payment method</div>\n\n            <div class=\"flex items-center\">\n              <svg\n                class=\"svg-icon\"\n                style=\"width: 2rem; height: 2rem\"\n                viewBox=\"0 0 1024 1024\"\n                version=\"1.1\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M395.846 603.585c-3.921 1.98-7.936 2.925-12.81 2.925-10.9 0-19.791-5.85-24.764-14.625l-2.006-3.864-78.106-167.913c-0.956-1.98-0.956-3.865-0.956-5.845 0-7.83 5.928-13.68 13.863-13.68 2.965 0 5.928 0.944 8.893 2.924l91.965 64.43c6.884 3.864 14.82 6.79 23.708 6.79 4.972 0 9.85-0.945 14.822-2.926L861.71 282.479c-77.149-89.804-204.684-148.384-349.135-148.384-235.371 0-427.242 157.158-427.242 351.294 0 105.368 57.361 201.017 147.323 265.447 6.88 4.905 11.852 13.68 11.852 22.45 0 2.925-0.957 5.85-2.006 8.775-6.881 26.318-18.831 69.334-18.831 71.223-0.958 2.92-2.013 6.79-2.013 10.75 0 7.83 5.929 13.68 13.865 13.68 2.963 0 5.928-0.944 7.935-2.925l92.922-53.674c6.885-3.87 14.82-6.794 22.756-6.794 3.916 0 8.889 0.944 12.81 1.98 43.496 12.644 91.012 19.53 139.48 19.53 235.372 0 427.24-157.158 427.24-351.294 0-58.58-17.78-114.143-48.467-163.003l-491.39 280.07-2.963 1.98z\"\n                  fill=\"#09BB07\"\n                />\n              </svg>\n              <span class=\"ml-1\" i18n>Stripe</span>\n            </div>\n          </div>\n        }\n      </div>\n      <!-- safe area -->\n      <div class=\"pb-16 sm:pb-3\"></div>\n      <div class=\"\">\n        <div class=\"flex items-center justify-end\">\n          @if (offer.status.toString() === 'PENDING') {\n            <span\n              class=\"underline text-sm underline-offset-4 mr-6 cursor-pointer hover:text-[--rt-brand-color]\"\n              (click)=\"cancel()\"\n              i18n\n              >Cancel</span\n            >\n          }\n          @if (offer.status.toString() === 'PENDING') {\n            <button mat-flat-button class=\"min-h-11\" (click)=\"holdingDepositCheckout()\" [disabled]=\"checkouting\">\n              <span style=\"display: flex; align-items: center\">\n                @if (checkouting) {\n                  <mat-progress-spinner diameter=\"20\" mode=\"indeterminate\" [style.marginRight.px]=\"8\"></mat-progress-spinner>\n                }\n                {{ checkouting ? 'Processing...' : 'Pay holding deposit' }}\n              </span>\n            </button>\n          }\n          @if (offer.status.toString() === 'ACCEPTED') {\n            <button mat-flat-button class=\"min-h-11\" (click)=\"securityDepositCheckout()\" [disabled]=\"checkouting\">\n              <span style=\"display: flex; align-items: center\">\n                @if (checkouting) {\n                  <mat-progress-spinner diameter=\"20\" mode=\"indeterminate\" [style.marginRight.px]=\"8\"></mat-progress-spinner>\n                }\n                {{ checkouting ? 'Processing...' : 'Pay security deposit' }}\n              </span>\n            </button>\n          }\n          <!-- <button mat-flat-button class=\"w-32 min-h-11\" (click)=\"securityDepositCheckout()\" i18n>Pay security deposit</button> -->\n        </div>\n      </div>\n    </div>\n  </rolatech-container>\n}\n@if (info) {\n  <div\n    [ngClass]=\"loadingTimeline ? 'translate-x-full' : 'translate-none'\"\n    class=\"fixed top-0 right-0 z-[1001] h-screen p-4 overflow-y-auto transition-transform bg-[--rt-raised-background] w-80 sm:w-[300px] shadow-xl\"\n  >\n    <div class=\"flex justify-between items-center sm:p-4\">\n      <div class=\"text-xl font-bold\" i18n>Status</div>\n      <button mat-icon-button (click)=\"info = !info\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n    @if (loadingTimeline) {\n      <div>\n        <rolatech-spinner></rolatech-spinner>\n      </div>\n    } @else {\n      <div class=\"mt-3 p-1 sm:p-4\">\n        <ol class=\"relative boffer-l boffer-[--rt-boffer-color]\">\n          @for (item of timelineData; track item) {\n            <li class=\"mb-8 ml-4\">\n              <div\n                class=\"absolute w-3 h-3 rounded-full mt-1.5 -left-1.5 boffer boffer-[--rt-raised-background] bg-[--rt-text-primary]\"\n              ></div>\n              <div class=\"text-md font-bold mb-1\">{{ timelineStatus[item.status] }}</div>\n              @if (item.status === 'OFFER_RETURN_REJECTED') {\n                <div class=\"text-sm mb-1\">{{ item.return.note }}</div>\n              }\n              @if (item.status === 'OFFER_RETURN_REQUESTED') {\n                <div class=\"text-sm mb-1\">{{ item.return.reason }}</div>\n              }\n              <div class=\"text-sm text-[--rt-text-secondary]\">{{ item.date }}</div>\n            </li>\n          }\n        </ol>\n      </div>\n    }\n  </div>\n}\n\n<div\n  (click)=\"info = !info\"\n  [ngClass]=\"info ? 'visible' : 'invisible'\"\n  class=\"bg-[--rt-10-percent-layer] fixed inset-0 z-[1000]\"\n></div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.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$1.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: "pipe", type: FixedPipe, name: "fixed" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: DuePipe, name: "due" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyOfferDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-offer-detail', imports: [
+                        MatButtonModule,
+                        MatIconModule,
+                        NgClass,
+                        ThumbnailComponent,
+                        SpinnerComponent,
+                        ContainerComponent,
+                        ToolbarComponent,
+                        FixedPipe,
+                        MatProgressSpinnerModule,
+                        RouterLink,
+                        DuePipe,
+                    ], template: "@if (offer) {\n  <rolatech-container>\n    <rolatech-toolbar [title]=\"status[offer.status]\" large link=\"../\">\n      <button mat-flat-button (click)=\"timeline()\">\n        <mat-icon>history</mat-icon>\n        <span i18n>Offer status</span>\n      </button>\n    </rolatech-toolbar>\n    <div>\n      <div class=\"flex justify-between items-center py-2\">\n        <a class=\"text-xl font-bold\">Offer ID: {{ offer.id }}</a>\n      </div>\n\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Property details</div>\n        <hr class=\"mb-2\" />\n        <div\n          class=\"flex items-center py-2 cursor-pointer hover:bg-[--rt-raised-background]\"\n          [routerLink]=\"['../../', offer.item.propertyId]\"\n        >\n          <div class=\"min-w-16 w-24 object-cover aspect-video rounded-md mr-3\">\n            @defer (on viewport()) {\n              <rolatech-thumbnail [src]=\"offer.item.media[0].url\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n          <div class=\"flex w-full justify-between\">\n            <div class=\"flex justify-between w-full\">\n              <div class=\"flex flex-col\">\n                <div>{{ offer.item.propertyTitle }}</div>\n                <div class=\"inline-flex gap-1 mt-2\">\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.bedrooms }}</span>\n                    <span i18n>Bedrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ offer.item.bathrooms }}</span>\n                    <span i18n>Bathrooms</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"text-right\">\n                <div class=\"text-sm\">\u00A3{{ offer.item.price | fixed }}</div>\n              </div>\n            </div>\n          </div>\n          <div class=\"hidden md:flex flex-col px-3\"></div>\n        </div>\n      </div>\n      <div>\n        <div class=\"mt-3\">\n          <div class=\"text-lg py-2 font-bold\" i18n>Offer info</div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Created at</span>\n            <span class=\"text-sm\"> {{ offer.createdAt }}</span>\n          </div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Start date</span>\n            <span class=\"text-sm\"> {{ offer.startDate }}</span>\n          </div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Asked price</span>\n            <span class=\"text-sm\" i18n>\u00A3{{ offer.amount | fixed }}</span>\n          </div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Deposit due date</span>\n            <span class=\"text-sm\"> {{ offer.startDate | due }}</span>\n          </div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Holding deposit</span>\n            <span class=\"text-sm\">\u00A3{{ holdingDeposit }}</span>\n          </div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Security deposit</span>\n            <span class=\"text-sm\">\u00A3{{ securityDeposit }}</span>\n          </div>\n          <div class=\"flex items-baseline justify-between py-1\">\n            <span class=\"font-medium min-w-20\" i18n>Note</span>\n            <!-- <span class=\"text-sm\">{{ offer.note || '' }}</span> -->\n          </div>\n        </div>\n        <div id=\"payment-element\"></div>\n        @if (offer.status.toString() === 'CREATED' || offer.status.toString() === 'PAID') {\n          <div class=\"mt-6\">\n            <div class=\"text-lg pb-3 font-medium\" i18n>Payment method</div>\n\n            <div class=\"flex items-center\">\n              <svg\n                class=\"svg-icon\"\n                style=\"width: 2rem; height: 2rem\"\n                viewBox=\"0 0 1024 1024\"\n                version=\"1.1\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M395.846 603.585c-3.921 1.98-7.936 2.925-12.81 2.925-10.9 0-19.791-5.85-24.764-14.625l-2.006-3.864-78.106-167.913c-0.956-1.98-0.956-3.865-0.956-5.845 0-7.83 5.928-13.68 13.863-13.68 2.965 0 5.928 0.944 8.893 2.924l91.965 64.43c6.884 3.864 14.82 6.79 23.708 6.79 4.972 0 9.85-0.945 14.822-2.926L861.71 282.479c-77.149-89.804-204.684-148.384-349.135-148.384-235.371 0-427.242 157.158-427.242 351.294 0 105.368 57.361 201.017 147.323 265.447 6.88 4.905 11.852 13.68 11.852 22.45 0 2.925-0.957 5.85-2.006 8.775-6.881 26.318-18.831 69.334-18.831 71.223-0.958 2.92-2.013 6.79-2.013 10.75 0 7.83 5.929 13.68 13.865 13.68 2.963 0 5.928-0.944 7.935-2.925l92.922-53.674c6.885-3.87 14.82-6.794 22.756-6.794 3.916 0 8.889 0.944 12.81 1.98 43.496 12.644 91.012 19.53 139.48 19.53 235.372 0 427.24-157.158 427.24-351.294 0-58.58-17.78-114.143-48.467-163.003l-491.39 280.07-2.963 1.98z\"\n                  fill=\"#09BB07\"\n                />\n              </svg>\n              <span class=\"ml-1\" i18n>Stripe</span>\n            </div>\n          </div>\n        }\n      </div>\n      <!-- safe area -->\n      <div class=\"pb-16 sm:pb-3\"></div>\n      <div class=\"\">\n        <div class=\"flex items-center justify-end\">\n          @if (offer.status.toString() === 'PENDING') {\n            <span\n              class=\"underline text-sm underline-offset-4 mr-6 cursor-pointer hover:text-[--rt-brand-color]\"\n              (click)=\"cancel()\"\n              i18n\n              >Cancel</span\n            >\n          }\n          @if (offer.status.toString() === 'PENDING') {\n            <button mat-flat-button class=\"min-h-11\" (click)=\"holdingDepositCheckout()\" [disabled]=\"checkouting\">\n              <span style=\"display: flex; align-items: center\">\n                @if (checkouting) {\n                  <mat-progress-spinner diameter=\"20\" mode=\"indeterminate\" [style.marginRight.px]=\"8\"></mat-progress-spinner>\n                }\n                {{ checkouting ? 'Processing...' : 'Pay holding deposit' }}\n              </span>\n            </button>\n          }\n          @if (offer.status.toString() === 'ACCEPTED') {\n            <button mat-flat-button class=\"min-h-11\" (click)=\"securityDepositCheckout()\" [disabled]=\"checkouting\">\n              <span style=\"display: flex; align-items: center\">\n                @if (checkouting) {\n                  <mat-progress-spinner diameter=\"20\" mode=\"indeterminate\" [style.marginRight.px]=\"8\"></mat-progress-spinner>\n                }\n                {{ checkouting ? 'Processing...' : 'Pay security deposit' }}\n              </span>\n            </button>\n          }\n          <!-- <button mat-flat-button class=\"w-32 min-h-11\" (click)=\"securityDepositCheckout()\" i18n>Pay security deposit</button> -->\n        </div>\n      </div>\n    </div>\n  </rolatech-container>\n}\n@if (info) {\n  <div\n    [ngClass]=\"loadingTimeline ? 'translate-x-full' : 'translate-none'\"\n    class=\"fixed top-0 right-0 z-[1001] h-screen p-4 overflow-y-auto transition-transform bg-[--rt-raised-background] w-80 sm:w-[300px] shadow-xl\"\n  >\n    <div class=\"flex justify-between items-center sm:p-4\">\n      <div class=\"text-xl font-bold\" i18n>Status</div>\n      <button mat-icon-button (click)=\"info = !info\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n    @if (loadingTimeline) {\n      <div>\n        <rolatech-spinner></rolatech-spinner>\n      </div>\n    } @else {\n      <div class=\"mt-3 p-1 sm:p-4\">\n        <ol class=\"relative boffer-l boffer-[--rt-boffer-color]\">\n          @for (item of timelineData; track item) {\n            <li class=\"mb-8 ml-4\">\n              <div\n                class=\"absolute w-3 h-3 rounded-full mt-1.5 -left-1.5 boffer boffer-[--rt-raised-background] bg-[--rt-text-primary]\"\n              ></div>\n              <div class=\"text-md font-bold mb-1\">{{ timelineStatus[item.status] }}</div>\n              @if (item.status === 'OFFER_RETURN_REJECTED') {\n                <div class=\"text-sm mb-1\">{{ item.return.note }}</div>\n              }\n              @if (item.status === 'OFFER_RETURN_REQUESTED') {\n                <div class=\"text-sm mb-1\">{{ item.return.reason }}</div>\n              }\n              <div class=\"text-sm text-[--rt-text-secondary]\">{{ item.date }}</div>\n            </li>\n          }\n        </ol>\n      </div>\n    }\n  </div>\n}\n\n<div\n  (click)=\"info = !info\"\n  [ngClass]=\"info ? 'visible' : 'invisible'\"\n  class=\"bg-[--rt-10-percent-layer] fixed inset-0 z-[1000]\"\n></div>\n" }]
+        }] });
+
+class PropertyViewingDetailComponent extends BaseComponent {
+    propertyService = inject(PropertyService);
+    authUserService = inject(AuthUserService);
+    agent;
+    viewing;
+    info = false;
+    loadingTimeline = false;
+    status = PropertyViewingStatus;
+    env = inject(APP_CONFIG);
+    property;
+    async ngOnInit() {
+        this.route.params.subscribe((params) => {
+            const id = params['id'];
+            this.get(id);
+        });
+    }
+    get(id) {
+        this.propertyService.getViewing(id).subscribe({
+            next: (res) => {
+                this.viewing = res.data;
+                this.getProperty(this.viewing.propertyId);
+                // this.findAgentInfo();
+            },
+        });
+    }
+    getProperty(propertyId) {
+        this.propertyService.get(propertyId).subscribe({
+            next: (res) => {
+                this.property = res.data;
+                this.getAgentPublicInfo(this.property.agentId);
+            },
+        });
+    }
+    getAgentPublicInfo(agentId) {
+        this.authUserService.getPublicUserInfo(agentId).subscribe({
+            next: (res) => {
+                this.agent = res;
+            },
+        });
+    }
+    cancel() {
+        this.propertyService.cancelViewing(this.id).subscribe({
+            next: (res) => {
+                this.viewing.status = 'CANCELLED';
+                this.snackBarService.open('Cancelled');
+            },
+            error: (error) => {
+                this.snackBarService.open(error.message);
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyViewingDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: PropertyViewingDetailComponent, isStandalone: true, selector: "rolatech-property-viewing-detail", usesInheritance: true, ngImport: i0, template: "@if (viewing) {\n  <rolatech-container>\n    <rolatech-toolbar [title]=\"status[viewing.status]\" large link=\"../\"> </rolatech-toolbar>\n    <div>\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Property details</div>\n        <hr class=\"mb-2\" />\n        @if (property) {\n          <div\n            class=\"flex items-center py-2 cursor-pointer hover:bg-[--rt-raised-background]\"\n            [routerLink]=\"['../../', property.id]\"\n          >\n            <div class=\"min-w-16 w-24 object-cover aspect-video rounded-md mr-3\">\n              @defer (on viewport()) {\n                <rolatech-thumbnail [src]=\"property.media[0].url\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n              } @placeholder {\n                <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n              }\n            </div>\n            <div class=\"flex w-full justify-between\">\n              <div class=\"flex justify-between w-full\">\n                <div class=\"flex flex-col\">\n                  <div>{{ property.title }}</div>\n                  <div class=\"inline-flex gap-1 mt-2\">\n                    <div>\n                      <span class=\"mr-1\">{{ property.bedrooms }}</span>\n                      <span i18n>Bedrooms</span>\n                    </div>\n                    <div>\n                      <span class=\"mr-1\">{{ property.bathrooms }}</span>\n                      <span i18n>Bathrooms</span>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"text-right\">\n                  <div class=\"text-sm\">\u00A3{{ property.price | fixed }}</div>\n                </div>\n              </div>\n            </div>\n            <div class=\"hidden md:flex flex-col px-3\"></div>\n          </div>\n        }\n      </div>\n\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Proposed times</div>\n        <hr class=\"mb-2\" />\n        @for (item of viewing.proposedSlots; track $index) {\n          <div class=\"flex flex-row items-center gap-3 py-3\">\n            <rolatech-rich-label label=\"Date\" [title]=\"item.date\"></rolatech-rich-label>\n            <rolatech-rich-label label=\"Time\" [title]=\"item.time\"></rolatech-rich-label>\n            @if (viewing.viewingDate && viewing.viewingTime) {\n              @if (item.date === viewing.viewingDate && item.time === viewing.viewingTime) {\n                <div class=\"ml-3\"><button mat-flat-button i18n disabled=\"\">Confirmed</button></div>\n              }\n            }\n          </div>\n        }\n      </div>\n      <!-- safe area -->\n      <div class=\"pb-16 sm:pb-3\"></div>\n      <div class=\"\">\n        <div class=\"flex items-center justify-end\">\n          @if (viewing.status.toString() !== 'CANCELLED') {\n            <button mat-flat-button class=\"min-h-11\" (click)=\"cancel()\" i18n>Cancel</button>\n          }\n        </div>\n      </div>\n    </div>\n  </rolatech-container>\n}\n@if (info) {\n  <div\n    [ngClass]=\"loadingTimeline ? 'translate-x-full' : 'translate-none'\"\n    class=\"fixed top-0 right-0 z-[1001] h-screen p-4 overflow-y-auto transition-transform bg-[--rt-raised-background] w-80 sm:w-[300px] shadow-xl\"\n  >\n    <div class=\"flex justify-between items-center sm:p-4\">\n      <div class=\"text-xl font-bold\" i18n>Status</div>\n      <button mat-icon-button (click)=\"info = !info\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n  </div>\n}\n\n<div\n  (click)=\"info = !info\"\n  [ngClass]=\"info ? 'visible' : 'invisible'\"\n  class=\"bg-[--rt-10-percent-layer] fixed inset-0 z-[1000]\"\n></div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.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$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: RichLabelComponent, selector: "rolatech-rich-label", inputs: ["label", "title"] }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "pipe", type: FixedPipe, name: "fixed" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], deferBlockDependencies: [() => [ThumbnailComponent]] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyViewingDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-viewing-detail', imports: [
+                        MatButtonModule,
+                        MatIconModule,
+                        NgClass,
+                        ThumbnailComponent,
+                        RichLabelComponent,
+                        ContainerComponent,
+                        ToolbarComponent,
+                        FixedPipe,
+                        RouterLink,
+                    ], template: "@if (viewing) {\n  <rolatech-container>\n    <rolatech-toolbar [title]=\"status[viewing.status]\" large link=\"../\"> </rolatech-toolbar>\n    <div>\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Property details</div>\n        <hr class=\"mb-2\" />\n        @if (property) {\n          <div\n            class=\"flex items-center py-2 cursor-pointer hover:bg-[--rt-raised-background]\"\n            [routerLink]=\"['../../', property.id]\"\n          >\n            <div class=\"min-w-16 w-24 object-cover aspect-video rounded-md mr-3\">\n              @defer (on viewport()) {\n                <rolatech-thumbnail [src]=\"property.media[0].url\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n              } @placeholder {\n                <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n              }\n            </div>\n            <div class=\"flex w-full justify-between\">\n              <div class=\"flex justify-between w-full\">\n                <div class=\"flex flex-col\">\n                  <div>{{ property.title }}</div>\n                  <div class=\"inline-flex gap-1 mt-2\">\n                    <div>\n                      <span class=\"mr-1\">{{ property.bedrooms }}</span>\n                      <span i18n>Bedrooms</span>\n                    </div>\n                    <div>\n                      <span class=\"mr-1\">{{ property.bathrooms }}</span>\n                      <span i18n>Bathrooms</span>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"text-right\">\n                  <div class=\"text-sm\">\u00A3{{ property.price | fixed }}</div>\n                </div>\n              </div>\n            </div>\n            <div class=\"hidden md:flex flex-col px-3\"></div>\n          </div>\n        }\n      </div>\n\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Proposed times</div>\n        <hr class=\"mb-2\" />\n        @for (item of viewing.proposedSlots; track $index) {\n          <div class=\"flex flex-row items-center gap-3 py-3\">\n            <rolatech-rich-label label=\"Date\" [title]=\"item.date\"></rolatech-rich-label>\n            <rolatech-rich-label label=\"Time\" [title]=\"item.time\"></rolatech-rich-label>\n            @if (viewing.viewingDate && viewing.viewingTime) {\n              @if (item.date === viewing.viewingDate && item.time === viewing.viewingTime) {\n                <div class=\"ml-3\"><button mat-flat-button i18n disabled=\"\">Confirmed</button></div>\n              }\n            }\n          </div>\n        }\n      </div>\n      <!-- safe area -->\n      <div class=\"pb-16 sm:pb-3\"></div>\n      <div class=\"\">\n        <div class=\"flex items-center justify-end\">\n          @if (viewing.status.toString() !== 'CANCELLED') {\n            <button mat-flat-button class=\"min-h-11\" (click)=\"cancel()\" i18n>Cancel</button>\n          }\n        </div>\n      </div>\n    </div>\n  </rolatech-container>\n}\n@if (info) {\n  <div\n    [ngClass]=\"loadingTimeline ? 'translate-x-full' : 'translate-none'\"\n    class=\"fixed top-0 right-0 z-[1001] h-screen p-4 overflow-y-auto transition-transform bg-[--rt-raised-background] w-80 sm:w-[300px] shadow-xl\"\n  >\n    <div class=\"flex justify-between items-center sm:p-4\">\n      <div class=\"text-xl font-bold\" i18n>Status</div>\n      <button mat-icon-button (click)=\"info = !info\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n  </div>\n}\n\n<div\n  (click)=\"info = !info\"\n  [ngClass]=\"info ? 'visible' : 'invisible'\"\n  class=\"bg-[--rt-10-percent-layer] fixed inset-0 z-[1000]\"\n></div>\n" }]
+        }] });
+
+class PropertyWishlistComponent extends BaseComponent {
+    propertyService = inject(PropertyService);
+    wishlist;
+    ngOnInit() {
+        this.findWishlist();
+    }
+    findWishlist() {
+        this.propertyService.findWishlist({}).subscribe({
+            next: (res) => {
+                this.wishlist = res.data;
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyWishlistComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: PropertyWishlistComponent, isStandalone: true, selector: "rolatech-property-wishlist", usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  <rolatech-toolbar title=\"Wishlist\" large> </rolatech-toolbar>\n  <rolatech-list>\n    @if (wishlist) {\n      @for (item of wishlist; track item) {\n        <rolatech-property-item [routerLink]=\"['../', item.id]\" [property]=\"item\"></rolatech-property-item>\n      }\n    } @else {\n      <rolatech-empty></rolatech-empty>\n    }\n  </rolatech-list>\n</rolatech-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: ListComponent, selector: "rolatech-list" }, { kind: "component", type: EmptyComponent, selector: "rolatech-empty" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: PropertyItemComponent, selector: "rolatech-property-item", inputs: ["property"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyWishlistComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-wishlist', imports: [
+                        CommonModule,
+                        ContainerComponent,
+                        RouterModule,
+                        ToolbarComponent,
+                        ListComponent,
+                        EmptyComponent,
+                        MatButtonModule,
+                        MatIconModule,
+                        FormsModule,
+                        MatFormFieldModule,
+                        MatDatepickerModule,
+                        MatOptionModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatButtonModule,
+                        PropertyItemComponent,
+                    ], template: "<rolatech-container>\n  <rolatech-toolbar title=\"Wishlist\" large> </rolatech-toolbar>\n  <rolatech-list>\n    @if (wishlist) {\n      @for (item of wishlist; track item) {\n        <rolatech-property-item [routerLink]=\"['../', item.id]\" [property]=\"item\"></rolatech-property-item>\n      }\n    } @else {\n      <rolatech-empty></rolatech-empty>\n    }\n  </rolatech-list>\n</rolatech-container>\n" }]
+        }] });
+
+const propertyRoutes = [
+    {
+        path: '',
+        component: PropertyLayoutComponent,
+        children: [
+            {
+                path: '',
+                loadComponent: () => import('./rolatech-angular-property-property-index.component-C-eBtys3.mjs').then((x) => x.PropertyIndexComponent),
+            },
+        ],
+    },
+    {
+        path: 'wishlist',
+        canActivate: [AuthGuard],
+        component: PropertyWishlistComponent,
+    },
+    {
+        path: 'viewings',
+        canActivate: [AuthGuard],
+        component: PropertyViewingIndexComponent,
+    },
+    {
+        path: 'offers',
+        canActivate: [AuthGuard],
+        component: PropertyOfferIndexComponent,
+    },
+    {
+        path: 'viewings/:id',
+        canActivate: [AuthGuard],
+        component: PropertyViewingDetailComponent,
+    },
+    {
+        path: 'offers/:id',
+        canActivate: [AuthGuard],
+        component: PropertyOfferDetailComponent,
+    },
+    {
+        path: ':id/viewing/application',
+        canActivate: [AuthGuard],
+        component: PropertyViewingRequestComponent,
+    },
+    {
+        path: ':id/offer',
+        canActivate: [AuthGuard],
+        component: PropertyOfferComponent,
+    },
+    {
+        path: ':id',
+        component: PropertyDetailsComponent,
+    },
+];
+
+class PropertyManageFilterComponent {
+    towns = ['London'];
+    filter = false;
+    searchOptions = {
+        town: '',
+        startDate: '',
+        endDate: '',
+    };
+    reset() { }
+    search() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyManageFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: PropertyManageFilterComponent, isStandalone: true, selector: "rolatech-property-manage-filter", ngImport: i0, template: "<div class=\"p-3\">\n  <div class=\"bg-[--rt-raised-background] p-3 flex items-center justify-between rounded-md\">\n    <div class=\"flex items-center\">\n      <mat-form-field subscriptSizing=\"dynamic\">\n        <mat-select #select=\"matSelect\" placeholder=\"Town\" i18n-placeholder [(ngModel)]=\"searchOptions.town\">\n          @for (town of towns; track town) {\n            <mat-option [value]=\"town\">\n              {{ town }}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      <!-- <mat-form-field>\n      <input />\n    </mat-form-field> -->\n    </div>\n    <div class=\"flex gap-3\">\n      <a mat-stroked-button class=\"w-[128px]\" (click)=\"reset()\" i18n>Reset</a>\n      <a mat-flat-button class=\"w-full\" (click)=\"search()\" i18n>Search</a>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyManageFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-manage-filter', imports: [CommonModule, MatButtonModule, MatFormFieldModule, MatSelectModule, MatOptionModule, FormsModule], template: "<div class=\"p-3\">\n  <div class=\"bg-[--rt-raised-background] p-3 flex items-center justify-between rounded-md\">\n    <div class=\"flex items-center\">\n      <mat-form-field subscriptSizing=\"dynamic\">\n        <mat-select #select=\"matSelect\" placeholder=\"Town\" i18n-placeholder [(ngModel)]=\"searchOptions.town\">\n          @for (town of towns; track town) {\n            <mat-option [value]=\"town\">\n              {{ town }}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      <!-- <mat-form-field>\n      <input />\n    </mat-form-field> -->\n    </div>\n    <div class=\"flex gap-3\">\n      <a mat-stroked-button class=\"w-[128px]\" (click)=\"reset()\" i18n>Reset</a>\n      <a mat-flat-button class=\"w-full\" (click)=\"search()\" i18n>Search</a>\n    </div>\n  </div>\n</div>\n" }]
+        }] });
+
+class PropertyManageIndexComponent {
+    hasClass = true;
+    paginator = viewChild(MatPaginator);
+    dialog = inject(MatDialog);
+    snackBar = inject(MatSnackBar);
+    propertyService = inject(PropertyService);
+    isLoading = false;
+    isSearch = false;
+    properties = [];
+    ngOnInit() {
+        this.findProperties();
+    }
+    findProperties() {
+        this.propertyService.find({}).subscribe({
+            next: (res) => {
+                this.properties = res.data;
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyManageIndexComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: PropertyManageIndexComponent, isStandalone: true, selector: "rolatech-property-manage-index", host: { properties: { "class.rolatech-property-manage-index": "this.hasClass" } }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "<rolatech-toolbar title=\"Properties\">\n  <div class=\"flex items-center gap-2\">\n    <button mat-flat-button routerLink=\"./create\">\n      <mat-icon>add</mat-icon>\n      <span i18n>Add property</span>\n    </button>\n  </div>\n</rolatech-toolbar>\n@if (isLoading) {\n  <div class=\"flex justify-center items-center\">\n    <rolatech-spinner></rolatech-spinner>\n  </div>\n} @else {\n  <div class=\"bg-[--rt-rasised-background] h-full\">\n    <rolatech-property-manage-filter></rolatech-property-manage-filter>\n    <div class=\"flex flex-wrap p-3 gap-3\">\n      @for (item of properties; track $index) {\n        <rolatech-property-manage-item\n          [property]=\"item\"\n          routerLink=\"./{{ item.id }}/manage/info\"\n        ></rolatech-property-manage-item>\n      }\n    </div>\n  </div>\n\n  <!-- <mat-paginator\n    #paginator\n    [length]=\"length\"\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"pageEvent = find($event)\"\n    hidePageSize\n    showFirstLastButtons\n  >\n  </mat-paginator> -->\n}\n", styles: ["mat-form-field{width:100%}table{width:100%}td.mat-column-actions{text-align:right;max-width:64px;font-size:.8rem;padding:0 8px}.mat-mdc-header-cell.actions{text-align:right;max-width:64px;width:64px}.mat-mdc-cell:nth-last-child(2),.mat-mdc-header-cell:nth-last-child(2),.mat-mdc-footer-cell:nth-last-child(2){text-align:right;max-width:180px;width:180px}mat-cell:last-of-type,mat-header-cell:last-of-type,mat-footer-cell:last-of-type{text-align:right;padding-right:8px!important}rolatech-property-manage-index{--rt-property-view-items-per-row: 1}@media (min-width: 600px){rolatech-property-manage-index{--rt-property-view-items-per-row: 2}}@media (min-width: 768px){rolatech-property-manage-index{--rt-property-view-items-per-row: 3}}@media (min-width: 1280px){rolatech-property-manage-index{--rt-property-view-items-per-row: 3}}@media (min-width: 1536px){rolatech-property-manage-index{--rt-property-view-items-per-row: 4}}@media (min-width: 1920px){rolatech-property-manage-index{--rt-property-view-items-per-row: 5}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: SpinnerComponent, selector: "rolatech-spinner", inputs: ["title"] }, { kind: "component", type: PropertyManageItemComponent, selector: "rolatech-property-manage-item", inputs: ["property", "thumbnail", "list"] }, { kind: "component", type: PropertyManageFilterComponent, selector: "rolatech-property-manage-filter" }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyManageIndexComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-manage-index', imports: [
+                        MatButtonModule,
+                        RouterLink,
+                        MatIconModule,
+                        MatTableModule,
+                        MatMenuModule,
+                        MatPaginatorModule,
+                        ToolbarComponent,
+                        SpinnerComponent,
+                        PropertyManageItemComponent,
+                        PropertyManageFilterComponent,
+                    ], encapsulation: ViewEncapsulation.None, template: "<rolatech-toolbar title=\"Properties\">\n  <div class=\"flex items-center gap-2\">\n    <button mat-flat-button routerLink=\"./create\">\n      <mat-icon>add</mat-icon>\n      <span i18n>Add property</span>\n    </button>\n  </div>\n</rolatech-toolbar>\n@if (isLoading) {\n  <div class=\"flex justify-center items-center\">\n    <rolatech-spinner></rolatech-spinner>\n  </div>\n} @else {\n  <div class=\"bg-[--rt-rasised-background] h-full\">\n    <rolatech-property-manage-filter></rolatech-property-manage-filter>\n    <div class=\"flex flex-wrap p-3 gap-3\">\n      @for (item of properties; track $index) {\n        <rolatech-property-manage-item\n          [property]=\"item\"\n          routerLink=\"./{{ item.id }}/manage/info\"\n        ></rolatech-property-manage-item>\n      }\n    </div>\n  </div>\n\n  <!-- <mat-paginator\n    #paginator\n    [length]=\"length\"\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"pageEvent = find($event)\"\n    hidePageSize\n    showFirstLastButtons\n  >\n  </mat-paginator> -->\n}\n", styles: ["mat-form-field{width:100%}table{width:100%}td.mat-column-actions{text-align:right;max-width:64px;font-size:.8rem;padding:0 8px}.mat-mdc-header-cell.actions{text-align:right;max-width:64px;width:64px}.mat-mdc-cell:nth-last-child(2),.mat-mdc-header-cell:nth-last-child(2),.mat-mdc-footer-cell:nth-last-child(2){text-align:right;max-width:180px;width:180px}mat-cell:last-of-type,mat-header-cell:last-of-type,mat-footer-cell:last-of-type{text-align:right;padding-right:8px!important}rolatech-property-manage-index{--rt-property-view-items-per-row: 1}@media (min-width: 600px){rolatech-property-manage-index{--rt-property-view-items-per-row: 2}}@media (min-width: 768px){rolatech-property-manage-index{--rt-property-view-items-per-row: 3}}@media (min-width: 1280px){rolatech-property-manage-index{--rt-property-view-items-per-row: 3}}@media (min-width: 1536px){rolatech-property-manage-index{--rt-property-view-items-per-row: 4}}@media (min-width: 1920px){rolatech-property-manage-index{--rt-property-view-items-per-row: 5}}\n"] }]
+        }], propDecorators: { hasClass: [{
+                type: HostBinding,
+                args: ['class.rolatech-property-manage-index']
+            }] } });
+
+class PropertyManageCreateComponent {
+    propertyService = inject(PropertyService);
+    router = inject(Router);
+    route = inject(ActivatedRoute);
+    snackBar = inject(MatSnackBar);
+    property = {};
+    create() {
+        const data = {
+            ...this.property,
+        };
+        this.propertyService.create(data).subscribe({
+            next: (res) => {
+                this.router.navigate([`../${res.data.id}/manage/info`], {
+                    relativeTo: this.route,
+                });
+            },
+            error: (e) => {
+                this.snackBar.open(e.message);
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyManageCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: PropertyManageCreateComponent, isStandalone: true, selector: "rolatech-property-manage-create", ngImport: i0, template: "<rolatech-toolbar title=\"Add property\" link=\"../\"> </rolatech-toolbar>\n<div class=\"p-3\">\n  <section>\n    <form #productForm=\"ngForm\">\n      <div class=\"flex flex-col\">\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Title </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"property.title\" name=\"title\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Description </mat-label>\n          <textarea\n            matInput\n            type=\"text\"\n            [(ngModel)]=\"property.description\"\n            name=\"description\"\n            required\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"3\"\n          ></textarea>\n        </mat-form-field>\n      </div>\n    </form>\n  </section>\n  <div i18n>* items are required</div>\n  <div class=\"mt-3\">\n    <button mat-flat-button class=\"w-28\" (click)=\"create()\" i18n>Create</button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.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$3.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyManageCreateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-manage-create', imports: [
+                        ToolbarComponent,
+                        FormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        TextFieldModule,
+                        MatSelectModule,
+                        MatOptionModule,
+                        MatButtonModule,
+                    ], template: "<rolatech-toolbar title=\"Add property\" link=\"../\"> </rolatech-toolbar>\n<div class=\"p-3\">\n  <section>\n    <form #productForm=\"ngForm\">\n      <div class=\"flex flex-col\">\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Title </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"property.title\" name=\"title\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Description </mat-label>\n          <textarea\n            matInput\n            type=\"text\"\n            [(ngModel)]=\"property.description\"\n            name=\"description\"\n            required\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"3\"\n          ></textarea>\n        </mat-form-field>\n      </div>\n    </form>\n  </section>\n  <div i18n>* items are required</div>\n  <div class=\"mt-3\">\n    <button mat-flat-button class=\"w-28\" (click)=\"create()\" i18n>Create</button>\n  </div>\n</div>\n" }]
+        }] });
+
+class PropertyManageLayoutComponent extends BaseComponent {
+    property;
+    submitted = false;
+    accepted = false;
+    isDraft = false;
+    propertyService = inject(PropertyService);
+    ngOnInit() {
+        this.id = this.route.snapshot.paramMap.get('id');
+        this.get();
+    }
+    get() {
+        this.propertyService.get(this.id).subscribe({
+            next: (res) => {
+                this.property = res.data;
+            },
+        });
+    }
+    submit() {
+        this.propertyService.submitForReview(this.id).subscribe({
+            next: (res) => {
+                this.snackBarService.open('Submit successfully');
+                this.property.status = PropertyStatus['Pending'];
+                this.updateStatus();
+            },
+            error: (error) => {
+                this.snackBarService.open(error.message);
+            },
+        });
+    }
+    updateStatus() {
+        this.isDraft = this.property.status.toString() === 'DRAFT' || this.property.status.toString() === 'PENDING';
+        this.accepted = this.property.status.toString() === 'ACCEPTED';
+    }
+    publish() {
+        this.propertyService.publish(this.id).subscribe({
+            next: (res) => {
+                this.snackBarService.open('Publish successfully');
+                this.property.status = PropertyStatus['Available'];
+                this.updateStatus();
+            },
+            error: (error) => {
+                this.snackBarService.open(error.message);
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyManageLayoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: PropertyManageLayoutComponent, isStandalone: true, selector: "rolatech-property-manage-layout", usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col md:flex-row m-auto\">\n  <div\n    class=\"min-w-[256px] px-3 md:px-0 flex flex-row md:flex-col md:h-full items-center md:items-start h-16 overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n  >\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-1\" i18n>Property</div>\n      <a routerLink=\"./info\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Basic info</a>\n      <a routerLink=\"./media\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Media</a>\n      <a routerLink=\"./video-tour\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Video tour</a>\n      <a routerLink=\"./sections\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Details</a>\n      <a routerLink=\"./location\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Location</a>\n      <a routerLink=\"./features\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Features</a>\n      <!-- <a routerLink=\"./amenities\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Amenities</a> -->\n      <!-- <a routerLink=\"./tags\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Tags</a> -->\n      <!-- <a routerLink=\"./options\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Options</a> -->\n    </div>\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\" i18n>Settings</div>\n      <!-- <a routerLink=\"./variants\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Variants</a> -->\n      <a routerLink=\"./schedule\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Schedule</a>\n      <a routerLink=\"./pricing\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Pricing</a>\n    </div>\n    <!-- <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\" i18n>Others</div>\n    </div> -->\n    @if (property) {\n      @if (property.status.toString() === 'DRAFT') {\n        <div class=\"md:mt-6 md:ml-2 flex items-center\">\n          <button mat-flat-button (click)=\"submit()\" i18n>Submit for review</button>\n        </div>\n      }\n      @if (property.status.toString() === 'PENDING') {\n        <div class=\"md:mt-6 md:ml-2 flex items-center\">\n          <button mat-flat-button disabled i18n>Pending</button>\n        </div>\n      }\n      @if (property.status.toString() === 'APPROVED') {\n        <div class=\"md:mt-6 md:ml-2 flex items-center\">\n          <button mat-flat-button (click)=\"publish()\" i18n>Publish</button>\n        </div>\n      }\n    }\n  </div>\n  <div class=\"w-full\">\n    <router-outlet></router-outlet>\n  </div>\n</div>\n", styles: [".manage-active{background-color:var(--rt-10-percent-layer, rgba(0, 0, 0, .05));box-shadow:4px 0 var(--rt-base-background-inverse, #000) inset;font-weight:600}@media (max-width: 768px){.manage-active{box-shadow:inset 0 -4px 0 0 var(--rt-base-background-inverse, #000)}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyManageLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-manage-layout', imports: [RouterLink, RouterLinkActive, MatButtonModule, RouterOutlet], encapsulation: ViewEncapsulation.None, template: "<div class=\"flex flex-col md:flex-row m-auto\">\n  <div\n    class=\"min-w-[256px] px-3 md:px-0 flex flex-row md:flex-col md:h-full items-center md:items-start h-16 overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n  >\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-1\" i18n>Property</div>\n      <a routerLink=\"./info\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Basic info</a>\n      <a routerLink=\"./media\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Media</a>\n      <a routerLink=\"./video-tour\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Video tour</a>\n      <a routerLink=\"./sections\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Details</a>\n      <a routerLink=\"./location\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Location</a>\n      <a routerLink=\"./features\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Features</a>\n      <!-- <a routerLink=\"./amenities\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Amenities</a> -->\n      <!-- <a routerLink=\"./tags\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Tags</a> -->\n      <!-- <a routerLink=\"./options\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Options</a> -->\n    </div>\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\" i18n>Settings</div>\n      <!-- <a routerLink=\"./variants\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Variants</a> -->\n      <a routerLink=\"./schedule\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Schedule</a>\n      <a routerLink=\"./pricing\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Pricing</a>\n    </div>\n    <!-- <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\" i18n>Others</div>\n    </div> -->\n    @if (property) {\n      @if (property.status.toString() === 'DRAFT') {\n        <div class=\"md:mt-6 md:ml-2 flex items-center\">\n          <button mat-flat-button (click)=\"submit()\" i18n>Submit for review</button>\n        </div>\n      }\n      @if (property.status.toString() === 'PENDING') {\n        <div class=\"md:mt-6 md:ml-2 flex items-center\">\n          <button mat-flat-button disabled i18n>Pending</button>\n        </div>\n      }\n      @if (property.status.toString() === 'APPROVED') {\n        <div class=\"md:mt-6 md:ml-2 flex items-center\">\n          <button mat-flat-button (click)=\"publish()\" i18n>Publish</button>\n        </div>\n      }\n    }\n  </div>\n  <div class=\"w-full\">\n    <router-outlet></router-outlet>\n  </div>\n</div>\n", styles: [".manage-active{background-color:var(--rt-10-percent-layer, rgba(0, 0, 0, .05));box-shadow:4px 0 var(--rt-base-background-inverse, #000) inset;font-weight:600}@media (max-width: 768px){.manage-active{box-shadow:inset 0 -4px 0 0 var(--rt-base-background-inverse, #000)}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"] }]
+        }] });
+
+class PropertyManageContentComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyManageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: PropertyManageContentComponent, isStandalone: true, selector: "rolatech-property-manage-content", ngImport: i0, template: "<ng-content select=\"rolatech-toolbar\"></ng-content>\n<div class=\"p-3\">\n  <ng-content></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyManageContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-manage-content', imports: [CommonModule], template: "<ng-content select=\"rolatech-toolbar\"></ng-content>\n<div class=\"p-3\">\n  <ng-content></ng-content>\n</div>\n" }]
+        }] });
+
+const MY_FORMATS = {
+    parse: {
+        dateInput: 'YYYY-MM-DD',
+    },
+    display: {
+        dateInput: 'YYYY-MM-DD',
+        monthYearLabel: 'MMM YYYY',
+        dateA11yLabel: 'YYYY-MM-DD',
+        monthYearA11yLabel: 'MMMM YYYY',
+    },
+};
+class PropertyManageInfoComponent extends BaseComponent {
+    propertyService = inject(PropertyService);
+    property;
+    status = PropertyStatus;
+    selectedCategoyIds;
+    propertyType = PropertyType;
+    priceType = PropertyPriceType;
+    price = model('0.00');
+    deposit = model('');
+    minDate = new Date();
+    ngOnInit() {
+        this.id = this.route.parent?.snapshot.paramMap.get('id');
+        this.find();
+    }
+    find() {
+        this.propertyService.get(this.id).subscribe({
+            next: (res) => {
+                this.property = res.data;
+                const price = this.property.price ? (this.property.price / 100).toFixed(2) : '0.00';
+                this.price.set(price);
+                if (this.property.priceType?.toString() === 'PARTIAL') {
+                    const deposit = (this.property.deposit / 100).toFixed(2);
+                    this.deposit.set(deposit);
+                }
+            },
+        });
+    }
+    formatPrice(value) {
+        // Convert to number first in case it's a string
+        this.property.price = Number(Number(value).toFixed(2));
+    }
+    typeCompareFn(t1, t2) {
+        return t1 === t2;
+    }
+    priceTypeCompareFn(t1, t2) {
+        return t1 === t2;
+    }
+    onTypeChange(event) {
+        // this.property.type = Object.keys(this.propertyType).find((key) => {
+        //   return this.propertyType[key] === event.value;
+        // })!;
+        this.property.type = event.value;
+    }
+    onCategoryChange(event) {
+        this.selectedCategoyIds = event.value;
+    }
+    update() {
+        const { title, description, type, priceType, availableDate, bedrooms, bathrooms, size, floor } = this.property;
+        const data = {
+            title,
+            description,
+            bedrooms,
+            bathrooms,
+            size,
+            floor,
+            type,
+            price: Number(this.price()) * 100,
+            priceType,
+            deposit: Number(this.deposit()) * 100,
+            availableDate,
+        };
+        this.propertyService.update(this.id, data).subscribe({
+            next: (res) => {
+                this.snackBarService.open('Update successfully');
+            },
+            error: (e) => {
+                this.snackBarService.open(e.message);
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyManageInfoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: PropertyManageInfoComponent, isStandalone: true, selector: "rolatech-property-manage-info", inputs: { price: { classPropertyName: "price", publicName: "price", isSignal: true, isRequired: false, transformFunction: null }, deposit: { classPropertyName: "deposit", publicName: "deposit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { price: "priceChange", deposit: "depositChange" }, providers: [
+            {
+                provide: DateAdapter,
+                useClass: MomentDateAdapter,
+                deps: [MAT_DATE_LOCALE],
+            },
+            { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
+        ], usesInheritance: true, ngImport: i0, template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Basic info\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  @if (property) {\n    <div class=\"flex flex-col\">\n      <form #propertyForm=\"ngForm\">\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Title </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"property.title\" name=\"title\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Description </mat-label>\n          <textarea\n            matInput\n            type=\"text\"\n            [(ngModel)]=\"property.description\"\n            name=\"description\"\n            required\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"3\"\n          ></textarea>\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Bedrooms </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"property.bedrooms\" name=\"bedrooms\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Bathrooms </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"property.bathrooms\" name=\"bathrooms\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Floor </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"property.floor\" name=\"floor\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Size(sqft) </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"property.size\" name=\"size\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\" required>\n          <mat-label i18n>Type</mat-label>\n          <mat-select\n            name=\"type\"\n            [compareWith]=\"typeCompareFn\"\n            (selectionChange)=\"onTypeChange($event)\"\n            [(ngModel)]=\"property.type\"\n          >\n            @for (type of propertyType | keyvalue; track type) {\n              <mat-option [value]=\"type.key\">\n                {{ type.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <!-- <mat-form-field appearance=\"fill\" required>\n          <mat-label i18n>Price type</mat-label>\n          <mat-select name=\"priceType\" [compareWith]=\"priceTypeCompareFn\" [(ngModel)]=\"property.priceType\">\n            @for (type of priceType | keyvalue; track type) {\n              <mat-option [value]=\"type.key\">\n                {{ type.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field> -->\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Available date</mat-label>\n          <input\n            matInput\n            placeholder=\"Available date\"\n            [matDatepicker]=\"availableDatePicker\"\n            [min]=\"minDate\"\n            (focus)=\"availableDatePicker.open()\"\n            name=\"availableDate\"\n            [(ngModel)]=\"property.availableDate\"\n            (dateInput)=\"property.availableDate = $event.value.format('YYYY-MM-DD')\"\n            readonly\n          />\n          <mat-datepicker-toggle matIconPrefix [for]=\"availableDatePicker\"></mat-datepicker-toggle>\n          <mat-datepicker #availableDatePicker></mat-datepicker>\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Price </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"price\" name=\"price\" required rolatechDecimal />\n        </mat-form-field>\n        @if (property.priceType && property.priceType.toString() === 'PARTIAL') {\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n> Deposit </mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"deposit\" name=\"deposit\" required rolatechDecimal />\n          </mat-form-field>\n        }\n      </form>\n    </div>\n    <div>\n      <button mat-flat-button (click)=\"update()\" i18n>Save</button>\n    </div>\n  }\n</rolatech-property-manage-content>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.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$3.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: PropertyManageContentComponent, selector: "rolatech-property-manage-content" }, { kind: "directive", type: DecimalDirective, selector: "[rolatechDecimal]" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i8.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i8.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyManageInfoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-manage-info', imports: [
+                        FormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        TextFieldModule,
+                        MatSelectModule,
+                        MatOptionModule,
+                        MatButtonModule,
+                        ToolbarComponent,
+                        PropertyManageContentComponent,
+                        DecimalDirective,
+                        MatSelectModule,
+                        KeyValuePipe,
+                        MatDatepickerModule,
+                    ], providers: [
+                        {
+                            provide: DateAdapter,
+                            useClass: MomentDateAdapter,
+                            deps: [MAT_DATE_LOCALE],
+                        },
+                        { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
+                    ], template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Basic info\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  @if (property) {\n    <div class=\"flex flex-col\">\n      <form #propertyForm=\"ngForm\">\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Title </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"property.title\" name=\"title\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Description </mat-label>\n          <textarea\n            matInput\n            type=\"text\"\n            [(ngModel)]=\"property.description\"\n            name=\"description\"\n            required\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"3\"\n          ></textarea>\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Bedrooms </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"property.bedrooms\" name=\"bedrooms\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Bathrooms </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"property.bathrooms\" name=\"bathrooms\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Floor </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"property.floor\" name=\"floor\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Size(sqft) </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"property.size\" name=\"size\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\" required>\n          <mat-label i18n>Type</mat-label>\n          <mat-select\n            name=\"type\"\n            [compareWith]=\"typeCompareFn\"\n            (selectionChange)=\"onTypeChange($event)\"\n            [(ngModel)]=\"property.type\"\n          >\n            @for (type of propertyType | keyvalue; track type) {\n              <mat-option [value]=\"type.key\">\n                {{ type.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <!-- <mat-form-field appearance=\"fill\" required>\n          <mat-label i18n>Price type</mat-label>\n          <mat-select name=\"priceType\" [compareWith]=\"priceTypeCompareFn\" [(ngModel)]=\"property.priceType\">\n            @for (type of priceType | keyvalue; track type) {\n              <mat-option [value]=\"type.key\">\n                {{ type.value }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field> -->\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Available date</mat-label>\n          <input\n            matInput\n            placeholder=\"Available date\"\n            [matDatepicker]=\"availableDatePicker\"\n            [min]=\"minDate\"\n            (focus)=\"availableDatePicker.open()\"\n            name=\"availableDate\"\n            [(ngModel)]=\"property.availableDate\"\n            (dateInput)=\"property.availableDate = $event.value.format('YYYY-MM-DD')\"\n            readonly\n          />\n          <mat-datepicker-toggle matIconPrefix [for]=\"availableDatePicker\"></mat-datepicker-toggle>\n          <mat-datepicker #availableDatePicker></mat-datepicker>\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n> Price </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"price\" name=\"price\" required rolatechDecimal />\n        </mat-form-field>\n        @if (property.priceType && property.priceType.toString() === 'PARTIAL') {\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n> Deposit </mat-label>\n            <input matInput type=\"text\" [(ngModel)]=\"deposit\" name=\"deposit\" required rolatechDecimal />\n          </mat-form-field>\n        }\n      </form>\n    </div>\n    <div>\n      <button mat-flat-button (click)=\"update()\" i18n>Save</button>\n    </div>\n  }\n</rolatech-property-manage-content>\n", styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+
+const SIZE = 10 * 1024 * 1024; // file slice size 10MB
+class PropertyManageMediaComponent {
+    route = inject(ActivatedRoute);
+    propertyService = inject(PropertyService);
+    dialog = inject(MatDialog);
+    snackBar = inject(MatSnackBar);
+    id;
+    isLoading = false;
+    media = [];
+    status = PropertyStatus;
+    // propertyType: any = PropertyType;
+    constructor() {
+        this.id = this.route.parent?.snapshot.paramMap.get('id');
+    }
+    ngOnInit() {
+        this.find();
+    }
+    find() {
+        this.propertyService.get(this.id).subscribe({
+            next: (res) => {
+                this.media = res.data.media || [];
+            },
+        });
+    }
+    onImageClick(i) {
+        const dialogRef = this.dialog.open(ImagePreviewDialogComponent, {
+            maxWidth: '80vw',
+            maxHeight: '80vh',
+            height: '80%',
+            width: '80%',
+            panelClass: 'full-screen-modal',
+            data: {
+                media: this.media,
+                selected: i,
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => { });
+    }
+    createFileChunk(file, size = SIZE) {
+        const fileChunkList = [];
+        let cur = 0;
+        while (cur < file.size) {
+            fileChunkList.push({ file: file.slice(cur, cur + size) });
+            cur += size;
+        }
+        return fileChunkList;
+    }
+    onUploadMedia2(event) {
+        const file = event.target.files[0];
+        const reader = new FileReader();
+        reader.onload = (e) => { };
+        const fileChunkList = this.createFileChunk(file);
+        fileChunkList.forEach((item) => { });
+    }
+    onMultipleFilesUpload(event) {
+        // const files = event.target.files;
+        // if (files) {
+        //   Object.values(files).forEach((file, index) => {
+        //     this.uploadFile(file, index);
+        //   });
+        // }
+        const input = event.target;
+        if (input.files && input.files.length > 0) {
+            const startIndex = this.media.length; // Offset to preserve existing items
+            Array.from(input.files).forEach((file, i) => {
+                this.uploadFile(file, startIndex + i);
+            });
+        }
+    }
+    uploadFile(file, index) {
+        const reader = new FileReader();
+        const formData = new FormData();
+        formData.append('file', file);
+        this.media.splice(index, 0, {
+            url: '',
+            alt: 'Uploading...',
+            width: 0,
+            height: 0,
+            uploading: true,
+        });
+        reader.readAsDataURL(file);
+        reader.onload = () => {
+            const img = new Image();
+            img.onload = () => {
+                Object.assign(this.media[index], {
+                    url: img.src,
+                    width: img.width,
+                    height: img.height,
+                });
+            };
+            img.src = reader.result;
+        };
+        this.propertyService.uploadMedia(this.id, formData).subscribe({
+            next: (res) => {
+                // Replace item at index using native splice
+                // this.media.splice(index, 1, res.data);
+                this.media.splice(index, 1, {
+                    ...res.data,
+                    uploading: false,
+                });
+            },
+            error: (e) => {
+                this.snackBar.open('Upload failed: ' + e.message);
+                this.media.splice(index, 1); // remove failed placeholder
+            },
+        });
+        reader.onerror = (error) => { };
+    }
+    onUploadMedia(event) {
+        const file = event.target.files[0];
+        // 5MB * 1024 * 1024 = 5242880
+        // if (file?.size > 5242880) {
+        //   this.snackBar.open('尺寸过大, 请修改后上传');
+        //   return;
+        // }
+        if (file) {
+            const reader = new FileReader();
+            const formData = new FormData();
+            formData.append('file', file);
+            reader.readAsDataURL(file);
+            reader.onload = () => {
+                const img = new Image();
+                img.onload = () => {
+                    this.media.push({
+                        url: img.src,
+                        alt: 'upload image',
+                        width: img.width,
+                        height: img.height,
+                    });
+                };
+                img.src = reader.result; // This is the data URL
+            };
+            this.propertyService.uploadMedia(this.id, formData).subscribe({
+                next: (res) => {
+                    const index = findLastIndex(this.media);
+                    // Replace item at index using native splice
+                    this.media.splice(index, 1, res.data);
+                },
+                error: (e) => { },
+            });
+            reader.onerror = (error) => { };
+        }
+    }
+    onMediaDelete(item) {
+        const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+            width: '400px',
+            data: {
+                title: '删除图片',
+                message: '确定删除这张商品图片吗?',
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.propertyService.deleteMedia(this.id, item.id).subscribe({
+                    next: (res) => {
+                        this.media = this.media.filter((m) => m.id !== item.id);
+                        this.snackBar.open('Delete successfully');
+                    },
+                    error: (e) => {
+                        this.snackBar.open(e.message);
+                    },
+                });
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyManageMediaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: PropertyManageMediaComponent, isStandalone: true, selector: "rolatech-property-manage-media", ngImport: i0, template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Media info\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <div>\n    <p i18n>*Limit 5MB per image*</p>\n    <rolatech-media-list (upload)=\"onMultipleFilesUpload($event)\">\n      @for (item of media; track item; let i = $index) {\n        <rolatech-media-list-item\n          [media]=\"item\"\n          (mediaItemClick)=\"onImageClick(i)\"\n          (deleteMedia)=\"onMediaDelete(item)\"\n          [uploading]=\"item.uploading\"\n        ></rolatech-media-list-item>\n      }\n    </rolatech-media-list>\n  </div>\n</rolatech-property-manage-content>\n", styles: [""], dependencies: [{ kind: "component", type: MediaListComponent, selector: "rolatech-media-list", inputs: ["isUploading", "media", "showAdd"], outputs: ["mediaItemClick", "upload"] }, { kind: "component", type: MediaListItemComponent, selector: "rolatech-media-list-item", inputs: ["media", "uploadProgress", "uploading"], outputs: ["mediaItemClick", "deleteMedia"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: PropertyManageContentComponent, selector: "rolatech-property-manage-content" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyManageMediaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-manage-media', imports: [MediaListComponent, MediaListItemComponent, ToolbarComponent, PropertyManageContentComponent], template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Media info\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <div>\n    <p i18n>*Limit 5MB per image*</p>\n    <rolatech-media-list (upload)=\"onMultipleFilesUpload($event)\">\n      @for (item of media; track item; let i = $index) {\n        <rolatech-media-list-item\n          [media]=\"item\"\n          (mediaItemClick)=\"onImageClick(i)\"\n          (deleteMedia)=\"onMediaDelete(item)\"\n          [uploading]=\"item.uploading\"\n        ></rolatech-media-list-item>\n      }\n    </rolatech-media-list>\n  </div>\n</rolatech-property-manage-content>\n" }]
+        }], ctorParameters: () => [] });
+
+class PropertyManageSectionItemComponent {
+    isUploading = input();
+    section = input.required();
+    actions = input(false);
+    selectMedia = input();
+    upload = output();
+    delete = output();
+    save = output();
+    deleteMedia = output();
+    selectedImg;
+    expanded = false;
+    constructor() { }
+    ngOnInit() {
+        this.selectedImg = this.section().media ? this.section().media[0] : null;
+    }
+    onUpload(data) {
+        this.upload.emit({ section: this.section(), data });
+    }
+    onMediaItemClick(image) {
+        this.selectedImg = image;
+    }
+    select(item) {
+        this.selectedImg = item;
+    }
+    deleteImage() { }
+    onSave(section) {
+        this.save.emit(section);
+    }
+    onDelete(section) {
+        this.delete.emit(section);
+    }
+    onDeleteMedia(media) {
+        this.deleteMedia.emit({ section: this.section(), media });
+        this.selectedImg = this.section().media ? first(this.section().media) : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyManageSectionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: PropertyManageSectionItemComponent, isStandalone: true, selector: "rolatech-property-manage-section-item", inputs: { isUploading: { classPropertyName: "isUploading", publicName: "isUploading", isSignal: true, isRequired: false, transformFunction: null }, section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, selectMedia: { classPropertyName: "selectMedia", publicName: "selectMedia", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { upload: "upload", delete: "delete", save: "save", deleteMedia: "deleteMedia" }, ngImport: i0, template: "<div class=\"px-3\">\n  <div\n    class=\"h-14 py-3 flex items-center justify-between cursor-pointer\"\n    (click)=\"expanded = !expanded; $event.stopPropagation()\"\n  >\n    <div class=\"flex\">\n      <div class=\"w-32 line-clamp-1\">{{ section().title }}</div>\n      <div class=\"line-clamp-1\">{{ section().description }}</div>\n    </div>\n    <div>\n      <button mat-icon-button aria-label=\"expand row\" (click)=\"expanded = !expanded; $event.stopPropagation()\">\n        @if (expanded) {\n          <mat-icon>keyboard_arrow_up</mat-icon>\n        } @else {\n          <mat-icon>keyboard_arrow_down</mat-icon>\n        }\n      </button>\n    </div>\n  </div>\n  <div class=\"flex flex-col gap-3 w-full overflow-hidden\" [@detailExpand]=\"expanded ? 'expanded' : 'collapsed'\">\n    <div class=\"flex flex-col lg:flex-row\">\n      <div class=\"flex flex-col grow\">\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Title</mat-label>\n          <input matInput placeholder=\"Title\" i18n-placeholder [(ngModel)]=\"section().title\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\" [hideRequiredMarker]=\"true\">\n          <mat-label i18n>Description</mat-label>\n          <textarea\n            matInput\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"3\"\n            placeholder=\"Description\"\n            [(ngModel)]=\"section().description\"\n            i18n-placeholder\n          ></textarea>\n        </mat-form-field>\n      </div>\n      <!-- media -->\n      <div class=\"lg:basis-1/2 px-0 lg:px-3\">\n        @if (selectedImg) {\n          <div class=\"flex flex-row justify-center relative aspect-video\">\n            <img class=\"object-contain w-full\" [src]=\"selectedImg.url\" [alt]=\"selectedImg.alt\" />\n            <div class=\"absolute z-30 right-0\">\n              <button\n                mat-icon-button\n                [matMenuTriggerFor]=\"beforeMenu\"\n                class=\"ml-auto focus:outline-none hover:bg-[--rt-base-background] p-1\"\n              >\n                <mat-icon>more_vert</mat-icon>\n              </button>\n              <mat-menu #beforeMenu=\"matMenu\" xPosition=\"before\">\n                <button mat-menu-item (click)=\"onDeleteMedia(selectedImg)\">\n                  <span i18n>Delete</span>\n                </button>\n              </mat-menu>\n            </div>\n          </div>\n        }\n\n        <!-- media -->\n        <div>\n          <div class=\"flex flex-row flex-wrap cursor-pointer relative box-border\" fxLayout=\"row\">\n            <div class=\"progress-bar\">\n              @if (section().isUploading) {\n                <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n              }\n            </div>\n            @for (media of section().media; track media) {\n              <div class=\"media-list-item\">\n                <img class=\"tile-media\" (click)=\"onMediaItemClick(media)\" [src]=\"media.url\" [alt]=\"media.alt\" />\n              </div>\n            }\n            <input style=\"display: none\" type=\"file\" accept=\"image/*\" (change)=\"onUpload($event)\" #fileInput />\n            <div class=\"add-button\">\n              <div (click)=\"fileInput.click()\" class=\"tile-media flex justify-center items-center\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"48px\" viewBox=\"0 -960 960 960\" width=\"48px\" fill=\"#5f6368\">\n                  <path d=\"M444-444H240v-72h204v-204h72v204h204v72H516v204h-72v-204Z\" />\n                </svg>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    @if (actions()) {\n      <div class=\"flex flex-row justify-end p-3 gap-3\">\n        <button mat-button class=\"max-h-8\" (click)=\"onDelete(section())\" i18n>Delete</button>\n        <button mat-flat-button class=\"max-h-8\" (click)=\"onSave(section())\" i18n>Save</button>\n      </div>\n    }\n  </div>\n</div>\n\n<mat-divider></mat-divider>\n", styles: [".media-list{flex-wrap:wrap;box-sizing:border-box}.progress-bar{display:block;min-height:6px;width:100%}.media-list-item{cursor:pointer;position:relative;box-sizing:border-box;padding:2px}.tile-media{height:64px;width:64px;object-fit:contain;cursor:pointer;border:1px solid grey;position:relative;box-sizing:border-box;border-radius:8px}.add-button{cursor:pointer;position:relative;box-sizing:border-box;padding:2px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.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$3.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.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$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$2.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$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i8$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], animations: [
+            trigger('detailExpand', [
+                state('collapsed', style({ height: '0px' })),
+                state('expanded', style({ height: '*' })),
+                transition('expanded <=> collapsed', animate('400ms cubic-bezier(0.25, 0.1, 0.25, 1)')),
+            ]),
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyManageSectionItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-manage-section-item', imports: [
+                        MatFormFieldModule,
+                        MatInputModule,
+                        FormsModule,
+                        TextFieldModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatMenuModule,
+                        MatProgressBarModule,
+                        MatDividerModule,
+                    ], animations: [
+                        trigger('detailExpand', [
+                            state('collapsed', style({ height: '0px' })),
+                            state('expanded', style({ height: '*' })),
+                            transition('expanded <=> collapsed', animate('400ms cubic-bezier(0.25, 0.1, 0.25, 1)')),
+                        ]),
+                    ], template: "<div class=\"px-3\">\n  <div\n    class=\"h-14 py-3 flex items-center justify-between cursor-pointer\"\n    (click)=\"expanded = !expanded; $event.stopPropagation()\"\n  >\n    <div class=\"flex\">\n      <div class=\"w-32 line-clamp-1\">{{ section().title }}</div>\n      <div class=\"line-clamp-1\">{{ section().description }}</div>\n    </div>\n    <div>\n      <button mat-icon-button aria-label=\"expand row\" (click)=\"expanded = !expanded; $event.stopPropagation()\">\n        @if (expanded) {\n          <mat-icon>keyboard_arrow_up</mat-icon>\n        } @else {\n          <mat-icon>keyboard_arrow_down</mat-icon>\n        }\n      </button>\n    </div>\n  </div>\n  <div class=\"flex flex-col gap-3 w-full overflow-hidden\" [@detailExpand]=\"expanded ? 'expanded' : 'collapsed'\">\n    <div class=\"flex flex-col lg:flex-row\">\n      <div class=\"flex flex-col grow\">\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Title</mat-label>\n          <input matInput placeholder=\"Title\" i18n-placeholder [(ngModel)]=\"section().title\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\" [hideRequiredMarker]=\"true\">\n          <mat-label i18n>Description</mat-label>\n          <textarea\n            matInput\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"3\"\n            placeholder=\"Description\"\n            [(ngModel)]=\"section().description\"\n            i18n-placeholder\n          ></textarea>\n        </mat-form-field>\n      </div>\n      <!-- media -->\n      <div class=\"lg:basis-1/2 px-0 lg:px-3\">\n        @if (selectedImg) {\n          <div class=\"flex flex-row justify-center relative aspect-video\">\n            <img class=\"object-contain w-full\" [src]=\"selectedImg.url\" [alt]=\"selectedImg.alt\" />\n            <div class=\"absolute z-30 right-0\">\n              <button\n                mat-icon-button\n                [matMenuTriggerFor]=\"beforeMenu\"\n                class=\"ml-auto focus:outline-none hover:bg-[--rt-base-background] p-1\"\n              >\n                <mat-icon>more_vert</mat-icon>\n              </button>\n              <mat-menu #beforeMenu=\"matMenu\" xPosition=\"before\">\n                <button mat-menu-item (click)=\"onDeleteMedia(selectedImg)\">\n                  <span i18n>Delete</span>\n                </button>\n              </mat-menu>\n            </div>\n          </div>\n        }\n\n        <!-- media -->\n        <div>\n          <div class=\"flex flex-row flex-wrap cursor-pointer relative box-border\" fxLayout=\"row\">\n            <div class=\"progress-bar\">\n              @if (section().isUploading) {\n                <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n              }\n            </div>\n            @for (media of section().media; track media) {\n              <div class=\"media-list-item\">\n                <img class=\"tile-media\" (click)=\"onMediaItemClick(media)\" [src]=\"media.url\" [alt]=\"media.alt\" />\n              </div>\n            }\n            <input style=\"display: none\" type=\"file\" accept=\"image/*\" (change)=\"onUpload($event)\" #fileInput />\n            <div class=\"add-button\">\n              <div (click)=\"fileInput.click()\" class=\"tile-media flex justify-center items-center\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"48px\" viewBox=\"0 -960 960 960\" width=\"48px\" fill=\"#5f6368\">\n                  <path d=\"M444-444H240v-72h204v-204h72v204h204v72H516v204h-72v-204Z\" />\n                </svg>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    @if (actions()) {\n      <div class=\"flex flex-row justify-end p-3 gap-3\">\n        <button mat-button class=\"max-h-8\" (click)=\"onDelete(section())\" i18n>Delete</button>\n        <button mat-flat-button class=\"max-h-8\" (click)=\"onSave(section())\" i18n>Save</button>\n      </div>\n    }\n  </div>\n</div>\n\n<mat-divider></mat-divider>\n", styles: [".media-list{flex-wrap:wrap;box-sizing:border-box}.progress-bar{display:block;min-height:6px;width:100%}.media-list-item{cursor:pointer;position:relative;box-sizing:border-box;padding:2px}.tile-media{height:64px;width:64px;object-fit:contain;cursor:pointer;border:1px solid grey;position:relative;box-sizing:border-box;border-radius:8px}.add-button{cursor:pointer;position:relative;box-sizing:border-box;padding:2px}\n"] }]
+        }], ctorParameters: () => [] });
+
+class PropertyManageSectionsComponent {
+    route = inject(ActivatedRoute);
+    propertyService = inject(PropertyService);
+    dialog = inject(MatDialog);
+    snackBar = inject(MatSnackBar);
+    id;
+    isLoading = false;
+    isUploading = false;
+    sections = [];
+    status = PropertyStatus;
+    propertyType = PropertyType;
+    constructor() {
+        this.id = this.route.parent?.snapshot.paramMap.get('id');
+    }
+    ngOnInit() {
+        this.find();
+    }
+    find() {
+        this.propertyService.findSections(this.id).subscribe({
+            next: (res) => {
+                if (res.data) {
+                    this.sections = res.data;
+                }
+            },
+        });
+    }
+    addSection() {
+        if (!this.sections) {
+            this.sections = [];
+        }
+        this.propertyService
+            .addSection(this.id, {
+            title: '',
+            description: '',
+            content: '',
+            media: [],
+        })
+            .subscribe({
+            next: (res) => {
+                const section = res.data;
+                this.sections.push({
+                    id: section.id,
+                    title: 'Untitled',
+                    description: '',
+                    content: '',
+                    media: [],
+                });
+            },
+            error: (e) => {
+                this.snackBar.open(e.message);
+            },
+        });
+    }
+    onUploadSectionMedia(event) {
+        const section = event.section;
+        const sectionId = section.id;
+        const file = event.data.target.files[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = () => {
+                if (!section.media) {
+                    section.media = [];
+                }
+                section.media.push({
+                    url: reader.result,
+                    alt: 'upload image',
+                });
+                section.isUploading = true;
+                const formData = new FormData();
+                formData.append('file', file);
+                this.propertyService.uploadSectionMedia(sectionId, formData).subscribe({
+                    next: (res) => {
+                        this.isUploading = false;
+                        section.isUploading = false;
+                        delete res.data.propertySection;
+                        section.media[section.media.length - 1].id = res.data.id;
+                        section.media[section.media.length - 1].url = res.data.url;
+                    },
+                    error: (e) => {
+                        this.isUploading = false;
+                        this.snackBar.open('Upload failed: ' + e.message);
+                    },
+                });
+            };
+            reader.onerror = (error) => {
+                this.isUploading = false;
+            };
+        }
+    }
+    onDeleteSectionMedia(event) {
+        const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+            width: '400px',
+            data: {
+                title: '删除图片',
+                message: `确定删除吗?`,
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                const section = event.section;
+                const mediaId = event.media.id;
+                remove(section.media, {
+                    id: mediaId,
+                });
+                this.propertyService.deleteSectionMedia(section.id, mediaId).subscribe({
+                    next: (res) => {
+                        // remove(section.media, {
+                        //   id: mediaId,
+                        // });
+                    },
+                });
+            }
+        });
+    }
+    onSectionSave(section) {
+        delete section.isUploading;
+        this.propertyService.updateSection(section.id, section).subscribe({
+            next: (res) => {
+                this.snackBar.open('Success');
+            },
+            error: (e) => {
+                this.snackBar.open(e.message);
+            },
+        });
+    }
+    onSectionDelete(section) {
+        const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+            width: '400px',
+            data: {
+                title: '删除详情',
+                message: '确定删除此详情吗?',
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.propertyService.deleteSection(section.id).subscribe({
+                    next: (res) => {
+                        this.snackBar.open(res.data);
+                        remove(this.sections, {
+                            id: section.id,
+                        });
+                    },
+                    error: (e) => {
+                        this.snackBar.open(e.message);
+                    },
+                });
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyManageSectionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: PropertyManageSectionsComponent, isStandalone: true, selector: "rolatech-property-manage-sections", ngImport: i0, template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Details\" class=\"hidden md:block\" divider> </rolatech-toolbar>\n  <div>\n    <div>\n      @for (section of sections; track section) {\n        <rolatech-property-manage-section-item\n          [section]=\"section\"\n          (upload)=\"onUploadSectionMedia($event)\"\n          (deleteMedia)=\"onDeleteSectionMedia($event)\"\n          (save)=\"onSectionSave($event)\"\n          (delete)=\"onSectionDelete($event)\"\n          [actions]=\"true\"\n        ></rolatech-property-manage-section-item>\n      }\n    </div>\n    <button mat-stroked-button (click)=\"addSection()\" class=\"mt-3\">\n      <mat-icon>add</mat-icon>\n      <span i18n>Add</span>\n    </button>\n  </div>\n</rolatech-property-manage-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: PropertyManageContentComponent, selector: "rolatech-property-manage-content" }, { kind: "component", type: PropertyManageSectionItemComponent, selector: "rolatech-property-manage-section-item", inputs: ["isUploading", "section", "actions", "selectMedia"], outputs: ["upload", "delete", "save", "deleteMedia"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyManageSectionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-manage-sections', imports: [
+                        MatButtonModule,
+                        MatIconModule,
+                        ToolbarComponent,
+                        PropertyManageContentComponent,
+                        PropertyManageSectionItemComponent,
+                    ], template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Details\" class=\"hidden md:block\" divider> </rolatech-toolbar>\n  <div>\n    <div>\n      @for (section of sections; track section) {\n        <rolatech-property-manage-section-item\n          [section]=\"section\"\n          (upload)=\"onUploadSectionMedia($event)\"\n          (deleteMedia)=\"onDeleteSectionMedia($event)\"\n          (save)=\"onSectionSave($event)\"\n          (delete)=\"onSectionDelete($event)\"\n          [actions]=\"true\"\n        ></rolatech-property-manage-section-item>\n      }\n    </div>\n    <button mat-stroked-button (click)=\"addSection()\" class=\"mt-3\">\n      <mat-icon>add</mat-icon>\n      <span i18n>Add</span>\n    </button>\n  </div>\n</rolatech-property-manage-content>\n" }]
+        }], ctorParameters: () => [] });
+
+class PropertyManagePricingComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyManagePricingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: PropertyManagePricingComponent, isStandalone: true, selector: "rolatech-property-manage-pricing", ngImport: i0, template: "<p>property-manage-pricing works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyManagePricingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-manage-pricing', imports: [CommonModule], template: "<p>property-manage-pricing works!</p>\n" }]
+        }] });
+
+class PropertyManageScheduleComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyManageScheduleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: PropertyManageScheduleComponent, isStandalone: true, selector: "rolatech-property-manage-schedule", ngImport: i0, template: "<p>property-manage-schedule works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyManageScheduleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-manage-schedule', imports: [CommonModule], template: "<p>property-manage-schedule works!</p>\n" }]
+        }] });
+
+class PropertyManageFeaturesComponent extends BaseComponent {
+    propertyService = inject(PropertyService);
+    featureService = inject(FeatureService);
+    features = [];
+    selected = {};
+    partiallyComplete = (feature) => computed(() => {
+        if (!feature.values) {
+            return false;
+        }
+        return feature.values.some((t) => t.selected) && !feature.values.every((t) => t.selected);
+    });
+    ngOnInit() {
+        this.id = this.route.parent?.snapshot.paramMap.get('id');
+        this.find();
+    }
+    isEmpty(obj) {
+        return obj && Object.keys(obj).length === 0;
+    }
+    find() {
+        forkJoin({
+            features: this.featureService.find({}),
+            options: this.propertyService.findFeatures(this.id),
+        }).subscribe(({ features, options }) => {
+            this.features = features.data;
+            if (options.data) {
+                this.selected = this.convertToBinding(options.data);
+                // ensure all features have initialized value arrays
+                for (const feature of this.features) {
+                    if (!this.selected[feature.id]) {
+                        this.selected[feature.id] = [];
+                    }
+                }
+            }
+        });
+    }
+    sectionChange(feature, selected, index) {
+        if (index === undefined) {
+            feature.selected = selected;
+            feature.values?.forEach((t) => (t.selected = selected));
+        }
+        else {
+            feature.values[index].selected = selected;
+            feature.selected = feature.values?.every((t) => t.selected) ?? true;
+        }
+    }
+    toggleValue(featureId, valueId, checked) {
+        const selectedValues = this.selected[featureId] || [];
+        if (checked) {
+            selectedValues.push(valueId);
+        }
+        else {
+            const index = selectedValues.indexOf(valueId);
+            if (index !== -1)
+                selectedValues.splice(index, 1);
+        }
+        this.selected[featureId] = selectedValues;
+    }
+    save() {
+        this.propertyService.updateFeatures(this.id, this.selected).subscribe({
+            next: (res) => {
+                this.snackBarService.open('Update successfully');
+            },
+            error: (error) => {
+                this.snackBarService.open(error.message);
+            },
+        });
+    }
+    convertToBinding(options) {
+        const binding = {};
+        for (const option of options) {
+            const featureId = option.feature.id;
+            const valueId = option.value.id;
+            if (!binding[featureId]) {
+                binding[featureId] = [];
+            }
+            // avoid duplicates just in case
+            if (!binding[featureId].includes(valueId)) {
+                binding[featureId].push(valueId);
+            }
+        }
+        return binding;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyManageFeaturesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: PropertyManageFeaturesComponent, isStandalone: true, selector: "rolatech-property-manage-features", usesInheritance: true, ngImport: i0, template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Features\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <div>\n    @for (feature of features; track $index) {\n      <div>\n        <h4>{{ feature.name }}</h4>\n        @for (value of feature.values; track $index) {\n          <mat-checkbox\n            [checked]=\"selected[feature.id] ? selected[feature.id].includes(value.id) : false\"\n            (change)=\"toggleValue(feature.id, value.id, $event.checked)\"\n          >\n            {{ value.name }}\n          </mat-checkbox>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- @for (item of features; track item) {\n    <section class=\"example-section\">\n      <span class=\"example-list-section\">\n        <h4>{{ item.name }}</h4>\n        <mat-checkbox\n          class=\"example-margin\"\n          [checked]=\"item.selected\"\n          [indeterminate]=\"partiallyComplete(item)()\"\n          (change)=\"sectionChange(item, $event.checked)\"\n        >\n          {{ item.name }}\n        </mat-checkbox>\n      </span>\n      <div class=\"example-list-section\">\n        <div>\n          @for (value of item.values; track value; let i = $index) {\n            <mat-checkbox [checked]=\"value.selected\" (change)=\"sectionChange(item, $event.checked, i)\">\n              {{ value.name }}\n            </mat-checkbox>\n          }\n        </div>\n      </div>\n    </section>\n  } -->\n  <!-- <div class=\"px-3 mb-3\">\n    @for (item of features; track $index) {\n      <div class=\"text-xl font-bold py-2\">{{ item.name }}</div>\n      @for (value of item.values; track value; let i = $index) {\n        <mat-checkbox\n          class=\"text-lg font-medium\"\n          (click)=\"$event.stopPropagation()\"\n          [checked]=\"value.selected\"\n          (change)=\"sectionChange($event.checked, i)\"\n        >\n          {{ value.name }}\n        </mat-checkbox>\n      }\n    }\n  </div> -->\n  <button mat-flat-button (click)=\"save()\" i18n>Save</button>\n</rolatech-property-manage-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PropertyManageContentComponent, selector: "rolatech-property-manage-content" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyManageFeaturesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-manage-features', imports: [CommonModule, PropertyManageContentComponent, ToolbarComponent, MatCheckboxModule, MatButtonModule], template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Features\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <div>\n    @for (feature of features; track $index) {\n      <div>\n        <h4>{{ feature.name }}</h4>\n        @for (value of feature.values; track $index) {\n          <mat-checkbox\n            [checked]=\"selected[feature.id] ? selected[feature.id].includes(value.id) : false\"\n            (change)=\"toggleValue(feature.id, value.id, $event.checked)\"\n          >\n            {{ value.name }}\n          </mat-checkbox>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- @for (item of features; track item) {\n    <section class=\"example-section\">\n      <span class=\"example-list-section\">\n        <h4>{{ item.name }}</h4>\n        <mat-checkbox\n          class=\"example-margin\"\n          [checked]=\"item.selected\"\n          [indeterminate]=\"partiallyComplete(item)()\"\n          (change)=\"sectionChange(item, $event.checked)\"\n        >\n          {{ item.name }}\n        </mat-checkbox>\n      </span>\n      <div class=\"example-list-section\">\n        <div>\n          @for (value of item.values; track value; let i = $index) {\n            <mat-checkbox [checked]=\"value.selected\" (change)=\"sectionChange(item, $event.checked, i)\">\n              {{ value.name }}\n            </mat-checkbox>\n          }\n        </div>\n      </div>\n    </section>\n  } -->\n  <!-- <div class=\"px-3 mb-3\">\n    @for (item of features; track $index) {\n      <div class=\"text-xl font-bold py-2\">{{ item.name }}</div>\n      @for (value of item.values; track value; let i = $index) {\n        <mat-checkbox\n          class=\"text-lg font-medium\"\n          (click)=\"$event.stopPropagation()\"\n          [checked]=\"value.selected\"\n          (change)=\"sectionChange($event.checked, i)\"\n        >\n          {{ value.name }}\n        </mat-checkbox>\n      }\n    }\n  </div> -->\n  <button mat-flat-button (click)=\"save()\" i18n>Save</button>\n</rolatech-property-manage-content>\n" }]
+        }] });
+
+class PropertyManageLocationComponent extends BaseComponent {
+    propertyService = inject(PropertyService);
+    predictions = [];
+    autocompleteSuggestion;
+    titleElement;
+    resultsContainerElement;
+    inputElement;
+    newestRequestId = 0;
+    expand = false;
+    request = {
+        input: '',
+        includedPrimaryTypes: ['restaurant'],
+        language: 'en-GB',
+        region: 'uk',
+    };
+    map;
+    placesService;
+    sessionToken;
+    autocompleteService;
+    location = model({
+        flatNumber: '',
+        streetNumber: '',
+        buildingName: '',
+        street: '',
+        town: '',
+        postCode: '',
+        country: '',
+        longitude: '',
+        latitude: '',
+    });
+    platformId = inject(PLATFORM_ID);
+    placeAutocompleteElement;
+    autocompleteInput;
+    ngOnInit() {
+        this.id = this.route.parent?.snapshot.paramMap.get('id');
+        this.find();
+        if (isPlatformBrowser(this.platformId)) {
+            // this.autocompleteService = new google.maps.places.AutocompleteService();
+        }
+    }
+    find() {
+        this.propertyService.get(this.id).subscribe({
+            next: (res) => {
+                // this.location = res.data.location || {};
+                this.location.update((state) => {
+                    return { ...(res.data.location || {}) };
+                });
+                if (res.data.location) {
+                    this.expand = true;
+                }
+            },
+        });
+    }
+    async onPlaceSelected(place) {
+        await place.fetchFields({
+            fields: ['displayName', 'formattedAddress'],
+        });
+        const placeText = document.createTextNode(`${place.displayName}: ${place.formattedAddress}`);
+        this.resultsContainerElement.replaceChildren(placeText);
+        this.titleElement.innerText = 'Selected Place:';
+        this.inputElement.value = '';
+        this.refreshToken(this.request);
+    }
+    displayFn(option) {
+        return option && option.description ? option.description : '';
+    }
+    onOptionSelected(event) {
+        const prediction = event.option.value;
+        const placeId = prediction.place_id;
+        // Use Places Service to get detailed information (geometry) about the selected place
+        this.placesService.getDetails({ placeId: placeId, fields: ['name', 'formatted_address', 'geometry', 'address_components'] }, (place, status) => {
+            const components = place.address_components;
+            const getComponent = (type) => components?.find((c) => c.types.includes(type))?.long_name || '';
+            const streetNumber = getComponent('street_number');
+            const route = getComponent('route');
+            const town = getComponent('postal_town') || getComponent('locality');
+            const postcode = getComponent('postal_code');
+            if (streetNumber) {
+                this.location.update((state) => {
+                    state.streetNumber = streetNumber;
+                    return { ...state };
+                });
+            }
+            if (town) {
+                this.location.update((state) => {
+                    state.town = town;
+                    return { ...state };
+                });
+            }
+            if (postcode) {
+                this.location.update((state) => {
+                    state.postCode = postcode;
+                    return { ...state };
+                });
+            }
+            if (status === google.maps.places.PlacesServiceStatus.OK && place?.geometry) {
+                const location = place.geometry.location;
+            }
+        });
+    }
+    refreshToken(request) {
+        // Create a new session token and add it to the request.
+        request.sessionToken = new google.maps.places.AutocompleteSessionToken();
+    }
+    ngAfterViewInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            google.maps.importLibrary('places').then((res) => {
+                const places = res;
+                this.autocompleteService = new google.maps.places.AutocompleteService();
+                this.placesService = new google.maps.places.PlacesService(document.createElement('div'));
+                this.sessionToken = new google.maps.places.AutocompleteSessionToken();
+            });
+        }
+    }
+    onInputChange(e) {
+        const query = e.target.value;
+        if (query.length > 0) {
+            const request = {
+                input: e.target.value,
+                sessionToken: this.sessionToken,
+                includedRegionCodes: ['uk'],
+                region: 'uk',
+                includedPrimaryTypes: ['street_address', 'postal_code'],
+            };
+            this.autocompleteService.getPlacePredictions(request, (predictions, status) => {
+                console.log(predictions);
+                if (status === google.maps.places.PlacesServiceStatus.OK && predictions) {
+                    this.predictions = predictions;
+                }
+                else {
+                    this.predictions = [];
+                }
+            });
+        }
+        else {
+            this.predictions = [];
+        }
+    }
+    save() {
+        this.propertyService.updateLocation(this.id, this.location()).subscribe({
+            next: (res) => {
+                this.snackBarService.open('Update successfully');
+            },
+            error: (error) => {
+                this.snackBarService.open(error.message);
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyManageLocationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: PropertyManageLocationComponent, isStandalone: true, selector: "rolatech-property-manage-location", inputs: { location: { classPropertyName: "location", publicName: "location", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { location: "locationChange" }, viewQueries: [{ propertyName: "autocompleteInput", first: true, predicate: ["autocompleteInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Location\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <mat-form-field position=\"left\">\n    <input\n      type=\"text\"\n      placeholder=\"Search for a location\"\n      #searchInput\n      (input)=\"onInputChange($event)\"\n      matInput\n      [matAutocomplete]=\"auto\"\n    />\n    <mat-autocomplete\n      class=\"single-autocomplete\"\n      #auto=\"matAutocomplete\"\n      (optionSelected)=\"onOptionSelected($event)\"\n      [displayWith]=\"displayFn\"\n    >\n      @for (prediction of predictions; track $index) {\n        <mat-option [value]=\"prediction\">\n          {{ prediction.description }}\n        </mat-option>\n      }\n    </mat-autocomplete>\n  </mat-form-field>\n  <div class=\"border px-3 rounded-md\">\n    <div class=\"flex justify-between items-center py-3 cursor-pointer select-none\" i18n (click)=\"expand = !expand\">\n      <span> Enter the address manually </span>\n      <mat-icon>{{ expand ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\n    </div>\n    <div [@contentAnimation]=\"expand\" [class.hidden]=\"!expand\">\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n> Flat number </mat-label>\n        <input matInput [(ngModel)]=\"location().flatNumber\" required />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n> Street number </mat-label>\n        <input matInput [(ngModel)]=\"location().streetNumber\" required />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n> Building name </mat-label>\n        <input matInput [(ngModel)]=\"location().buildingName\" required />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n> Street </mat-label>\n        <input matInput [(ngModel)]=\"location().street\" required />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n> Town </mat-label>\n        <input matInput [(ngModel)]=\"location().town\" required />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n> Postcode </mat-label>\n        <input matInput [(ngModel)]=\"location().postCode\" required />\n      </mat-form-field>\n    </div>\n  </div>\n  <div class=\"flex justify-end items-center p-3 gap-3\">\n    <button mat-flat-button i18n (click)=\"save()\">Save</button>\n  </div>\n</rolatech-property-manage-content>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: PropertyManageContentComponent, selector: "rolatech-property-manage-content" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], animations: [
+            trigger('contentAnimation', [
+                state('hidden', style({
+                    height: '0',
+                    opacity: 0,
+                })),
+                state('visible', style({
+                    height: '*',
+                    opacity: 1,
+                })),
+                transition('hidden <=> visible', animate('300ms ease-in-out')),
+            ]),
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyManageLocationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-manage-location', imports: [
+                        PropertyManageContentComponent,
+                        ToolbarComponent,
+                        FormsModule,
+                        MatFormFieldModule,
+                        ReactiveFormsModule,
+                        MatInputModule,
+                        FormsModule,
+                        TextFieldModule,
+                        MatAutocompleteModule,
+                        MatButtonModule,
+                        MatIconModule,
+                    ], animations: [
+                        trigger('contentAnimation', [
+                            state('hidden', style({
+                                height: '0',
+                                opacity: 0,
+                            })),
+                            state('visible', style({
+                                height: '*',
+                                opacity: 1,
+                            })),
+                            transition('hidden <=> visible', animate('300ms ease-in-out')),
+                        ]),
+                    ], template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Location\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <mat-form-field position=\"left\">\n    <input\n      type=\"text\"\n      placeholder=\"Search for a location\"\n      #searchInput\n      (input)=\"onInputChange($event)\"\n      matInput\n      [matAutocomplete]=\"auto\"\n    />\n    <mat-autocomplete\n      class=\"single-autocomplete\"\n      #auto=\"matAutocomplete\"\n      (optionSelected)=\"onOptionSelected($event)\"\n      [displayWith]=\"displayFn\"\n    >\n      @for (prediction of predictions; track $index) {\n        <mat-option [value]=\"prediction\">\n          {{ prediction.description }}\n        </mat-option>\n      }\n    </mat-autocomplete>\n  </mat-form-field>\n  <div class=\"border px-3 rounded-md\">\n    <div class=\"flex justify-between items-center py-3 cursor-pointer select-none\" i18n (click)=\"expand = !expand\">\n      <span> Enter the address manually </span>\n      <mat-icon>{{ expand ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\n    </div>\n    <div [@contentAnimation]=\"expand\" [class.hidden]=\"!expand\">\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n> Flat number </mat-label>\n        <input matInput [(ngModel)]=\"location().flatNumber\" required />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n> Street number </mat-label>\n        <input matInput [(ngModel)]=\"location().streetNumber\" required />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n> Building name </mat-label>\n        <input matInput [(ngModel)]=\"location().buildingName\" required />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n> Street </mat-label>\n        <input matInput [(ngModel)]=\"location().street\" required />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n> Town </mat-label>\n        <input matInput [(ngModel)]=\"location().town\" required />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <mat-label i18n> Postcode </mat-label>\n        <input matInput [(ngModel)]=\"location().postCode\" required />\n      </mat-form-field>\n    </div>\n  </div>\n  <div class=\"flex justify-end items-center p-3 gap-3\">\n    <button mat-flat-button i18n (click)=\"save()\">Save</button>\n  </div>\n</rolatech-property-manage-content>\n", styles: ["mat-form-field{width:100%}\n"] }]
+        }], propDecorators: { autocompleteInput: [{
+                type: ViewChild,
+                args: ['autocompleteInput', { static: false }]
+            }] } });
+
+class PropertyVideoTourAddComponent {
+    videoUrl = '';
+    videoId = '';
+    output = output();
+    getYouTubeVideoId(url) {
+        const regex = /(?:youtube\.com\/(?:watch\?v=|embed\/|v\/|shorts\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
+        const match = url.match(regex);
+        return match ? match[1] : null;
+    }
+    ngDoCheck() {
+        this.videoId = this.getYouTubeVideoId(this.videoUrl);
+        this.output.emit(this.videoId);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyVideoTourAddComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: PropertyVideoTourAddComponent, isStandalone: true, selector: "rolatech-property-video-tour-add", outputs: { output: "output" }, ngImport: i0, template: "<mat-form-field appearance=\"fill\">\n  <mat-label>Youtube Video URL</mat-label>\n  <input matInput placeholder=\"Youtube Video URL\" type=\"text\" [(ngModel)]=\"videoUrl\" i18n />\n</mat-form-field>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyVideoTourAddComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-video-tour-add', imports: [CommonModule, MatFormFieldModule, MatInputModule, FormsModule], template: "<mat-form-field appearance=\"fill\">\n  <mat-label>Youtube Video URL</mat-label>\n  <input matInput placeholder=\"Youtube Video URL\" type=\"text\" [(ngModel)]=\"videoUrl\" i18n />\n</mat-form-field>\n", styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+
+class PropertyManageVideoTourComponent extends BaseComponent {
+    propertyService = inject(PropertyService);
+    sanitizer = inject(DomSanitizer);
+    propertyVideoTour;
+    data;
+    iframeVisible = false;
+    iframeLoaded = false;
+    safeURL = this.sanitizer.bypassSecurityTrustResourceUrl('');
+    thumbnailUrl;
+    ngOnInit() {
+        this.id = this.route.parent?.snapshot.paramMap.get('id');
+        this.getVideoTour();
+    }
+    getVideoTour() {
+        this.propertyService.getVideoTour(this.id).subscribe({
+            next: (res) => {
+                this.propertyVideoTour = res.data;
+                this.safeURL = this.sanitizer.bypassSecurityTrustResourceUrl(`https://www.youtube.com/embed/${this.propertyVideoTour.videoId}`);
+                this.thumbnailUrl = `https://i.ytimg.com/vi/${this.propertyVideoTour.videoId}/hqdefault.jpg`;
+            },
+        });
+    }
+    showIframe() {
+        this.iframeVisible = true;
+    }
+    onIframeLoad() {
+        this.iframeLoaded = true;
+    }
+    addVideoTour() {
+        const features = {
+            title: 'Add video tour',
+            cancelText: 'Cancel',
+            confirmText: 'Confirm',
+            data: {
+                videoUrl: '',
+            },
+            component: PropertyVideoTourAddComponent,
+        };
+        this.dialogService.open(features);
+        this.dialogService.confirmed().subscribe({
+            next: (res) => {
+                if (res) {
+                    const data = {
+                        videoId: res,
+                    };
+                    this.propertyService.addVideoTour(this.id, data).subscribe({
+                        next: (res) => {
+                            this.propertyVideoTour = res.data;
+                            this.snackBarService.open('Video tour added');
+                        },
+                    });
+                }
+            },
+        });
+    }
+    updateVideoTour() {
+        const features = {
+            title: 'Update video tour',
+            cancelText: 'Cancel',
+            confirmText: 'Confirm',
+            data: {
+                videoId: '',
+            },
+            component: PropertyVideoTourAddComponent,
+        };
+        this.dialogService.open(features);
+        this.dialogService.confirmed().subscribe({
+            next: (res) => {
+                if (res) {
+                    const data = {
+                        videoId: res,
+                    };
+                    this.propertyService.addVideoTour(this.id, data).subscribe({
+                        next: (res) => {
+                            this.propertyVideoTour = res.data;
+                            this.snackBarService.open('Update successfully');
+                        },
+                    });
+                }
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyManageVideoTourComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: PropertyManageVideoTourComponent, isStandalone: true, selector: "rolatech-property-manage-video-tour", usesInheritance: true, ngImport: i0, template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Video tour\" class=\"hidden md:block\" divider> </rolatech-toolbar>\n  @if (propertyVideoTour) {\n    <!-- <div class=\"relative w-full aspect-video\">\n      @if (!iframeVisible) {\n        <ng-container>\n          <img\n            [src]=\"thumbnailUrl\"\n            class=\"object-cover w-full h-full\"\n            (click)=\"showIframe()\"\n            alt=\"YouTube Video Thumbnail\"\n            style=\"cursor: pointer\"\n          />\n          <button\n            (click)=\"showIframe()\"\n            class=\"absolute inset-0 flex items-center justify-center w-full h-full bg-black/40\"\n            style=\"pointer-events: auto\"\n          >\n            <svg height=\"64\" width=\"64\" viewBox=\"0 0 68 48\">\n              <path\n                d=\"M66.52,7.13A8,8,0,0,0,60.56,1.19C55.34,0,34,0,34,0S12.66,0,7.44,1.19A8,8,0,0,0,1.48,7.13,84.19,84.19,0,0,0,0,24a84.19,84.19,0,0,0,1.48,16.87A8,8,0,0,0,7.44,46.81C12.66,48,34,48,34,48s21.34,0,26.56-1.19a8,8,0,0,0,6-6A84.19,84.19,0,0,0,68,24,84.19,84.19,0,0,0,66.52,7.13Z\"\n                fill=\"#f00\"\n              ></path>\n              <polygon points=\"45 24 27 14 27 34 45 24\" fill=\"#fff\"></polygon>\n            </svg>\n          </button>\n        </ng-container>\n      } @else {\n        <ng-container>\n          <iframe [src]=\"safeURL\" frameborder=\"0\" allowfullscreen class=\"absolute top-0 left-0 w-full h-full\"></iframe>\n        </ng-container>\n      }\n    </div> -->\n    <div class=\"relative w-full aspect-video\">\n      @if (!iframeLoaded) {\n        <div class=\"absolute inset-0 flex items-center justify-center bg-black/10\">\n          <span>Loading...</span>\n        </div>\n      }\n      <iframe [src]=\"safeURL\" frameborder=\"0\" allowfullscreen class=\"w-full h-full\" (load)=\"iframeLoaded = true\"></iframe>\n    </div>\n    <button mat-flat-button (click)=\"updateVideoTour()\" class=\"mt-3\">Update video tour</button>\n  } @else {\n    <button mat-flat-button (click)=\"addVideoTour()\">Add video tour</button>\n  }\n</rolatech-property-manage-content>\n", styles: [""], dependencies: [{ kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: PropertyManageContentComponent, selector: "rolatech-property-manage-content" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyManageVideoTourComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-manage-video-tour', imports: [ToolbarComponent, PropertyManageContentComponent, MatButtonModule], template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Video tour\" class=\"hidden md:block\" divider> </rolatech-toolbar>\n  @if (propertyVideoTour) {\n    <!-- <div class=\"relative w-full aspect-video\">\n      @if (!iframeVisible) {\n        <ng-container>\n          <img\n            [src]=\"thumbnailUrl\"\n            class=\"object-cover w-full h-full\"\n            (click)=\"showIframe()\"\n            alt=\"YouTube Video Thumbnail\"\n            style=\"cursor: pointer\"\n          />\n          <button\n            (click)=\"showIframe()\"\n            class=\"absolute inset-0 flex items-center justify-center w-full h-full bg-black/40\"\n            style=\"pointer-events: auto\"\n          >\n            <svg height=\"64\" width=\"64\" viewBox=\"0 0 68 48\">\n              <path\n                d=\"M66.52,7.13A8,8,0,0,0,60.56,1.19C55.34,0,34,0,34,0S12.66,0,7.44,1.19A8,8,0,0,0,1.48,7.13,84.19,84.19,0,0,0,0,24a84.19,84.19,0,0,0,1.48,16.87A8,8,0,0,0,7.44,46.81C12.66,48,34,48,34,48s21.34,0,26.56-1.19a8,8,0,0,0,6-6A84.19,84.19,0,0,0,68,24,84.19,84.19,0,0,0,66.52,7.13Z\"\n                fill=\"#f00\"\n              ></path>\n              <polygon points=\"45 24 27 14 27 34 45 24\" fill=\"#fff\"></polygon>\n            </svg>\n          </button>\n        </ng-container>\n      } @else {\n        <ng-container>\n          <iframe [src]=\"safeURL\" frameborder=\"0\" allowfullscreen class=\"absolute top-0 left-0 w-full h-full\"></iframe>\n        </ng-container>\n      }\n    </div> -->\n    <div class=\"relative w-full aspect-video\">\n      @if (!iframeLoaded) {\n        <div class=\"absolute inset-0 flex items-center justify-center bg-black/10\">\n          <span>Loading...</span>\n        </div>\n      }\n      <iframe [src]=\"safeURL\" frameborder=\"0\" allowfullscreen class=\"w-full h-full\" (load)=\"iframeLoaded = true\"></iframe>\n    </div>\n    <button mat-flat-button (click)=\"updateVideoTour()\" class=\"mt-3\">Update video tour</button>\n  } @else {\n    <button mat-flat-button (click)=\"addVideoTour()\">Add video tour</button>\n  }\n</rolatech-property-manage-content>\n" }]
+        }] });
+
+const propertyManageRoutes = [
+    {
+        path: '',
+        component: PropertyManageIndexComponent,
+    },
+    {
+        path: 'create',
+        component: PropertyManageCreateComponent,
+    },
+    {
+        path: ':id/manage',
+        component: PropertyManageLayoutComponent,
+        children: [
+            {
+                path: 'info',
+                component: PropertyManageInfoComponent,
+            },
+            {
+                path: 'media',
+                component: PropertyManageMediaComponent,
+            },
+            {
+                path: 'video-tour',
+                component: PropertyManageVideoTourComponent,
+            },
+            {
+                path: 'sections',
+                component: PropertyManageSectionsComponent,
+            },
+            {
+                path: 'location',
+                component: PropertyManageLocationComponent,
+            },
+            {
+                path: 'features',
+                component: PropertyManageFeaturesComponent,
+            },
+            // {
+            //   path: 'amenities',
+            //   component: PropertyManageAmenitiesComponent,
+            // },
+            // {
+            //   path: 'options',
+            //   component: PropertyManageOptionsComponent,
+            // },
+            {
+                path: 'pricing',
+                component: PropertyManagePricingComponent,
+            },
+            {
+                path: 'schedule',
+                component: PropertyManageScheduleComponent,
+            },
+        ],
+    },
+];
+
+class PropertyViewingConfirmationComponent {
+    output = output();
+    proposedTime = model();
+    selectedTime = model();
+    ngDoCheck() {
+        this.output.emit(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyViewingConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: PropertyViewingConfirmationComponent, isStandalone: true, selector: "rolatech-property-viewing-confirmation", inputs: { proposedTime: { classPropertyName: "proposedTime", publicName: "proposedTime", isSignal: true, isRequired: false, transformFunction: null }, selectedTime: { classPropertyName: "selectedTime", publicName: "selectedTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { output: "output", proposedTime: "proposedTimeChange", selectedTime: "selectedTimeChange" }, ngImport: i0, template: "<div>\n  @if (proposedTime()) {\n    <div>\n      <span> {{ proposedTime().date }} </span><span>{{ proposedTime().time }}</span>\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyViewingConfirmationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-viewing-confirmation', imports: [CommonModule], template: "<div>\n  @if (proposedTime()) {\n    <div>\n      <span> {{ proposedTime().date }} </span><span>{{ proposedTime().time }}</span>\n    </div>\n  }\n</div>\n" }]
+        }] });
+
+class PropertyManageViewingsDetailComponent extends BaseComponent {
+    propertyService = inject(PropertyService);
+    authUserService = inject(AuthUserService);
+    viewing;
+    name = '';
+    property;
+    status = PropertyViewingStatus;
+    employmentStatus = EmploymentStatus;
+    propertyViewerCategory = PropertyViewerCategory;
+    agent;
+    viewingTimeConfirmed = false;
+    selectedSlotId = '';
+    ngOnInit() {
+        this.getViewing();
+    }
+    getViewing() {
+        this.propertyService.getViewing(this.id).subscribe({
+            next: (res) => {
+                this.viewing = res.data;
+                this.name = this.viewing.firstName + ', ' + this.viewing.lastName;
+                this.getProperty(this.viewing.propertyId);
+                this.viewingTimeConfirmed = this.viewing.viewingDate ? true : false;
+            },
+        });
+    }
+    getProperty(propertyId) {
+        this.propertyService.get(propertyId).subscribe({
+            next: (res) => {
+                this.property = res.data;
+                this.getAgentPublicInfo(this.property.agentId);
+            },
+        });
+    }
+    getAgentPublicInfo(agentId) {
+        this.authUserService.getPublicUserInfo(agentId).subscribe({
+            next: (res) => {
+                this.agent = res;
+            },
+        });
+    }
+    findConfirmedViewingTime() {
+        const viewingProposedSlot = this.viewing.proposedSlots.find((item) => {
+            return item.date === this.viewing.viewingDate && item.time === this.viewing.viewingTime;
+        });
+        this.selectedSlotId = viewingProposedSlot.id;
+    }
+    confirmViewingTime(item) {
+        const options = {
+            title: 'Confirm viewing time',
+            component: PropertyViewingConfirmationComponent,
+            data: {
+                proposedTime: item,
+            },
+        };
+        this.dialogService.open(options);
+        this.dialogService.confirmed().subscribe({
+            next: (result) => {
+                if (result) {
+                    console.log(result);
+                    this.propertyService.confirmViewing(this.id, item.id).subscribe({
+                        next: (res) => {
+                            this.viewingTimeConfirmed = true;
+                        },
+                    });
+                }
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyManageViewingsDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: PropertyManageViewingsDetailComponent, isStandalone: true, selector: "rolatech-property-manage-viewings-detail", usesInheritance: true, ngImport: i0, template: "@if (viewing) {\n  <rolatech-toolbar [title]=\"status[viewing.status]\" large link=\"../\"></rolatech-toolbar>\n  <div class=\"px-4\">\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Viewer</div>\n      <hr class=\"mb-2\" />\n      <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n        <rolatech-rich-label label=\"Name\" [title]=\"name\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Email\" [title]=\"viewing.email\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Phone\" [title]=\"viewing.phone\"></rolatech-rich-label>\n      </div>\n    </div>\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Proposed times</div>\n      <hr class=\"mb-2\" />\n      @for (item of viewing.proposedSlots; track $index) {\n        <div class=\"flex flex-row items-center gap-3 py-3\">\n          <rolatech-rich-label label=\"Date\" [title]=\"item.date\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Time\" [title]=\"item.time\"></rolatech-rich-label>\n          @if (viewing.viewingDate && viewing.viewingTime) {\n            @if (item.date === viewing.viewingDate && item.time === viewing.viewingTime) {\n              <div class=\"ml-3\"><button mat-flat-button i18n disabled=\"\">Confirmed</button></div>\n            }\n          }\n          @if (!viewingTimeConfirmed) {\n            <div class=\"ml-3\"><button mat-flat-button (click)=\"confirmViewingTime(item)\" i18n>Confirm</button></div>\n          }\n        </div>\n      }\n    </div>\n    <!-- Introducing agent -->\n    @if (viewing.viewerCategory.toString() === 'AGENT') {\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Qualification</div>\n        <hr class=\"mb-2\" />\n        <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n          <!-- <rolatech-rich-label label=\"Move-in date\" [title]=\"viewing.startDate\"></rolatech-rich-label> -->\n          <rolatech-rich-label label=\"Tenancy duration\" [title]=\"viewing.tenancyDuration\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Number of tenants\" [title]=\"viewing.numberOfTenants\"></rolatech-rich-label>\n        </div>\n        <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n          <rolatech-rich-label\n            label=\"Employment status\"\n            [title]=\"employmentStatus[viewing.employmentStatus]\"\n          ></rolatech-rich-label>\n          <!-- <rolatech-rich-label label=\"Employer\" [title]=\"viewing.startDate\"></rolatech-rich-label> -->\n          <rolatech-rich-label label=\"Annual income\" [title]=\"viewing.income\"></rolatech-rich-label>\n        </div>\n      </div>\n    }\n\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Property details</div>\n      <hr class=\"mb-2\" />\n      @if (property) {\n        <div class=\"flex items-center py-2\">\n          <div class=\"min-w-16 w-24 object-cover aspect-video rounded-md mr-3\">\n            @defer (on viewport()) {\n              <rolatech-thumbnail [src]=\"property.media[0].url\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n          <div class=\"flex w-full justify-between\">\n            <div class=\"flex justify-between w-full\">\n              <div class=\"flex flex-col\">\n                <div>{{ property.title }}</div>\n                <div class=\"inline-flex gap-1 mt-2\">\n                  <div>\n                    <span class=\"mr-1\">{{ property.bedrooms }}</span>\n                    <span i18n>Bedrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ property.bathrooms }}</span>\n                    <span i18n>Bathrooms</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"text-right\">\n                <div class=\"text-sm\">\u00A3{{ property.price | fixed }}</div>\n              </div>\n            </div>\n          </div>\n          <div class=\"hidden md:flex flex-col px-3\"></div>\n        </div>\n      }\n    </div>\n\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Viewing agent</div>\n      <hr class=\"mb-2\" />\n      @if (agent) {\n        <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n          <rolatech-rich-label label=\"Name\" [title]=\"agent.name\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Email\" [title]=\"agent.email\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Phone\" [title]=\"agent.phone\"></rolatech-rich-label>\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: RichLabelComponent, selector: "rolatech-rich-label", inputs: ["label", "title"] }, { kind: "pipe", type: FixedPipe, name: "fixed" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], deferBlockDependencies: [() => [ThumbnailComponent]] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: PropertyManageViewingsDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-manage-viewings-detail', imports: [CommonModule, ToolbarComponent, RichLabelComponent, ThumbnailComponent, FixedPipe, MatButtonModule], template: "@if (viewing) {\n  <rolatech-toolbar [title]=\"status[viewing.status]\" large link=\"../\"></rolatech-toolbar>\n  <div class=\"px-4\">\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Viewer</div>\n      <hr class=\"mb-2\" />\n      <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n        <rolatech-rich-label label=\"Name\" [title]=\"name\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Email\" [title]=\"viewing.email\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Phone\" [title]=\"viewing.phone\"></rolatech-rich-label>\n      </div>\n    </div>\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Proposed times</div>\n      <hr class=\"mb-2\" />\n      @for (item of viewing.proposedSlots; track $index) {\n        <div class=\"flex flex-row items-center gap-3 py-3\">\n          <rolatech-rich-label label=\"Date\" [title]=\"item.date\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Time\" [title]=\"item.time\"></rolatech-rich-label>\n          @if (viewing.viewingDate && viewing.viewingTime) {\n            @if (item.date === viewing.viewingDate && item.time === viewing.viewingTime) {\n              <div class=\"ml-3\"><button mat-flat-button i18n disabled=\"\">Confirmed</button></div>\n            }\n          }\n          @if (!viewingTimeConfirmed) {\n            <div class=\"ml-3\"><button mat-flat-button (click)=\"confirmViewingTime(item)\" i18n>Confirm</button></div>\n          }\n        </div>\n      }\n    </div>\n    <!-- Introducing agent -->\n    @if (viewing.viewerCategory.toString() === 'AGENT') {\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Qualification</div>\n        <hr class=\"mb-2\" />\n        <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n          <!-- <rolatech-rich-label label=\"Move-in date\" [title]=\"viewing.startDate\"></rolatech-rich-label> -->\n          <rolatech-rich-label label=\"Tenancy duration\" [title]=\"viewing.tenancyDuration\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Number of tenants\" [title]=\"viewing.numberOfTenants\"></rolatech-rich-label>\n        </div>\n        <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n          <rolatech-rich-label\n            label=\"Employment status\"\n            [title]=\"employmentStatus[viewing.employmentStatus]\"\n          ></rolatech-rich-label>\n          <!-- <rolatech-rich-label label=\"Employer\" [title]=\"viewing.startDate\"></rolatech-rich-label> -->\n          <rolatech-rich-label label=\"Annual income\" [title]=\"viewing.income\"></rolatech-rich-label>\n        </div>\n      </div>\n    }\n\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Property details</div>\n      <hr class=\"mb-2\" />\n      @if (property) {\n        <div class=\"flex items-center py-2\">\n          <div class=\"min-w-16 w-24 object-cover aspect-video rounded-md mr-3\">\n            @defer (on viewport()) {\n              <rolatech-thumbnail [src]=\"property.media[0].url\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n          <div class=\"flex w-full justify-between\">\n            <div class=\"flex justify-between w-full\">\n              <div class=\"flex flex-col\">\n                <div>{{ property.title }}</div>\n                <div class=\"inline-flex gap-1 mt-2\">\n                  <div>\n                    <span class=\"mr-1\">{{ property.bedrooms }}</span>\n                    <span i18n>Bedrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ property.bathrooms }}</span>\n                    <span i18n>Bathrooms</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"text-right\">\n                <div class=\"text-sm\">\u00A3{{ property.price | fixed }}</div>\n              </div>\n            </div>\n          </div>\n          <div class=\"hidden md:flex flex-col px-3\"></div>\n        </div>\n      }\n    </div>\n\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Viewing agent</div>\n      <hr class=\"mb-2\" />\n      @if (agent) {\n        <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n          <rolatech-rich-label label=\"Name\" [title]=\"agent.name\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Email\" [title]=\"agent.email\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Phone\" [title]=\"agent.phone\"></rolatech-rich-label>\n        </div>\n      }\n    </div>\n  </div>\n}\n" }]
+        }] });
+
+const propertyManageViewingsRoutes = [
+    {
+        path: '',
+        loadComponent: () => import('./rolatech-angular-property-property-manage-viewings-index.component-Clazb8j0.mjs').then((x) => x.PropertyManageViewingsIndexComponent),
+    },
+    {
+        path: ':id',
+        component: PropertyManageViewingsDetailComponent,
+    },
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AdverseCreditStatus as A, EmploymentStatus as E, PropertyViewingItemComponent as P, ResidencyStatus as R, ViewingTime as V, propertyManageOffersRoutes as a, propertyRoutes as b, propertyManageRoutes as c, propertyManageViewingsRoutes as d, PropertyActionsComponent as e, featureManageRoutes as f, PropertyItemComponent as g, PropertyPricingComponent as h, PropertyPriceType as i, PropertyVideoTourType as j, PropertyStatus as k, PropertyType as l, PropertyInventoryStatus as m, PropertyScope as n, PropertyViewingStatus as o, propertyReviewRoutes as p, PropertyViewerCategory as q, PropertyOfferTimelineStatus as r, PropertyOfferType as s, PropertyOfferStatus as t, PropertyApplicantType as u };
+//# sourceMappingURL=rolatech-angular-property-rolatech-angular-property-CO7GI4x7.mjs.map