@rolatech/angular-property 20.1.3-beta.2 → 20.1.5

package/fesm2022/{rolatech-angular-property-rolatech-angular-property-6DXjssB_.mjs → rolatech-angular-property-rolatech-angular-property-BNhZQ5K0.mjs}

@@ -4,7 +4,7 @@ import * as i1$4 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i4 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i3$2 from '@angular/material/paginator';
+import * as i1$6 from '@angular/material/paginator';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
@@ -50,7 +50,7 @@ import * as i3$1 from '@angular/material/progress-spinner';
 import { MatProgressSpinner, MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i8 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import * as i1$6 from '@angular/material/checkbox';
+import * as i1$7 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i4$3 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
@@ -380,11 +380,11 @@ class PropertyManageItemComponent {
     archived() { }
     delete() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyManageItemComponent, isStandalone: true, selector: "rolatech-property-manage-item", inputs: { property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null }, thumbnail: { classPropertyName: "thumbnail", publicName: "thumbnail", isSignal: true, isRequired: false, transformFunction: null }, list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rolatech-property-manage-item": "this.hasClass" } }, ngImport: i0, template: "<div\n  class=\"flex p-3 bg-[--rt-raised-background] hover:bg-[--rt-raised-background] cursor-pointer rounded-md\"\n  [ngClass]=\"list() ? 'w-full flex-row' : 'flex-col h-full'\"\n>\n  <div>\n    @if (property().media) {\n      <div class=\"object-cover aspect-video rounded-lg\" [ngClass]=\"list() ? 'w-32 mr-3' : ''\">\n        @defer {\n          <rolatech-thumbnail [src]=\"property().media ? property().media[0].url : ''\" size=\"medium\" mode=\"full\">\n          </rolatech-thumbnail>\n        } @placeholder {\n          <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n        }\n      </div>\n    } @else {\n      <div class=\"object-cover aspect-video rounded-lg\" [ngClass]=\"list() ? 'w-32 mr-3' : ''\">\n        <rolatech-image-placeholder></rolatech-image-placeholder>\n      </div>\n    }\n  </div>\n\n  <div class=\"py-2\">\n    <div class=\"text-lg font-bold\">\n      {{ property().title }}\n    </div>\n  </div>\n  <div class=\"flex-1\"></div>\n  <div class=\"\">\u00A3{{ property().price.toFixed(2) }}</div>\n</div>\n", styles: ["rolatech-property-manage-item{--rt-property-view-item-margin: 16px;width:calc(100% / var(--rt-property-view-items-per-row) - var(--rt-property-view-item-margin) - .01px)}rolatech-property-manage-item[list]{--rt-property-view-items-per-row: 1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ImagePlaceholderComponent, selector: "rolatech-image-placeholder", inputs: ["ratio"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatMenuModule }], encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [ThumbnailComponent]] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyManageItemComponent, isStandalone: true, selector: "rolatech-property-manage-item", inputs: { property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null }, thumbnail: { classPropertyName: "thumbnail", publicName: "thumbnail", isSignal: true, isRequired: false, transformFunction: null }, list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rolatech-property-manage-item": "this.hasClass" } }, ngImport: i0, template: "<div\n  class=\"flex p-3 bg-[--rt-raised-background] hover:bg-[--rt-raised-background] cursor-pointer rounded-md\"\n  [ngClass]=\"list() ? 'w-full flex-row' : 'flex-col h-full'\"\n>\n  <div>\n    @if (property().media) {\n      <div class=\"object-cover aspect-video rounded-lg\" [ngClass]=\"list() ? 'w-32 mr-3' : ''\">\n        @defer {\n          <rolatech-thumbnail [src]=\"property().media ? property().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=\"object-cover aspect-video rounded-lg\" [ngClass]=\"list() ? 'w-32 mr-3' : ''\">\n        <rolatech-image-placeholder></rolatech-image-placeholder>\n      </div>\n    }\n  </div>\n\n  <div class=\"py-2\">\n    <div class=\"text-lg font-bold\">\n      {{ property().title }}\n    </div>\n  </div>\n  <div class=\"flex-1\"></div>\n  <div class=\"\">\u00A3{{ property().price.toFixed(2) }}</div>\n</div>\n", styles: ["rolatech-property-manage-item{--rt-property-view-item-margin: 16px;width:calc(100% / var(--rt-property-view-items-per-row) - var(--rt-property-view-item-margin) - .01px)}rolatech-property-manage-item[list]{--rt-property-view-items-per-row: 1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ImagePlaceholderComponent, selector: "rolatech-image-placeholder", inputs: ["ratio"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatMenuModule }], encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [ThumbnailComponent]] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-property-manage-item', imports: [CommonModule, ThumbnailComponent, ImagePlaceholderComponent, MatButtonModule, MatMenuModule], encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"flex p-3 bg-[--rt-raised-background] hover:bg-[--rt-raised-background] cursor-pointer rounded-md\"\n  [ngClass]=\"list() ? 'w-full flex-row' : 'flex-col h-full'\"\n>\n  <div>\n    @if (property().media) {\n      <div class=\"object-cover aspect-video rounded-lg\" [ngClass]=\"list() ? 'w-32 mr-3' : ''\">\n        @defer {\n          <rolatech-thumbnail [src]=\"property().media ? property().media[0].url : ''\" size=\"medium\" mode=\"full\">\n          </rolatech-thumbnail>\n        } @placeholder {\n          <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n        }\n      </div>\n    } @else {\n      <div class=\"object-cover aspect-video rounded-lg\" [ngClass]=\"list() ? 'w-32 mr-3' : ''\">\n        <rolatech-image-placeholder></rolatech-image-placeholder>\n      </div>\n    }\n  </div>\n\n  <div class=\"py-2\">\n    <div class=\"text-lg font-bold\">\n      {{ property().title }}\n    </div>\n  </div>\n  <div class=\"flex-1\"></div>\n  <div class=\"\">\u00A3{{ property().price.toFixed(2) }}</div>\n</div>\n", styles: ["rolatech-property-manage-item{--rt-property-view-item-margin: 16px;width:calc(100% / var(--rt-property-view-items-per-row) - var(--rt-property-view-item-margin) - .01px)}rolatech-property-manage-item[list]{--rt-property-view-items-per-row: 1}\n"] }]
+            args: [{ selector: 'rolatech-property-manage-item', imports: [CommonModule, ThumbnailComponent, ImagePlaceholderComponent, MatButtonModule, MatMenuModule], encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"flex p-3 bg-[--rt-raised-background] hover:bg-[--rt-raised-background] cursor-pointer rounded-md\"\n  [ngClass]=\"list() ? 'w-full flex-row' : 'flex-col h-full'\"\n>\n  <div>\n    @if (property().media) {\n      <div class=\"object-cover aspect-video rounded-lg\" [ngClass]=\"list() ? 'w-32 mr-3' : ''\">\n        @defer {\n          <rolatech-thumbnail [src]=\"property().media ? property().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=\"object-cover aspect-video rounded-lg\" [ngClass]=\"list() ? 'w-32 mr-3' : ''\">\n        <rolatech-image-placeholder></rolatech-image-placeholder>\n      </div>\n    }\n  </div>\n\n  <div class=\"py-2\">\n    <div class=\"text-lg font-bold\">\n      {{ property().title }}\n    </div>\n  </div>\n  <div class=\"flex-1\"></div>\n  <div class=\"\">\u00A3{{ property().price.toFixed(2) }}</div>\n</div>\n", styles: ["rolatech-property-manage-item{--rt-property-view-item-margin: 16px;width:calc(100% / var(--rt-property-view-items-per-row) - var(--rt-property-view-item-margin) - .01px)}rolatech-property-manage-item[list]{--rt-property-view-items-per-row: 1}\n"] }]
         }], ctorParameters: () => [], propDecorators: { hasClass: [{
                 type: HostBinding,
                 args: ['class.rolatech-property-manage-item']
@@ -1430,11 +1430,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
 class PropertyItemComponent {
     property = input.required(...(ngDevMode ? [{ debugName: "property" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyItemComponent, isStandalone: true, selector: "rolatech-property-item", inputs: { property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col hover:bg-[--rt-raised-background] cursor-pointer p-3\">\n  <div>\n    <div class=\"flex justify-between w-full mb-2\">\n      <a class=\"flex items-center gap-3\">\n        <span>ID: {{ property().id }}</span>\n      </a>\n    </div>\n    <div class=\"flex flex-col overflow-x-scroll scrollbar-hide\">\n      <div class=\"flex flex-row py-2\">\n        @if (property().media) {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            @defer {\n              <rolatech-thumbnail [src]=\"property().media[0].url\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n        } @else {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            <rolatech-image-placeholder></rolatech-image-placeholder>\n          </div>\n        }\n        <div class=\"flex w-full justify-between\">\n          <div class=\"flex justify-between w-full\">\n            <div class=\"flex flex-col\">\n              <div>{{ property().title }}</div>\n              <div class=\"inline-flex gap-1 mt-2\">\n                <div>\n                  <span class=\"mr-1\">{{ property().bedrooms }}</span>\n                  <span i18n>Bedrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ property().bathrooms }}</span>\n                  <span i18n>Bathrooms</span>\n                </div>\n                <div>\n                  <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\">\u00A3{{ property().price.toFixed(2) }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ImagePlaceholderComponent, selector: "rolatech-image-placeholder", inputs: ["ratio"] }], deferBlockDependencies: [() => [ThumbnailComponent]] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyItemComponent, isStandalone: true, selector: "rolatech-property-item", inputs: { property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col hover:bg-[--rt-raised-background] cursor-pointer p-3\">\n  <div>\n    <div class=\"flex justify-between w-full mb-2\">\n      <a class=\"flex items-center gap-3\">\n        <span>ID: {{ property().id }}</span>\n      </a>\n    </div>\n    <div class=\"flex flex-col overflow-x-scroll scrollbar-hide\">\n      <div class=\"flex flex-row py-2\">\n        @if (property().media) {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            @defer {\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        } @else {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            <rolatech-image-placeholder></rolatech-image-placeholder>\n          </div>\n        }\n        <div class=\"flex w-full justify-between\">\n          <div class=\"flex justify-between w-full\">\n            <div class=\"flex flex-col\">\n              <div>{{ property().title }}</div>\n              <div class=\"inline-flex gap-1 mt-2\">\n                <div>\n                  <span class=\"mr-1\">{{ property().bedrooms }}</span>\n                  <span i18n>Bedrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ property().bathrooms }}</span>\n                  <span i18n>Bathrooms</span>\n                </div>\n                <div>\n                  <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\">\u00A3{{ property().price.toFixed(2) }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ImagePlaceholderComponent, selector: "rolatech-image-placeholder", inputs: ["ratio"] }], deferBlockDependencies: [() => [ThumbnailComponent]] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-property-item', imports: [CommonModule, ThumbnailComponent, ImagePlaceholderComponent], template: "<div class=\"flex flex-col hover:bg-[--rt-raised-background] cursor-pointer p-3\">\n  <div>\n    <div class=\"flex justify-between w-full mb-2\">\n      <a class=\"flex items-center gap-3\">\n        <span>ID: {{ property().id }}</span>\n      </a>\n    </div>\n    <div class=\"flex flex-col overflow-x-scroll scrollbar-hide\">\n      <div class=\"flex flex-row py-2\">\n        @if (property().media) {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            @defer {\n              <rolatech-thumbnail [src]=\"property().media[0].url\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n            } @placeholder {\n              <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n            }\n          </div>\n        } @else {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            <rolatech-image-placeholder></rolatech-image-placeholder>\n          </div>\n        }\n        <div class=\"flex w-full justify-between\">\n          <div class=\"flex justify-between w-full\">\n            <div class=\"flex flex-col\">\n              <div>{{ property().title }}</div>\n              <div class=\"inline-flex gap-1 mt-2\">\n                <div>\n                  <span class=\"mr-1\">{{ property().bedrooms }}</span>\n                  <span i18n>Bedrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ property().bathrooms }}</span>\n                  <span i18n>Bathrooms</span>\n                </div>\n                <div>\n                  <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\">\u00A3{{ property().price.toFixed(2) }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'rolatech-property-item', imports: [CommonModule, ThumbnailComponent, ImagePlaceholderComponent], template: "<div class=\"flex flex-col hover:bg-[--rt-raised-background] cursor-pointer p-3\">\n  <div>\n    <div class=\"flex justify-between w-full mb-2\">\n      <a class=\"flex items-center gap-3\">\n        <span>ID: {{ property().id }}</span>\n      </a>\n    </div>\n    <div class=\"flex flex-col overflow-x-scroll scrollbar-hide\">\n      <div class=\"flex flex-row py-2\">\n        @if (property().media) {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            @defer {\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        } @else {\n          <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n            <rolatech-image-placeholder></rolatech-image-placeholder>\n          </div>\n        }\n        <div class=\"flex w-full justify-between\">\n          <div class=\"flex justify-between w-full\">\n            <div class=\"flex flex-col\">\n              <div>{{ property().title }}</div>\n              <div class=\"inline-flex gap-1 mt-2\">\n                <div>\n                  <span class=\"mr-1\">{{ property().bedrooms }}</span>\n                  <span i18n>Bedrooms</span>\n                </div>\n                <div>\n                  <span class=\"mr-1\">{{ property().bathrooms }}</span>\n                  <span i18n>Bathrooms</span>\n                </div>\n                <div>\n                  <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\">\u00A3{{ property().price.toFixed(2) }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }] });
 
 // property-available.pipe.ts
@@ -1531,11 +1531,11 @@ class PropertySectionComponent {
         this.viewportScroller.scrollToAnchor(id);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertySectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertySectionComponent, isStandalone: true, selector: "rolatech-property-section", inputs: { section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: true, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, username: { classPropertyName: "username", publicName: "username", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (section(); as section) {\n  <div>\n    @if (section.title) {\n      <div class=\"py-3 flex items-center gap-3\">\n        <span class=\"h-4 w-1 bg-[--rt-brand-color] inline-block\"></span>\n        <span class=\"text-lg font-medium py-1\"> {{ section.title }}</span>\n      </div>\n    }\n    @if (section.description) {\n      <div>\n        {{ section.description }}\n      </div>\n    }\n    @if (section.media) {\n      <div class=\"w-80%\">\n        @for (item of section.media; track item) {\n          <div class=\"py-3\">\n            <rolatech-thumbnail\n              [src]=\"item.url\"\n              size=\"small\"\n              mode=\"full\"\n              [width]=\"item.width\"\n              [height]=\"item.height\"\n            ></rolatech-thumbnail>\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ThumbnailComponent, selector: "rolatech-thumbnail", inputs: ["src", "size", "mode", "ratio", "width", "height"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertySectionComponent, isStandalone: true, selector: "rolatech-property-section", inputs: { section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: true, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, username: { classPropertyName: "username", publicName: "username", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (section(); as section) {\n  <div>\n    @if (section.title) {\n      <div class=\"py-3 flex items-center gap-3\">\n        <span class=\"h-4 w-1 bg-[--rt-brand-color] inline-block\"></span>\n        <span class=\"text-lg font-medium py-1\"> {{ section.title }}</span>\n      </div>\n    }\n    @if (section.description) {\n      <div>\n        {{ section.description }}\n      </div>\n    }\n    @if (section.media) {\n      <div class=\"w-80%\">\n        @for (item of section.media; track item) {\n          <div class=\"py-3\">\n            <rolatech-thumbnail\n              [src]=\"item.url\"\n              size=\"small\"\n              mode=\"clip\"\n              [width]=\"item.width\"\n              [height]=\"item.height\"\n            ></rolatech-thumbnail>\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ThumbnailComponent, selector: "rolatech-thumbnail", inputs: ["src", "size", "mode", "ratio", "width", "height"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertySectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-property-section', imports: [CommonModule, ThumbnailComponent], encapsulation: ViewEncapsulation.None, template: "@if (section(); as section) {\n  <div>\n    @if (section.title) {\n      <div class=\"py-3 flex items-center gap-3\">\n        <span class=\"h-4 w-1 bg-[--rt-brand-color] inline-block\"></span>\n        <span class=\"text-lg font-medium py-1\"> {{ section.title }}</span>\n      </div>\n    }\n    @if (section.description) {\n      <div>\n        {{ section.description }}\n      </div>\n    }\n    @if (section.media) {\n      <div class=\"w-80%\">\n        @for (item of section.media; track item) {\n          <div class=\"py-3\">\n            <rolatech-thumbnail\n              [src]=\"item.url\"\n              size=\"small\"\n              mode=\"full\"\n              [width]=\"item.width\"\n              [height]=\"item.height\"\n            ></rolatech-thumbnail>\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n" }]
+            args: [{ selector: 'rolatech-property-section', imports: [CommonModule, ThumbnailComponent], encapsulation: ViewEncapsulation.None, template: "@if (section(); as section) {\n  <div>\n    @if (section.title) {\n      <div class=\"py-3 flex items-center gap-3\">\n        <span class=\"h-4 w-1 bg-[--rt-brand-color] inline-block\"></span>\n        <span class=\"text-lg font-medium py-1\"> {{ section.title }}</span>\n      </div>\n    }\n    @if (section.description) {\n      <div>\n        {{ section.description }}\n      </div>\n    }\n    @if (section.media) {\n      <div class=\"w-80%\">\n        @for (item of section.media; track item) {\n          <div class=\"py-3\">\n            <rolatech-thumbnail\n              [src]=\"item.url\"\n              size=\"small\"\n              mode=\"clip\"\n              [width]=\"item.width\"\n              [height]=\"item.height\"\n            ></rolatech-thumbnail>\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n" }]
         }] });
 
 class PropertyVideoComponent {
@@ -2392,11 +2392,11 @@ class PropertyViewingItemComponent {
     viewing = input.required(...(ngDevMode ? [{ debugName: "viewing" }] : []));
     status = PropertyViewingStatus;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyViewingItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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=\"full\"> </rolatech-thumbnail>\n              } @placeholder {\n                <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n              }\n            </div>\n          } @else {\n            <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n              <rolatech-image-placeholder></rolatech-image-placeholder>\n            </div>\n          }\n          <div class=\"flex w-full justify-between\">\n            <div class=\"flex justify-between w-full\">\n              <div class=\"flex flex-col\">\n                <div>{{ viewing().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\">\u00A3{{ viewing().item.price.toFixed(2) }}</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"] }], deferBlockDependencies: [() => [ThumbnailComponent]] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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\">\u00A3{{ viewing().item.price.toFixed(2) }}</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"] }], deferBlockDependencies: [() => [ThumbnailComponent]] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyViewingItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-property-viewing-item', imports: [MatIconModule, ThumbnailComponent, ImagePlaceholderComponent], 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=\"full\"> </rolatech-thumbnail>\n              } @placeholder {\n                <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n              }\n            </div>\n          } @else {\n            <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n              <rolatech-image-placeholder></rolatech-image-placeholder>\n            </div>\n          }\n          <div class=\"flex w-full justify-between\">\n            <div class=\"flex justify-between w-full\">\n              <div class=\"flex flex-col\">\n                <div>{{ viewing().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\">\u00A3{{ viewing().item.price.toFixed(2) }}</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], 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\">\u00A3{{ viewing().item.price.toFixed(2) }}</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n" }]
         }] });
 
 class PropertyViewingIndexComponent extends BaseComponent {
@@ -2778,7 +2778,7 @@ const propertyRoutes = [
         children: [
             {
                 path: '',
-                loadComponent: () => import('./rolatech-angular-property-property-index.component-DTZVWCgS.mjs').then((x) => x.PropertyIndexComponent),
+                loadComponent: () => import('./rolatech-angular-property-property-index.component-BdBG4cDL.mjs').then((x) => x.PropertyIndexComponent),
             },
         ],
     },
@@ -2843,8 +2843,8 @@ class PropertyManageIndexComponent {
     length = 100;
     pageSize = 15;
     pageSizeOptions = [5, 10, 25, 100];
-    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
     pageIndex = signal(0, ...(ngDevMode ? [{ debugName: "pageIndex" }] : []));
+    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
     meta;
     loading = false;
     ngOnInit() {
@@ -2953,7 +2953,7 @@ class PropertyManageIndexComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageIndexComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyManageIndexComponent, isStandalone: true, selector: "rolatech-property-manage-index", host: { properties: { "class.rolatech-property-manage-index": "this.hasClass" } }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "<rolatech-toolbar title=\"Properties\">\n  <div class=\"flex items-center gap-2\">\n    <button mat-icon-button (click)=\"toggleSearch()\">\n      <mat-icon>search</mat-icon>\n    </button>\n    <!-- <button mat-icon-button (click)=\"toggleView()\">\n      <mat-icon>{{ gridView ? 'view_list' : 'grid_on' }}</mat-icon>\n    </button> -->\n    <button mat-flat-button routerLink=\"./create\">\n      <mat-icon>add</mat-icon>\n      <span i18n>Add property</span>\n    </button>\n    <!-- <button mat-flat-button (click)=\"export()\" [disabled]=\"exporting\">\n      <mat-icon>download</mat-icon>\n      <span i18n>Export</span>\n    </button> -->\n    <button mat-flat-button (click)=\"export()\" [disabled]=\"exporting\" aria-label=\"Export CSV\">\n      @if (!exporting) {\n        Export CSV\n      } @else {\n        Exporting\u2026\n      }\n    </button>\n  </div>\n</rolatech-toolbar>\n<div class=\"p-2\">\n  <rolatech-search-bar\n    [(show)]=\"open\"\n    #searchBar\n    (search)=\"searchByText($event)\"\n    (close)=\"onCloseSearch()\"\n  ></rolatech-search-bar>\n</div>\n@if (loading) {\n  <div class=\"flex justify-center items-center\">\n    <rolatech-spinner></rolatech-spinner>\n  </div>\n} @else {\n  <div class=\"bg-[--rt-rasised-background] h-full\">\n    <!-- <rolatech-property-manage-filter></rolatech-property-manage-filter> -->\n    <div class=\"flex flex-wrap p-3 gap-3\">\n      @for (item of properties(); track $index) {\n        <rolatech-property-manage-item\n          [property]=\"item\"\n          routerLink=\"./{{ item.id }}/manage/info\"\n        ></rolatech-property-manage-item>\n      }\n    </div>\n  </div>\n}\n<mat-paginator\n  #paginator\n  [length]=\"length\"\n  [pageSize]=\"pageSize\"\n  [pageIndex]=\"pageIndex()\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  (page)=\"onPage($event)\"\n  hidePageSize\n  showFirstLastButtons\n>\n</mat-paginator>\n", styles: ["mat-form-field{width:100%}table{width:100%}td.mat-column-actions{text-align:right;max-width:64px;font-size:.8rem;padding:0 8px}.mat-mdc-header-cell.actions{text-align:right;max-width:64px;width:64px}.mat-mdc-cell:nth-last-child(2),.mat-mdc-header-cell:nth-last-child(2),.mat-mdc-footer-cell:nth-last-child(2){text-align:right;max-width:180px;width:180px}mat-cell:last-of-type,mat-header-cell:last-of-type,mat-footer-cell:last-of-type{text-align:right;padding-right:8px!important}rolatech-property-manage-index{display:flex;flex-direction:column;--rt-property-view-items-per-row: 1}@media (min-width: 600px){rolatech-property-manage-index{--rt-property-view-items-per-row: 2}}@media (min-width: 768px){rolatech-property-manage-index{--rt-property-view-items-per-row: 3}}@media (min-width: 1280px){rolatech-property-manage-index{--rt-property-view-items-per-row: 3}}@media (min-width: 1536px){rolatech-property-manage-index{--rt-property-view-items-per-row: 4}}@media (min-width: 1920px){rolatech-property-manage-index{--rt-property-view-items-per-row: 5}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i3$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: SpinnerComponent, selector: "rolatech-spinner", inputs: ["title"] }, { kind: "component", type: PropertyManageItemComponent, selector: "rolatech-property-manage-item", inputs: ["property", "thumbnail", "list"] }, { kind: "component", type: SearchBar, selector: "rolatech-search-bar", inputs: ["show"], outputs: ["showChange", "search", "close"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyManageIndexComponent, isStandalone: true, selector: "rolatech-property-manage-index", host: { properties: { "class.rolatech-property-manage-index": "this.hasClass" } }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "<rolatech-toolbar title=\"Properties\">\n  <div class=\"flex items-center gap-2\">\n    <button mat-icon-button (click)=\"toggleSearch()\">\n      <mat-icon>search</mat-icon>\n    </button>\n    <!-- <button mat-icon-button (click)=\"toggleView()\">\n      <mat-icon>{{ gridView ? 'view_list' : 'grid_on' }}</mat-icon>\n    </button> -->\n    <button mat-flat-button routerLink=\"./create\">\n      <mat-icon>add</mat-icon>\n      <span i18n>Add property</span>\n    </button>\n    <!-- <button mat-flat-button (click)=\"export()\" [disabled]=\"exporting\">\n      <mat-icon>download</mat-icon>\n      <span i18n>Export</span>\n    </button> -->\n    <button mat-flat-button (click)=\"export()\" [disabled]=\"exporting\" aria-label=\"Export CSV\">\n      @if (!exporting) {\n        Export CSV\n      } @else {\n        Exporting\u2026\n      }\n    </button>\n  </div>\n</rolatech-toolbar>\n<div class=\"p-2\">\n  <rolatech-search-bar\n    [(show)]=\"open\"\n    #searchBar\n    (search)=\"searchByText($event)\"\n    (close)=\"onCloseSearch()\"\n  ></rolatech-search-bar>\n</div>\n@if (loading) {\n  <div class=\"flex justify-center items-center\">\n    <rolatech-spinner></rolatech-spinner>\n  </div>\n} @else {\n  <div class=\"bg-[--rt-rasised-background] h-full\">\n    <!-- <rolatech-property-manage-filter></rolatech-property-manage-filter> -->\n    <div class=\"flex flex-wrap p-3 gap-3\">\n      @for (item of properties(); track $index) {\n        <rolatech-property-manage-item\n          [property]=\"item\"\n          routerLink=\"./{{ item.id }}/manage/info\"\n        ></rolatech-property-manage-item>\n      }\n    </div>\n  </div>\n}\n<mat-paginator\n  #paginator\n  [length]=\"length\"\n  [pageSize]=\"pageSize\"\n  [pageIndex]=\"pageIndex()\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  (page)=\"onPage($event)\"\n  hidePageSize\n  showFirstLastButtons\n>\n</mat-paginator>\n", styles: ["mat-form-field{width:100%}table{width:100%}td.mat-column-actions{text-align:right;max-width:64px;font-size:.8rem;padding:0 8px}.mat-mdc-header-cell.actions{text-align:right;max-width:64px;width:64px}.mat-mdc-cell:nth-last-child(2),.mat-mdc-header-cell:nth-last-child(2),.mat-mdc-footer-cell:nth-last-child(2){text-align:right;max-width:180px;width:180px}mat-cell:last-of-type,mat-header-cell:last-of-type,mat-footer-cell:last-of-type{text-align:right;padding-right:8px!important}rolatech-property-manage-index{display:flex;flex-direction:column;--rt-property-view-items-per-row: 1}@media (min-width: 600px){rolatech-property-manage-index{--rt-property-view-items-per-row: 2}}@media (min-width: 768px){rolatech-property-manage-index{--rt-property-view-items-per-row: 3}}@media (min-width: 1280px){rolatech-property-manage-index{--rt-property-view-items-per-row: 3}}@media (min-width: 1536px){rolatech-property-manage-index{--rt-property-view-items-per-row: 4}}@media (min-width: 1920px){rolatech-property-manage-index{--rt-property-view-items-per-row: 5}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$6.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: SpinnerComponent, selector: "rolatech-spinner", inputs: ["title"] }, { kind: "component", type: PropertyManageItemComponent, selector: "rolatech-property-manage-item", inputs: ["property", "thumbnail", "list"] }, { kind: "component", type: SearchBar, selector: "rolatech-search-bar", inputs: ["show"], outputs: ["showChange", "search", "close"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageIndexComponent, decorators: [{
             type: Component,
@@ -3683,7 +3683,7 @@ class PropertyManageFeaturesComponent extends BaseComponent {
         return binding;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageFeaturesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyManageFeaturesComponent, isStandalone: true, selector: "rolatech-property-manage-features", usesInheritance: true, ngImport: i0, template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Features\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <div>\n    @for (feature of features; track $index) {\n      <div>\n        <h4>{{ feature.name }}</h4>\n        @for (value of feature.values; track $index) {\n          <mat-checkbox\n            [checked]=\"selected[feature.id] ? selected[feature.id].includes(value.id) : false\"\n            (change)=\"toggleValue(feature.id, value.id, $event.checked)\"\n          >\n            {{ value.name }}\n          </mat-checkbox>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- @for (item of features; track item) {\n    <section class=\"example-section\">\n      <span class=\"example-list-section\">\n        <h4>{{ item.name }}</h4>\n        <mat-checkbox\n          class=\"example-margin\"\n          [checked]=\"item.selected\"\n          [indeterminate]=\"partiallyComplete(item)()\"\n          (change)=\"sectionChange(item, $event.checked)\"\n        >\n          {{ item.name }}\n        </mat-checkbox>\n      </span>\n      <div class=\"example-list-section\">\n        <div>\n          @for (value of item.values; track value; let i = $index) {\n            <mat-checkbox [checked]=\"value.selected\" (change)=\"sectionChange(item, $event.checked, i)\">\n              {{ value.name }}\n            </mat-checkbox>\n          }\n        </div>\n      </div>\n    </section>\n  } -->\n  <!-- <div class=\"px-3 mb-3\">\n    @for (item of features; track $index) {\n      <div class=\"text-xl font-bold py-2\">{{ item.name }}</div>\n      @for (value of item.values; track value; let i = $index) {\n        <mat-checkbox\n          class=\"text-lg font-medium\"\n          (click)=\"$event.stopPropagation()\"\n          [checked]=\"value.selected\"\n          (change)=\"sectionChange($event.checked, i)\"\n        >\n          {{ value.name }}\n        </mat-checkbox>\n      }\n    }\n  </div> -->\n  <button mat-flat-button (click)=\"save()\" i18n>Save</button>\n</rolatech-property-manage-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PropertyManageContentComponent, selector: "rolatech-property-manage-content" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$6.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyManageFeaturesComponent, isStandalone: true, selector: "rolatech-property-manage-features", usesInheritance: true, ngImport: i0, template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Features\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <div>\n    @for (feature of features; track $index) {\n      <div>\n        <h4>{{ feature.name }}</h4>\n        @for (value of feature.values; track $index) {\n          <mat-checkbox\n            [checked]=\"selected[feature.id] ? selected[feature.id].includes(value.id) : false\"\n            (change)=\"toggleValue(feature.id, value.id, $event.checked)\"\n          >\n            {{ value.name }}\n          </mat-checkbox>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- @for (item of features; track item) {\n    <section class=\"example-section\">\n      <span class=\"example-list-section\">\n        <h4>{{ item.name }}</h4>\n        <mat-checkbox\n          class=\"example-margin\"\n          [checked]=\"item.selected\"\n          [indeterminate]=\"partiallyComplete(item)()\"\n          (change)=\"sectionChange(item, $event.checked)\"\n        >\n          {{ item.name }}\n        </mat-checkbox>\n      </span>\n      <div class=\"example-list-section\">\n        <div>\n          @for (value of item.values; track value; let i = $index) {\n            <mat-checkbox [checked]=\"value.selected\" (change)=\"sectionChange(item, $event.checked, i)\">\n              {{ value.name }}\n            </mat-checkbox>\n          }\n        </div>\n      </div>\n    </section>\n  } -->\n  <!-- <div class=\"px-3 mb-3\">\n    @for (item of features; track $index) {\n      <div class=\"text-xl font-bold py-2\">{{ item.name }}</div>\n      @for (value of item.values; track value; let i = $index) {\n        <mat-checkbox\n          class=\"text-lg font-medium\"\n          (click)=\"$event.stopPropagation()\"\n          [checked]=\"value.selected\"\n          (change)=\"sectionChange($event.checked, i)\"\n        >\n          {{ value.name }}\n        </mat-checkbox>\n      }\n    }\n  </div> -->\n  <button mat-flat-button (click)=\"save()\" i18n>Save</button>\n</rolatech-property-manage-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PropertyManageContentComponent, selector: "rolatech-property-manage-content" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyManageFeaturesComponent, decorators: [{
             type: Component,
@@ -4612,7 +4612,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
 const propertyManageViewingsRoutes = [
     {
         path: '',
-        loadComponent: () => import('./rolatech-angular-property-property-manage-viewings-index.component-CKSwenNh.mjs').then((x) => x.PropertyManageViewingsIndexComponent),
+        loadComponent: () => import('./rolatech-angular-property-property-manage-viewings-index.component-BocKj8CB.mjs').then((x) => x.PropertyManageViewingsIndexComponent),
     },
     {
         path: ':id',
@@ -4638,11 +4638,11 @@ class LettingManageItem {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: LettingManageItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: LettingManageItem, isStandalone: true, selector: "rolatech-letting-manage-item", inputs: { letting: { classPropertyName: "letting", publicName: "letting", isSignal: true, isRequired: true, transformFunction: null }, thumbnail: { classPropertyName: "thumbnail", publicName: "thumbnail", isSignal: true, isRequired: false, transformFunction: null }, list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rolatech-letting-manage-item": "this.hasClass" } }, ngImport: i0, template: "<div\n  class=\"flex p-3 bg-[--rt-raised-background] hover:bg-[--rt-raised-background] cursor-pointer rounded-md\"\n  [ngClass]=\"list() ? 'w-full flex-row' : 'flex-col h-full'\"\n>\n  <div>\n    @if (letting().media) {\n    <div class=\"object-cover aspect-video rounded-lg\" [ngClass]=\"list() ? 'w-32 mr-3' : ''\">\n      @defer {\n      <rolatech-thumbnail [src]=\"letting().media ? letting().media[0].url : ''\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n      } @placeholder {\n      <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n      }\n    </div>\n    } @else {\n    <div class=\"object-cover aspect-video rounded-lg\" [ngClass]=\"list() ? 'w-32 mr-3' : ''\">\n      <rolatech-image-placeholder></rolatech-image-placeholder>\n    </div>\n    }\n  </div>\n\n  <div class=\"py-2\">\n    <div class=\"text-lg font-bold\">{{ letting().title }}</div>\n  </div>\n  <div class=\"flex-1\"></div>\n  <div class=\"\">\u00A3{{ letting().price.toFixed(2) }}</div>\n</div>\n", styles: ["rolatech-letting-manage-item{--rt-letting-view-item-margin: 16px;width:calc(100% / var(--rt-letting-view-items-per-row) - var(--rt-letting-view-item-margin) - .01px)}rolatech-letting-manage-item[list]{--rt-letting-view-items-per-row: 1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ImagePlaceholderComponent, selector: "rolatech-image-placeholder", inputs: ["ratio"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatMenuModule }], encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [ThumbnailComponent]] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: LettingManageItem, isStandalone: true, selector: "rolatech-letting-manage-item", inputs: { letting: { classPropertyName: "letting", publicName: "letting", isSignal: true, isRequired: true, transformFunction: null }, thumbnail: { classPropertyName: "thumbnail", publicName: "thumbnail", isSignal: true, isRequired: false, transformFunction: null }, list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rolatech-letting-manage-item": "this.hasClass" } }, ngImport: i0, template: "<div\n  class=\"flex p-3 bg-[--rt-raised-background] hover:bg-[--rt-raised-background] cursor-pointer rounded-md\"\n  [ngClass]=\"list() ? 'w-full flex-row' : 'flex-col h-full'\"\n>\n  <div>\n    @if (letting().media) {\n    <div class=\"object-cover aspect-video rounded-lg\" [ngClass]=\"list() ? 'w-32 mr-3' : ''\">\n      @defer {\n      <rolatech-thumbnail [src]=\"letting().media ? letting().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=\"object-cover aspect-video rounded-lg\" [ngClass]=\"list() ? 'w-32 mr-3' : ''\">\n      <rolatech-image-placeholder></rolatech-image-placeholder>\n    </div>\n    }\n  </div>\n\n  <div class=\"py-2\">\n    <div class=\"text-lg font-bold\">{{ letting().title }}</div>\n  </div>\n  <div class=\"flex-1\"></div>\n  <div class=\"\">\u00A3{{ letting().price.toFixed(2) }}</div>\n</div>\n", styles: ["rolatech-letting-manage-item{--rt-letting-view-item-margin: 16px;width:calc(100% / var(--rt-letting-view-items-per-row) - var(--rt-letting-view-item-margin) - .01px)}rolatech-letting-manage-item[list]{--rt-letting-view-items-per-row: 1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ImagePlaceholderComponent, selector: "rolatech-image-placeholder", inputs: ["ratio"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatMenuModule }], encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [ThumbnailComponent]] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: LettingManageItem, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-letting-manage-item', imports: [CommonModule, ThumbnailComponent, ImagePlaceholderComponent, MatButtonModule, MatMenuModule], encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"flex p-3 bg-[--rt-raised-background] hover:bg-[--rt-raised-background] cursor-pointer rounded-md\"\n  [ngClass]=\"list() ? 'w-full flex-row' : 'flex-col h-full'\"\n>\n  <div>\n    @if (letting().media) {\n    <div class=\"object-cover aspect-video rounded-lg\" [ngClass]=\"list() ? 'w-32 mr-3' : ''\">\n      @defer {\n      <rolatech-thumbnail [src]=\"letting().media ? letting().media[0].url : ''\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n      } @placeholder {\n      <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n      }\n    </div>\n    } @else {\n    <div class=\"object-cover aspect-video rounded-lg\" [ngClass]=\"list() ? 'w-32 mr-3' : ''\">\n      <rolatech-image-placeholder></rolatech-image-placeholder>\n    </div>\n    }\n  </div>\n\n  <div class=\"py-2\">\n    <div class=\"text-lg font-bold\">{{ letting().title }}</div>\n  </div>\n  <div class=\"flex-1\"></div>\n  <div class=\"\">\u00A3{{ letting().price.toFixed(2) }}</div>\n</div>\n", styles: ["rolatech-letting-manage-item{--rt-letting-view-item-margin: 16px;width:calc(100% / var(--rt-letting-view-items-per-row) - var(--rt-letting-view-item-margin) - .01px)}rolatech-letting-manage-item[list]{--rt-letting-view-items-per-row: 1}\n"] }]
+            args: [{ selector: 'rolatech-letting-manage-item', imports: [CommonModule, ThumbnailComponent, ImagePlaceholderComponent, MatButtonModule, MatMenuModule], encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"flex p-3 bg-[--rt-raised-background] hover:bg-[--rt-raised-background] cursor-pointer rounded-md\"\n  [ngClass]=\"list() ? 'w-full flex-row' : 'flex-col h-full'\"\n>\n  <div>\n    @if (letting().media) {\n    <div class=\"object-cover aspect-video rounded-lg\" [ngClass]=\"list() ? 'w-32 mr-3' : ''\">\n      @defer {\n      <rolatech-thumbnail [src]=\"letting().media ? letting().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=\"object-cover aspect-video rounded-lg\" [ngClass]=\"list() ? 'w-32 mr-3' : ''\">\n      <rolatech-image-placeholder></rolatech-image-placeholder>\n    </div>\n    }\n  </div>\n\n  <div class=\"py-2\">\n    <div class=\"text-lg font-bold\">{{ letting().title }}</div>\n  </div>\n  <div class=\"flex-1\"></div>\n  <div class=\"\">\u00A3{{ letting().price.toFixed(2) }}</div>\n</div>\n", styles: ["rolatech-letting-manage-item{--rt-letting-view-item-margin: 16px;width:calc(100% / var(--rt-letting-view-items-per-row) - var(--rt-letting-view-item-margin) - .01px)}rolatech-letting-manage-item[list]{--rt-letting-view-items-per-row: 1}\n"] }]
         }], ctorParameters: () => [], propDecorators: { hasClass: [{
                 type: HostBinding,
                 args: ['class.rolatech-letting-manage-item']
@@ -4650,8 +4650,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
 
 class LettingManageIndex {
     propertyService = inject(PropertyService);
+    propertySearchService = inject(PropertySearchService);
+    router = inject(Router);
+    destroyRef = inject(DestroyRef);
+    route = inject(ActivatedRoute);
     loading = false;
-    lettings;
+    lettings = signal([], ...(ngDevMode ? [{ debugName: "lettings" }] : []));
+    pageEvent;
+    length = 100;
+    pageSize = 15;
+    pageSizeOptions = [5, 10, 25, 100];
+    pageIndex = signal(0, ...(ngDevMode ? [{ debugName: "pageIndex" }] : []));
+    meta;
     ngOnInit() {
         this.find();
     }
@@ -4662,17 +4672,69 @@ class LettingManageIndex {
                 this.lettings = res.data;
                 this.loading = false;
             },
-            error: error => {
+            error: (error) => {
                 this.loading = false;
-            }
+            },
+        });
+        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));
+            return {
+                q: p.get('q') || undefined,
+                town: p.get('town') || undefined,
+                minBedrooms: p.get('minBedrooms') ? Number(p.get('minBedrooms')) : undefined,
+                maxBedrooms: p.get('maxBedrooms') ? Number(p.get('maxBedrooms')) : undefined,
+                minPrice: p.get('minPrice') ? Number(p.get('minPrice')) : undefined,
+                maxPrice: p.get('maxPrice') ? Number(p.get('maxPrice')) : undefined,
+                availableFrom: p.get('availableFrom') || undefined,
+                availableTo: p.get('availableTo') || undefined,
+                features: p.getAll('features')?.length ? p.getAll('features') : undefined,
+                page,
+                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;
+            return this.propertySearchService.search(params).pipe(finalize(() => (this.loading = false)));
+        }))
+            .subscribe({
+            next: (res) => {
+                this.lettings.set(res.data);
+                this.meta = res.meta;
+                this.length = res.meta.pagination.count;
+            },
+            error: () => {
+                this.lettings.set([]);
+                this.length = 0;
+            },
+        });
+        // // auto-unsubscribe on destroy
+        this.destroyRef.onDestroy(() => sub.unsubscribe());
+    }
+    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: "20.3.4", ngImport: i0, type: LettingManageIndex, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: LettingManageIndex, isStandalone: true, selector: "rolatech-letting-manage-index", ngImport: i0, template: "<rolatech-toolbar title=\"Lettings\"> </rolatech-toolbar>\n@if (loading) {\n<div class=\"flex justify-center items-center\">\n  <rolatech-spinner></rolatech-spinner>\n</div>\n} @else {\n<div class=\"bg-[--rt-rasised-background] h-full\">\n  <div class=\"flex flex-wrap p-3 gap-3\">\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    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"pageEvent = find($event)\"\n    hidePageSize\n    showFirstLastButtons\n  >\n  </mat-paginator> -->\n}\n", styles: ["rolatech-letting-manage-index{--rt-letting-view-items-per-row: 1}@media (min-width: 600px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 2}}@media (min-width: 768px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 3}}@media (min-width: 1280px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 3}}@media (min-width: 1536px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 4}}@media (min-width: 1920px){rolatech-letting-manage-index{--rt-letting-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: "component", type: SpinnerComponent, selector: "rolatech-spinner", inputs: ["title"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: LettingManageIndex, isStandalone: true, selector: "rolatech-letting-manage-index", ngImport: i0, template: "<rolatech-toolbar title=\"Lettings\"> </rolatech-toolbar>\n@if (loading) {\n<div class=\"flex justify-center items-center\">\n  <rolatech-spinner></rolatech-spinner>\n</div>\n} @else {\n<div class=\"bg-[--rt-rasised-background] h-full\">\n  <div class=\"flex flex-wrap p-3 gap-3\">\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{--rt-letting-view-items-per-row: 1}@media (min-width: 600px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 2}}@media (min-width: 768px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 3}}@media (min-width: 1280px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 3}}@media (min-width: 1536px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 4}}@media (min-width: 1920px){rolatech-letting-manage-index{--rt-letting-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: "component", type: SpinnerComponent, selector: "rolatech-spinner", inputs: ["title"] }, { 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: i1$6.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: LettingManageIndex, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-letting-manage-index', imports: [CommonModule, ToolbarComponent, SpinnerComponent, MatButtonModule, RouterLink, LettingManageItem], encapsulation: ViewEncapsulation.None, template: "<rolatech-toolbar title=\"Lettings\"> </rolatech-toolbar>\n@if (loading) {\n<div class=\"flex justify-center items-center\">\n  <rolatech-spinner></rolatech-spinner>\n</div>\n} @else {\n<div class=\"bg-[--rt-rasised-background] h-full\">\n  <div class=\"flex flex-wrap p-3 gap-3\">\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    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"pageEvent = find($event)\"\n    hidePageSize\n    showFirstLastButtons\n  >\n  </mat-paginator> -->\n}\n", styles: ["rolatech-letting-manage-index{--rt-letting-view-items-per-row: 1}@media (min-width: 600px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 2}}@media (min-width: 768px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 3}}@media (min-width: 1280px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 3}}@media (min-width: 1536px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 4}}@media (min-width: 1920px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 5}}\n"] }]
+            args: [{ selector: 'rolatech-letting-manage-index', imports: [
+                        CommonModule,
+                        ToolbarComponent,
+                        SpinnerComponent,
+                        MatButtonModule,
+                        RouterLink,
+                        LettingManageItem,
+                        MatPaginatorModule,
+                    ], encapsulation: ViewEncapsulation.None, template: "<rolatech-toolbar title=\"Lettings\"> </rolatech-toolbar>\n@if (loading) {\n<div class=\"flex justify-center items-center\">\n  <rolatech-spinner></rolatech-spinner>\n</div>\n} @else {\n<div class=\"bg-[--rt-rasised-background] h-full\">\n  <div class=\"flex flex-wrap p-3 gap-3\">\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{--rt-letting-view-items-per-row: 1}@media (min-width: 600px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 2}}@media (min-width: 768px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 3}}@media (min-width: 1280px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 3}}@media (min-width: 1536px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 4}}@media (min-width: 1920px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 5}}\n"] }]
         }] });
 
 class LettingActions {
@@ -5365,11 +5427,11 @@ class PropertyAgentViewingDetail extends BaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyAgentViewingDetail, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyAgentViewingDetail, isStandalone: true, selector: "rolatech-property-agent-viewing-detail", usesInheritance: true, ngImport: i0, template: "@if (viewing) {\n<rolatech-toolbar [title]=\"status[viewing.status]\" large link=\"../\"></rolatech-toolbar>\n<div class=\"px-4\">\n  <div>\n    <div class=\"text-lg font-bold py-2\" i18n>Viewer</div>\n    <hr class=\"mb-2\" />\n    <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n      <rolatech-rich-label label=\"Name\" [title]=\"name\"></rolatech-rich-label>\n      <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) { @if (item.date === viewing.viewingDate && item.time ===\n      viewing.viewingTime) {\n      <div class=\"ml-3\"><button mat-flat-button i18n disabled=\"\">Confirmed</button></div>\n      } } @if (!viewingTimeConfirmed) {\n      <div class=\"ml-3\"><button mat-flat-button (click)=\"confirmViewingTime(item)\" i18n>Confirm</button></div>\n      }\n    </div>\n    }\n  </div>\n  <!-- Introducing agent -->\n  @if (viewing.viewerCategory.toString() === 'AGENT') {\n  <div>\n    <div class=\"text-lg font-bold py-2\" i18n>Qualification</div>\n    <hr class=\"mb-2\" />\n    <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n      <!-- <rolatech-rich-label label=\"Move-in date\" [title]=\"viewing.startDate\"></rolatech-rich-label> -->\n      <rolatech-rich-label label=\"Tenancy duration\" [title]=\"viewing.tenancyDuration\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Number of tenants\" [title]=\"viewing.numberOfTenants\"></rolatech-rich-label>\n    </div>\n    <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n      <rolatech-rich-label label=\"Employment status\" [title]=\"employmentStatus[viewing.employmentStatus]\"></rolatech-rich-label>\n      <!-- <rolatech-rich-label label=\"Employer\" [title]=\"viewing.startDate\"></rolatech-rich-label> -->\n      <rolatech-rich-label label=\"Annual income\" [title]=\"viewing.income\"></rolatech-rich-label>\n    </div>\n  </div>\n  }\n\n  <div>\n    <div class=\"text-lg font-bold py-2\" i18n>Property details</div>\n    <hr class=\"mb-2\" />\n    @if (property) {\n    <div class=\"flex items-center py-2\">\n      <div class=\"min-w-24 w-24 object-cover aspect-video rounded-md mr-3\">\n        @defer {\n        <rolatech-thumbnail [src]=\"property.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n        } @placeholder {\n        <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n        }\n      </div>\n      <div class=\"flex w-full justify-between\">\n        <div class=\"flex justify-between w-full\">\n          <div class=\"flex flex-col\">\n            <div>{{ property.title }}</div>\n            <div class=\"inline-flex gap-1 mt-2\">\n              <div>\n                <span class=\"mr-1\">{{ property.bedrooms }}</span>\n                <span i18n>Bedrooms</span>\n              </div>\n              <div>\n                <span class=\"mr-1\">{{ property.bathrooms }}</span>\n                <span i18n>Bathrooms</span>\n              </div>\n              <div>\n                <span class=\"mr-1\">{{ property.receptions }}</span>\n                <span i18n>Receptions</span>\n              </div>\n            </div>\n          </div>\n          <div class=\"text-right\">\n            <div class=\"text-sm\">\u00A3{{ property.price.toFixed(2) }}</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"] }], deferBlockDependencies: [() => [ThumbnailComponent]] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyAgentViewingDetail, isStandalone: true, selector: "rolatech-property-agent-viewing-detail", usesInheritance: true, ngImport: i0, template: "@if (viewing) {\n<rolatech-toolbar [title]=\"status[viewing.status]\" large link=\"../\"></rolatech-toolbar>\n<div class=\"px-4\">\n  <div>\n    <div class=\"text-lg font-bold py-2\" i18n>Viewer</div>\n    <hr class=\"mb-2\" />\n    <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n      <rolatech-rich-label label=\"Name\" [title]=\"name\"></rolatech-rich-label>\n    </div>\n  </div>\n  <div>\n    <div class=\"text-lg font-bold py-2\" i18n>Proposed times</div>\n    <hr class=\"mb-2\" />\n    @for (item of viewing.proposedSlots; track $index) {\n    <div class=\"flex flex-row items-center gap-3 py-3\">\n      <rolatech-rich-label label=\"Date\" [title]=\"item.date\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Time\" [title]=\"item.time\"></rolatech-rich-label>\n      @if (viewing.viewingDate && viewing.viewingTime) { @if (item.date === viewing.viewingDate && item.time ===\n      viewing.viewingTime) {\n      <div class=\"ml-3\"><button mat-flat-button i18n disabled=\"\">Confirmed</button></div>\n      } } @if (!viewingTimeConfirmed) {\n      <div class=\"ml-3\"><button mat-flat-button (click)=\"confirmViewingTime(item)\" i18n>Confirm</button></div>\n      }\n    </div>\n    }\n  </div>\n  <!-- Introducing agent -->\n  @if (viewing.viewerCategory.toString() === 'AGENT') {\n  <div>\n    <div class=\"text-lg font-bold py-2\" i18n>Qualification</div>\n    <hr class=\"mb-2\" />\n    <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n      <!-- <rolatech-rich-label label=\"Move-in date\" [title]=\"viewing.startDate\"></rolatech-rich-label> -->\n      <rolatech-rich-label label=\"Tenancy duration\" [title]=\"viewing.tenancyDuration\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Number of tenants\" [title]=\"viewing.numberOfTenants\"></rolatech-rich-label>\n    </div>\n    <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n      <rolatech-rich-label label=\"Employment status\" [title]=\"employmentStatus[viewing.employmentStatus]\"></rolatech-rich-label>\n      <!-- <rolatech-rich-label label=\"Employer\" [title]=\"viewing.startDate\"></rolatech-rich-label> -->\n      <rolatech-rich-label label=\"Annual income\" [title]=\"viewing.income\"></rolatech-rich-label>\n    </div>\n  </div>\n  }\n\n  <div>\n    <div class=\"text-lg font-bold py-2\" i18n>Property details</div>\n    <hr class=\"mb-2\" />\n    @if (property) {\n    <div class=\"flex items-center py-2\">\n      <div class=\"min-w-24 w-24 object-cover aspect-video rounded-md mr-3\">\n        @defer {\n        <rolatech-thumbnail [src]=\"property.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n        } @placeholder {\n        <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n        }\n      </div>\n      <div class=\"flex w-full justify-between\">\n        <div class=\"flex justify-between w-full\">\n          <div class=\"flex flex-col\">\n            <div>{{ property.title }}</div>\n            <div class=\"inline-flex gap-1 mt-2\">\n              <div>\n                <span class=\"mr-1\">{{ property.bedrooms }}</span>\n                <span i18n>Bedrooms</span>\n              </div>\n              <div>\n                <span class=\"mr-1\">{{ property.bathrooms }}</span>\n                <span i18n>Bathrooms</span>\n              </div>\n              <div>\n                <span class=\"mr-1\">{{ property.receptions }}</span>\n                <span i18n>Receptions</span>\n              </div>\n            </div>\n          </div>\n          <div class=\"text-right\">\n            <div class=\"text-sm\">\u00A3{{ property.price.toFixed(2) }}</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"] }], deferBlockDependencies: [() => [ThumbnailComponent]] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyAgentViewingDetail, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-property-agent-viewing-detail', imports: [CommonModule, ToolbarComponent, RichLabelComponent, ThumbnailComponent, MatButtonModule], template: "@if (viewing) {\n<rolatech-toolbar [title]=\"status[viewing.status]\" large link=\"../\"></rolatech-toolbar>\n<div class=\"px-4\">\n  <div>\n    <div class=\"text-lg font-bold py-2\" i18n>Viewer</div>\n    <hr class=\"mb-2\" />\n    <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n      <rolatech-rich-label label=\"Name\" [title]=\"name\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Email\" [title]=\"viewing.email\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Phone\" [title]=\"viewing.phone\"></rolatech-rich-label>\n    </div>\n  </div>\n  <div>\n    <div class=\"text-lg font-bold py-2\" i18n>Proposed times</div>\n    <hr class=\"mb-2\" />\n    @for (item of viewing.proposedSlots; track $index) {\n    <div class=\"flex flex-row items-center gap-3 py-3\">\n      <rolatech-rich-label label=\"Date\" [title]=\"item.date\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Time\" [title]=\"item.time\"></rolatech-rich-label>\n      @if (viewing.viewingDate && viewing.viewingTime) { @if (item.date === viewing.viewingDate && item.time ===\n      viewing.viewingTime) {\n      <div class=\"ml-3\"><button mat-flat-button i18n disabled=\"\">Confirmed</button></div>\n      } } @if (!viewingTimeConfirmed) {\n      <div class=\"ml-3\"><button mat-flat-button (click)=\"confirmViewingTime(item)\" i18n>Confirm</button></div>\n      }\n    </div>\n    }\n  </div>\n  <!-- Introducing agent -->\n  @if (viewing.viewerCategory.toString() === 'AGENT') {\n  <div>\n    <div class=\"text-lg font-bold py-2\" i18n>Qualification</div>\n    <hr class=\"mb-2\" />\n    <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n      <!-- <rolatech-rich-label label=\"Move-in date\" [title]=\"viewing.startDate\"></rolatech-rich-label> -->\n      <rolatech-rich-label label=\"Tenancy duration\" [title]=\"viewing.tenancyDuration\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Number of tenants\" [title]=\"viewing.numberOfTenants\"></rolatech-rich-label>\n    </div>\n    <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n      <rolatech-rich-label label=\"Employment status\" [title]=\"employmentStatus[viewing.employmentStatus]\"></rolatech-rich-label>\n      <!-- <rolatech-rich-label label=\"Employer\" [title]=\"viewing.startDate\"></rolatech-rich-label> -->\n      <rolatech-rich-label label=\"Annual income\" [title]=\"viewing.income\"></rolatech-rich-label>\n    </div>\n  </div>\n  }\n\n  <div>\n    <div class=\"text-lg font-bold py-2\" i18n>Property details</div>\n    <hr class=\"mb-2\" />\n    @if (property) {\n    <div class=\"flex items-center py-2\">\n      <div class=\"min-w-24 w-24 object-cover aspect-video rounded-md mr-3\">\n        @defer {\n        <rolatech-thumbnail [src]=\"property.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n        } @placeholder {\n        <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n        }\n      </div>\n      <div class=\"flex w-full justify-between\">\n        <div class=\"flex justify-between w-full\">\n          <div class=\"flex flex-col\">\n            <div>{{ property.title }}</div>\n            <div class=\"inline-flex gap-1 mt-2\">\n              <div>\n                <span class=\"mr-1\">{{ property.bedrooms }}</span>\n                <span i18n>Bedrooms</span>\n              </div>\n              <div>\n                <span class=\"mr-1\">{{ property.bathrooms }}</span>\n                <span i18n>Bathrooms</span>\n              </div>\n              <div>\n                <span class=\"mr-1\">{{ property.receptions }}</span>\n                <span i18n>Receptions</span>\n              </div>\n            </div>\n          </div>\n          <div class=\"text-right\">\n            <div class=\"text-sm\">\u00A3{{ property.price.toFixed(2) }}</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-agent-viewing-detail', imports: [CommonModule, ToolbarComponent, RichLabelComponent, ThumbnailComponent, MatButtonModule], template: "@if (viewing) {\n<rolatech-toolbar [title]=\"status[viewing.status]\" large link=\"../\"></rolatech-toolbar>\n<div class=\"px-4\">\n  <div>\n    <div class=\"text-lg font-bold py-2\" i18n>Viewer</div>\n    <hr class=\"mb-2\" />\n    <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n      <rolatech-rich-label label=\"Name\" [title]=\"name\"></rolatech-rich-label>\n    </div>\n  </div>\n  <div>\n    <div class=\"text-lg font-bold py-2\" i18n>Proposed times</div>\n    <hr class=\"mb-2\" />\n    @for (item of viewing.proposedSlots; track $index) {\n    <div class=\"flex flex-row items-center gap-3 py-3\">\n      <rolatech-rich-label label=\"Date\" [title]=\"item.date\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Time\" [title]=\"item.time\"></rolatech-rich-label>\n      @if (viewing.viewingDate && viewing.viewingTime) { @if (item.date === viewing.viewingDate && item.time ===\n      viewing.viewingTime) {\n      <div class=\"ml-3\"><button mat-flat-button i18n disabled=\"\">Confirmed</button></div>\n      } } @if (!viewingTimeConfirmed) {\n      <div class=\"ml-3\"><button mat-flat-button (click)=\"confirmViewingTime(item)\" i18n>Confirm</button></div>\n      }\n    </div>\n    }\n  </div>\n  <!-- Introducing agent -->\n  @if (viewing.viewerCategory.toString() === 'AGENT') {\n  <div>\n    <div class=\"text-lg font-bold py-2\" i18n>Qualification</div>\n    <hr class=\"mb-2\" />\n    <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n      <!-- <rolatech-rich-label label=\"Move-in date\" [title]=\"viewing.startDate\"></rolatech-rich-label> -->\n      <rolatech-rich-label label=\"Tenancy duration\" [title]=\"viewing.tenancyDuration\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Number of tenants\" [title]=\"viewing.numberOfTenants\"></rolatech-rich-label>\n    </div>\n    <div class=\"flex flex-col md:flex-row gap-1 md:gap-3\">\n      <rolatech-rich-label label=\"Employment status\" [title]=\"employmentStatus[viewing.employmentStatus]\"></rolatech-rich-label>\n      <!-- <rolatech-rich-label label=\"Employer\" [title]=\"viewing.startDate\"></rolatech-rich-label> -->\n      <rolatech-rich-label label=\"Annual income\" [title]=\"viewing.income\"></rolatech-rich-label>\n    </div>\n  </div>\n  }\n\n  <div>\n    <div class=\"text-lg font-bold py-2\" i18n>Property details</div>\n    <hr class=\"mb-2\" />\n    @if (property) {\n    <div class=\"flex items-center py-2\">\n      <div class=\"min-w-24 w-24 object-cover aspect-video rounded-md mr-3\">\n        @defer {\n        <rolatech-thumbnail [src]=\"property.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n        } @placeholder {\n        <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n        }\n      </div>\n      <div class=\"flex w-full justify-between\">\n        <div class=\"flex justify-between w-full\">\n          <div class=\"flex flex-col\">\n            <div>{{ property.title }}</div>\n            <div class=\"inline-flex gap-1 mt-2\">\n              <div>\n                <span class=\"mr-1\">{{ property.bedrooms }}</span>\n                <span i18n>Bedrooms</span>\n              </div>\n              <div>\n                <span class=\"mr-1\">{{ property.bathrooms }}</span>\n                <span i18n>Bathrooms</span>\n              </div>\n              <div>\n                <span class=\"mr-1\">{{ property.receptions }}</span>\n                <span i18n>Receptions</span>\n              </div>\n            </div>\n          </div>\n          <div class=\"text-right\">\n            <div class=\"text-sm\">\u00A3{{ property.price.toFixed(2) }}</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 propertyAgentViewingRoutes = [
@@ -5472,11 +5534,11 @@ class PropertyAgentOfferDetail extends BaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyAgentOfferDetail, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyAgentOfferDetail, isStandalone: true, selector: "rolatech-property-agent-offer-detail", usesInheritance: true, ngImport: i0, template: "@if (offer) {\n<rolatech-toolbar [title]=\"status[offer.status]\" large link=\"../\">\n  @if (offer.status.toString() === 'CREATED') {\n  <button mat-flat-button (click)=\"accept()\" i18n>Accept</button>\n  <button mat-flat-button (click)=\"counter()\" i18n>Counter offer</button>\n  <button mat-button (click)=\"reject()\" i18n>Reject</button>\n  }\n  <button mat-flat-button (click)=\"createInvoice()\" i18n>Create invoice</button>\n\n  <!-- create invoice -->\n  @if (offer.status.toString() === 'ACCEPTED') {\n  <button mat-flat-button (click)=\"createInvoice()\" i18n>Create invoice</button>\n  }\n  <!-- References -->\n  @if (offer.status.toString() === 'REFERENCES_PASSED') {\n  <button mat-flat-button (click)=\"createInvoice()\" i18n>Create invoice</button>\n  } @if (offer.status.toString() === 'REFERENCES_FAILED') {\n  <button mat-flat-button (click)=\"createInvoice()\" i18n>Create invoice</button>\n  }\n</rolatech-toolbar>\n<div class=\"px-4\">\n  <div>\n    <div class=\"text-lg font-bold py-2\">Viewer</div>\n    <hr class=\"mb-2\" />\n    <div class=\"flex flex-col md:flex-row gap-1 md:gap-4\">\n      <rolatech-rich-label label=\"Name\" [title]=\"name\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Email\" [title]=\"offer.email\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Phone\" [title]=\"offer.phone\"></rolatech-rich-label>\n    </div>\n  </div>\n  <div>\n    <div class=\"text-lg font-bold py-2\">Qualification</div>\n    <hr class=\"mb-2\" />\n    <div class=\"flex flex-col md:flex-row gap-1 md:gap-4\">\n      <rolatech-rich-label label=\"Move-in date\" [title]=\"offer.startDate\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Tenancy duration\" [title]=\"offer.tenancyDuration\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Number of tenants\" [title]=\"offer.numberOfTenants\"></rolatech-rich-label>\n    </div>\n    <div class=\"flex flex-col md:flex-row gap-1 md:gap-4\">\n      <rolatech-rich-label label=\"Employment status\" [title]=\"employmentStatus[offer.employmentStatus]\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Employer\" [title]=\"offer.startDate\"></rolatech-rich-label>\n      @if (offer.income) {\n      <rolatech-rich-label label=\"Annual income\" [title]=\"offer.income\"></rolatech-rich-label>\n      }\n    </div>\n  </div>\n  <div>\n    <div class=\"text-lg font-bold py-2\">Property details</div>\n    <hr class=\"mb-2\" />\n    <div class=\"flex items-center py-2\">\n      <div class=\"min-w-24 w-24 object-cover aspect-video rounded-md mr-3\">\n        @defer {\n        <rolatech-thumbnail [src]=\"offer.item.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n        } @placeholder {\n        <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n        }\n      </div>\n      <div class=\"flex w-full justify-between\">\n        <div class=\"flex justify-between w-full\">\n          <div class=\"flex flex-col\">\n            <div>{{ offer.item.title }}</div>\n            <div class=\"inline-flex gap-1 mt-2\">\n              <div>\n                <span class=\"mr-1\">{{ offer.item.bedrooms }}</span>\n                <span i18n>Bedrooms</span>\n              </div>\n              <div>\n                <span class=\"mr-1\">{{ offer.item.bathrooms }}</span>\n                <span i18n>Bathrooms</span>\n              </div>\n              <div>\n                <span class=\"mr-1\">{{ offer.item.receptions }}</span>\n                <span i18n>Receptions</span>\n              </div>\n            </div>\n          </div>\n          <div class=\"text-right\">\n            <div class=\"text-sm\">\u00A3{{ offer.item.amount.toFixed(2) }}</div>\n          </div>\n        </div>\n      </div>\n      <div class=\"hidden md:flex flex-col px-3\"></div>\n    </div>\n  </div>\n\n  <div>\n    <div class=\"text-lg font-bold py-2\">Viewing agent</div>\n    <hr class=\"mb-2\" />\n    @if (agent) {\n    <div>\n      <rolatech-rich-label label=\"Move-in date\" [title]=\"offer.startDate\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Tenancy duration\" [title]=\"offer.tenancyDuration\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Phone\" [title]=\"agent.phone\"></rolatech-rich-label>\n    </div>\n    }\n  </div>\n</div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: RichLabelComponent, selector: "rolatech-rich-label", inputs: ["label", "title"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], deferBlockDependencies: [() => [ThumbnailComponent]] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PropertyAgentOfferDetail, isStandalone: true, selector: "rolatech-property-agent-offer-detail", usesInheritance: true, ngImport: i0, template: "@if (offer) {\n<rolatech-toolbar [title]=\"status[offer.status]\" large link=\"../\">\n  @if (offer.status.toString() === 'CREATED') {\n  <button mat-flat-button (click)=\"accept()\" i18n>Accept</button>\n  <button mat-flat-button (click)=\"counter()\" i18n>Counter offer</button>\n  <button mat-button (click)=\"reject()\" i18n>Reject</button>\n  }\n  <button mat-flat-button (click)=\"createInvoice()\" i18n>Create invoice</button>\n\n  <!-- create invoice -->\n  @if (offer.status.toString() === 'ACCEPTED') {\n  <button mat-flat-button (click)=\"createInvoice()\" i18n>Create invoice</button>\n  }\n  <!-- References -->\n  @if (offer.status.toString() === 'REFERENCES_PASSED') {\n  <button mat-flat-button (click)=\"createInvoice()\" i18n>Create invoice</button>\n  } @if (offer.status.toString() === 'REFERENCES_FAILED') {\n  <button mat-flat-button (click)=\"createInvoice()\" i18n>Create invoice</button>\n  }\n</rolatech-toolbar>\n<div class=\"px-4\">\n  <div>\n    <div class=\"text-lg font-bold py-2\">Viewer</div>\n    <hr class=\"mb-2\" />\n    <div class=\"flex flex-col md:flex-row gap-1 md:gap-4\">\n      <rolatech-rich-label label=\"Name\" [title]=\"name\"></rolatech-rich-label>\n    </div>\n  </div>\n  <div>\n    <div class=\"text-lg font-bold py-2\">Qualification</div>\n    <hr class=\"mb-2\" />\n    <div class=\"flex flex-col md:flex-row gap-1 md:gap-4\">\n      <rolatech-rich-label label=\"Move-in date\" [title]=\"offer.startDate\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Tenancy duration\" [title]=\"offer.tenancyDuration\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Number of tenants\" [title]=\"offer.numberOfTenants\"></rolatech-rich-label>\n    </div>\n    <div class=\"flex flex-col md:flex-row gap-1 md:gap-4\">\n      <rolatech-rich-label label=\"Employment status\" [title]=\"employmentStatus[offer.employmentStatus]\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Employer\" [title]=\"offer.startDate\"></rolatech-rich-label>\n      @if (offer.income) {\n      <rolatech-rich-label label=\"Annual income\" [title]=\"offer.income\"></rolatech-rich-label>\n      }\n    </div>\n  </div>\n  <div>\n    <div class=\"text-lg font-bold py-2\">Property details</div>\n    <hr class=\"mb-2\" />\n    <div class=\"flex items-center py-2\">\n      <div class=\"min-w-24 w-24 object-cover aspect-video rounded-md mr-3\">\n        @defer {\n        <rolatech-thumbnail [src]=\"offer.item.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n        } @placeholder {\n        <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n        }\n      </div>\n      <div class=\"flex w-full justify-between\">\n        <div class=\"flex justify-between w-full\">\n          <div class=\"flex flex-col\">\n            <div>{{ offer.item.title }}</div>\n            <div class=\"inline-flex gap-1 mt-2\">\n              <div>\n                <span class=\"mr-1\">{{ offer.item.bedrooms }}</span>\n                <span i18n>Bedrooms</span>\n              </div>\n              <div>\n                <span class=\"mr-1\">{{ offer.item.bathrooms }}</span>\n                <span i18n>Bathrooms</span>\n              </div>\n              <div>\n                <span class=\"mr-1\">{{ offer.item.receptions }}</span>\n                <span i18n>Receptions</span>\n              </div>\n            </div>\n          </div>\n          <div class=\"text-right\">\n            <div class=\"text-sm\">\u00A3{{ offer.item.amount.toFixed(2) }}</div>\n          </div>\n        </div>\n      </div>\n      <div class=\"hidden md:flex flex-col px-3\"></div>\n    </div>\n  </div>\n\n  <div>\n    <div class=\"text-lg font-bold py-2\">Viewing agent</div>\n    <hr class=\"mb-2\" />\n    @if (agent) {\n    <div>\n      <rolatech-rich-label label=\"Move-in date\" [title]=\"offer.startDate\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Tenancy duration\" [title]=\"offer.tenancyDuration\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Phone\" [title]=\"agent.phone\"></rolatech-rich-label>\n    </div>\n    }\n  </div>\n</div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: RichLabelComponent, selector: "rolatech-rich-label", inputs: ["label", "title"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], deferBlockDependencies: [() => [ThumbnailComponent]] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PropertyAgentOfferDetail, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-property-agent-offer-detail', imports: [CommonModule, ToolbarComponent, RichLabelComponent, ThumbnailComponent, MatButtonModule], template: "@if (offer) {\n<rolatech-toolbar [title]=\"status[offer.status]\" large link=\"../\">\n  @if (offer.status.toString() === 'CREATED') {\n  <button mat-flat-button (click)=\"accept()\" i18n>Accept</button>\n  <button mat-flat-button (click)=\"counter()\" i18n>Counter offer</button>\n  <button mat-button (click)=\"reject()\" i18n>Reject</button>\n  }\n  <button mat-flat-button (click)=\"createInvoice()\" i18n>Create invoice</button>\n\n  <!-- create invoice -->\n  @if (offer.status.toString() === 'ACCEPTED') {\n  <button mat-flat-button (click)=\"createInvoice()\" i18n>Create invoice</button>\n  }\n  <!-- References -->\n  @if (offer.status.toString() === 'REFERENCES_PASSED') {\n  <button mat-flat-button (click)=\"createInvoice()\" i18n>Create invoice</button>\n  } @if (offer.status.toString() === 'REFERENCES_FAILED') {\n  <button mat-flat-button (click)=\"createInvoice()\" i18n>Create invoice</button>\n  }\n</rolatech-toolbar>\n<div class=\"px-4\">\n  <div>\n    <div class=\"text-lg font-bold py-2\">Viewer</div>\n    <hr class=\"mb-2\" />\n    <div class=\"flex flex-col md:flex-row gap-1 md:gap-4\">\n      <rolatech-rich-label label=\"Name\" [title]=\"name\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Email\" [title]=\"offer.email\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Phone\" [title]=\"offer.phone\"></rolatech-rich-label>\n    </div>\n  </div>\n  <div>\n    <div class=\"text-lg font-bold py-2\">Qualification</div>\n    <hr class=\"mb-2\" />\n    <div class=\"flex flex-col md:flex-row gap-1 md:gap-4\">\n      <rolatech-rich-label label=\"Move-in date\" [title]=\"offer.startDate\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Tenancy duration\" [title]=\"offer.tenancyDuration\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Number of tenants\" [title]=\"offer.numberOfTenants\"></rolatech-rich-label>\n    </div>\n    <div class=\"flex flex-col md:flex-row gap-1 md:gap-4\">\n      <rolatech-rich-label label=\"Employment status\" [title]=\"employmentStatus[offer.employmentStatus]\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Employer\" [title]=\"offer.startDate\"></rolatech-rich-label>\n      @if (offer.income) {\n      <rolatech-rich-label label=\"Annual income\" [title]=\"offer.income\"></rolatech-rich-label>\n      }\n    </div>\n  </div>\n  <div>\n    <div class=\"text-lg font-bold py-2\">Property details</div>\n    <hr class=\"mb-2\" />\n    <div class=\"flex items-center py-2\">\n      <div class=\"min-w-24 w-24 object-cover aspect-video rounded-md mr-3\">\n        @defer {\n        <rolatech-thumbnail [src]=\"offer.item.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n        } @placeholder {\n        <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n        }\n      </div>\n      <div class=\"flex w-full justify-between\">\n        <div class=\"flex justify-between w-full\">\n          <div class=\"flex flex-col\">\n            <div>{{ offer.item.title }}</div>\n            <div class=\"inline-flex gap-1 mt-2\">\n              <div>\n                <span class=\"mr-1\">{{ offer.item.bedrooms }}</span>\n                <span i18n>Bedrooms</span>\n              </div>\n              <div>\n                <span class=\"mr-1\">{{ offer.item.bathrooms }}</span>\n                <span i18n>Bathrooms</span>\n              </div>\n              <div>\n                <span class=\"mr-1\">{{ offer.item.receptions }}</span>\n                <span i18n>Receptions</span>\n              </div>\n            </div>\n          </div>\n          <div class=\"text-right\">\n            <div class=\"text-sm\">\u00A3{{ offer.item.amount.toFixed(2) }}</div>\n          </div>\n        </div>\n      </div>\n      <div class=\"hidden md:flex flex-col px-3\"></div>\n    </div>\n  </div>\n\n  <div>\n    <div class=\"text-lg font-bold py-2\">Viewing agent</div>\n    <hr class=\"mb-2\" />\n    @if (agent) {\n    <div>\n      <rolatech-rich-label label=\"Move-in date\" [title]=\"offer.startDate\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Tenancy duration\" [title]=\"offer.tenancyDuration\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Phone\" [title]=\"agent.phone\"></rolatech-rich-label>\n    </div>\n    }\n  </div>\n</div>\n}\n" }]
+            args: [{ selector: 'rolatech-property-agent-offer-detail', imports: [CommonModule, ToolbarComponent, RichLabelComponent, ThumbnailComponent, MatButtonModule], template: "@if (offer) {\n<rolatech-toolbar [title]=\"status[offer.status]\" large link=\"../\">\n  @if (offer.status.toString() === 'CREATED') {\n  <button mat-flat-button (click)=\"accept()\" i18n>Accept</button>\n  <button mat-flat-button (click)=\"counter()\" i18n>Counter offer</button>\n  <button mat-button (click)=\"reject()\" i18n>Reject</button>\n  }\n  <button mat-flat-button (click)=\"createInvoice()\" i18n>Create invoice</button>\n\n  <!-- create invoice -->\n  @if (offer.status.toString() === 'ACCEPTED') {\n  <button mat-flat-button (click)=\"createInvoice()\" i18n>Create invoice</button>\n  }\n  <!-- References -->\n  @if (offer.status.toString() === 'REFERENCES_PASSED') {\n  <button mat-flat-button (click)=\"createInvoice()\" i18n>Create invoice</button>\n  } @if (offer.status.toString() === 'REFERENCES_FAILED') {\n  <button mat-flat-button (click)=\"createInvoice()\" i18n>Create invoice</button>\n  }\n</rolatech-toolbar>\n<div class=\"px-4\">\n  <div>\n    <div class=\"text-lg font-bold py-2\">Viewer</div>\n    <hr class=\"mb-2\" />\n    <div class=\"flex flex-col md:flex-row gap-1 md:gap-4\">\n      <rolatech-rich-label label=\"Name\" [title]=\"name\"></rolatech-rich-label>\n    </div>\n  </div>\n  <div>\n    <div class=\"text-lg font-bold py-2\">Qualification</div>\n    <hr class=\"mb-2\" />\n    <div class=\"flex flex-col md:flex-row gap-1 md:gap-4\">\n      <rolatech-rich-label label=\"Move-in date\" [title]=\"offer.startDate\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Tenancy duration\" [title]=\"offer.tenancyDuration\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Number of tenants\" [title]=\"offer.numberOfTenants\"></rolatech-rich-label>\n    </div>\n    <div class=\"flex flex-col md:flex-row gap-1 md:gap-4\">\n      <rolatech-rich-label label=\"Employment status\" [title]=\"employmentStatus[offer.employmentStatus]\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Employer\" [title]=\"offer.startDate\"></rolatech-rich-label>\n      @if (offer.income) {\n      <rolatech-rich-label label=\"Annual income\" [title]=\"offer.income\"></rolatech-rich-label>\n      }\n    </div>\n  </div>\n  <div>\n    <div class=\"text-lg font-bold py-2\">Property details</div>\n    <hr class=\"mb-2\" />\n    <div class=\"flex items-center py-2\">\n      <div class=\"min-w-24 w-24 object-cover aspect-video rounded-md mr-3\">\n        @defer {\n        <rolatech-thumbnail [src]=\"offer.item.media[0].url\" size=\"medium\" mode=\"clip\"> </rolatech-thumbnail>\n        } @placeholder {\n        <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n        }\n      </div>\n      <div class=\"flex w-full justify-between\">\n        <div class=\"flex justify-between w-full\">\n          <div class=\"flex flex-col\">\n            <div>{{ offer.item.title }}</div>\n            <div class=\"inline-flex gap-1 mt-2\">\n              <div>\n                <span class=\"mr-1\">{{ offer.item.bedrooms }}</span>\n                <span i18n>Bedrooms</span>\n              </div>\n              <div>\n                <span class=\"mr-1\">{{ offer.item.bathrooms }}</span>\n                <span i18n>Bathrooms</span>\n              </div>\n              <div>\n                <span class=\"mr-1\">{{ offer.item.receptions }}</span>\n                <span i18n>Receptions</span>\n              </div>\n            </div>\n          </div>\n          <div class=\"text-right\">\n            <div class=\"text-sm\">\u00A3{{ offer.item.amount.toFixed(2) }}</div>\n          </div>\n        </div>\n      </div>\n      <div class=\"hidden md:flex flex-col px-3\"></div>\n    </div>\n  </div>\n\n  <div>\n    <div class=\"text-lg font-bold py-2\">Viewing agent</div>\n    <hr class=\"mb-2\" />\n    @if (agent) {\n    <div>\n      <rolatech-rich-label label=\"Move-in date\" [title]=\"offer.startDate\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Tenancy duration\" [title]=\"offer.tenancyDuration\"></rolatech-rich-label>\n      <rolatech-rich-label label=\"Phone\" [title]=\"agent.phone\"></rolatech-rich-label>\n    </div>\n    }\n  </div>\n</div>\n}\n" }]
         }] });
 
 class PropertyAgentOfferIndex extends BaseComponent {
@@ -5580,4 +5642,4 @@ const propertyAgentOfferRoutes = [
  */
 
 export { ResidencyStatus as A, PropertyApplicantType as B, AdverseCreditStatus as C, BedroomRange as D, EmploymentStatus as E, PriceRange as F, Market as M, PropertyUtil as P, RentFrequency as R, ViewingTime as V, PropertyViewType as a, PropertyViewingItemComponent as b, propertyManageOffersRoutes as c, propertyRoutes as d, propertyManageRoutes as e, featureManageRoutes as f, propertyManageViewingsRoutes as g, propertyAgentViewingRoutes as h, propertyAgentOfferRoutes as i, PropertyActionsComponent as j, PropertyItemComponent as k, lettingManageRoutes as l, PropertyPricingComponent as m, PropertyPriceType as n, PropertyVideoProvider as o, propertyReviewRoutes as p, PropertyStatus as q, PropertyType as r, PropertyInventoryStatus as s, tenantManageRoutes as t, PropertyScope as u, PropertyViewingStatus as v, PropertyViewerCategory as w, PropertyOfferTimelineStatus as x, PropertyOfferType as y, PropertyOfferStatus as z };
-//# sourceMappingURL=rolatech-angular-property-rolatech-angular-property-6DXjssB_.mjs.map
+//# sourceMappingURL=rolatech-angular-property-rolatech-angular-property-BNhZQ5K0.mjs.map