@rolatech/angular-property 20.2.4-beta.2 → 20.2.6-beta.1

package/fesm2022/{rolatech-angular-property-rolatech-angular-property-CvuaMAgZ.mjs → rolatech-angular-property-rolatech-angular-property-CVZQglOo.mjs}

@@ -10,7 +10,7 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
 import * as i1$1 from '@angular/router';
 import { RouterLink, RouterModule, ActivatedRoute, Router, RouterLinkActive, RouterOutlet } from '@angular/router';
-import { ThumbnailComponent, ImagePlaceholderComponent, Skeleton, ToolbarComponent, AbstractLoading, ImagePreviewDialogComponent, BaseComponent, AcceptDialogComponent, RejectDialogComponent, RichLabelComponent, AngularComponentsModule, ConfirmationDialogComponent, TabsComponent, TabComponent, EmptyComponent, ListComponent, ContainerComponent, SearchBar, SpinnerComponent, MediaListComponent, MediaListItemComponent, InputComponent } from '@rolatech/angular-components';
+import { ThumbnailComponent, ImagePlaceholderComponent, Skeleton, ToolbarComponent, Loading, ImagePreviewDialogComponent, BaseComponent, AcceptDialogComponent, RejectDialogComponent, RichLabelComponent, AngularComponentsModule, ConfirmationDialogComponent, TabsComponent, TabComponent, EmptyComponent, ListComponent, ContainerComponent, SearchBar, SpinnerComponent, MediaListComponent, MediaListItemComponent, InputComponent } from '@rolatech/angular-components';
 import { PropertyService, FeatureService, PropertyOfferService, InvoiceService, FloorplanService, PropertyHighlightsService, TimeZoneService, PaymentService, PropertySearchService, DialogService } from '@rolatech/angular-services';
 import * as i1 from '@angular/common';
 import { CommonModule, NgClass, isPlatformBrowser, ViewportScroller, KeyValuePipe, Location } from '@angular/common';
@@ -464,7 +464,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                 args: ['class.rolatech-property-manage-index']
             }], paginator: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatPaginator), { isSignal: true }] }] } });
 
-class PropertyMediaComponent extends AbstractLoading {
+class PropertyMediaComponent extends Loading {
     hasClass = true;
     disableScrollbar = true;
     media = input(...(ngDevMode ? [undefined, { debugName: "media" }] : []));
@@ -1015,11 +1015,11 @@ class PropertyOfferItemComponent {
         return this.offer().amount.toFixed(2);
     }, ...(ngDevMode ? [{ debugName: "total" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyOfferItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: PropertyOfferItemComponent, isStandalone: true, selector: "rolatech-property-offer-item", inputs: { offer: { classPropertyName: "offer", publicName: "offer", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col hover:bg-[--rt-raised-background] cursor-pointer p-3\">\n  <div>\n    <div class=\"flex justify-between w-full mb-2\">\n      <a class=\"flex items-center gap-3\">\n        <span>Offer ID: {{ offer().id }}</span>\n      </a>\n      <span class=\"font-medium text-sm\">{{ status[offer().status] }}</span>\n    </div>\n    @if (offer().item) {\n      <div class=\"flex flex-row py-2\">\n        @if (offer().item.media) {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            @defer {\n              <rolatech-thumbnail [src]=\"offer().item.media ? offer().item.media[0].url : ''\" size=\"medium\" mode=\"clip\">\n              </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n        } @else {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            <rolatech-image-placeholder></rolatech-image-placeholder>\n          </div>\n        }\n        <div class=\"flex w-full justify-between\">\n          <div class=\"flex justify-between w-full\">\n            <div class=\"flex flex-col\">\n              <div class=\"font-bold\">{{ offer().item.title }}</div>\n              <div class=\"inline-flex gap-1 mt-2\">\n                <div>\n                  <span class=\"mr-1\">{{ offer().item.bedrooms }}</span>\n                  <span i18n>Bedrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ offer().item.bathrooms }}</span>\n                  <span i18n>Bathrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ offer().item.receptions }}</span>\n                  <span i18n>Receptions</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"text-right\">\n              <div class=\"text-sm\">{{ offer().item.amount | price }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: ImagePlaceholderComponent, selector: "rolatech-image-placeholder", inputs: ["ratio"] }, { kind: "pipe", type: PricePipe, name: "price" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: PropertyOfferItemComponent, isStandalone: true, selector: "rolatech-property-offer-item", inputs: { offer: { classPropertyName: "offer", publicName: "offer", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col hover:bg-[--rt-raised-background] cursor-pointer p-3\">\n  <div>\n    <div class=\"flex justify-between w-full mb-2\">\n      <a class=\"flex items-center gap-3\">\n        <span>Offer ID: {{ offer().id }}</span>\n      </a>\n      <span class=\"font-medium text-sm text-[--rt-brand-color]\">{{ status[offer().status] }}</span>\n    </div>\n    @if (offer().item) {\n      <div class=\"flex flex-row py-2\">\n        @if (offer().item.media) {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            @defer {\n              <rolatech-thumbnail [src]=\"offer().item.media ? offer().item.media[0].url : ''\" size=\"medium\" mode=\"clip\">\n              </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n        } @else {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            <rolatech-image-placeholder></rolatech-image-placeholder>\n          </div>\n        }\n        <div class=\"flex w-full justify-between\">\n          <div class=\"flex justify-between w-full\">\n            <div class=\"flex flex-col\">\n              <div class=\"font-bold\">{{ offer().item.title }}</div>\n              <div class=\"inline-flex gap-1 mt-2\">\n                <div>\n                  <span class=\"mr-1\">{{ offer().item.bedrooms }}</span>\n                  <span i18n>Bedrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ offer().item.bathrooms }}</span>\n                  <span i18n>Bathrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ offer().item.receptions }}</span>\n                  <span i18n>Receptions</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"text-right\">\n              <div class=\"text-sm\">{{ offer().item.amount | price }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: ImagePlaceholderComponent, selector: "rolatech-image-placeholder", inputs: ["ratio"] }, { kind: "pipe", type: PricePipe, name: "price" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyOfferItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-property-offer-item', imports: [MatIconModule, ThumbnailComponent, ImagePlaceholderComponent, PricePipe], template: "<div class=\"flex flex-col hover:bg-[--rt-raised-background] cursor-pointer p-3\">\n  <div>\n    <div class=\"flex justify-between w-full mb-2\">\n      <a class=\"flex items-center gap-3\">\n        <span>Offer ID: {{ offer().id }}</span>\n      </a>\n      <span class=\"font-medium text-sm\">{{ status[offer().status] }}</span>\n    </div>\n    @if (offer().item) {\n      <div class=\"flex flex-row py-2\">\n        @if (offer().item.media) {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            @defer {\n              <rolatech-thumbnail [src]=\"offer().item.media ? offer().item.media[0].url : ''\" size=\"medium\" mode=\"clip\">\n              </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n        } @else {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            <rolatech-image-placeholder></rolatech-image-placeholder>\n          </div>\n        }\n        <div class=\"flex w-full justify-between\">\n          <div class=\"flex justify-between w-full\">\n            <div class=\"flex flex-col\">\n              <div class=\"font-bold\">{{ offer().item.title }}</div>\n              <div class=\"inline-flex gap-1 mt-2\">\n                <div>\n                  <span class=\"mr-1\">{{ offer().item.bedrooms }}</span>\n                  <span i18n>Bedrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ offer().item.bathrooms }}</span>\n                  <span i18n>Bathrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ offer().item.receptions }}</span>\n                  <span i18n>Receptions</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"text-right\">\n              <div class=\"text-sm\">{{ offer().item.amount | price }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n" }]
+            args: [{ selector: 'rolatech-property-offer-item', imports: [MatIconModule, ThumbnailComponent, ImagePlaceholderComponent, PricePipe], template: "<div class=\"flex flex-col hover:bg-[--rt-raised-background] cursor-pointer p-3\">\n  <div>\n    <div class=\"flex justify-between w-full mb-2\">\n      <a class=\"flex items-center gap-3\">\n        <span>Offer ID: {{ offer().id }}</span>\n      </a>\n      <span class=\"font-medium text-sm text-[--rt-brand-color]\">{{ status[offer().status] }}</span>\n    </div>\n    @if (offer().item) {\n      <div class=\"flex flex-row py-2\">\n        @if (offer().item.media) {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            @defer {\n              <rolatech-thumbnail [src]=\"offer().item.media ? offer().item.media[0].url : ''\" size=\"medium\" mode=\"clip\">\n              </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n        } @else {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            <rolatech-image-placeholder></rolatech-image-placeholder>\n          </div>\n        }\n        <div class=\"flex w-full justify-between\">\n          <div class=\"flex justify-between w-full\">\n            <div class=\"flex flex-col\">\n              <div class=\"font-bold\">{{ offer().item.title }}</div>\n              <div class=\"inline-flex gap-1 mt-2\">\n                <div>\n                  <span class=\"mr-1\">{{ offer().item.bedrooms }}</span>\n                  <span i18n>Bedrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ offer().item.bathrooms }}</span>\n                  <span i18n>Bathrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ offer().item.receptions }}</span>\n                  <span i18n>Receptions</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"text-right\">\n              <div class=\"text-sm\">{{ offer().item.amount | price }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n" }]
         }], propDecorators: { offer: [{ type: i0.Input, args: [{ isSignal: true, alias: "offer", required: true }] }] } });
 
 class OfferItemSkeleton {
@@ -1686,7 +1686,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
             args: [{ selector: 'rolatech-property-pricing', imports: [CommonModule, MatButtonModule, AvailableDatePipe, PricePipe], encapsulation: ViewEncapsulation.None, template: "<div class=\"py-3 flex flex-col gap-3\">\n  <div class=\"flex justify-between items-center\">\n    @if (market() === 'LETTINGS' && rentFrequency() === 'MONTHLY') {\n      <div class=\"text-lg font-bold\" i18n>Rent per month</div>\n    }\n    @if (market() === 'LETTINGS' && rentFrequency() === 'WEEKLY') {\n      <div class=\"text-lg font-bold\" i18n>Rent per week</div>\n    }\n    @if (market() === 'LETTINGS' && rentFrequency() === 'NOT_SPECIFIED') {\n      <div class=\"text-lg font-bold\" i18n>Rent price</div>\n    }\n    @if (market() === 'SALES') {\n      <div class=\"text-lg font-bold\" i18n>Price</div>\n    }\n    <div class=\"text-xl font-bold\">{{ displayPrice() | price }}</div>\n  </div>\n  <div class=\"flex justify-between items-center\">\n    <div>Available</div>\n    <div>{{ property().availableDate | availableDate }}</div>\n  </div>\n  @if (market() === 'LETTINGS') {\n    <div class=\"flex justify-between items-center\">\n      <span i18n>Holding Deposit</span>\n      <span>{{ holdingDeposit | price }}</span>\n    </div>\n    <div class=\"flex justify-between items-center font-bold\">\n      <span i18n>Security Deposit</span>\n      <span>{{ securityDeposit | price }}</span>\n    </div>\n  }\n</div>\n" }]
         }], propDecorators: { property: [{ type: i0.Input, args: [{ isSignal: true, alias: "property", required: true }] }], price: [{ type: i0.Input, args: [{ isSignal: true, alias: "price", required: false }] }] } });
 
-class PropertyInfoComponent extends AbstractLoading {
+class PropertyInfoComponent extends Loading {
     property = input.required(...(ngDevMode ? [{ debugName: "property" }] : []));
     wish = output();
     inWishList = input(false, ...(ngDevMode ? [{ debugName: "inWishList" }] : []));
@@ -1965,7 +1965,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
             args: [{ selector: 'rolatech-property-media-skeleton', imports: [Skeleton], template: "<div class=\"py-3\">\n  <div class=\"object-cover aspect-video bg-[--rt-raised-background]\">\n    <rolatech-skeleton></rolatech-skeleton>\n  </div>\n\n  <div class=\"flex overflow-y-hidden overflow-x-scroll scrollbar-hide pb-4\">\n    @for (dummy of [0, 1, 2, 3]; track dummy) {\n    <div class=\"flex flex-row mt-3 mr-3 rounded-md min-w-32 object-cover aspect-video bg-[--rt-raised-background]\">\n      <rolatech-skeleton></rolatech-skeleton>\n    </div>\n    }\n  </div>\n</div>\n" }]
         }] });
 
-class PropertyInfoSkeleton extends AbstractLoading {
+class PropertyInfoSkeleton extends Loading {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyInfoSkeleton, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: PropertyInfoSkeleton, isStandalone: true, selector: "rolatech-property-info-skeleton", usesInheritance: true, ngImport: i0, template: "<div>\n  <div class=\"flex justify-between items-start gap-3\">\n    <!-- title -->\n    <rolatech-skeleton class=\"w-[80%] h-8 mb-3\"></rolatech-skeleton>\n    <!-- action button -->\n    <rolatech-skeleton class=\"w-6 h-6\"></rolatech-skeleton>\n  </div>\n  <div class=\"font-bold mb-3\">\n    <!-- short info -->\n    <rolatech-skeleton class=\"w-[50%] h-6\"></rolatech-skeleton>\n  </div>\n  <!-- description -->\n  <rolatech-skeleton class=\"w-full aspect-video\"></rolatech-skeleton>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: Skeleton, selector: "rolatech-skeleton" }], encapsulation: i0.ViewEncapsulation.None });
 }
@@ -1974,7 +1974,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
             args: [{ selector: 'rolatech-property-info-skeleton', imports: [Skeleton], encapsulation: ViewEncapsulation.None, template: "<div>\n  <div class=\"flex justify-between items-start gap-3\">\n    <!-- title -->\n    <rolatech-skeleton class=\"w-[80%] h-8 mb-3\"></rolatech-skeleton>\n    <!-- action button -->\n    <rolatech-skeleton class=\"w-6 h-6\"></rolatech-skeleton>\n  </div>\n  <div class=\"font-bold mb-3\">\n    <!-- short info -->\n    <rolatech-skeleton class=\"w-[50%] h-6\"></rolatech-skeleton>\n  </div>\n  <!-- description -->\n  <rolatech-skeleton class=\"w-full aspect-video\"></rolatech-skeleton>\n</div>\n" }]
         }] });
 
-class PropertyAgentSkeleton extends AbstractLoading {
+class PropertyAgentSkeleton extends Loading {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyAgentSkeleton, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: PropertyAgentSkeleton, isStandalone: true, selector: "rolatech-property-agent-skeleton", usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col\">\n  <div class=\"flex flex-row items-center pb-3\">\n    <div class=\"flex mr-3 gap-2 items-center w-full\">\n      <!-- avatar -->\n      <rolatech-skeleton class=\"w-14 h-14 rounded-full\"></rolatech-skeleton>\n      <rolatech-skeleton class=\"flex-1 h-6\"></rolatech-skeleton>\n    </div>\n  </div>\n  <div class=\"text-sm opacity-70\">\n    <rolatech-skeleton class=\"w-full h-6\"></rolatech-skeleton>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: Skeleton, selector: "rolatech-skeleton" }], encapsulation: i0.ViewEncapsulation.None });
 }
@@ -2157,7 +2157,7 @@ class PropertyDetailsComponent extends BaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: PropertyDetailsComponent, isStandalone: true, selector: "rolatech-property-details", usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  <div class=\"flex flex-col w-full\">\n    @if (loading()) {\n      <rolatech-property-media-skeleton></rolatech-property-media-skeleton>\n\n      <div class=\"flex flex-col md:flex-row gap-3 w-full\">\n        <rolatech-property-info-skeleton class=\"w-full md:w-2/3\"></rolatech-property-info-skeleton>\n        <rolatech-property-agent-skeleton class=\"w-full md:w-1/3\"></rolatech-property-agent-skeleton>\n      </div>\n    } @else {\n      @if (property(); as property) {\n        <rolatech-property-media [media]=\"property.media ? property.media : []\"></rolatech-property-media>\n        <div class=\"flex flex-col md:flex-row gap-3 w-full\">\n          <div class=\"w-full md:w-2/3\">\n            <rolatech-property-info [property]=\"property\" (wish)=\"onWish($event)\" [inWishList]=\"inWishList\">\n            </rolatech-property-info>\n            <!-- <rolatech-property-agent-renderer\n            [name]=\"fullname\"\n            [avatar]=\"user?.avatar\"\n            [username]=\"username\"\n          ></rolatech-property-agent-renderer> -->\n            @if (features.length > 0) {\n              <rolatech-property-features [features]=\"features\"></rolatech-property-features>\n            }\n            @if (highlights.length > 0) {\n              <rolatech-property-highlights [highlights]=\"highlights\"></rolatech-property-highlights>\n            }\n            @if (floorplans.length > 0) {\n              <rolatech-property-floorplan [floorplans]=\"floorplans\"></rolatech-property-floorplan>\n            }\n            @if (property.location) {\n              <rolatech-property-location [location]=\"property.location\"></rolatech-property-location>\n            }\n            <div>{{ videos().length }}</div>\n            @if (videos() && videos().length > 0) {\n              @for (item of videos(); track $index) {\n                <rolatech-property-video [video]=\"item\"></rolatech-property-video>\n              }\n            }\n            @if (epc && epc.currentScore) {\n              <rolatech-property-epc [epc]=\"epc\"></rolatech-property-epc>\n            }\n            <div class=\"flex flex-col\">\n              <div class=\"text-2xl font-bold pt-3\" i18n>Sections</div>\n              @for (section of property.sections; track $index) {\n                <rolatech-property-section [section]=\"section\"></rolatech-property-section>\n              }\n              <rolatech-comments [itemId]=\"property.id\"></rolatech-comments>\n            </div>\n          </div>\n          <div class=\"w-full md:w-1/3\">\n            <rolatech-property-agent-renderer\n              [name]=\"fullname\"\n              [avatar]=\"user?.avatar\"\n              [username]=\"username\"\n            ></rolatech-property-agent-renderer>\n            <rolatech-property-pricing (wish)=\"onWish($event)\" [property]=\"property\"></rolatech-property-pricing>\n            <rolatech-property-actions\n              [property]=\"property\"\n              (offer)=\"onOffer($event)\"\n              (deposit)=\"onOffer($event)\"\n              (requestViewing)=\"onRequestViewing($event)\"\n            >\n              @if (user) {\n                <rolatech-property-action-contact [email]=\"user.email\" [phone]=\"user.phone\"></rolatech-property-action-contact>\n              }\n            </rolatech-property-actions>\n          </div>\n        </div>\n      }\n    }\n  </div>\n</rolatech-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: PropertyInfoComponent, selector: "rolatech-property-info", inputs: ["property", "inWishList"], outputs: ["wish"] }, { kind: "component", type: PropertyMediaComponent, selector: "rolatech-property-media", inputs: ["media", "min"] }, { kind: "component", type: PropertyPricingComponent, selector: "rolatech-property-pricing", inputs: ["property", "price"] }, { kind: "component", type: PropertySectionComponent, selector: "rolatech-property-section", inputs: ["section", "user", "username"] }, { kind: "component", type: PropertyActionsComponent, selector: "rolatech-property-actions", inputs: ["property"], outputs: ["requestViewing", "offer", "deposit"] }, { kind: "component", type: CommentsComponent, selector: "rolatech-comments", inputs: ["itemId"] }, { kind: "component", type: PropertyAgentRenderer, selector: "rolatech-property-agent-renderer", inputs: ["name", "avatar", "username", "subtitle"] }, { kind: "component", type: PropertyLocationComponent, selector: "rolatech-property-location", inputs: ["location"] }, { kind: "component", type: PropertyFeaturesComponent, selector: "rolatech-property-features", inputs: ["features"] }, { kind: "component", type: PropertyVideoComponent, selector: "rolatech-property-video", inputs: ["video"] }, { kind: "component", type: PropertyActionContactComponent, selector: "rolatech-property-action-contact", inputs: ["email", "phone"], outputs: ["callAgent", "emailAgent"] }, { kind: "component", type: PropertyHighlights, selector: "rolatech-property-highlights", inputs: ["highlights"] }, { kind: "component", type: PropertyEpc, selector: "rolatech-property-epc", inputs: ["epc"] }, { kind: "component", type: PropertyFloorplan, selector: "rolatech-property-floorplan", inputs: ["floorplans"] }, { kind: "component", type: PropertyMediaSkeleton, selector: "rolatech-property-media-skeleton" }, { kind: "component", type: PropertyInfoSkeleton, selector: "rolatech-property-info-skeleton" }, { kind: "component", type: PropertyAgentSkeleton, selector: "rolatech-property-agent-skeleton" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: PropertyDetailsComponent, isStandalone: true, selector: "rolatech-property-details", usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  <div class=\"flex flex-col w-full\">\n    @if (loading()) {\n      <rolatech-property-media-skeleton></rolatech-property-media-skeleton>\n\n      <div class=\"flex flex-col md:flex-row gap-3 w-full\">\n        <rolatech-property-info-skeleton class=\"w-full md:w-2/3\"></rolatech-property-info-skeleton>\n        <rolatech-property-agent-skeleton class=\"w-full md:w-1/3\"></rolatech-property-agent-skeleton>\n      </div>\n    } @else {\n      @if (property(); as property) {\n        <rolatech-property-media [media]=\"property.media ? property.media : []\"></rolatech-property-media>\n        <div class=\"flex flex-col md:flex-row gap-3 w-full\">\n          <div class=\"w-full md:w-2/3\">\n            <rolatech-property-info [property]=\"property\" (wish)=\"onWish($event)\" [inWishList]=\"inWishList\">\n            </rolatech-property-info>\n            <!-- <rolatech-property-agent-renderer\n            [name]=\"fullname\"\n            [avatar]=\"user?.avatar\"\n            [username]=\"username\"\n          ></rolatech-property-agent-renderer> -->\n            @if (features.length > 0) {\n              <rolatech-property-features [features]=\"features\"></rolatech-property-features>\n            }\n            @if (highlights.length > 0) {\n              <rolatech-property-highlights [highlights]=\"highlights\"></rolatech-property-highlights>\n            }\n            @if (floorplans.length > 0) {\n              <rolatech-property-floorplan [floorplans]=\"floorplans\"></rolatech-property-floorplan>\n            }\n            @if (property.location) {\n              <rolatech-property-location [location]=\"property.location\"></rolatech-property-location>\n            }\n            @if (videos() && videos().length > 0) {\n              @for (item of videos(); track $index) {\n                <rolatech-property-video [video]=\"item\"></rolatech-property-video>\n              }\n            }\n            @if (epc && epc.currentScore) {\n              <rolatech-property-epc [epc]=\"epc\"></rolatech-property-epc>\n            }\n            <div class=\"flex flex-col\">\n              <div class=\"text-2xl font-bold pt-3\" i18n>Sections</div>\n              @for (section of property.sections; track $index) {\n                <rolatech-property-section [section]=\"section\"></rolatech-property-section>\n              }\n              <rolatech-comments [itemId]=\"property.id\"></rolatech-comments>\n            </div>\n          </div>\n          <div class=\"w-full md:w-1/3\">\n            <rolatech-property-agent-renderer\n              [name]=\"fullname\"\n              [avatar]=\"user?.avatar\"\n              [username]=\"username\"\n            ></rolatech-property-agent-renderer>\n            <rolatech-property-pricing (wish)=\"onWish($event)\" [property]=\"property\"></rolatech-property-pricing>\n            <rolatech-property-actions\n              [property]=\"property\"\n              (offer)=\"onOffer($event)\"\n              (deposit)=\"onOffer($event)\"\n              (requestViewing)=\"onRequestViewing($event)\"\n            >\n              @if (user) {\n                <rolatech-property-action-contact [email]=\"user.email\" [phone]=\"user.phone\"></rolatech-property-action-contact>\n              }\n            </rolatech-property-actions>\n          </div>\n        </div>\n      }\n    }\n  </div>\n</rolatech-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: PropertyInfoComponent, selector: "rolatech-property-info", inputs: ["property", "inWishList"], outputs: ["wish"] }, { kind: "component", type: PropertyMediaComponent, selector: "rolatech-property-media", inputs: ["media", "min"] }, { kind: "component", type: PropertyPricingComponent, selector: "rolatech-property-pricing", inputs: ["property", "price"] }, { kind: "component", type: PropertySectionComponent, selector: "rolatech-property-section", inputs: ["section", "user", "username"] }, { kind: "component", type: PropertyActionsComponent, selector: "rolatech-property-actions", inputs: ["property"], outputs: ["requestViewing", "offer", "deposit"] }, { kind: "component", type: CommentsComponent, selector: "rolatech-comments", inputs: ["itemId"] }, { kind: "component", type: PropertyAgentRenderer, selector: "rolatech-property-agent-renderer", inputs: ["name", "avatar", "username", "subtitle"] }, { kind: "component", type: PropertyLocationComponent, selector: "rolatech-property-location", inputs: ["location"] }, { kind: "component", type: PropertyFeaturesComponent, selector: "rolatech-property-features", inputs: ["features"] }, { kind: "component", type: PropertyVideoComponent, selector: "rolatech-property-video", inputs: ["video"] }, { kind: "component", type: PropertyActionContactComponent, selector: "rolatech-property-action-contact", inputs: ["email", "phone"], outputs: ["callAgent", "emailAgent"] }, { kind: "component", type: PropertyHighlights, selector: "rolatech-property-highlights", inputs: ["highlights"] }, { kind: "component", type: PropertyEpc, selector: "rolatech-property-epc", inputs: ["epc"] }, { kind: "component", type: PropertyFloorplan, selector: "rolatech-property-floorplan", inputs: ["floorplans"] }, { kind: "component", type: PropertyMediaSkeleton, selector: "rolatech-property-media-skeleton" }, { kind: "component", type: PropertyInfoSkeleton, selector: "rolatech-property-info-skeleton" }, { kind: "component", type: PropertyAgentSkeleton, selector: "rolatech-property-agent-skeleton" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyDetailsComponent, decorators: [{
             type: Component,
@@ -2182,7 +2182,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                         PropertyMediaSkeleton,
                         PropertyInfoSkeleton,
                         PropertyAgentSkeleton,
-                    ], template: "<rolatech-container>\n  <div class=\"flex flex-col w-full\">\n    @if (loading()) {\n      <rolatech-property-media-skeleton></rolatech-property-media-skeleton>\n\n      <div class=\"flex flex-col md:flex-row gap-3 w-full\">\n        <rolatech-property-info-skeleton class=\"w-full md:w-2/3\"></rolatech-property-info-skeleton>\n        <rolatech-property-agent-skeleton class=\"w-full md:w-1/3\"></rolatech-property-agent-skeleton>\n      </div>\n    } @else {\n      @if (property(); as property) {\n        <rolatech-property-media [media]=\"property.media ? property.media : []\"></rolatech-property-media>\n        <div class=\"flex flex-col md:flex-row gap-3 w-full\">\n          <div class=\"w-full md:w-2/3\">\n            <rolatech-property-info [property]=\"property\" (wish)=\"onWish($event)\" [inWishList]=\"inWishList\">\n            </rolatech-property-info>\n            <!-- <rolatech-property-agent-renderer\n            [name]=\"fullname\"\n            [avatar]=\"user?.avatar\"\n            [username]=\"username\"\n          ></rolatech-property-agent-renderer> -->\n            @if (features.length > 0) {\n              <rolatech-property-features [features]=\"features\"></rolatech-property-features>\n            }\n            @if (highlights.length > 0) {\n              <rolatech-property-highlights [highlights]=\"highlights\"></rolatech-property-highlights>\n            }\n            @if (floorplans.length > 0) {\n              <rolatech-property-floorplan [floorplans]=\"floorplans\"></rolatech-property-floorplan>\n            }\n            @if (property.location) {\n              <rolatech-property-location [location]=\"property.location\"></rolatech-property-location>\n            }\n            <div>{{ videos().length }}</div>\n            @if (videos() && videos().length > 0) {\n              @for (item of videos(); track $index) {\n                <rolatech-property-video [video]=\"item\"></rolatech-property-video>\n              }\n            }\n            @if (epc && epc.currentScore) {\n              <rolatech-property-epc [epc]=\"epc\"></rolatech-property-epc>\n            }\n            <div class=\"flex flex-col\">\n              <div class=\"text-2xl font-bold pt-3\" i18n>Sections</div>\n              @for (section of property.sections; track $index) {\n                <rolatech-property-section [section]=\"section\"></rolatech-property-section>\n              }\n              <rolatech-comments [itemId]=\"property.id\"></rolatech-comments>\n            </div>\n          </div>\n          <div class=\"w-full md:w-1/3\">\n            <rolatech-property-agent-renderer\n              [name]=\"fullname\"\n              [avatar]=\"user?.avatar\"\n              [username]=\"username\"\n            ></rolatech-property-agent-renderer>\n            <rolatech-property-pricing (wish)=\"onWish($event)\" [property]=\"property\"></rolatech-property-pricing>\n            <rolatech-property-actions\n              [property]=\"property\"\n              (offer)=\"onOffer($event)\"\n              (deposit)=\"onOffer($event)\"\n              (requestViewing)=\"onRequestViewing($event)\"\n            >\n              @if (user) {\n                <rolatech-property-action-contact [email]=\"user.email\" [phone]=\"user.phone\"></rolatech-property-action-contact>\n              }\n            </rolatech-property-actions>\n          </div>\n        </div>\n      }\n    }\n  </div>\n</rolatech-container>\n" }]
+                    ], template: "<rolatech-container>\n  <div class=\"flex flex-col w-full\">\n    @if (loading()) {\n      <rolatech-property-media-skeleton></rolatech-property-media-skeleton>\n\n      <div class=\"flex flex-col md:flex-row gap-3 w-full\">\n        <rolatech-property-info-skeleton class=\"w-full md:w-2/3\"></rolatech-property-info-skeleton>\n        <rolatech-property-agent-skeleton class=\"w-full md:w-1/3\"></rolatech-property-agent-skeleton>\n      </div>\n    } @else {\n      @if (property(); as property) {\n        <rolatech-property-media [media]=\"property.media ? property.media : []\"></rolatech-property-media>\n        <div class=\"flex flex-col md:flex-row gap-3 w-full\">\n          <div class=\"w-full md:w-2/3\">\n            <rolatech-property-info [property]=\"property\" (wish)=\"onWish($event)\" [inWishList]=\"inWishList\">\n            </rolatech-property-info>\n            <!-- <rolatech-property-agent-renderer\n            [name]=\"fullname\"\n            [avatar]=\"user?.avatar\"\n            [username]=\"username\"\n          ></rolatech-property-agent-renderer> -->\n            @if (features.length > 0) {\n              <rolatech-property-features [features]=\"features\"></rolatech-property-features>\n            }\n            @if (highlights.length > 0) {\n              <rolatech-property-highlights [highlights]=\"highlights\"></rolatech-property-highlights>\n            }\n            @if (floorplans.length > 0) {\n              <rolatech-property-floorplan [floorplans]=\"floorplans\"></rolatech-property-floorplan>\n            }\n            @if (property.location) {\n              <rolatech-property-location [location]=\"property.location\"></rolatech-property-location>\n            }\n            @if (videos() && videos().length > 0) {\n              @for (item of videos(); track $index) {\n                <rolatech-property-video [video]=\"item\"></rolatech-property-video>\n              }\n            }\n            @if (epc && epc.currentScore) {\n              <rolatech-property-epc [epc]=\"epc\"></rolatech-property-epc>\n            }\n            <div class=\"flex flex-col\">\n              <div class=\"text-2xl font-bold pt-3\" i18n>Sections</div>\n              @for (section of property.sections; track $index) {\n                <rolatech-property-section [section]=\"section\"></rolatech-property-section>\n              }\n              <rolatech-comments [itemId]=\"property.id\"></rolatech-comments>\n            </div>\n          </div>\n          <div class=\"w-full md:w-1/3\">\n            <rolatech-property-agent-renderer\n              [name]=\"fullname\"\n              [avatar]=\"user?.avatar\"\n              [username]=\"username\"\n            ></rolatech-property-agent-renderer>\n            <rolatech-property-pricing (wish)=\"onWish($event)\" [property]=\"property\"></rolatech-property-pricing>\n            <rolatech-property-actions\n              [property]=\"property\"\n              (offer)=\"onOffer($event)\"\n              (deposit)=\"onOffer($event)\"\n              (requestViewing)=\"onRequestViewing($event)\"\n            >\n              @if (user) {\n                <rolatech-property-action-contact [email]=\"user.email\" [phone]=\"user.phone\"></rolatech-property-action-contact>\n              }\n            </rolatech-property-actions>\n          </div>\n        </div>\n      }\n    }\n  </div>\n</rolatech-container>\n" }]
         }], ctorParameters: () => [] });
 
 const MY_FORMATS$5 = {
@@ -2605,20 +2605,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                     ], 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  @if (loading) {\n    <div class=\"divide-y divide-[--rt-10-percent-layer] flex flex-col\">\n      @for (row of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]; track row) {\n        <rolatech-offer-item-skeleton></rolatech-offer-item-skeleton>\n      }\n    </div>\n  } @else {\n    <rolatech-list>\n      @if (offers() && offers().length > 0) {\n        @for (item of offers(); track item) {\n          <rolatech-property-offer-item [routerLink]=\"['./', item.id]\" [offer]=\"item\"></rolatech-property-offer-item>\n        }\n      } @else {\n        <rolatech-empty></rolatech-empty>\n      }\n    </rolatech-list>\n  }\n  <mat-paginator\n    #paginator\n    [length]=\"length\"\n    [pageSize]=\"pageSize\"\n    [pageIndex]=\"pageIndex()\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"onPage($event)\"\n    hidePageSize\n    showFirstLastButtons\n  >\n  </mat-paginator>\n</rolatech-container>\n" }]
         }] });
 
-class PropertyViewingItemComponent {
+class PropertyViewingItemComponent extends Loading {
     viewing = input.required(...(ngDevMode ? [{ debugName: "viewing" }] : []));
     status = PropertyViewingStatus;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyViewingItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: PropertyViewingItemComponent, isStandalone: true, selector: "rolatech-property-viewing-item", inputs: { viewing: { classPropertyName: "viewing", publicName: "viewing", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col hover:bg-[--rt-raised-background] cursor-pointer p-3\">\n  <div>\n    <div class=\"flex justify-between w-full mb-2\">\n      <a class=\"flex items-center gap-3\">\n        <span>Viewing ID: {{ viewing().id }}</span>\n      </a>\n      <span class=\"font-medium text-sm\">{{ status[viewing().status] }}</span>\n    </div>\n    @if (viewing().item) {\n      <div class=\"flex flex-col overflow-x-scroll scrollbar-hide\">\n        <div class=\"flex flex-row py-2\">\n          @if (viewing().item.media) {\n            <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n              @defer {\n                <rolatech-thumbnail [src]=\"viewing().item.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n              } @placeholder {\n                <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n              }\n            </div>\n          } @else {\n            <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n              <rolatech-image-placeholder></rolatech-image-placeholder>\n            </div>\n          }\n          <div class=\"flex w-full justify-between\">\n            <div class=\"flex justify-between w-full\">\n              <div class=\"flex flex-col\">\n                <div>{{ viewing().item.title }}</div>\n                <div class=\"inline-flex gap-1 mt-2\">\n                  <div>\n                    <span class=\"mr-1\">{{ viewing().item.bedrooms }}</span>\n                    <span i18n>Bedrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ viewing().item.bathrooms }}</span>\n                    <span i18n>Bathrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ viewing().item.receptions }}</span>\n                    <span i18n>Receptions</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"text-right\">\n                <div class=\"text-sm\">{{ viewing().item.price | price }}</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: ImagePlaceholderComponent, selector: "rolatech-image-placeholder", inputs: ["ratio"] }, { kind: "pipe", type: PricePipe, name: "price" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyViewingItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: PropertyViewingItemComponent, isStandalone: true, selector: "rolatech-property-viewing-item", inputs: { viewing: { classPropertyName: "viewing", publicName: "viewing", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (loading()) {\n  <div class=\"flex flex-col p-3\">\n    <div class=\"flex justify-between w-full mb-2\">\n      <rolatech-skeleton class=\"w-52 h-5\"></rolatech-skeleton>\n      <rolatech-skeleton class=\"w-11 h-5\"></rolatech-skeleton>\n    </div>\n    <div class=\"flex flex-row py-2\">\n      <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n        <rolatech-skeleton class=\"w-full h-full\"></rolatech-skeleton>\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            <rolatech-skeleton class=\"w-40 h-4\"></rolatech-skeleton>\n            <div class=\"inline-flex gap-1 mt-2\">\n              <rolatech-skeleton class=\"w-20 h-4\"></rolatech-skeleton>\n            </div>\n          </div>\n          <div class=\"text-right\">\n            <rolatech-skeleton class=\"w-8 h-4\"></rolatech-skeleton>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n} @else {\n  <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=\"text-sm text-[--rt-brand-color] font-bold\">{{ status[viewing().status] }}</span>\n      </div>\n      @if (viewing().item) {\n        <div class=\"flex flex-col overflow-x-scroll scrollbar-hide\">\n          <div class=\"flex flex-row py-2\">\n            @if (viewing().item.media) {\n              <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n                @defer {\n                  <rolatech-thumbnail [src]=\"viewing().item.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n                } @placeholder {\n                  <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n                }\n              </div>\n            } @else {\n              <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n                <rolatech-image-placeholder></rolatech-image-placeholder>\n              </div>\n            }\n            <div class=\"flex w-full justify-between\">\n              <div class=\"flex justify-between w-full\">\n                <div class=\"flex flex-col\">\n                  <div class=\"font-bold\">{{ viewing().item.title }}</div>\n                  <div class=\"inline-flex gap-1 mt-2\">\n                    <div>\n                      <span class=\"mr-1\">{{ viewing().item.bedrooms }}</span>\n                      <span i18n>Bedrooms</span>\n                    </div>\n                    <div>\n                      <span class=\"mr-1\">{{ viewing().item.bathrooms }}</span>\n                      <span i18n>Bathrooms</span>\n                    </div>\n                    <div>\n                      <span class=\"mr-1\">{{ viewing().item.receptions }}</span>\n                      <span i18n>Receptions</span>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"text-right\">\n                  <div class=\"text-sm\">{{ viewing().item.price | price }}</div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: ImagePlaceholderComponent, selector: "rolatech-image-placeholder", inputs: ["ratio"] }, { kind: "component", type: Skeleton, selector: "rolatech-skeleton" }, { kind: "pipe", type: PricePipe, name: "price" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyViewingItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-property-viewing-item', imports: [MatIconModule, ThumbnailComponent, ImagePlaceholderComponent, PricePipe], template: "<div class=\"flex flex-col hover:bg-[--rt-raised-background] cursor-pointer p-3\">\n  <div>\n    <div class=\"flex justify-between w-full mb-2\">\n      <a class=\"flex items-center gap-3\">\n        <span>Viewing ID: {{ viewing().id }}</span>\n      </a>\n      <span class=\"font-medium text-sm\">{{ status[viewing().status] }}</span>\n    </div>\n    @if (viewing().item) {\n      <div class=\"flex flex-col overflow-x-scroll scrollbar-hide\">\n        <div class=\"flex flex-row py-2\">\n          @if (viewing().item.media) {\n            <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n              @defer {\n                <rolatech-thumbnail [src]=\"viewing().item.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n              } @placeholder {\n                <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n              }\n            </div>\n          } @else {\n            <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n              <rolatech-image-placeholder></rolatech-image-placeholder>\n            </div>\n          }\n          <div class=\"flex w-full justify-between\">\n            <div class=\"flex justify-between w-full\">\n              <div class=\"flex flex-col\">\n                <div>{{ viewing().item.title }}</div>\n                <div class=\"inline-flex gap-1 mt-2\">\n                  <div>\n                    <span class=\"mr-1\">{{ viewing().item.bedrooms }}</span>\n                    <span i18n>Bedrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ viewing().item.bathrooms }}</span>\n                    <span i18n>Bathrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ viewing().item.receptions }}</span>\n                    <span i18n>Receptions</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"text-right\">\n                <div class=\"text-sm\">{{ viewing().item.price | price }}</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n" }]
+            args: [{ selector: 'rolatech-property-viewing-item', imports: [MatIconModule, ThumbnailComponent, ImagePlaceholderComponent, Skeleton, PricePipe], template: "@if (loading()) {\n  <div class=\"flex flex-col p-3\">\n    <div class=\"flex justify-between w-full mb-2\">\n      <rolatech-skeleton class=\"w-52 h-5\"></rolatech-skeleton>\n      <rolatech-skeleton class=\"w-11 h-5\"></rolatech-skeleton>\n    </div>\n    <div class=\"flex flex-row py-2\">\n      <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n        <rolatech-skeleton class=\"w-full h-full\"></rolatech-skeleton>\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            <rolatech-skeleton class=\"w-40 h-4\"></rolatech-skeleton>\n            <div class=\"inline-flex gap-1 mt-2\">\n              <rolatech-skeleton class=\"w-20 h-4\"></rolatech-skeleton>\n            </div>\n          </div>\n          <div class=\"text-right\">\n            <rolatech-skeleton class=\"w-8 h-4\"></rolatech-skeleton>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n} @else {\n  <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=\"text-sm text-[--rt-brand-color] font-bold\">{{ status[viewing().status] }}</span>\n      </div>\n      @if (viewing().item) {\n        <div class=\"flex flex-col overflow-x-scroll scrollbar-hide\">\n          <div class=\"flex flex-row py-2\">\n            @if (viewing().item.media) {\n              <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n                @defer {\n                  <rolatech-thumbnail [src]=\"viewing().item.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n                } @placeholder {\n                  <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n                }\n              </div>\n            } @else {\n              <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n                <rolatech-image-placeholder></rolatech-image-placeholder>\n              </div>\n            }\n            <div class=\"flex w-full justify-between\">\n              <div class=\"flex justify-between w-full\">\n                <div class=\"flex flex-col\">\n                  <div class=\"font-bold\">{{ viewing().item.title }}</div>\n                  <div class=\"inline-flex gap-1 mt-2\">\n                    <div>\n                      <span class=\"mr-1\">{{ viewing().item.bedrooms }}</span>\n                      <span i18n>Bedrooms</span>\n                    </div>\n                    <div>\n                      <span class=\"mr-1\">{{ viewing().item.bathrooms }}</span>\n                      <span i18n>Bathrooms</span>\n                    </div>\n                    <div>\n                      <span class=\"mr-1\">{{ viewing().item.receptions }}</span>\n                      <span i18n>Receptions</span>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"text-right\">\n                  <div class=\"text-sm\">{{ viewing().item.price | price }}</div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n}\n" }]
         }], propDecorators: { viewing: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewing", required: true }] }] } });
 
 class PropertyViewingIndexComponent extends BaseComponent {
     propertyService = inject(PropertyService);
-    viewings;
     viewerCategory = PropertyViewerCategory;
     tenantCategory = PropertyApplicantType;
     viewingStatus = PropertyViewingStatus;
@@ -2645,53 +2644,66 @@ class PropertyViewingIndexComponent extends BaseComponent {
             status: 'cancelled',
         },
     ];
+    loading = false;
+    viewings = signal([], ...(ngDevMode ? [{ debugName: "viewings" }] : []));
+    meta;
+    pageEvent;
+    length = 100;
+    pageSize = 15;
+    pageSizeOptions = [5, 10, 25, 100];
+    pageIndex = signal(0, ...(ngDevMode ? [{ debugName: "pageIndex" }] : []));
     ngOnInit() {
-        this.route.queryParams.subscribe(({ status }) => {
-            this.select = this.links.findIndex((item) => item.status === status);
+        const sub = this.route.queryParamMap
+            .pipe(map((p) => {
+            const page = p.get('page') ? Number(p.get('page')) : 1;
+            this.pageIndex.set(Math.max(page - 1, 0));
+            const status = p.get('status') || undefined;
+            let filter = '';
             if (status) {
-                this.filterOptions.status = status.toUpperCase();
-            }
-            else {
-                delete this.filterOptions.status;
+                this.select = this.links.findIndex((item) => item.status === status);
+                filter = `status:${status?.toUpperCase()}`;
             }
-            this.findViewings();
-        });
-    }
-    findViewings() {
-        const options = {
-            sort: 'updatedAt desc',
-        };
-        const filterString = this.convertFilterOptions(this.filterOptions);
-        if (filterString) {
-            options['filter'] = filterString;
-        }
-        this.propertyService.findViewingsByUser(options).subscribe({
+            return {
+                page,
+                filter,
+                limit: p.get('limit') ? Number(p.get('limit')) : 15,
+                sort: p.get('sort') || undefined,
+            };
+        }), 
+        // Cheap deep compare via JSON to avoid spam calls when nothing changed
+        map((o) => JSON.stringify(o)), distinctUntilChanged(), map((s) => JSON.parse(s)), switchMap((params) => {
+            this.loading = true;
+            params['sort'] = 'updatedAt desc';
+            return this.propertyService.findViewingsByUser(params).pipe(finalize(() => (this.loading = false)));
+        }))
+            .subscribe({
             next: (res) => {
-                this.viewings = res.data;
+                this.viewings.set(res.data);
+                this.meta = res.meta;
+                this.length = res.meta.pagination.count;
+                this.loading = false;
+            },
+            error: () => {
+                this.viewings.set([]);
+                this.length = 0;
+                this.loading = false;
             },
         });
-    }
-    findProperties(ids) { }
-    resetFilter() {
-        this.filterOptions = {
-            type: '',
-        };
-        this.filter = false;
-        this.findViewings();
+        // // auto-unsubscribe on destroy
+        this.destroyRef.onDestroy(() => sub.unsubscribe());
     }
     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(',');
+    onPage(e) {
+        this.router.navigate([], {
+            queryParams: { page: e.pageIndex + 1, limit: e.pageSize },
+            queryParamsHandling: 'merge',
+            replaceUrl: true, // optional: avoid stacking history on every page click
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyViewingIndexComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: PropertyViewingIndexComponent, isStandalone: true, selector: "rolatech-property-viewing-index", usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  <rolatech-toolbar title=\"Viewings\" large> </rolatech-toolbar>\n  <rolatech-tabs [select]=\"select\">\n    @for (item of links; track item) {\n      @if (item.status) {\n        <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n      } @else {\n        <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n      }\n    }\n  </rolatech-tabs>\n  <rolatech-list>\n    @if (viewings) {\n      @for (item of viewings; track item) {\n        <rolatech-property-viewing-item [routerLink]=\"['./', item.id]\" [viewing]=\"item\"></rolatech-property-viewing-item>\n      }\n    } @else {\n      <rolatech-empty></rolatech-empty>\n    }\n  </rolatech-list>\n</rolatech-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: TabsComponent, selector: "rolatech-tabs", inputs: ["select", "loading"], outputs: ["selectChange"] }, { kind: "component", type: TabComponent, selector: "rolatech-tab", inputs: ["label"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: ListComponent, selector: "rolatech-list" }, { kind: "component", type: EmptyComponent, selector: "rolatech-empty" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: PropertyViewingItemComponent, selector: "rolatech-property-viewing-item", inputs: ["viewing"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: PropertyViewingIndexComponent, isStandalone: true, selector: "rolatech-property-viewing-index", usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  <rolatech-toolbar title=\"Viewings\" large> </rolatech-toolbar>\n  <rolatech-tabs [select]=\"select\">\n    @for (item of links; track item) {\n      @if (item.status) {\n        <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n      } @else {\n        <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n      }\n    }\n  </rolatech-tabs>\n  <rolatech-list>\n    @if (viewings(); as viewings) {\n      @for (item of viewings; track item) {\n        <rolatech-property-viewing-item\n          [loading]=\"loading\"\n          [routerLink]=\"['./', item.id]\"\n          [viewing]=\"item\"\n        ></rolatech-property-viewing-item>\n      }\n    } @else {\n      <rolatech-empty></rolatech-empty>\n    }\n  </rolatech-list>\n  <mat-paginator\n    #paginator\n    [length]=\"length\"\n    [pageSize]=\"pageSize\"\n    [pageIndex]=\"pageIndex()\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"onPage($event)\"\n    hidePageSize\n    showFirstLastButtons\n  >\n  </mat-paginator>\n</rolatech-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: TabsComponent, selector: "rolatech-tabs", inputs: ["select", "loading"], outputs: ["selectChange"] }, { kind: "component", type: TabComponent, selector: "rolatech-tab", inputs: ["label"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: ListComponent, selector: "rolatech-list" }, { kind: "component", type: EmptyComponent, selector: "rolatech-empty" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: PropertyViewingItemComponent, selector: "rolatech-property-viewing-item", inputs: ["viewing"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyViewingIndexComponent, decorators: [{
             type: Component,
@@ -2714,7 +2726,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                         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" }]
+                        MatPaginatorModule,
+                    ], template: "<rolatech-container>\n  <rolatech-toolbar title=\"Viewings\" large> </rolatech-toolbar>\n  <rolatech-tabs [select]=\"select\">\n    @for (item of links; track item) {\n      @if (item.status) {\n        <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n      } @else {\n        <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n      }\n    }\n  </rolatech-tabs>\n  <rolatech-list>\n    @if (viewings(); as viewings) {\n      @for (item of viewings; track item) {\n        <rolatech-property-viewing-item\n          [loading]=\"loading\"\n          [routerLink]=\"['./', item.id]\"\n          [viewing]=\"item\"\n        ></rolatech-property-viewing-item>\n      }\n    } @else {\n      <rolatech-empty></rolatech-empty>\n    }\n  </rolatech-list>\n  <mat-paginator\n    #paginator\n    [length]=\"length\"\n    [pageSize]=\"pageSize\"\n    [pageIndex]=\"pageIndex()\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"onPage($event)\"\n    hidePageSize\n    showFirstLastButtons\n  >\n  </mat-paginator>\n</rolatech-container>\n" }]
         }] });
 
 class DuePipe {
@@ -2911,7 +2924,6 @@ class PropertyViewingDetailComponent extends BaseComponent {
     loadingTimeline = false;
     status = PropertyViewingStatus;
     env = inject(APP_CONFIG);
-    property;
     async ngOnInit() {
         this.route.params.subscribe((params) => {
             const id = params['id'];
@@ -2922,19 +2934,10 @@ class PropertyViewingDetailComponent extends BaseComponent {
         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) => {
@@ -2954,7 +2957,7 @@ class PropertyViewingDetailComponent extends BaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyViewingDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: PropertyViewingDetailComponent, isStandalone: true, selector: "rolatech-property-viewing-detail", usesInheritance: true, ngImport: i0, template: "@if (viewing) {\n  <rolatech-container>\n    <rolatech-toolbar [title]=\"status[viewing.status]\" large link=\"../\"> </rolatech-toolbar>\n    <div>\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Property details</div>\n        <hr class=\"mb-2\" />\n        @if (property) {\n          <div\n            class=\"flex items-center py-2 cursor-pointer hover:bg-[--rt-raised-background]\"\n            [routerLink]=\"['../../', property.id]\"\n          >\n            <div class=\"min-w-24 w-24 object-cover aspect-video rounded-md mr-3\">\n              @defer {\n                <rolatech-thumbnail [src]=\"property.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n              } @placeholder {\n                <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n              }\n            </div>\n            <div class=\"flex w-full justify-between\">\n              <div class=\"flex justify-between w-full\">\n                <div class=\"flex flex-col\">\n                  <div>{{ property.title }}</div>\n                  <div class=\"inline-flex gap-1 mt-2\">\n                    <div>\n                      <span class=\"mr-1\">{{ property.bedrooms }}</span>\n                      <span i18n>Bedrooms</span>\n                    </div>\n                    <div>\n                      <span class=\"mr-1\">{{ property.bathrooms }}</span>\n                      <span i18n>Bathrooms</span>\n                    </div>\n                    <div>\n                      <span class=\"mr-1\">{{ property.receptions }}</span>\n                      <span i18n>Receptions</span>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"text-right\">\n                  <div class=\"text-sm\">{{ property.price | price }}</div>\n                </div>\n              </div>\n            </div>\n            <div class=\"hidden md:flex flex-col px-3\"></div>\n          </div>\n        }\n      </div>\n\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Proposed times</div>\n        <hr class=\"mb-2\" />\n        @for (item of viewing.proposedSlots; track $index) {\n          <div class=\"flex flex-row items-center gap-3 py-3\">\n            <rolatech-rich-label label=\"Date\" [title]=\"item.date\"></rolatech-rich-label>\n            <rolatech-rich-label label=\"Time\" [title]=\"item.time\"></rolatech-rich-label>\n            @if (viewing.viewingDate && viewing.viewingTime) {\n              @if (item.date === viewing.viewingDate && item.time === viewing.viewingTime) {\n                <div class=\"ml-3\"><button mat-flat-button i18n disabled=\"\">Confirmed</button></div>\n              }\n            }\n          </div>\n        }\n      </div>\n      <!-- safe area -->\n      <div class=\"pb-16 sm:pb-3\"></div>\n      <div class=\"\">\n        <div class=\"flex items-center justify-end\">\n          @if (viewing.status.toString() !== 'CANCELLED') {\n            <button mat-flat-button class=\"min-h-11\" (click)=\"cancel()\" i18n>Cancel</button>\n          }\n        </div>\n      </div>\n    </div>\n  </rolatech-container>\n}\n@if (info) {\n  <div\n    [ngClass]=\"loadingTimeline ? 'translate-x-full' : 'translate-none'\"\n    class=\"fixed top-0 right-0 z-[1001] h-screen p-4 overflow-y-auto transition-transform bg-[--rt-raised-background] w-80 sm:w-[300px] shadow-xl\"\n  >\n    <div class=\"flex justify-between items-center sm:p-4\">\n      <div class=\"text-xl font-bold\" i18n>Status</div>\n      <button mat-icon-button (click)=\"info = !info\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n  </div>\n}\n\n<div\n  (click)=\"info = !info\"\n  [ngClass]=\"info ? 'visible' : 'invisible'\"\n  class=\"bg-[--rt-10-percent-layer] fixed inset-0 z-[1000]\"\n></div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: RichLabelComponent, selector: "rolatech-rich-label", inputs: ["label", "title"] }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: PricePipe, name: "price" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: PropertyViewingDetailComponent, isStandalone: true, selector: "rolatech-property-viewing-detail", usesInheritance: true, ngImport: i0, template: "@if (viewing) {\n  <rolatech-container>\n    <rolatech-toolbar [title]=\"status[viewing.status]\" large link=\"../\"> </rolatech-toolbar>\n    <div>\n      @if (viewing.item) {\n        <div>\n          <div class=\"text-lg font-bold py-2\" i18n>Property details</div>\n          <hr class=\"mb-2\" />\n          <div\n            class=\"flex items-center py-2 cursor-pointer hover:bg-[--rt-raised-background]\"\n            [routerLink]=\"['../../', viewing.item.propertyId]\"\n          >\n            <div class=\"min-w-24 w-24 object-cover aspect-video rounded-md mr-3\">\n              @defer {\n                <rolatech-thumbnail [src]=\"viewing.item.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n              } @placeholder {\n                <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n              }\n            </div>\n            <div class=\"flex w-full justify-between\">\n              <div class=\"flex justify-between w-full\">\n                <div class=\"flex flex-col\">\n                  <div>{{ viewing.item.title }}</div>\n                  <div class=\"inline-flex gap-1 mt-2\">\n                    <div>\n                      <span class=\"mr-1\">{{ viewing.item.bedrooms }}</span>\n                      <span i18n>Bedrooms</span>\n                    </div>\n                    <div>\n                      <span class=\"mr-1\">{{ viewing.item.bathrooms }}</span>\n                      <span i18n>Bathrooms</span>\n                    </div>\n                    <div>\n                      <span class=\"mr-1\">{{ viewing.item.receptions }}</span>\n                      <span i18n>Receptions</span>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"text-right\">\n                  <div class=\"text-sm\">{{ viewing.item.price | price }}</div>\n                </div>\n              </div>\n            </div>\n            <div class=\"hidden md:flex flex-col px-3\"></div>\n          </div>\n        </div>\n      }\n\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Proposed times</div>\n        <hr class=\"mb-2\" />\n        @for (item of viewing.proposedSlots; track $index) {\n          <div class=\"flex flex-row items-center gap-3 py-3\">\n            <rolatech-rich-label label=\"Date\" [title]=\"item.date\"></rolatech-rich-label>\n            <rolatech-rich-label label=\"Time\" [title]=\"item.time\"></rolatech-rich-label>\n            @if (viewing.viewingDate && viewing.viewingTime) {\n              @if (item.date === viewing.viewingDate && item.time === viewing.viewingTime) {\n                <div class=\"ml-3\"><button mat-flat-button i18n disabled=\"\">Confirmed</button></div>\n              }\n            }\n          </div>\n        }\n      </div>\n      <!-- safe area -->\n      <div class=\"pb-16 sm:pb-3\"></div>\n      <div class=\"\">\n        <div class=\"flex items-center justify-end\">\n          @if (viewing.status.toString() !== 'CANCELLED') {\n            <button mat-flat-button class=\"min-h-11\" (click)=\"cancel()\" i18n>Cancel</button>\n          }\n        </div>\n      </div>\n    </div>\n  </rolatech-container>\n}\n@if (info) {\n  <div\n    [ngClass]=\"loadingTimeline ? 'translate-x-full' : 'translate-none'\"\n    class=\"fixed top-0 right-0 z-[1001] h-screen p-4 overflow-y-auto transition-transform bg-[--rt-raised-background] w-80 sm:w-[300px] shadow-xl\"\n  >\n    <div class=\"flex justify-between items-center sm:p-4\">\n      <div class=\"text-xl font-bold\" i18n>Status</div>\n      <button mat-icon-button (click)=\"info = !info\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n  </div>\n}\n\n<div\n  (click)=\"info = !info\"\n  [ngClass]=\"info ? 'visible' : 'invisible'\"\n  class=\"bg-[--rt-10-percent-layer] fixed inset-0 z-[1000]\"\n></div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: RichLabelComponent, selector: "rolatech-rich-label", inputs: ["label", "title"] }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: PricePipe, name: "price" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyViewingDetailComponent, decorators: [{
             type: Component,
@@ -2968,7 +2971,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                         ToolbarComponent,
                         RouterLink,
                         PricePipe,
-                    ], template: "@if (viewing) {\n  <rolatech-container>\n    <rolatech-toolbar [title]=\"status[viewing.status]\" large link=\"../\"> </rolatech-toolbar>\n    <div>\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Property details</div>\n        <hr class=\"mb-2\" />\n        @if (property) {\n          <div\n            class=\"flex items-center py-2 cursor-pointer hover:bg-[--rt-raised-background]\"\n            [routerLink]=\"['../../', property.id]\"\n          >\n            <div class=\"min-w-24 w-24 object-cover aspect-video rounded-md mr-3\">\n              @defer {\n                <rolatech-thumbnail [src]=\"property.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n              } @placeholder {\n                <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n              }\n            </div>\n            <div class=\"flex w-full justify-between\">\n              <div class=\"flex justify-between w-full\">\n                <div class=\"flex flex-col\">\n                  <div>{{ property.title }}</div>\n                  <div class=\"inline-flex gap-1 mt-2\">\n                    <div>\n                      <span class=\"mr-1\">{{ property.bedrooms }}</span>\n                      <span i18n>Bedrooms</span>\n                    </div>\n                    <div>\n                      <span class=\"mr-1\">{{ property.bathrooms }}</span>\n                      <span i18n>Bathrooms</span>\n                    </div>\n                    <div>\n                      <span class=\"mr-1\">{{ property.receptions }}</span>\n                      <span i18n>Receptions</span>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"text-right\">\n                  <div class=\"text-sm\">{{ property.price | price }}</div>\n                </div>\n              </div>\n            </div>\n            <div class=\"hidden md:flex flex-col px-3\"></div>\n          </div>\n        }\n      </div>\n\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Proposed times</div>\n        <hr class=\"mb-2\" />\n        @for (item of viewing.proposedSlots; track $index) {\n          <div class=\"flex flex-row items-center gap-3 py-3\">\n            <rolatech-rich-label label=\"Date\" [title]=\"item.date\"></rolatech-rich-label>\n            <rolatech-rich-label label=\"Time\" [title]=\"item.time\"></rolatech-rich-label>\n            @if (viewing.viewingDate && viewing.viewingTime) {\n              @if (item.date === viewing.viewingDate && item.time === viewing.viewingTime) {\n                <div class=\"ml-3\"><button mat-flat-button i18n disabled=\"\">Confirmed</button></div>\n              }\n            }\n          </div>\n        }\n      </div>\n      <!-- safe area -->\n      <div class=\"pb-16 sm:pb-3\"></div>\n      <div class=\"\">\n        <div class=\"flex items-center justify-end\">\n          @if (viewing.status.toString() !== 'CANCELLED') {\n            <button mat-flat-button class=\"min-h-11\" (click)=\"cancel()\" i18n>Cancel</button>\n          }\n        </div>\n      </div>\n    </div>\n  </rolatech-container>\n}\n@if (info) {\n  <div\n    [ngClass]=\"loadingTimeline ? 'translate-x-full' : 'translate-none'\"\n    class=\"fixed top-0 right-0 z-[1001] h-screen p-4 overflow-y-auto transition-transform bg-[--rt-raised-background] w-80 sm:w-[300px] shadow-xl\"\n  >\n    <div class=\"flex justify-between items-center sm:p-4\">\n      <div class=\"text-xl font-bold\" i18n>Status</div>\n      <button mat-icon-button (click)=\"info = !info\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n  </div>\n}\n\n<div\n  (click)=\"info = !info\"\n  [ngClass]=\"info ? 'visible' : 'invisible'\"\n  class=\"bg-[--rt-10-percent-layer] fixed inset-0 z-[1000]\"\n></div>\n" }]
+                    ], template: "@if (viewing) {\n  <rolatech-container>\n    <rolatech-toolbar [title]=\"status[viewing.status]\" large link=\"../\"> </rolatech-toolbar>\n    <div>\n      @if (viewing.item) {\n        <div>\n          <div class=\"text-lg font-bold py-2\" i18n>Property details</div>\n          <hr class=\"mb-2\" />\n          <div\n            class=\"flex items-center py-2 cursor-pointer hover:bg-[--rt-raised-background]\"\n            [routerLink]=\"['../../', viewing.item.propertyId]\"\n          >\n            <div class=\"min-w-24 w-24 object-cover aspect-video rounded-md mr-3\">\n              @defer {\n                <rolatech-thumbnail [src]=\"viewing.item.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n              } @placeholder {\n                <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n              }\n            </div>\n            <div class=\"flex w-full justify-between\">\n              <div class=\"flex justify-between w-full\">\n                <div class=\"flex flex-col\">\n                  <div>{{ viewing.item.title }}</div>\n                  <div class=\"inline-flex gap-1 mt-2\">\n                    <div>\n                      <span class=\"mr-1\">{{ viewing.item.bedrooms }}</span>\n                      <span i18n>Bedrooms</span>\n                    </div>\n                    <div>\n                      <span class=\"mr-1\">{{ viewing.item.bathrooms }}</span>\n                      <span i18n>Bathrooms</span>\n                    </div>\n                    <div>\n                      <span class=\"mr-1\">{{ viewing.item.receptions }}</span>\n                      <span i18n>Receptions</span>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"text-right\">\n                  <div class=\"text-sm\">{{ viewing.item.price | price }}</div>\n                </div>\n              </div>\n            </div>\n            <div class=\"hidden md:flex flex-col px-3\"></div>\n          </div>\n        </div>\n      }\n\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Proposed times</div>\n        <hr class=\"mb-2\" />\n        @for (item of viewing.proposedSlots; track $index) {\n          <div class=\"flex flex-row items-center gap-3 py-3\">\n            <rolatech-rich-label label=\"Date\" [title]=\"item.date\"></rolatech-rich-label>\n            <rolatech-rich-label label=\"Time\" [title]=\"item.time\"></rolatech-rich-label>\n            @if (viewing.viewingDate && viewing.viewingTime) {\n              @if (item.date === viewing.viewingDate && item.time === viewing.viewingTime) {\n                <div class=\"ml-3\"><button mat-flat-button i18n disabled=\"\">Confirmed</button></div>\n              }\n            }\n          </div>\n        }\n      </div>\n      <!-- safe area -->\n      <div class=\"pb-16 sm:pb-3\"></div>\n      <div class=\"\">\n        <div class=\"flex items-center justify-end\">\n          @if (viewing.status.toString() !== 'CANCELLED') {\n            <button mat-flat-button class=\"min-h-11\" (click)=\"cancel()\" i18n>Cancel</button>\n          }\n        </div>\n      </div>\n    </div>\n  </rolatech-container>\n}\n@if (info) {\n  <div\n    [ngClass]=\"loadingTimeline ? 'translate-x-full' : 'translate-none'\"\n    class=\"fixed top-0 right-0 z-[1001] h-screen p-4 overflow-y-auto transition-transform bg-[--rt-raised-background] w-80 sm:w-[300px] shadow-xl\"\n  >\n    <div class=\"flex justify-between items-center sm:p-4\">\n      <div class=\"text-xl font-bold\" i18n>Status</div>\n      <button mat-icon-button (click)=\"info = !info\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n  </div>\n}\n\n<div\n  (click)=\"info = !info\"\n  [ngClass]=\"info ? 'visible' : 'invisible'\"\n  class=\"bg-[--rt-10-percent-layer] fixed inset-0 z-[1000]\"\n></div>\n" }]
         }] });
 
 class PropertyWishlistComponent extends BaseComponent {
@@ -3016,7 +3019,7 @@ const propertyRoutes = [
         children: [
             {
                 path: '',
-                loadComponent: () => import('./rolatech-angular-property-property-index.component-CsZrVAXq.mjs').then((x) => x.PropertyIndexComponent),
+                loadComponent: () => import('./rolatech-angular-property-property-index.component-DXr-Niq9.mjs').then((x) => x.PropertyIndexComponent),
             },
         ],
     },
@@ -4844,11 +4847,11 @@ class PropertyViewingConfirmationComponent {
         this.output.emit(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyViewingConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: PropertyViewingConfirmationComponent, isStandalone: true, selector: "rolatech-property-viewing-confirmation", inputs: { proposedTime: { classPropertyName: "proposedTime", publicName: "proposedTime", isSignal: true, isRequired: false, transformFunction: null }, selectedTime: { classPropertyName: "selectedTime", publicName: "selectedTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { output: "output", proposedTime: "proposedTimeChange", selectedTime: "selectedTimeChange" }, ngImport: i0, template: "<div>\n  @if (proposedTime()) {\n    <div>\n      <span> {{ proposedTime().date }} </span><span>{{ proposedTime().time }}</span>\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", 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 class=\"flex gap-2 text-sm text-gray-700\">\n      <span>{{ proposedTime().date | date: 'dd MMM yyyy' }}</span>\n      <span>{{ proposedTime().time }}</span>\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", 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" }]
+            args: [{ selector: 'rolatech-property-viewing-confirmation', imports: [CommonModule], template: "<div>\n  @if (proposedTime()) {\n    <div class=\"flex gap-2 text-sm text-gray-700\">\n      <span>{{ proposedTime().date | date: 'dd MMM yyyy' }}</span>\n      <span>{{ proposedTime().time }}</span>\n    </div>\n  }\n</div>\n" }]
         }], propDecorators: { output: [{ type: i0.Output, args: ["output"] }], proposedTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "proposedTime", required: false }] }, { type: i0.Output, args: ["proposedTimeChange"] }], selectedTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedTime", required: false }] }, { type: i0.Output, args: ["selectedTimeChange"] }] } });
 
 class PropertyManageViewingsDetailComponent extends BaseComponent {
@@ -4871,7 +4874,6 @@ class PropertyManageViewingsDetailComponent extends BaseComponent {
             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;
             },
         });
@@ -4920,17 +4922,17 @@ class PropertyManageViewingsDetailComponent extends BaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyManageViewingsDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: PropertyManageViewingsDetailComponent, isStandalone: true, selector: "rolatech-property-manage-viewings-detail", usesInheritance: true, ngImport: i0, template: "@if (viewing) {\n  <rolatech-toolbar [title]=\"status[viewing.status]\" large link=\"../\"></rolatech-toolbar>\n  <div class=\"px-4\">\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Viewer</div>\n      <hr class=\"mb-2\" />\n      <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n        <rolatech-rich-label label=\"Name\" [title]=\"name\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Email\" [title]=\"viewing.email\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Phone\" [title]=\"viewing.phone\"></rolatech-rich-label>\n      </div>\n    </div>\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Proposed times</div>\n      <hr class=\"mb-2\" />\n      @for (item of viewing.proposedSlots; track $index) {\n        <div class=\"flex flex-row items-center gap-3 py-3\">\n          <rolatech-rich-label label=\"Date\" [title]=\"item.date\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Time\" [title]=\"item.time\"></rolatech-rich-label>\n          @if (viewing.viewingDate && viewing.viewingTime) {\n            @if (item.date === viewing.viewingDate && item.time === viewing.viewingTime) {\n              <div class=\"ml-3\"><button mat-flat-button i18n disabled=\"\">Confirmed</button></div>\n            }\n          }\n          @if (!viewingTimeConfirmed) {\n            <div class=\"ml-3\"><button mat-flat-button (click)=\"confirmViewingTime(item)\" i18n>Confirm</button></div>\n          }\n        </div>\n      }\n    </div>\n    <!-- Introducing agent -->\n    @if (viewing.viewerCategory.toString() === 'AGENT') {\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Qualification</div>\n        <hr class=\"mb-2\" />\n        <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n          <!-- <rolatech-rich-label label=\"Move-in date\" [title]=\"viewing.startDate\"></rolatech-rich-label> -->\n          <rolatech-rich-label label=\"Tenancy duration\" [title]=\"viewing.tenancyDuration\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Number of tenants\" [title]=\"viewing.numberOfTenants\"></rolatech-rich-label>\n        </div>\n        <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n          <rolatech-rich-label\n            label=\"Employment status\"\n            [title]=\"employmentStatus[viewing.employmentStatus]\"\n          ></rolatech-rich-label>\n          <!-- <rolatech-rich-label label=\"Employer\" [title]=\"viewing.startDate\"></rolatech-rich-label> -->\n          <rolatech-rich-label label=\"Annual income\" [title]=\"viewing.income\"></rolatech-rich-label>\n        </div>\n      </div>\n    }\n\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Property details</div>\n      <hr class=\"mb-2\" />\n      @if (property) {\n        <div class=\"flex items-center py-2\">\n          <div class=\"min-w-24 w-24 object-cover aspect-video rounded-md mr-3\">\n            @defer {\n              <rolatech-thumbnail [src]=\"property.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n          <div class=\"flex w-full justify-between\">\n            <div class=\"flex justify-between w-full\">\n              <div class=\"flex flex-col\">\n                <div>{{ property.title }}</div>\n                <div class=\"inline-flex gap-1 mt-2\">\n                  <div>\n                    <span class=\"mr-1\">{{ property.bedrooms }}</span>\n                    <span i18n>Bedrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ property.bathrooms }}</span>\n                    <span i18n>Bathrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ property.receptions }}</span>\n                    <span i18n>Receptions</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"text-right\">\n                <div class=\"text-sm\">{{ property.price | price }}</div>\n              </div>\n            </div>\n          </div>\n          <div class=\"hidden md:flex flex-col px-3\"></div>\n        </div>\n      }\n    </div>\n\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Viewing agent</div>\n      <hr class=\"mb-2\" />\n      @if (agent) {\n        <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n          <rolatech-rich-label label=\"Name\" [title]=\"agent.name\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Email\" [title]=\"agent.email\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Phone\" [title]=\"agent.phone\"></rolatech-rich-label>\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: RichLabelComponent, selector: "rolatech-rich-label", inputs: ["label", "title"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: PricePipe, name: "price" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: PropertyManageViewingsDetailComponent, isStandalone: true, selector: "rolatech-property-manage-viewings-detail", usesInheritance: true, ngImport: i0, template: "@if (viewing) {\n  <rolatech-toolbar [title]=\"status[viewing.status]\" large link=\"../\"></rolatech-toolbar>\n  <div class=\"px-4\">\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Viewer</div>\n      <hr class=\"mb-2\" />\n      <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n        <rolatech-rich-label label=\"Name\" [title]=\"name\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Email\" [title]=\"viewing.email\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Phone\" [title]=\"viewing.phone\"></rolatech-rich-label>\n      </div>\n    </div>\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Proposed times</div>\n      <hr class=\"mb-2\" />\n      @for (item of viewing.proposedSlots; track $index) {\n        <div class=\"flex flex-row items-center gap-3 py-3\">\n          <rolatech-rich-label label=\"Date\" [title]=\"item.date\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Time\" [title]=\"item.time\"></rolatech-rich-label>\n          @if (viewing.viewingDate && viewing.viewingTime) {\n            @if (item.date === viewing.viewingDate && item.time === viewing.viewingTime) {\n              <div class=\"ml-3\"><button mat-flat-button i18n disabled=\"\">Confirmed</button></div>\n            }\n          }\n          @if (!viewingTimeConfirmed) {\n            <div class=\"ml-3\"><button mat-flat-button (click)=\"confirmViewingTime(item)\" i18n>Confirm</button></div>\n          }\n        </div>\n      }\n    </div>\n    <!-- Introducing agent -->\n    @if (viewing.viewerCategory.toString() === 'AGENT') {\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Qualification</div>\n        <hr class=\"mb-2\" />\n        <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n          <!-- <rolatech-rich-label label=\"Move-in date\" [title]=\"viewing.startDate\"></rolatech-rich-label> -->\n          <rolatech-rich-label label=\"Tenancy duration\" [title]=\"viewing.tenancyDuration\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Number of tenants\" [title]=\"viewing.numberOfTenants\"></rolatech-rich-label>\n        </div>\n        <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n          <rolatech-rich-label\n            label=\"Employment status\"\n            [title]=\"employmentStatus[viewing.employmentStatus]\"\n          ></rolatech-rich-label>\n          <!-- <rolatech-rich-label label=\"Employer\" [title]=\"viewing.startDate\"></rolatech-rich-label> -->\n          <rolatech-rich-label label=\"Annual income\" [title]=\"viewing.income\"></rolatech-rich-label>\n        </div>\n      </div>\n    }\n\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Property details</div>\n      <hr class=\"mb-2\" />\n      @if (viewing.item) {\n        <div class=\"flex items-center py-2\">\n          <div class=\"min-w-24 w-24 object-cover aspect-video rounded-md mr-3\">\n            @defer {\n              <rolatech-thumbnail [src]=\"viewing.item.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n          <div class=\"flex w-full justify-between\">\n            <div class=\"flex justify-between w-full\">\n              <div class=\"flex flex-col\">\n                <div class=\"font-bold\">{{ viewing.item.title }}</div>\n                <div class=\"inline-flex gap-1 mt-2\">\n                  <div>\n                    <span class=\"mr-1\">{{ viewing.item.bedrooms }}</span>\n                    <span i18n>Bedrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ viewing.item.bathrooms }}</span>\n                    <span i18n>Bathrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ viewing.item.receptions }}</span>\n                    <span i18n>Receptions</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"text-right\">\n                <div class=\"text-sm\">{{ viewing.item.price | price }}</div>\n              </div>\n            </div>\n          </div>\n          <div class=\"hidden md:flex flex-col px-3\"></div>\n        </div>\n      }\n    </div>\n\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Viewing agent</div>\n      <hr class=\"mb-2\" />\n      @if (agent) {\n        <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n          <rolatech-rich-label label=\"Name\" [title]=\"agent.name\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Email\" [title]=\"agent.email\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Phone\" [title]=\"agent.phone\"></rolatech-rich-label>\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: RichLabelComponent, selector: "rolatech-rich-label", inputs: ["label", "title"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: PricePipe, name: "price" }], deferBlockDependencies: [() => [ThumbnailComponent]] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyManageViewingsDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-property-manage-viewings-detail', imports: [CommonModule, ToolbarComponent, RichLabelComponent, ThumbnailComponent, MatButtonModule, PricePipe], template: "@if (viewing) {\n  <rolatech-toolbar [title]=\"status[viewing.status]\" large link=\"../\"></rolatech-toolbar>\n  <div class=\"px-4\">\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Viewer</div>\n      <hr class=\"mb-2\" />\n      <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n        <rolatech-rich-label label=\"Name\" [title]=\"name\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Email\" [title]=\"viewing.email\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Phone\" [title]=\"viewing.phone\"></rolatech-rich-label>\n      </div>\n    </div>\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Proposed times</div>\n      <hr class=\"mb-2\" />\n      @for (item of viewing.proposedSlots; track $index) {\n        <div class=\"flex flex-row items-center gap-3 py-3\">\n          <rolatech-rich-label label=\"Date\" [title]=\"item.date\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Time\" [title]=\"item.time\"></rolatech-rich-label>\n          @if (viewing.viewingDate && viewing.viewingTime) {\n            @if (item.date === viewing.viewingDate && item.time === viewing.viewingTime) {\n              <div class=\"ml-3\"><button mat-flat-button i18n disabled=\"\">Confirmed</button></div>\n            }\n          }\n          @if (!viewingTimeConfirmed) {\n            <div class=\"ml-3\"><button mat-flat-button (click)=\"confirmViewingTime(item)\" i18n>Confirm</button></div>\n          }\n        </div>\n      }\n    </div>\n    <!-- Introducing agent -->\n    @if (viewing.viewerCategory.toString() === 'AGENT') {\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Qualification</div>\n        <hr class=\"mb-2\" />\n        <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n          <!-- <rolatech-rich-label label=\"Move-in date\" [title]=\"viewing.startDate\"></rolatech-rich-label> -->\n          <rolatech-rich-label label=\"Tenancy duration\" [title]=\"viewing.tenancyDuration\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Number of tenants\" [title]=\"viewing.numberOfTenants\"></rolatech-rich-label>\n        </div>\n        <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n          <rolatech-rich-label\n            label=\"Employment status\"\n            [title]=\"employmentStatus[viewing.employmentStatus]\"\n          ></rolatech-rich-label>\n          <!-- <rolatech-rich-label label=\"Employer\" [title]=\"viewing.startDate\"></rolatech-rich-label> -->\n          <rolatech-rich-label label=\"Annual income\" [title]=\"viewing.income\"></rolatech-rich-label>\n        </div>\n      </div>\n    }\n\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Property details</div>\n      <hr class=\"mb-2\" />\n      @if (property) {\n        <div class=\"flex items-center py-2\">\n          <div class=\"min-w-24 w-24 object-cover aspect-video rounded-md mr-3\">\n            @defer {\n              <rolatech-thumbnail [src]=\"property.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n          <div class=\"flex w-full justify-between\">\n            <div class=\"flex justify-between w-full\">\n              <div class=\"flex flex-col\">\n                <div>{{ property.title }}</div>\n                <div class=\"inline-flex gap-1 mt-2\">\n                  <div>\n                    <span class=\"mr-1\">{{ property.bedrooms }}</span>\n                    <span i18n>Bedrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ property.bathrooms }}</span>\n                    <span i18n>Bathrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ property.receptions }}</span>\n                    <span i18n>Receptions</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"text-right\">\n                <div class=\"text-sm\">{{ property.price | price }}</div>\n              </div>\n            </div>\n          </div>\n          <div class=\"hidden md:flex flex-col px-3\"></div>\n        </div>\n      }\n    </div>\n\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Viewing agent</div>\n      <hr class=\"mb-2\" />\n      @if (agent) {\n        <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n          <rolatech-rich-label label=\"Name\" [title]=\"agent.name\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Email\" [title]=\"agent.email\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Phone\" [title]=\"agent.phone\"></rolatech-rich-label>\n        </div>\n      }\n    </div>\n  </div>\n}\n" }]
+            args: [{ selector: 'rolatech-property-manage-viewings-detail', imports: [CommonModule, ToolbarComponent, RichLabelComponent, ThumbnailComponent, MatButtonModule, PricePipe], template: "@if (viewing) {\n  <rolatech-toolbar [title]=\"status[viewing.status]\" large link=\"../\"></rolatech-toolbar>\n  <div class=\"px-4\">\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Viewer</div>\n      <hr class=\"mb-2\" />\n      <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n        <rolatech-rich-label label=\"Name\" [title]=\"name\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Email\" [title]=\"viewing.email\"></rolatech-rich-label>\n        <rolatech-rich-label label=\"Phone\" [title]=\"viewing.phone\"></rolatech-rich-label>\n      </div>\n    </div>\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Proposed times</div>\n      <hr class=\"mb-2\" />\n      @for (item of viewing.proposedSlots; track $index) {\n        <div class=\"flex flex-row items-center gap-3 py-3\">\n          <rolatech-rich-label label=\"Date\" [title]=\"item.date\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Time\" [title]=\"item.time\"></rolatech-rich-label>\n          @if (viewing.viewingDate && viewing.viewingTime) {\n            @if (item.date === viewing.viewingDate && item.time === viewing.viewingTime) {\n              <div class=\"ml-3\"><button mat-flat-button i18n disabled=\"\">Confirmed</button></div>\n            }\n          }\n          @if (!viewingTimeConfirmed) {\n            <div class=\"ml-3\"><button mat-flat-button (click)=\"confirmViewingTime(item)\" i18n>Confirm</button></div>\n          }\n        </div>\n      }\n    </div>\n    <!-- Introducing agent -->\n    @if (viewing.viewerCategory.toString() === 'AGENT') {\n      <div>\n        <div class=\"text-lg font-bold py-2\" i18n>Qualification</div>\n        <hr class=\"mb-2\" />\n        <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n          <!-- <rolatech-rich-label label=\"Move-in date\" [title]=\"viewing.startDate\"></rolatech-rich-label> -->\n          <rolatech-rich-label label=\"Tenancy duration\" [title]=\"viewing.tenancyDuration\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Number of tenants\" [title]=\"viewing.numberOfTenants\"></rolatech-rich-label>\n        </div>\n        <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n          <rolatech-rich-label\n            label=\"Employment status\"\n            [title]=\"employmentStatus[viewing.employmentStatus]\"\n          ></rolatech-rich-label>\n          <!-- <rolatech-rich-label label=\"Employer\" [title]=\"viewing.startDate\"></rolatech-rich-label> -->\n          <rolatech-rich-label label=\"Annual income\" [title]=\"viewing.income\"></rolatech-rich-label>\n        </div>\n      </div>\n    }\n\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Property details</div>\n      <hr class=\"mb-2\" />\n      @if (viewing.item) {\n        <div class=\"flex items-center py-2\">\n          <div class=\"min-w-24 w-24 object-cover aspect-video rounded-md mr-3\">\n            @defer {\n              <rolatech-thumbnail [src]=\"viewing.item.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n          <div class=\"flex w-full justify-between\">\n            <div class=\"flex justify-between w-full\">\n              <div class=\"flex flex-col\">\n                <div class=\"font-bold\">{{ viewing.item.title }}</div>\n                <div class=\"inline-flex gap-1 mt-2\">\n                  <div>\n                    <span class=\"mr-1\">{{ viewing.item.bedrooms }}</span>\n                    <span i18n>Bedrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ viewing.item.bathrooms }}</span>\n                    <span i18n>Bathrooms</span>\n                  </div>\n                  <div>\n                    <span class=\"mr-1\">{{ viewing.item.receptions }}</span>\n                    <span i18n>Receptions</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"text-right\">\n                <div class=\"text-sm\">{{ viewing.item.price | price }}</div>\n              </div>\n            </div>\n          </div>\n          <div class=\"hidden md:flex flex-col px-3\"></div>\n        </div>\n      }\n    </div>\n\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Viewing agent</div>\n      <hr class=\"mb-2\" />\n      @if (agent) {\n        <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n          <rolatech-rich-label label=\"Name\" [title]=\"agent.name\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Email\" [title]=\"agent.email\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Phone\" [title]=\"agent.phone\"></rolatech-rich-label>\n        </div>\n      }\n    </div>\n  </div>\n}\n" }]
         }] });
 
 const propertyManageViewingsRoutes = [
     {
         path: '',
-        loadComponent: () => import('./rolatech-angular-property-property-manage-viewings-index.component-CHPBayaX.mjs').then((x) => x.PropertyManageViewingsIndexComponent),
+        loadComponent: () => import('./rolatech-angular-property-property-manage-viewings-index.component-BkbVXVYV.mjs').then((x) => x.PropertyManageViewingsIndexComponent),
     },
     {
         path: ':id',
@@ -5013,6 +5015,7 @@ class LettingManageIndex extends BaseComponent {
         // Cheap deep compare via JSON to avoid spam calls when nothing changed
         map((o) => JSON.stringify(o)), distinctUntilChanged(), map((s) => JSON.parse(s)), switchMap((params) => {
             this.loading = true;
+            params['sort'] = 'updatedAt desc';
             return this.propertySearchService.search(params).pipe(finalize(() => (this.loading = false)));
         }))
             .subscribe({
@@ -5037,7 +5040,7 @@ class LettingManageIndex extends BaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: LettingManageIndex, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: LettingManageIndex, isStandalone: true, selector: "rolatech-letting-manage-index", usesInheritance: true, ngImport: i0, template: "<rolatech-toolbar title=\"Lettings\"> </rolatech-toolbar>\n@if (loading) {\n<div class=\"bg-[--rt-rasised-background] h-full\">\n  <!-- <rolatech-property-manage-filter></rolatech-property-manage-filter> -->\n  <div class=\"flex flex-wrap px-2\">\n    @for (row of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; track row) {\n    <rolatech-property-manage-item-skeleton></rolatech-property-manage-item-skeleton>\n    }\n  </div>\n</div>\n} @else {\n<div class=\"bg-[--rt-rasised-background] h-full\">\n  <div class=\"flex flex-wrap px-2\">\n    @for (item of lettings(); track $index) {\n    <rolatech-letting-manage-item [letting]=\"item\" routerLink=\"./{{ item.id }}\"></rolatech-letting-manage-item>\n    }\n  </div>\n</div>\n}\n<mat-paginator\n  #paginator\n  [length]=\"length\"\n  [pageSize]=\"pageSize\"\n  [pageIndex]=\"pageIndex()\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  (page)=\"onPage($event)\"\n  hidePageSize\n  showFirstLastButtons\n>\n</mat-paginator>\n", styles: ["rolatech-letting-manage-index{display:flex;flex-direction:column;--rt-letting-view-items-per-row: 1;--rt-property-view-items-per-row: 1}@media(min-width:600px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 2;--rt-property-view-items-per-row: 2}}@media(min-width:768px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 3;--rt-property-view-items-per-row: 3}}@media(min-width:1280px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 3;--rt-property-view-items-per-row: 3}}@media(min-width:1536px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 4;--rt-property-view-items-per-row: 4}}@media(min-width:1920px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 5;--rt-property-view-items-per-row: 5}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: LettingManageItem, selector: "rolatech-letting-manage-item", inputs: ["letting", "thumbnail", "list"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: PropertyManageItemSkeleton, selector: "rolatech-property-manage-item-skeleton", inputs: ["loading", "list"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: LettingManageIndex, isStandalone: true, selector: "rolatech-letting-manage-index", usesInheritance: true, ngImport: i0, template: "<rolatech-toolbar title=\"My listings\"> </rolatech-toolbar>\n@if (loading) {\n<div class=\"bg-[--rt-rasised-background] h-full\">\n  <!-- <rolatech-property-manage-filter></rolatech-property-manage-filter> -->\n  <div class=\"flex flex-wrap px-2\">\n    @for (row of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; track row) {\n    <rolatech-property-manage-item-skeleton></rolatech-property-manage-item-skeleton>\n    }\n  </div>\n</div>\n} @else {\n<div class=\"bg-[--rt-rasised-background] h-full\">\n  <div class=\"flex flex-wrap px-2\">\n    @for (item of lettings(); track $index) {\n    <rolatech-letting-manage-item [letting]=\"item\" routerLink=\"./{{ item.id }}\"></rolatech-letting-manage-item>\n    }\n  </div>\n</div>\n}\n<mat-paginator\n  #paginator\n  [length]=\"length\"\n  [pageSize]=\"pageSize\"\n  [pageIndex]=\"pageIndex()\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  (page)=\"onPage($event)\"\n  hidePageSize\n  showFirstLastButtons\n>\n</mat-paginator>\n", styles: ["rolatech-letting-manage-index{display:flex;flex-direction:column;--rt-letting-view-items-per-row: 1;--rt-property-view-items-per-row: 1}@media(min-width:600px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 2;--rt-property-view-items-per-row: 2}}@media(min-width:768px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 3;--rt-property-view-items-per-row: 3}}@media(min-width:1280px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 3;--rt-property-view-items-per-row: 3}}@media(min-width:1536px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 4;--rt-property-view-items-per-row: 4}}@media(min-width:1920px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 5;--rt-property-view-items-per-row: 5}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: LettingManageItem, selector: "rolatech-letting-manage-item", inputs: ["letting", "thumbnail", "list"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: PropertyManageItemSkeleton, selector: "rolatech-property-manage-item-skeleton", inputs: ["loading", "list"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: LettingManageIndex, decorators: [{
             type: Component,
@@ -5049,7 +5052,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                         LettingManageItem,
                         MatPaginatorModule,
                         PropertyManageItemSkeleton,
-                    ], encapsulation: ViewEncapsulation.None, template: "<rolatech-toolbar title=\"Lettings\"> </rolatech-toolbar>\n@if (loading) {\n<div class=\"bg-[--rt-rasised-background] h-full\">\n  <!-- <rolatech-property-manage-filter></rolatech-property-manage-filter> -->\n  <div class=\"flex flex-wrap px-2\">\n    @for (row of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; track row) {\n    <rolatech-property-manage-item-skeleton></rolatech-property-manage-item-skeleton>\n    }\n  </div>\n</div>\n} @else {\n<div class=\"bg-[--rt-rasised-background] h-full\">\n  <div class=\"flex flex-wrap px-2\">\n    @for (item of lettings(); track $index) {\n    <rolatech-letting-manage-item [letting]=\"item\" routerLink=\"./{{ item.id }}\"></rolatech-letting-manage-item>\n    }\n  </div>\n</div>\n}\n<mat-paginator\n  #paginator\n  [length]=\"length\"\n  [pageSize]=\"pageSize\"\n  [pageIndex]=\"pageIndex()\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  (page)=\"onPage($event)\"\n  hidePageSize\n  showFirstLastButtons\n>\n</mat-paginator>\n", styles: ["rolatech-letting-manage-index{display:flex;flex-direction:column;--rt-letting-view-items-per-row: 1;--rt-property-view-items-per-row: 1}@media(min-width:600px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 2;--rt-property-view-items-per-row: 2}}@media(min-width:768px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 3;--rt-property-view-items-per-row: 3}}@media(min-width:1280px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 3;--rt-property-view-items-per-row: 3}}@media(min-width:1536px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 4;--rt-property-view-items-per-row: 4}}@media(min-width:1920px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 5;--rt-property-view-items-per-row: 5}}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, template: "<rolatech-toolbar title=\"My listings\"> </rolatech-toolbar>\n@if (loading) {\n<div class=\"bg-[--rt-rasised-background] h-full\">\n  <!-- <rolatech-property-manage-filter></rolatech-property-manage-filter> -->\n  <div class=\"flex flex-wrap px-2\">\n    @for (row of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; track row) {\n    <rolatech-property-manage-item-skeleton></rolatech-property-manage-item-skeleton>\n    }\n  </div>\n</div>\n} @else {\n<div class=\"bg-[--rt-rasised-background] h-full\">\n  <div class=\"flex flex-wrap px-2\">\n    @for (item of lettings(); track $index) {\n    <rolatech-letting-manage-item [letting]=\"item\" routerLink=\"./{{ item.id }}\"></rolatech-letting-manage-item>\n    }\n  </div>\n</div>\n}\n<mat-paginator\n  #paginator\n  [length]=\"length\"\n  [pageSize]=\"pageSize\"\n  [pageIndex]=\"pageIndex()\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  (page)=\"onPage($event)\"\n  hidePageSize\n  showFirstLastButtons\n>\n</mat-paginator>\n", styles: ["rolatech-letting-manage-index{display:flex;flex-direction:column;--rt-letting-view-items-per-row: 1;--rt-property-view-items-per-row: 1}@media(min-width:600px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 2;--rt-property-view-items-per-row: 2}}@media(min-width:768px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 3;--rt-property-view-items-per-row: 3}}@media(min-width:1280px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 3;--rt-property-view-items-per-row: 3}}@media(min-width:1536px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 4;--rt-property-view-items-per-row: 4}}@media(min-width:1920px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 5;--rt-property-view-items-per-row: 5}}\n"] }]
         }] });
 
 class LettingActions {
@@ -5235,14 +5238,13 @@ class LettingManageDetail extends BaseComponent {
         // const updatedCriteria = matchingVariant ? updateCriteriaFromVariant(matchingVariant) : [];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: LettingManageDetail, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: LettingManageDetail, isStandalone: true, selector: "rolatech-letting-manage-detail", usesInheritance: true, ngImport: i0, template: "@if (property) {\n<rolatech-container>\n  <div class=\"flex flex-col w-full\">\n    <div class=\"py-3\">\n      <rolatech-property-media [media]=\"property.media\"></rolatech-property-media>\n    </div>\n    <div class=\"flex flex-col md:flex-row gap-3 w-full\">\n      <div class=\"w-full md:w-2/3\">\n        <rolatech-property-info [property]=\"property\" (wish)=\"onWish($event)\" [inWishList]=\"inWishList\">\n        </rolatech-property-info>\n        <rolatech-property-agent-renderer\n          [name]=\"fullname\"\n          [avatar]=\"user?.avatar\"\n          [username]=\"username\"\n        ></rolatech-property-agent-renderer>\n        <rolatech-property-features [features]=\"property.userFeatures\"></rolatech-property-features>\n        <rolatech-property-location [location]=\"property.location\"></rolatech-property-location>\n        @if (property.videos) {\n        <rolatech-property-video [video]=\"property.videos[0]\"></rolatech-property-video>\n        }\n        <div class=\"flex flex-col\">\n          <div class=\"text-2xl font-bold pt-3\" i18n>Sections</div>\n          @for (section of property.sections; track $index) {\n          <rolatech-property-section [section]=\"section\"></rolatech-property-section>\n          }\n        </div>\n      </div>\n      <div class=\"w-full h-fit md:w-1/3 rounded-md border shadow p-3\">\n        <rolatech-property-agent-renderer\n          [name]=\"fullname\"\n          [avatar]=\"user?.avatar\"\n          [username]=\"username\"\n          subtitle=\"PrimeCase Agent\"\n        ></rolatech-property-agent-renderer>\n        <rolatech-property-pricing (wish)=\"onWish($event)\" [property]=\"property\"></rolatech-property-pricing>\n        <rolatech-letting-actions\n          [letting]=\"property\"\n          (offer)=\"onOffer($event)\"\n          (deposit)=\"onOffer($event)\"\n          (requestViewing)=\"onRequestViewing($event)\"\n        >\n          @if (user) {\n          <rolatech-letting-action-contact [phone]=\"user.phone\"></rolatech-letting-action-contact>\n          }\n        </rolatech-letting-actions>\n      </div>\n    </div>\n  </div>\n</rolatech-container>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: PropertyInfoComponent, selector: "rolatech-property-info", inputs: ["property", "inWishList"], outputs: ["wish"] }, { kind: "component", type: PropertyMediaComponent, selector: "rolatech-property-media", inputs: ["media", "min"] }, { kind: "component", type: PropertyPricingComponent, selector: "rolatech-property-pricing", inputs: ["property", "price"] }, { kind: "component", type: PropertySectionComponent, selector: "rolatech-property-section", inputs: ["section", "user", "username"] }, { kind: "component", type: LettingActions, selector: "rolatech-letting-actions", inputs: ["letting"], outputs: ["requestViewing", "offer", "deposit"] }, { kind: "component", type: LettingActionContact, selector: "rolatech-letting-action-contact", inputs: ["phone"], outputs: ["callAgent", "emailAgent"] }, { kind: "component", type: PropertyLocationComponent, selector: "rolatech-property-location", inputs: ["location"] }, { kind: "component", type: PropertyFeaturesComponent, selector: "rolatech-property-features", inputs: ["features"] }, { kind: "component", type: PropertyVideoComponent, selector: "rolatech-property-video", inputs: ["video"] }, { kind: "component", type: PropertyAgentRenderer, selector: "rolatech-property-agent-renderer", inputs: ["name", "avatar", "username", "subtitle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: LettingManageDetail, isStandalone: true, selector: "rolatech-letting-manage-detail", usesInheritance: true, ngImport: i0, template: "@if (property) {\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\"> </rolatech-property-info>\n      <rolatech-property-agent-renderer\n        [name]=\"fullname\"\n        [avatar]=\"user?.avatar\"\n        [username]=\"username\"\n      ></rolatech-property-agent-renderer>\n      <rolatech-property-features [features]=\"property.userFeatures\"></rolatech-property-features>\n      <rolatech-property-location [location]=\"property.location\"></rolatech-property-location>\n      @if (property.videos) {\n      <rolatech-property-video [video]=\"property.videos[0]\"></rolatech-property-video>\n      }\n      <div class=\"flex flex-col\">\n        <div class=\"text-2xl font-bold pt-3\" i18n>Sections</div>\n        @for (section of property.sections; track $index) {\n        <rolatech-property-section [section]=\"section\"></rolatech-property-section>\n        }\n      </div>\n    </div>\n    <div class=\"w-full h-fit md:w-1/3 rounded-md border shadow p-3\">\n      <rolatech-property-agent-renderer\n        [name]=\"fullname\"\n        [avatar]=\"user?.avatar\"\n        [username]=\"username\"\n        subtitle=\"PrimeCase Agent\"\n      ></rolatech-property-agent-renderer>\n      <rolatech-property-pricing (wish)=\"onWish($event)\" [property]=\"property\"></rolatech-property-pricing>\n      <rolatech-letting-actions\n        [letting]=\"property\"\n        (offer)=\"onOffer($event)\"\n        (deposit)=\"onOffer($event)\"\n        (requestViewing)=\"onRequestViewing($event)\"\n      >\n        @if (user) {\n        <rolatech-letting-action-contact [phone]=\"user.phone\"></rolatech-letting-action-contact>\n        }\n      </rolatech-letting-actions>\n    </div>\n  </div>\n</div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: PropertyInfoComponent, selector: "rolatech-property-info", inputs: ["property", "inWishList"], outputs: ["wish"] }, { kind: "component", type: PropertyMediaComponent, selector: "rolatech-property-media", inputs: ["media", "min"] }, { kind: "component", type: PropertyPricingComponent, selector: "rolatech-property-pricing", inputs: ["property", "price"] }, { kind: "component", type: PropertySectionComponent, selector: "rolatech-property-section", inputs: ["section", "user", "username"] }, { kind: "component", type: LettingActions, selector: "rolatech-letting-actions", inputs: ["letting"], outputs: ["requestViewing", "offer", "deposit"] }, { kind: "component", type: LettingActionContact, selector: "rolatech-letting-action-contact", inputs: ["phone"], outputs: ["callAgent", "emailAgent"] }, { kind: "component", type: PropertyLocationComponent, selector: "rolatech-property-location", inputs: ["location"] }, { kind: "component", type: PropertyFeaturesComponent, selector: "rolatech-property-features", inputs: ["features"] }, { kind: "component", type: PropertyVideoComponent, selector: "rolatech-property-video", inputs: ["video"] }, { kind: "component", type: PropertyAgentRenderer, selector: "rolatech-property-agent-renderer", inputs: ["name", "avatar", "username", "subtitle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: LettingManageDetail, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-letting-manage-detail', imports: [
                         AngularCommonModule,
                         AngularComponentsModule,
-                        ContainerComponent,
                         PropertyInfoComponent,
                         PropertyMediaComponent,
                         PropertyPricingComponent,
@@ -5252,8 +5254,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                         PropertyLocationComponent,
                         PropertyFeaturesComponent,
                         PropertyVideoComponent,
-                        PropertyAgentRenderer
-                    ], template: "@if (property) {\n<rolatech-container>\n  <div class=\"flex flex-col w-full\">\n    <div class=\"py-3\">\n      <rolatech-property-media [media]=\"property.media\"></rolatech-property-media>\n    </div>\n    <div class=\"flex flex-col md:flex-row gap-3 w-full\">\n      <div class=\"w-full md:w-2/3\">\n        <rolatech-property-info [property]=\"property\" (wish)=\"onWish($event)\" [inWishList]=\"inWishList\">\n        </rolatech-property-info>\n        <rolatech-property-agent-renderer\n          [name]=\"fullname\"\n          [avatar]=\"user?.avatar\"\n          [username]=\"username\"\n        ></rolatech-property-agent-renderer>\n        <rolatech-property-features [features]=\"property.userFeatures\"></rolatech-property-features>\n        <rolatech-property-location [location]=\"property.location\"></rolatech-property-location>\n        @if (property.videos) {\n        <rolatech-property-video [video]=\"property.videos[0]\"></rolatech-property-video>\n        }\n        <div class=\"flex flex-col\">\n          <div class=\"text-2xl font-bold pt-3\" i18n>Sections</div>\n          @for (section of property.sections; track $index) {\n          <rolatech-property-section [section]=\"section\"></rolatech-property-section>\n          }\n        </div>\n      </div>\n      <div class=\"w-full h-fit md:w-1/3 rounded-md border shadow p-3\">\n        <rolatech-property-agent-renderer\n          [name]=\"fullname\"\n          [avatar]=\"user?.avatar\"\n          [username]=\"username\"\n          subtitle=\"PrimeCase Agent\"\n        ></rolatech-property-agent-renderer>\n        <rolatech-property-pricing (wish)=\"onWish($event)\" [property]=\"property\"></rolatech-property-pricing>\n        <rolatech-letting-actions\n          [letting]=\"property\"\n          (offer)=\"onOffer($event)\"\n          (deposit)=\"onOffer($event)\"\n          (requestViewing)=\"onRequestViewing($event)\"\n        >\n          @if (user) {\n          <rolatech-letting-action-contact [phone]=\"user.phone\"></rolatech-letting-action-contact>\n          }\n        </rolatech-letting-actions>\n      </div>\n    </div>\n  </div>\n</rolatech-container>\n}\n" }]
+                        PropertyAgentRenderer,
+                    ], template: "@if (property) {\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\"> </rolatech-property-info>\n      <rolatech-property-agent-renderer\n        [name]=\"fullname\"\n        [avatar]=\"user?.avatar\"\n        [username]=\"username\"\n      ></rolatech-property-agent-renderer>\n      <rolatech-property-features [features]=\"property.userFeatures\"></rolatech-property-features>\n      <rolatech-property-location [location]=\"property.location\"></rolatech-property-location>\n      @if (property.videos) {\n      <rolatech-property-video [video]=\"property.videos[0]\"></rolatech-property-video>\n      }\n      <div class=\"flex flex-col\">\n        <div class=\"text-2xl font-bold pt-3\" i18n>Sections</div>\n        @for (section of property.sections; track $index) {\n        <rolatech-property-section [section]=\"section\"></rolatech-property-section>\n        }\n      </div>\n    </div>\n    <div class=\"w-full h-fit md:w-1/3 rounded-md border shadow p-3\">\n      <rolatech-property-agent-renderer\n        [name]=\"fullname\"\n        [avatar]=\"user?.avatar\"\n        [username]=\"username\"\n        subtitle=\"PrimeCase Agent\"\n      ></rolatech-property-agent-renderer>\n      <rolatech-property-pricing (wish)=\"onWish($event)\" [property]=\"property\"></rolatech-property-pricing>\n      <rolatech-letting-actions\n        [letting]=\"property\"\n        (offer)=\"onOffer($event)\"\n        (deposit)=\"onOffer($event)\"\n        (requestViewing)=\"onRequestViewing($event)\"\n      >\n        @if (user) {\n        <rolatech-letting-action-contact [phone]=\"user.phone\"></rolatech-letting-action-contact>\n        }\n      </rolatech-letting-actions>\n    </div>\n  </div>\n</div>\n}\n" }]
         }], ctorParameters: () => [] });
 
 const MY_FORMATS$1 = {
@@ -5299,7 +5301,7 @@ class LettingManageViewingRequest extends BaseComponent {
         this.propertyService.findTenants({}).subscribe({
             next: (res) => {
                 this.tenants = res.data;
-            }
+            },
         });
     }
     onCountrySelect(event) {
@@ -5323,13 +5325,12 @@ class LettingManageViewingRequest extends BaseComponent {
                 deps: [MAT_DATE_LOCALE],
             },
             { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS$1 },
-        ], usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  <div class=\"flex flex-col-reverse md:flex-row w-full py-2 mb-3 gap-3\">\n    <div class=\"w-full md:w-2/3\">\n      <div>\n        <div class=\"text-xl font-bold py-2 mb-3\" i18n>Request a viewing</div>\n        <mat-form-field appearance=\"fill\">\n          <mat-label>Select tenant</mat-label>\n          <mat-select [(ngModel)]=\"viewing.tenantId\">\n            @for (item of tenants; track $index) {\n            <mat-option [value]=\"item.id\">\n              <div class=\"flex justify-between items-center\">\n                <span class=\"mr-3\">{{ item.firstName }}, {{item.lastName}}</span>\n                <span>{{item.email}}</span>\n              </div>\n            </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <input\n            matInput\n            placeholder=\"Start date\"\n            [matDatepicker]=\"startDatePicker\"\n            [min]=\"minDate\"\n            (focus)=\"startDatePicker.open()\"\n            name=\"startDate\"\n            [(ngModel)]=\"viewing.startDate\"\n            (dateInput)=\"viewing.startDate = $event.value.format('YYYY-MM-DD')\"\n            readonly\n          />\n          <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n          <mat-datepicker #startDatePicker></mat-datepicker>\n        </mat-form-field>\n        <div class=\"flex flex-col md:flex-row gap-2\">\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>Tenancy length</mat-label>\n            <span matTextSuffix>months</span>\n            <input matInput type=\"number\" [(ngModel)]=\"viewing.tenancyDuration\" />\n          </mat-form-field>\n        </div>\n\n        <div>\n          <div class=\"mb-3\">\n            <div class=\"text-lg font-bold\" i18n>Viewing date</div>\n            <div class=\"opacity-70\" i18n>\n              Please choose 3 different times on at least 2 different days that would work for you.\n            </div>\n          </div>\n          @for (item of viewing.proposedSlots; track $index) {\n          <rolatech-property-viewing-time [proposedTime]=\"item\"></rolatech-property-viewing-time>\n          }\n        </div>\n      </div>\n      <button mat-flat-button (click)=\"sendRequest()\" i18n>Send request</button>\n    </div>\n    @if (property) {\n    <div class=\"w-full md:w-1/2 py-2 mb-3\">\n      <div class=\"text-xl font-bold py-2 mb-3\" i18n>Property info</div>\n      <div>\n        <rolatech-thumbnail [src]=\"property ? property.media[0].url : ''\" size=\"small\"></rolatech-thumbnail>\n      </div>\n      <rolatech-property-pricing [property]=\"property\"></rolatech-property-pricing>\n    </div>\n    }\n  </div>\n</rolatech-container>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: ThumbnailComponent, selector: "rolatech-thumbnail", inputs: ["src", "size", "mode", "ratio", "width", "height"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "component", type: PropertyViewingTimeComponent, selector: "rolatech-property-viewing-time", inputs: ["proposedTime"], outputs: ["output", "select"] }, { kind: "component", type: PropertyPricingComponent, selector: "rolatech-property-pricing", inputs: ["property", "price"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col-reverse md:flex-row w-full p-4 mb-3 gap-3\">\n  <div class=\"w-full md:w-2/3\">\n    <div>\n      <div class=\"text-xl font-bold py-2 mb-3\" i18n>Request a viewing</div>\n      <mat-form-field appearance=\"fill\">\n        <mat-label>Select tenant</mat-label>\n        <mat-select [(ngModel)]=\"viewing.tenantId\">\n          @for (item of tenants; track $index) {\n          <mat-option [value]=\"item.id\">\n            <div class=\"flex justify-between items-center\">\n              <span class=\"mr-3\">{{ item.firstName }}, {{item.lastName}}</span>\n              <span>{{item.email}}</span>\n            </div>\n          </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <input\n          matInput\n          placeholder=\"Start date\"\n          [matDatepicker]=\"startDatePicker\"\n          [min]=\"minDate\"\n          (focus)=\"startDatePicker.open()\"\n          name=\"startDate\"\n          [(ngModel)]=\"viewing.startDate\"\n          (dateInput)=\"viewing.startDate = $event.value.format('YYYY-MM-DD')\"\n          readonly\n        />\n        <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n        <mat-datepicker #startDatePicker></mat-datepicker>\n      </mat-form-field>\n      <div class=\"flex flex-col md:flex-row gap-2\">\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Tenancy length</mat-label>\n          <span matTextSuffix>months</span>\n          <input matInput type=\"number\" [(ngModel)]=\"viewing.tenancyDuration\" />\n        </mat-form-field>\n      </div>\n\n      <div>\n        <div class=\"mb-3\">\n          <div class=\"text-lg font-bold\" i18n>Viewing date</div>\n          <div class=\"opacity-70\" i18n>\n            Please choose 3 different times on at least 2 different days that would work for you.\n          </div>\n        </div>\n        @for (item of viewing.proposedSlots; track $index) {\n        <rolatech-property-viewing-time [proposedTime]=\"item\"></rolatech-property-viewing-time>\n        }\n      </div>\n    </div>\n    <button mat-flat-button (click)=\"sendRequest()\" i18n>Send request</button>\n  </div>\n  @if (property) {\n  <div class=\"w-full md:w-1/2 py-2 mb-3\">\n    <div class=\"text-xl font-bold py-2 mb-3\" i18n>Property info</div>\n    <div>\n      <rolatech-thumbnail [src]=\"property ? property.media[0].url : ''\" size=\"small\"></rolatech-thumbnail>\n    </div>\n    <rolatech-property-pricing [property]=\"property\"></rolatech-property-pricing>\n  </div>\n  }\n</div>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: ThumbnailComponent, selector: "rolatech-thumbnail", inputs: ["src", "size", "mode", "ratio", "width", "height"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "component", type: PropertyViewingTimeComponent, selector: "rolatech-property-viewing-time", inputs: ["proposedTime"], outputs: ["output", "select"] }, { kind: "component", type: PropertyPricingComponent, selector: "rolatech-property-pricing", inputs: ["property", "price"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: LettingManageViewingRequest, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-letting-viewing-request', imports: [
                         CommonModule,
-                        ContainerComponent,
                         MatFormFieldModule,
                         FormsModule,
                         MatInputModule,
@@ -5340,7 +5341,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                         MatDatepickerModule,
                         MatRadioModule,
                         PropertyViewingTimeComponent,
-                        PropertyPricingComponent
+                        PropertyPricingComponent,
                     ], providers: [
                         {
                             provide: DateAdapter,
@@ -5348,7 +5349,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                             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\" i18n>Request a viewing</div>\n        <mat-form-field appearance=\"fill\">\n          <mat-label>Select tenant</mat-label>\n          <mat-select [(ngModel)]=\"viewing.tenantId\">\n            @for (item of tenants; track $index) {\n            <mat-option [value]=\"item.id\">\n              <div class=\"flex justify-between items-center\">\n                <span class=\"mr-3\">{{ item.firstName }}, {{item.lastName}}</span>\n                <span>{{item.email}}</span>\n              </div>\n            </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <input\n            matInput\n            placeholder=\"Start date\"\n            [matDatepicker]=\"startDatePicker\"\n            [min]=\"minDate\"\n            (focus)=\"startDatePicker.open()\"\n            name=\"startDate\"\n            [(ngModel)]=\"viewing.startDate\"\n            (dateInput)=\"viewing.startDate = $event.value.format('YYYY-MM-DD')\"\n            readonly\n          />\n          <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n          <mat-datepicker #startDatePicker></mat-datepicker>\n        </mat-form-field>\n        <div class=\"flex flex-col md:flex-row gap-2\">\n          <mat-form-field appearance=\"fill\">\n            <mat-label i18n>Tenancy length</mat-label>\n            <span matTextSuffix>months</span>\n            <input matInput type=\"number\" [(ngModel)]=\"viewing.tenancyDuration\" />\n          </mat-form-field>\n        </div>\n\n        <div>\n          <div class=\"mb-3\">\n            <div class=\"text-lg font-bold\" i18n>Viewing date</div>\n            <div class=\"opacity-70\" i18n>\n              Please choose 3 different times on at least 2 different days that would work for you.\n            </div>\n          </div>\n          @for (item of viewing.proposedSlots; track $index) {\n          <rolatech-property-viewing-time [proposedTime]=\"item\"></rolatech-property-viewing-time>\n          }\n        </div>\n      </div>\n      <button mat-flat-button (click)=\"sendRequest()\" i18n>Send request</button>\n    </div>\n    @if (property) {\n    <div class=\"w-full md:w-1/2 py-2 mb-3\">\n      <div class=\"text-xl font-bold py-2 mb-3\" i18n>Property info</div>\n      <div>\n        <rolatech-thumbnail [src]=\"property ? property.media[0].url : ''\" size=\"small\"></rolatech-thumbnail>\n      </div>\n      <rolatech-property-pricing [property]=\"property\"></rolatech-property-pricing>\n    </div>\n    }\n  </div>\n</rolatech-container>\n", styles: ["mat-form-field{width:100%}\n"] }]
+                    ], template: "<div class=\"flex flex-col-reverse md:flex-row w-full p-4 mb-3 gap-3\">\n  <div class=\"w-full md:w-2/3\">\n    <div>\n      <div class=\"text-xl font-bold py-2 mb-3\" i18n>Request a viewing</div>\n      <mat-form-field appearance=\"fill\">\n        <mat-label>Select tenant</mat-label>\n        <mat-select [(ngModel)]=\"viewing.tenantId\">\n          @for (item of tenants; track $index) {\n          <mat-option [value]=\"item.id\">\n            <div class=\"flex justify-between items-center\">\n              <span class=\"mr-3\">{{ item.firstName }}, {{item.lastName}}</span>\n              <span>{{item.email}}</span>\n            </div>\n          </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <input\n          matInput\n          placeholder=\"Start date\"\n          [matDatepicker]=\"startDatePicker\"\n          [min]=\"minDate\"\n          (focus)=\"startDatePicker.open()\"\n          name=\"startDate\"\n          [(ngModel)]=\"viewing.startDate\"\n          (dateInput)=\"viewing.startDate = $event.value.format('YYYY-MM-DD')\"\n          readonly\n        />\n        <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n        <mat-datepicker #startDatePicker></mat-datepicker>\n      </mat-form-field>\n      <div class=\"flex flex-col md:flex-row gap-2\">\n        <mat-form-field appearance=\"fill\">\n          <mat-label i18n>Tenancy length</mat-label>\n          <span matTextSuffix>months</span>\n          <input matInput type=\"number\" [(ngModel)]=\"viewing.tenancyDuration\" />\n        </mat-form-field>\n      </div>\n\n      <div>\n        <div class=\"mb-3\">\n          <div class=\"text-lg font-bold\" i18n>Viewing date</div>\n          <div class=\"opacity-70\" i18n>\n            Please choose 3 different times on at least 2 different days that would work for you.\n          </div>\n        </div>\n        @for (item of viewing.proposedSlots; track $index) {\n        <rolatech-property-viewing-time [proposedTime]=\"item\"></rolatech-property-viewing-time>\n        }\n      </div>\n    </div>\n    <button mat-flat-button (click)=\"sendRequest()\" i18n>Send request</button>\n  </div>\n  @if (property) {\n  <div class=\"w-full md:w-1/2 py-2 mb-3\">\n    <div class=\"text-xl font-bold py-2 mb-3\" i18n>Property info</div>\n    <div>\n      <rolatech-thumbnail [src]=\"property ? property.media[0].url : ''\" size=\"small\"></rolatech-thumbnail>\n    </div>\n    <rolatech-property-pricing [property]=\"property\"></rolatech-property-pricing>\n  </div>\n  }\n</div>\n", styles: ["mat-form-field{width:100%}\n"] }]
         }] });
 
 const MY_FORMATS = {
@@ -5621,43 +5622,63 @@ class PropertyAgentViewingIndex extends BaseComponent {
         type: '',
         status: '',
     };
-    viewings = [];
+    loading = false;
+    viewings = signal([], ...(ngDevMode ? [{ debugName: "viewings" }] : []));
+    meta;
+    pageEvent;
+    length = 100;
+    pageSize = 15;
+    pageSizeOptions = [5, 10, 25, 100];
+    pageIndex = signal(0, ...(ngDevMode ? [{ debugName: "pageIndex" }] : []));
     ngOnInit() {
-        this.route.queryParams.subscribe(({ status }) => {
-            this.select = this.links.findIndex((item) => item.status === status);
+        const sub = this.route.queryParamMap
+            .pipe(map((p) => {
+            const page = p.get('page') ? Number(p.get('page')) : 1;
+            this.pageIndex.set(Math.max(page - 1, 0));
+            const status = p.get('status') || undefined;
+            let filter = '';
             if (status) {
-                this.filterOptions.status = status.toUpperCase();
-            }
-            else {
-                delete this.filterOptions.status;
+                this.select = this.links.findIndex((item) => item.status === status);
+                filter = `status:${status?.toUpperCase()}`;
             }
-            this.findViewings();
-        });
-    }
-    findViewings() {
-        const options = {
-            sort: 'updatedAt desc',
-        };
-        const filterString = this.convertFilterOptions(this.filterOptions);
-        if (filterString) {
-            options['filter'] = filterString;
-        }
-        this.propertyService.findViewingsByAgent(options).subscribe({
+            return {
+                page,
+                filter,
+                limit: p.get('limit') ? Number(p.get('limit')) : 15,
+                sort: p.get('sort') || undefined,
+            };
+        }), 
+        // Cheap deep compare via JSON to avoid spam calls when nothing changed
+        map((o) => JSON.stringify(o)), distinctUntilChanged(), map((s) => JSON.parse(s)), switchMap((params) => {
+            this.loading = true;
+            params['sort'] = 'updatedAt desc';
+            return this.propertyService.findViewingsByAgent(params).pipe(finalize(() => (this.loading = false)));
+        }))
+            .subscribe({
             next: (res) => {
-                this.viewings = res.data;
+                this.viewings.set(res.data);
+                this.meta = res.meta;
+                this.length = res.meta.pagination.count;
+                this.loading = false;
+            },
+            error: () => {
+                this.viewings.set([]);
+                this.length = 0;
+                this.loading = false;
             },
         });
+        // // auto-unsubscribe on destroy
+        this.destroyRef.onDestroy(() => sub.unsubscribe());
     }
-    convertFilterOptions(jsonObj) {
-        return Object.entries(jsonObj)
-            .filter(([key, value]) => value !== '' && value !== undefined)
-            .map(([key, value]) => {
-            return `${key}:${value}`;
-        })
-            .join(',');
+    onPage(e) {
+        this.router.navigate([], {
+            queryParams: { page: e.pageIndex + 1, limit: e.pageSize },
+            queryParamsHandling: 'merge',
+            replaceUrl: true, // optional: avoid stacking history on every page click
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyAgentViewingIndex, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: PropertyAgentViewingIndex, isStandalone: true, selector: "rolatech-property-agent-viewing-index", usesInheritance: true, ngImport: i0, template: "<rolatech-toolbar title=\"Viewings\">\n  <div class=\"flex items-center gap-2\"></div>\n</rolatech-toolbar>\n<rolatech-tabs [select]=\"select\">\n  @for (item of links; track item) { @if (item.status) {\n  <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n  } @else {\n  <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n  } }\n</rolatech-tabs>\n<div>\n  @if (viewings) { @for (item of viewings; track $index) {\n  <rolatech-property-viewing-item [routerLink]=\"['./', item.id]\" [viewing]=\"item\"></rolatech-property-viewing-item>\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: "ngmodule", type: MatButtonModule }, { kind: "component", type: TabsComponent, selector: "rolatech-tabs", inputs: ["select", "loading"], outputs: ["selectChange"] }, { kind: "component", type: TabComponent, selector: "rolatech-tab", inputs: ["label"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: EmptyComponent, selector: "rolatech-empty" }, { kind: "component", type: PropertyViewingItemComponent, selector: "rolatech-property-viewing-item", inputs: ["viewing"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: PropertyAgentViewingIndex, isStandalone: true, selector: "rolatech-property-agent-viewing-index", usesInheritance: true, ngImport: i0, template: "<rolatech-toolbar title=\"Viewings\">\n  <div class=\"flex items-center gap-2\"></div>\n</rolatech-toolbar>\n<rolatech-tabs [select]=\"select\">\n  @for (item of links; track item) { @if (item.status) {\n  <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n  } @else {\n  <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n  } }\n</rolatech-tabs>\n<div>\n  @if (viewings(); as viewings) { @for (item of viewings; track $index) {\n  <rolatech-property-viewing-item\n    [loading]=\"loading\"\n    [routerLink]=\"['./', item.id]\"\n    [viewing]=\"item\"\n  ></rolatech-property-viewing-item>\n  } } @else {\n  <rolatech-empty></rolatech-empty>\n  }\n</div>\n<mat-paginator\n  #paginator\n  [length]=\"length\"\n  [pageSize]=\"pageSize\"\n  [pageIndex]=\"pageIndex()\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  (page)=\"onPage($event)\"\n  hidePageSize\n  showFirstLastButtons\n>\n</mat-paginator>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: TabsComponent, selector: "rolatech-tabs", inputs: ["select", "loading"], outputs: ["selectChange"] }, { kind: "component", type: TabComponent, selector: "rolatech-tab", inputs: ["label"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: EmptyComponent, selector: "rolatech-empty" }, { kind: "component", type: PropertyViewingItemComponent, selector: "rolatech-property-viewing-item", inputs: ["viewing"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyAgentViewingIndex, decorators: [{
             type: Component,
@@ -5670,7 +5691,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                         RouterModule,
                         EmptyComponent,
                         PropertyViewingItemComponent,
-                    ], template: "<rolatech-toolbar title=\"Viewings\">\n  <div class=\"flex items-center gap-2\"></div>\n</rolatech-toolbar>\n<rolatech-tabs [select]=\"select\">\n  @for (item of links; track item) { @if (item.status) {\n  <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n  } @else {\n  <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n  } }\n</rolatech-tabs>\n<div>\n  @if (viewings) { @for (item of viewings; track $index) {\n  <rolatech-property-viewing-item [routerLink]=\"['./', item.id]\" [viewing]=\"item\"></rolatech-property-viewing-item>\n  } } @else {\n  <rolatech-empty></rolatech-empty>\n  }\n</div>\n" }]
+                        MatPaginatorModule,
+                    ], template: "<rolatech-toolbar title=\"Viewings\">\n  <div class=\"flex items-center gap-2\"></div>\n</rolatech-toolbar>\n<rolatech-tabs [select]=\"select\">\n  @for (item of links; track item) { @if (item.status) {\n  <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n  } @else {\n  <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n  } }\n</rolatech-tabs>\n<div>\n  @if (viewings(); as viewings) { @for (item of viewings; track $index) {\n  <rolatech-property-viewing-item\n    [loading]=\"loading\"\n    [routerLink]=\"['./', item.id]\"\n    [viewing]=\"item\"\n  ></rolatech-property-viewing-item>\n  } } @else {\n  <rolatech-empty></rolatech-empty>\n  }\n</div>\n<mat-paginator\n  #paginator\n  [length]=\"length\"\n  [pageSize]=\"pageSize\"\n  [pageIndex]=\"pageIndex()\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  (page)=\"onPage($event)\"\n  hidePageSize\n  showFirstLastButtons\n>\n</mat-paginator>\n" }]
         }] });
 
 class PropertyAgentViewingDetail extends BaseComponent {
@@ -6025,4 +6047,4 @@ const propertyManageOverviewRoutes = [
  */
 
 export { PropertyOfferTimelineStatus as A, PropertyOfferType as B, PropertyOfferStatus as C, ResidencyStatus as D, EmploymentStatus as E, PropertyApplicantType as F, AdverseCreditStatus as G, BedroomRange as H, PriceRange as I, Market as M, PropertyUtil as P, RentFrequency as R, ViewingTime as V, PropertyViewType as a, PropertyManageItemSkeleton as b, PropertyViewingItemComponent as c, propertyManageOffersRoutes as d, propertyRoutes as e, featureManageRoutes as f, propertyManageRoutes as g, propertyManageViewingsRoutes as h, propertyAgentViewingRoutes as i, propertyAgentOfferRoutes as j, propertyAgentOverviewRoutes as k, lettingManageRoutes as l, propertyManageOverviewRoutes as m, PropertyActionsComponent as n, PropertyItemComponent as o, propertyReviewRoutes as p, PropertyPricingComponent as q, PropertyPriceType as r, PropertyVideoProvider as s, tenantManageRoutes as t, PropertyStatus as u, PropertyType as v, PropertyInventoryStatus as w, PropertyScope as x, PropertyViewingStatus as y, PropertyViewerCategory as z };
-//# sourceMappingURL=rolatech-angular-property-rolatech-angular-property-CvuaMAgZ.mjs.map
+//# sourceMappingURL=rolatech-angular-property-rolatech-angular-property-CVZQglOo.mjs.map