@rolatech/angular-property 20.1.7 → 20.1.9

package/fesm2022/rolatech-angular-property-property-index.component-Cm9kerTY.mjs

@@ -0,0 +1,102 @@
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, signal, ViewEncapsulation, Component } from '@angular/core';
+import { AngularCommonModule } from '@rolatech/angular-common';
+import { RichItemComponent, AngularComponentsModule, RichViewComponent } from '@rolatech/angular-components';
+import { PropertyService, PropertySearchService } from '@rolatech/angular-services';
+import { map, distinctUntilChanged, switchMap, finalize } from 'rxjs';
+import * as i1 from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
+import { P as PropertyUtil, a as PropertyViewType, b as PropertyManageItemSkeleton } from './rolatech-angular-property-rolatech-angular-property-WeijIFtF.mjs';
+import * as i1$1 from '@angular/material/paginator';
+
+class PropertyIndexComponent {
+    propertyService = inject(PropertyService);
+    propertySearchService = inject(PropertySearchService);
+    route = inject(ActivatedRoute);
+    destroyRef = inject(DestroyRef);
+    util = inject(PropertyUtil);
+    router = inject(Router);
+    properties = signal([], ...(ngDevMode ? [{ debugName: "properties" }] : []));
+    meta;
+    loading = false;
+    length = 100;
+    pageSize = 15;
+    pageIndex = signal(0, ...(ngDevMode ? [{ debugName: "pageIndex" }] : []));
+    pageSizeOptions = [5, 10, 25, 100];
+    viewType = PropertyViewType.GRID;
+    ngOnInit() {
+        this.util.viewEvent.subscribe((res) => {
+            this.viewType = res;
+        });
+        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,
+                type: p.get('type') || undefined,
+                market: p.get('market') || 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.properties.set(res.data);
+                this.meta = res.meta;
+                this.length = res.meta.pagination.count;
+            },
+            error: () => {
+                this.properties.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
+        });
+    }
+    search(params) {
+        this.propertySearchService.search(params).subscribe({
+            next: (res) => {
+                this.properties.set(res.data);
+                this.meta = res.meta;
+                this.loading = false;
+                this.length = res.meta.pagination.count;
+            },
+            error: (error) => {
+                this.loading = false;
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyIndexComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: PropertyIndexComponent, isStandalone: true, selector: "rolatech-property-index", host: { classAttribute: "rolatech-property-index" }, ngImport: i0, template: "@if (loading) {\n  <div class=\"bg-[--rt-rasised-background] h-full\">\n    <div class=\"flex flex-row flex-wrap p-3 gap-3\">\n      @for (row of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; track row) {\n        <rolatech-property-manage-item-skeleton></rolatech-property-manage-item-skeleton>\n      }\n    </div>\n  </div>\n} @else {\n  <div class=\"min-w-[320px] h-full m-auto\">\n    @if (properties() && properties().length > 0) {\n      <rolatech-rich-view [wrap]=\"viewType === 0\" [list]=\"viewType === 1\">\n        @for (item of properties(); track item) {\n          @defer {\n            <rolatech-rich-item\n              [routerLink]=\"['./', item.id]\"\n              [thumbnail]=\"item.media && item.media.length > 0 ? item.media[0].url : ''\"\n              [title]=\"item.title\"\n              thumbnailRatio=\"full\"\n              [price]=\"item.price\"\n              thumbnailMode=\"clip\"\n            ></rolatech-rich-item>\n          }\n        }\n      </rolatech-rich-view>\n    } @else {\n      <div class=\"flex w-full h-36 items-center justify-center\">\n        <div>No data</div>\n      </div>\n    }\n  </div>\n  <mat-paginator\n    #paginator\n    [length]=\"length\"\n    [pageSize]=\"pageSize\"\n    [pageIndex]=\"pageIndex()\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"onPage($event)\"\n    hidePageSize\n    showFirstLastButtons\n  >\n  </mat-paginator>\n}\n", styles: ["rolatech-property-index{display:flex;flex-direction:column;--rt-property-view-items-per-row: 1;--rt-property-view-item-margin: 0px}@media(min-width:600px){rolatech-property-index{--rt-property-view-items-per-row: 2;--rt-property-view-item-margin: 6px}}@media(min-width:768px){rolatech-property-index{--rt-property-view-items-per-row: 3;--rt-property-view-item-margin: 8px}}@media(min-width:1280px){rolatech-property-index{--rt-property-view-items-per-row: 3;--rt-property-view-item-margin: 8px}}@media(min-width:1536px){rolatech-property-index{--rt-property-view-items-per-row: 4;--rt-property-view-item-margin: 9px}}@media(min-width:1920px){rolatech-property-index{--rt-property-view-items-per-row: 5;--rt-property-view-item-margin: 9px}}\n"], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i1$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: RichViewComponent, selector: "rolatech-rich-view", inputs: ["list", "wrap"] }, { kind: "component", type: PropertyManageItemSkeleton, selector: "rolatech-property-manage-item-skeleton", inputs: ["loading", "list"] }], encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [i1.RouterLink, RichItemComponent]] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyIndexComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-index', imports: [AngularCommonModule, AngularComponentsModule, RichViewComponent, RichItemComponent, PropertyManageItemSkeleton], encapsulation: ViewEncapsulation.None, host: {
+                        class: 'rolatech-property-index',
+                    }, template: "@if (loading) {\n  <div class=\"bg-[--rt-rasised-background] h-full\">\n    <div class=\"flex flex-row flex-wrap p-3 gap-3\">\n      @for (row of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; track row) {\n        <rolatech-property-manage-item-skeleton></rolatech-property-manage-item-skeleton>\n      }\n    </div>\n  </div>\n} @else {\n  <div class=\"min-w-[320px] h-full m-auto\">\n    @if (properties() && properties().length > 0) {\n      <rolatech-rich-view [wrap]=\"viewType === 0\" [list]=\"viewType === 1\">\n        @for (item of properties(); track item) {\n          @defer {\n            <rolatech-rich-item\n              [routerLink]=\"['./', item.id]\"\n              [thumbnail]=\"item.media && item.media.length > 0 ? item.media[0].url : ''\"\n              [title]=\"item.title\"\n              thumbnailRatio=\"full\"\n              [price]=\"item.price\"\n              thumbnailMode=\"clip\"\n            ></rolatech-rich-item>\n          }\n        }\n      </rolatech-rich-view>\n    } @else {\n      <div class=\"flex w-full h-36 items-center justify-center\">\n        <div>No data</div>\n      </div>\n    }\n  </div>\n  <mat-paginator\n    #paginator\n    [length]=\"length\"\n    [pageSize]=\"pageSize\"\n    [pageIndex]=\"pageIndex()\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"onPage($event)\"\n    hidePageSize\n    showFirstLastButtons\n  >\n  </mat-paginator>\n}\n", styles: ["rolatech-property-index{display:flex;flex-direction:column;--rt-property-view-items-per-row: 1;--rt-property-view-item-margin: 0px}@media(min-width:600px){rolatech-property-index{--rt-property-view-items-per-row: 2;--rt-property-view-item-margin: 6px}}@media(min-width:768px){rolatech-property-index{--rt-property-view-items-per-row: 3;--rt-property-view-item-margin: 8px}}@media(min-width:1280px){rolatech-property-index{--rt-property-view-items-per-row: 3;--rt-property-view-item-margin: 8px}}@media(min-width:1536px){rolatech-property-index{--rt-property-view-items-per-row: 4;--rt-property-view-item-margin: 9px}}@media(min-width:1920px){rolatech-property-index{--rt-property-view-items-per-row: 5;--rt-property-view-item-margin: 9px}}\n"] }]
+        }] });
+
+export { PropertyIndexComponent };
+//# sourceMappingURL=rolatech-angular-property-property-index.component-Cm9kerTY.mjs.map

package/fesm2022/rolatech-angular-property-property-index.component-Cm9kerTY.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"rolatech-angular-property-property-index.component-Cm9kerTY.mjs","sources":["../../../../packages/angular-property/src/lib/pages/property/property-index/property-index.component.ts","../../../../packages/angular-property/src/lib/pages/property/property-index/property-index.component.html"],"sourcesContent":["import { Component, DestroyRef, effect, inject, OnInit, signal, ViewEncapsulation } from '@angular/core';\nimport { AngularCommonModule } from '@rolatech/angular-common';\nimport { AngularComponentsModule, RichViewComponent, RichItemComponent } from '@rolatech/angular-components';\nimport { PropertySearchService, PropertyService } from '@rolatech/angular-services';\nimport { Property } from '../../../interfaces';\nimport { defer, distinctUntilChanged, finalize, map, switchMap } from 'rxjs';\nimport { PageEvent } from '@angular/material/paginator';\nimport { ActivatedRoute, Router } from '@angular/router';\nimport { PropertyUtil, PropertyViewType } from '../../../property-util';\nimport { PropertyManageItemSkeleton } from '../../../components/property-manage-item-skeleton/property-manage-item-skeleton';\n\n@Component({\n  selector: 'rolatech-property-index',\n  imports: [AngularCommonModule, AngularComponentsModule, RichViewComponent, RichItemComponent, PropertyManageItemSkeleton],\n  templateUrl: './property-index.component.html',\n  styleUrl: './property-index.component.scss',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'rolatech-property-index',\n  },\n})\nexport class PropertyIndexComponent implements OnInit {\n  propertyService = inject(PropertyService);\n  propertySearchService = inject(PropertySearchService);\n  private route = inject(ActivatedRoute);\n  private destroyRef = inject(DestroyRef);\n  private util = inject(PropertyUtil);\n  private router = inject(Router);\n  properties = signal<Property[]>([]);\n  meta: any;\n  loading = false;\n  length = 100;\n  pageSize = 15;\n  pageIndex = signal(0);\n  pageSizeOptions: number[] = [5, 10, 25, 100];\n  viewType = PropertyViewType.GRID;\n\n  ngOnInit(): void {\n    this.util.viewEvent.subscribe((res) => {\n      this.viewType = res;\n    });\n    const sub = this.route.queryParamMap\n      .pipe(\n        map((p) => {\n          const page = p.get('page') ? Number(p.get('page')) : 1;\n          this.pageIndex.set(Math.max(page - 1, 0));\n          return {\n            q: p.get('q') || undefined,\n            town: p.get('town') || undefined,\n            type: p.get('type') || undefined,\n            market: p.get('market') || undefined,\n            minBedrooms: p.get('minBedrooms') ? Number(p.get('minBedrooms')) : undefined,\n            maxBedrooms: p.get('maxBedrooms') ? Number(p.get('maxBedrooms')) : undefined,\n            minPrice: p.get('minPrice') ? Number(p.get('minPrice')) : undefined,\n            maxPrice: p.get('maxPrice') ? Number(p.get('maxPrice')) : undefined,\n            availableFrom: p.get('availableFrom') || undefined,\n            availableTo: p.get('availableTo') || undefined,\n            features: p.getAll('features')?.length ? p.getAll('features') : undefined,\n            page,\n            limit: p.get('limit') ? Number(p.get('limit')) : 15,\n            sort: p.get('sort') || undefined,\n          };\n        }),\n        // Cheap deep compare via JSON to avoid spam calls when nothing changed\n        map((o) => JSON.stringify(o)),\n        distinctUntilChanged(),\n        map((s) => JSON.parse(s)),\n        switchMap((params) => {\n          this.loading = true;\n          return this.propertySearchService.search<any>(params).pipe(finalize(() => (this.loading = false)));\n        }),\n      )\n      .subscribe({\n        next: (res) => {\n          this.properties.set(res.data);\n          this.meta = res.meta;\n          this.length = res.meta.pagination.count;\n        },\n        error: () => {\n          this.properties.set([]);\n          this.length = 0;\n        },\n      });\n\n    // // auto-unsubscribe on destroy\n    this.destroyRef.onDestroy(() => sub.unsubscribe());\n  }\n  onPage(e: PageEvent) {\n    this.router.navigate([], {\n      queryParams: { page: e.pageIndex + 1, limit: e.pageSize },\n      queryParamsHandling: 'merge',\n      replaceUrl: true, // optional: avoid stacking history on every page click\n    });\n  }\n  search(params: any) {\n    this.propertySearchService.search(params).subscribe({\n      next: (res) => {\n        this.properties.set(res.data);\n        this.meta = res.meta;\n        this.loading = false;\n        this.length = res.meta.pagination.count;\n      },\n      error: (error) => {\n        this.loading = false;\n      },\n    });\n  }\n}\n","@if (loading) {\n  <div class=\"bg-[--rt-rasised-background] h-full\">\n    <div class=\"flex flex-row flex-wrap p-3 gap-3\">\n      @for (row of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; track row) {\n        <rolatech-property-manage-item-skeleton></rolatech-property-manage-item-skeleton>\n      }\n    </div>\n  </div>\n} @else {\n  <div class=\"min-w-[320px] h-full m-auto\">\n    @if (properties() && properties().length > 0) {\n      <rolatech-rich-view [wrap]=\"viewType === 0\" [list]=\"viewType === 1\">\n        @for (item of properties(); track item) {\n          @defer {\n            <rolatech-rich-item\n              [routerLink]=\"['./', item.id]\"\n              [thumbnail]=\"item.media && item.media.length > 0 ? item.media[0].url : ''\"\n              [title]=\"item.title\"\n              thumbnailRatio=\"full\"\n              [price]=\"item.price\"\n              thumbnailMode=\"clip\"\n            ></rolatech-rich-item>\n          }\n        }\n      </rolatech-rich-view>\n    } @else {\n      <div class=\"flex w-full h-36 items-center justify-center\">\n        <div>No data</div>\n      </div>\n    }\n  </div>\n  <mat-paginator\n    #paginator\n    [length]=\"length\"\n    [pageSize]=\"pageSize\"\n    [pageIndex]=\"pageIndex()\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"onPage($event)\"\n    hidePageSize\n    showFirstLastButtons\n  >\n  </mat-paginator>\n}\n"],"names":["i1","i2"],"mappings":"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"}

package/fesm2022/{rolatech-angular-property-property-manage-viewings-index.component-B3ax0bl7.mjs → rolatech-angular-property-property-manage-viewings-index.component-B18t09BQ.mjs}

@@ -6,7 +6,7 @@ import { MatButtonModule } from '@angular/material/button';
 import * as i1 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { PropertyService } from '@rolatech/angular-services';
-import { b as PropertyViewingItemComponent } from './rolatech-angular-property-rolatech-angular-property-vYwCrQfp.mjs';
+import { c as PropertyViewingItemComponent } from './rolatech-angular-property-rolatech-angular-property-WeijIFtF.mjs';
 
 class PropertyManageViewingsIndexComponent extends BaseComponent {
     propertyService = inject(PropertyService);
@@ -84,4 +84,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
         }] });
 
 export { PropertyManageViewingsIndexComponent };
-//# sourceMappingURL=rolatech-angular-property-property-manage-viewings-index.component-B3ax0bl7.mjs.map
+//# sourceMappingURL=rolatech-angular-property-property-manage-viewings-index.component-B18t09BQ.mjs.map

package/fesm2022/{rolatech-angular-property-property-manage-viewings-index.component-B3ax0bl7.mjs.map → rolatech-angular-property-property-manage-viewings-index.component-B18t09BQ.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"rolatech-angular-property-property-manage-viewings-index.component-B3ax0bl7.mjs","sources":["../../../../packages/angular-property/src/lib/pages/property-manage/property-manage-viewings-index/property-manage-viewings-index.component.ts","../../../../packages/angular-property/src/lib/pages/property-manage/property-manage-viewings-index/property-manage-viewings-index.component.html"],"sourcesContent":["import { Component, inject, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { BaseComponent, EmptyComponent, TabComponent, TabsComponent, ToolbarComponent } from '@rolatech/angular-components';\nimport { MatButtonModule } from '@angular/material/button';\nimport { RouterModule } from '@angular/router';\nimport { PropertyService } from '@rolatech/angular-services';\nimport { PropertyViewingItemComponent } from '../../../components/property-viewing-item/property-viewing-item.component';\nimport { PropertyViewing } from '../../../interfaces';\n\n@Component({\n  selector: 'rolatech-property-manage-viewings-index',\n  imports: [\n    CommonModule,\n    ToolbarComponent,\n    MatButtonModule,\n    TabsComponent,\n    TabComponent,\n    RouterModule,\n    EmptyComponent,\n    PropertyViewingItemComponent,\n  ],\n  templateUrl: './property-manage-viewings-index.component.html',\n  styleUrl: './property-manage-viewings-index.component.scss',\n})\nexport class PropertyManageViewingsIndexComponent extends BaseComponent implements OnInit {\n  propertyService = inject(PropertyService);\n  select = 0;\n  links = [\n    {\n      name: 'All',\n      icon: 'dashboard',\n    },\n    {\n      name: 'Completed',\n      icon: 'category',\n      status: 'completed',\n    },\n    {\n      name: 'Cancelled',\n      icon: 'category',\n      status: 'cancelled',\n    },\n  ];\n  filterOptions: any = {\n    type: '',\n    status: '',\n  };\n  viewings: PropertyViewing[] = [];\n\n  ngOnInit(): void {\n    this.route.queryParams.subscribe(({ status }) => {\n      this.select = this.links.findIndex((item) => item.status === status);\n      if (status) {\n        this.filterOptions.status = (status as string).toUpperCase();\n      } else {\n        delete this.filterOptions.status;\n      }\n      this.findViewings();\n    });\n  }\n  findViewings() {\n    const options = {\n      sort: 'updatedAt desc',\n    };\n    const filterString = this.convertFilterOptions(this.filterOptions);\n    if (filterString) {\n      options['filter'] = filterString;\n    }\n    this.propertyService.findViewingsByAgent(options).subscribe({\n      next: (res: any) => {\n        this.viewings = res.data;\n      },\n    });\n  }\n  convertFilterOptions(jsonObj) {\n    return Object.entries(jsonObj)\n      .filter(([key, value]) => value !== '' && value !== undefined)\n      .map(([key, value]) => {\n        return `${key}:${value}`;\n      })\n      .join(',');\n  }\n}\n","<rolatech-toolbar title=\"Viewings\">\n  <div class=\"flex items-center gap-2\"></div>\n</rolatech-toolbar>\n<rolatech-tabs [select]=\"select\">\n  @for (item of links; track item) {\n    @if (item.status) {\n      <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n    } @else {\n      <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n    }\n  }\n</rolatech-tabs>\n<div>\n  @if (viewings) {\n    @for (item of viewings; track $index) {\n      <rolatech-property-viewing-item [routerLink]=\"['./', item.id]\" [viewing]=\"item\"></rolatech-property-viewing-item>\n    }\n  } @else {\n    <rolatech-empty></rolatech-empty>\n  }\n</div>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"rolatech-angular-property-property-manage-viewings-index.component-B18t09BQ.mjs","sources":["../../../../packages/angular-property/src/lib/pages/property-manage/property-manage-viewings-index/property-manage-viewings-index.component.ts","../../../../packages/angular-property/src/lib/pages/property-manage/property-manage-viewings-index/property-manage-viewings-index.component.html"],"sourcesContent":["import { Component, inject, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { BaseComponent, EmptyComponent, TabComponent, TabsComponent, ToolbarComponent } from '@rolatech/angular-components';\nimport { MatButtonModule } from '@angular/material/button';\nimport { RouterModule } from '@angular/router';\nimport { PropertyService } from '@rolatech/angular-services';\nimport { PropertyViewingItemComponent } from '../../../components/property-viewing-item/property-viewing-item.component';\nimport { PropertyViewing } from '../../../interfaces';\n\n@Component({\n  selector: 'rolatech-property-manage-viewings-index',\n  imports: [\n    CommonModule,\n    ToolbarComponent,\n    MatButtonModule,\n    TabsComponent,\n    TabComponent,\n    RouterModule,\n    EmptyComponent,\n    PropertyViewingItemComponent,\n  ],\n  templateUrl: './property-manage-viewings-index.component.html',\n  styleUrl: './property-manage-viewings-index.component.scss',\n})\nexport class PropertyManageViewingsIndexComponent extends BaseComponent implements OnInit {\n  propertyService = inject(PropertyService);\n  select = 0;\n  links = [\n    {\n      name: 'All',\n      icon: 'dashboard',\n    },\n    {\n      name: 'Completed',\n      icon: 'category',\n      status: 'completed',\n    },\n    {\n      name: 'Cancelled',\n      icon: 'category',\n      status: 'cancelled',\n    },\n  ];\n  filterOptions: any = {\n    type: '',\n    status: '',\n  };\n  viewings: PropertyViewing[] = [];\n\n  ngOnInit(): void {\n    this.route.queryParams.subscribe(({ status }) => {\n      this.select = this.links.findIndex((item) => item.status === status);\n      if (status) {\n        this.filterOptions.status = (status as string).toUpperCase();\n      } else {\n        delete this.filterOptions.status;\n      }\n      this.findViewings();\n    });\n  }\n  findViewings() {\n    const options = {\n      sort: 'updatedAt desc',\n    };\n    const filterString = this.convertFilterOptions(this.filterOptions);\n    if (filterString) {\n      options['filter'] = filterString;\n    }\n    this.propertyService.findViewingsByAgent(options).subscribe({\n      next: (res: any) => {\n        this.viewings = res.data;\n      },\n    });\n  }\n  convertFilterOptions(jsonObj) {\n    return Object.entries(jsonObj)\n      .filter(([key, value]) => value !== '' && value !== undefined)\n      .map(([key, value]) => {\n        return `${key}:${value}`;\n      })\n      .join(',');\n  }\n}\n","<rolatech-toolbar title=\"Viewings\">\n  <div class=\"flex items-center gap-2\"></div>\n</rolatech-toolbar>\n<rolatech-tabs [select]=\"select\">\n  @for (item of links; track item) {\n    @if (item.status) {\n      <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n    } @else {\n      <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n    }\n  }\n</rolatech-tabs>\n<div>\n  @if (viewings) {\n    @for (item of viewings; track $index) {\n      <rolatech-property-viewing-item [routerLink]=\"['./', item.id]\" [viewing]=\"item\"></rolatech-property-viewing-item>\n    }\n  } @else {\n    <rolatech-empty></rolatech-empty>\n  }\n</div>\n"],"names":[],"mappings":";;;;;;;;;;AAwBM,MAAO,oCAAqC,SAAQ,aAAa,CAAA;AACrE,IAAA,eAAe,GAAG,MAAM,CAAC,eAAe,CAAC;IACzC,MAAM,GAAG,CAAC;AACV,IAAA,KAAK,GAAG;AACN,QAAA;AACE,YAAA,IAAI,EAAE,KAAK;AACX,YAAA,IAAI,EAAE,WAAW;AAClB,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,WAAW;AACjB,YAAA,IAAI,EAAE,UAAU;AAChB,YAAA,MAAM,EAAE,WAAW;AACpB,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,WAAW;AACjB,YAAA,IAAI,EAAE,UAAU;AAChB,YAAA,MAAM,EAAE,WAAW;AACpB,SAAA;KACF;AACD,IAAA,aAAa,GAAQ;AACnB,QAAA,IAAI,EAAE,EAAE;AACR,QAAA,MAAM,EAAE,EAAE;KACX;IACD,QAAQ,GAAsB,EAAE;IAEhC,QAAQ,GAAA;AACN,QAAA,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,KAAI;YAC9C,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,MAAM,KAAK,MAAM,CAAC;YACpE,IAAI,MAAM,EAAE;gBACV,IAAI,CAAC,aAAa,CAAC,MAAM,GAAI,MAAiB,CAAC,WAAW,EAAE;YAC9D;iBAAO;AACL,gBAAA,OAAO,IAAI,CAAC,aAAa,CAAC,MAAM;YAClC;YACA,IAAI,CAAC,YAAY,EAAE;AACrB,QAAA,CAAC,CAAC;IACJ;IACA,YAAY,GAAA;AACV,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,IAAI,EAAE,gBAAgB;SACvB;QACD,MAAM,YAAY,GAAG,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC;QAClE,IAAI,YAAY,EAAE;AAChB,YAAA,OAAO,CAAC,QAAQ,CAAC,GAAG,YAAY;QAClC;QACA,IAAI,CAAC,eAAe,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC;AAC1D,YAAA,IAAI,EAAE,CAAC,GAAQ,KAAI;AACjB,gBAAA,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC,IAAI;YAC1B,CAAC;AACF,SAAA,CAAC;IACJ;AACA,IAAA,oBAAoB,CAAC,OAAO,EAAA;AAC1B,QAAA,OAAO,MAAM,CAAC,OAAO,CAAC,OAAO;AAC1B,aAAA,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,KAAK,KAAK,KAAK,EAAE,IAAI,KAAK,KAAK,SAAS;aAC5D,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,KAAI;AACpB,YAAA,OAAO,CAAA,EAAG,GAAG,CAAA,CAAA,EAAI,KAAK,EAAE;AAC1B,QAAA,CAAC;aACA,IAAI,CAAC,GAAG,CAAC;IACd;uGAzDW,oCAAoC,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAApC,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oCAAoC,0HCxBjD,itBAqBA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDTI,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACZ,gBAAgB,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,MAAA,EAAA,MAAA,EAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAChB,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACf,aAAa,oHACb,YAAY,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACZ,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,aAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,OAAA,EAAA,MAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACZ,cAAc,2DACd,4BAA4B,EAAA,QAAA,EAAA,gCAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAKnB,oCAAoC,EAAA,UAAA,EAAA,CAAA;kBAfhD,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,yCAAyC,EAAA,OAAA,EAC1C;wBACP,YAAY;wBACZ,gBAAgB;wBAChB,eAAe;wBACf,aAAa;wBACb,YAAY;wBACZ,YAAY;wBACZ,cAAc;wBACd,4BAA4B;AAC7B,qBAAA,EAAA,QAAA,EAAA,itBAAA,EAAA;;;;;"}

package/fesm2022/{rolatech-angular-property-rolatech-angular-property-vYwCrQfp.mjs → rolatech-angular-property-rolatech-angular-property-WeijIFtF.mjs}

@@ -10,7 +10,7 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
 import * as i1$1 from '@angular/router';
 import { RouterLink, RouterModule, ActivatedRoute, Router, RouterLinkActive, RouterOutlet } from '@angular/router';
-import { ThumbnailComponent, ImagePlaceholderComponent, ToolbarComponent, SpinnerComponent, ImagePreviewDialogComponent, BaseComponent, AcceptDialogComponent, RejectDialogComponent, RichLabelComponent, AngularComponentsModule, ConfirmationDialogComponent, TabsComponent, TabComponent, EmptyComponent, ListComponent, ContainerComponent, SearchBar, MediaListComponent, MediaListItemComponent, InputComponent } from '@rolatech/angular-components';
+import { ThumbnailComponent, ImagePlaceholderComponent, Skeleton, ToolbarComponent, ImagePreviewDialogComponent, BaseComponent, AcceptDialogComponent, RejectDialogComponent, RichLabelComponent, AngularComponentsModule, ConfirmationDialogComponent, TabsComponent, TabComponent, EmptyComponent, ListComponent, ContainerComponent, SearchBar, SpinnerComponent, MediaListComponent, MediaListItemComponent, InputComponent } from '@rolatech/angular-components';
 import { PropertyService, FeatureService, InvoiceService, FloorplanService, PropertyHighlightsService, TimeZoneService, PaymentService, PropertySearchService, DialogService } from '@rolatech/angular-services';
 import * as i1 from '@angular/common';
 import { CommonModule, NgClass, isPlatformBrowser, ViewportScroller, KeyValuePipe, Location } from '@angular/common';
@@ -388,16 +388,42 @@ class PropertyManageItemComponent {
     archived() { }
     delete() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyManageItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", 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=\"\">{{ property().price | price }}</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 }, { kind: "pipe", type: PricePipe, name: "price" }], encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [ThumbnailComponent]] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", 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 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.length > 0 ? 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=\"px-2 pb-3\">\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=\"\">{{ property().price | price }}</div>\n  </div>\n</div>\n", styles: ["rolatech-property-manage-item{--rt-property-view-item-margin: 16px;margin-left:calc(var(--rt-property-view-item-margin) / 2);margin-right:calc(var(--rt-property-view-item-margin) / 2);margin-bottom:16px;width:calc(100% / var(--rt-property-view-items-per-row) - var(--rt-property-view-item-margin))}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 }, { kind: "pipe", type: PricePipe, name: "price" }], encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [ThumbnailComponent]] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyManageItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-property-manage-item', imports: [CommonModule, ThumbnailComponent, ImagePlaceholderComponent, MatButtonModule, MatMenuModule, PricePipe], 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=\"\">{{ property().price | price }}</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, PricePipe], encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"flex 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.length > 0 ? 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=\"px-2 pb-3\">\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=\"\">{{ property().price | price }}</div>\n  </div>\n</div>\n", styles: ["rolatech-property-manage-item{--rt-property-view-item-margin: 16px;margin-left:calc(var(--rt-property-view-item-margin) / 2);margin-right:calc(var(--rt-property-view-item-margin) / 2);margin-bottom:16px;width:calc(100% / var(--rt-property-view-items-per-row) - var(--rt-property-view-item-margin))}rolatech-property-manage-item[list]{--rt-property-view-items-per-row: 1}\n"] }]
         }], ctorParameters: () => [], propDecorators: { hasClass: [{
                 type: HostBinding,
                 args: ['class.rolatech-property-manage-item']
             }], property: [{ type: i0.Input, args: [{ isSignal: true, alias: "property", required: true }] }], thumbnail: [{ type: i0.Input, args: [{ isSignal: true, alias: "thumbnail", required: false }] }], list: [{ type: i0.Input, args: [{ isSignal: true, alias: "list", required: false }] }] } });
 
+class PropertyManageItemSkeleton {
+    hasClass = true;
+    el = inject(ElementRef);
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    list = input(false, ...(ngDevMode ? [{ debugName: "list", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    constructor() {
+        effect(() => {
+            if (this.list()) {
+                this.el.nativeElement.setAttribute('list', '');
+            }
+            else {
+                this.el.nativeElement.removeAttribute('list', '');
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyManageItemSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: PropertyManageItemSkeleton, isStandalone: true, selector: "rolatech-property-manage-item-skeleton", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rolatech-property-manage-item-skeleton": "this.hasClass" } }, ngImport: i0, template: "<div\n  class=\"flex p-3 bg-[--rt-raised-background] hover:bg-[--rt-raised-background] rounded-md\"\n  [ngClass]=\"list() ? 'w-full flex-row' : 'flex-col h-full'\"\n>\n  <div>\n    <div class=\"object-cover aspect-video rounded-lg\" [ngClass]=\"list() ? 'w-32 mr-3' : ''\">\n      <!-- <rolatech-image-placeholder></rolatech-image-placeholder> -->\n      <rolatech-skeleton class=\"w-full h-full\"></rolatech-skeleton>\n    </div>\n  </div>\n\n  <div class=\"py-2\">\n    <rolatech-skeleton class=\"w-full h-4\"></rolatech-skeleton>\n  </div>\n  <div class=\"flex-1\"></div>\n  <rolatech-skeleton class=\"w-10 h-4\"></rolatech-skeleton>\n</div>\n", styles: ["rolatech-property-manage-item-skeleton{--rt-property-view-item-margin: 16px;margin-left:calc(var(--rt-property-view-item-margin) / 2);margin-right:calc(var(--rt-property-view-item-margin) / 2);margin-bottom:var(--rt-property-view-item-margin);width:calc(100% / var(--rt-property-view-items-per-row) - var(--rt-property-view-item-margin))}rolatech-property-manage-item-skeleton[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: Skeleton, selector: "rolatech-skeleton" }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyManageItemSkeleton, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-manage-item-skeleton', imports: [CommonModule, Skeleton], encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"flex p-3 bg-[--rt-raised-background] hover:bg-[--rt-raised-background] rounded-md\"\n  [ngClass]=\"list() ? 'w-full flex-row' : 'flex-col h-full'\"\n>\n  <div>\n    <div class=\"object-cover aspect-video rounded-lg\" [ngClass]=\"list() ? 'w-32 mr-3' : ''\">\n      <!-- <rolatech-image-placeholder></rolatech-image-placeholder> -->\n      <rolatech-skeleton class=\"w-full h-full\"></rolatech-skeleton>\n    </div>\n  </div>\n\n  <div class=\"py-2\">\n    <rolatech-skeleton class=\"w-full h-4\"></rolatech-skeleton>\n  </div>\n  <div class=\"flex-1\"></div>\n  <rolatech-skeleton class=\"w-10 h-4\"></rolatech-skeleton>\n</div>\n", styles: ["rolatech-property-manage-item-skeleton{--rt-property-view-item-margin: 16px;margin-left:calc(var(--rt-property-view-item-margin) / 2);margin-right:calc(var(--rt-property-view-item-margin) / 2);margin-bottom:var(--rt-property-view-item-margin);width:calc(100% / var(--rt-property-view-items-per-row) - var(--rt-property-view-item-margin))}rolatech-property-manage-item-skeleton[list]{--rt-property-view-items-per-row: 1}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { hasClass: [{
+                type: HostBinding,
+                args: ['class.rolatech-property-manage-item-skeleton']
+            }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], list: [{ type: i0.Input, args: [{ isSignal: true, alias: "list", required: false }] }] } });
+
 class PropertyReviewIndexComponent {
     hasClass = true;
     paginator = viewChild(MatPaginator, ...(ngDevMode ? [{ debugName: "paginator" }] : []));
@@ -418,7 +444,7 @@ class PropertyReviewIndexComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyReviewIndexComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: PropertyReviewIndexComponent, isStandalone: true, selector: "rolatech-property-review-index", host: { properties: { "class.rolatech-property-manage-index": "this.hasClass" } }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "<rolatech-toolbar title=\"Properties\"> </rolatech-toolbar>\n@if (isLoading) {\n  <div class=\"flex justify-center items-center\">\n    <rolatech-spinner></rolatech-spinner>\n  </div>\n} @else {\n  <div class=\"bg-[--rt-rasised-background] h-full\">\n    <div class=\"flex flex-wrap p-3 gap-3\">\n      @for (item of properties; track $index) {\n        <rolatech-property-manage-item\n          list\n          [property]=\"item\"\n          routerLink=\"./properties/{{ item.id }}\"\n        ></rolatech-property-manage-item>\n      }\n    </div>\n  </div>\n\n  <!-- <mat-paginator\n    #paginator\n    [length]=\"length\"\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"pageEvent = find($event)\"\n    hidePageSize\n    showFirstLastButtons\n  >\n  </mat-paginator> -->\n}\n", styles: ["mat-form-field{width:100%}table{width:100%}td.mat-column-actions{text-align:right;max-width:64px;font-size:.8rem;padding:0 8px}.mat-mdc-header-cell.actions{text-align:right;max-width:64px;width:64px}.mat-mdc-cell:nth-last-child(2),.mat-mdc-header-cell:nth-last-child(2),.mat-mdc-footer-cell:nth-last-child(2){text-align:right;max-width:180px;width:180px}mat-cell:last-of-type,mat-header-cell:last-of-type,mat-footer-cell:last-of-type{text-align:right;padding-right:8px!important}rolatech-property-manage-index{--rt-property-view-items-per-row: 1}@media(min-width:600px){rolatech-property-manage-index{--rt-property-view-items-per-row: 2}}@media(min-width:768px){rolatech-property-manage-index{--rt-property-view-items-per-row: 3}}@media(min-width:1280px){rolatech-property-manage-index{--rt-property-view-items-per-row: 3}}@media(min-width:1536px){rolatech-property-manage-index{--rt-property-view-items-per-row: 4}}@media(min-width:1920px){rolatech-property-manage-index{--rt-property-view-items-per-row: 5}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: SpinnerComponent, selector: "rolatech-spinner", inputs: ["title"] }, { kind: "component", type: PropertyManageItemComponent, selector: "rolatech-property-manage-item", inputs: ["property", "thumbnail", "list"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: PropertyReviewIndexComponent, isStandalone: true, selector: "rolatech-property-review-index", host: { properties: { "class.rolatech-property-manage-index": "this.hasClass" } }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "<rolatech-toolbar title=\"Properties\"> </rolatech-toolbar>\n@if (isLoading) {\n  <div class=\"bg-[--rt-rasised-background] h-full\">\n    <!-- <rolatech-property-manage-filter></rolatech-property-manage-filter> -->\n    <div class=\"flex flex-row flex-wrap p-3 gap-3\">\n      @for (row of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; track row) {\n        <rolatech-property-manage-item-skeleton></rolatech-property-manage-item-skeleton>\n      }\n    </div>\n  </div>\n} @else {\n  <div class=\"bg-[--rt-rasised-background] h-full\">\n    <div class=\"flex flex-wrap p-3 gap-3\">\n      @for (item of properties; track $index) {\n        <rolatech-property-manage-item\n          list\n          [property]=\"item\"\n          routerLink=\"./properties/{{ item.id }}\"\n        ></rolatech-property-manage-item>\n      }\n    </div>\n  </div>\n\n  <!-- <mat-paginator\n    #paginator\n    [length]=\"length\"\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"pageEvent = find($event)\"\n    hidePageSize\n    showFirstLastButtons\n  >\n  </mat-paginator> -->\n}\n", styles: ["mat-form-field{width:100%}table{width:100%}td.mat-column-actions{text-align:right;max-width:64px;font-size:.8rem;padding:0 8px}.mat-mdc-header-cell.actions{text-align:right;max-width:64px;width:64px}.mat-mdc-cell:nth-last-child(2),.mat-mdc-header-cell:nth-last-child(2),.mat-mdc-footer-cell:nth-last-child(2){text-align:right;max-width:180px;width:180px}mat-cell:last-of-type,mat-header-cell:last-of-type,mat-footer-cell:last-of-type{text-align:right;padding-right:8px!important}rolatech-property-manage-index{display:flex;flex-direction:column;--rt-property-view-items-per-row: 1;--rt-property-view-item-margin: 0px}@media(min-width:600px){rolatech-property-manage-index{--rt-property-view-items-per-row: 2;--rt-property-view-item-margin: 6px}}@media(min-width:768px){rolatech-property-manage-index{--rt-property-view-items-per-row: 3;--rt-property-view-item-margin: 8px}}@media(min-width:1280px){rolatech-property-manage-index{--rt-property-view-items-per-row: 3;--rt-property-view-item-margin: 8px}}@media(min-width:1536px){rolatech-property-manage-index{--rt-property-view-items-per-row: 4;--rt-property-view-item-margin: 9px}}@media(min-width:1920px){rolatech-property-manage-index{--rt-property-view-items-per-row: 5;--rt-property-view-item-margin: 9px}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: PropertyManageItemComponent, selector: "rolatech-property-manage-item", inputs: ["property", "thumbnail", "list"] }, { kind: "component", type: PropertyManageItemSkeleton, selector: "rolatech-property-manage-item-skeleton", inputs: ["loading", "list"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyReviewIndexComponent, decorators: [{
             type: Component,
@@ -430,9 +456,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                         MatMenuModule,
                         MatPaginatorModule,
                         ToolbarComponent,
-                        SpinnerComponent,
                         PropertyManageItemComponent,
-                    ], encapsulation: ViewEncapsulation.None, template: "<rolatech-toolbar title=\"Properties\"> </rolatech-toolbar>\n@if (isLoading) {\n  <div class=\"flex justify-center items-center\">\n    <rolatech-spinner></rolatech-spinner>\n  </div>\n} @else {\n  <div class=\"bg-[--rt-rasised-background] h-full\">\n    <div class=\"flex flex-wrap p-3 gap-3\">\n      @for (item of properties; track $index) {\n        <rolatech-property-manage-item\n          list\n          [property]=\"item\"\n          routerLink=\"./properties/{{ item.id }}\"\n        ></rolatech-property-manage-item>\n      }\n    </div>\n  </div>\n\n  <!-- <mat-paginator\n    #paginator\n    [length]=\"length\"\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"pageEvent = find($event)\"\n    hidePageSize\n    showFirstLastButtons\n  >\n  </mat-paginator> -->\n}\n", styles: ["mat-form-field{width:100%}table{width:100%}td.mat-column-actions{text-align:right;max-width:64px;font-size:.8rem;padding:0 8px}.mat-mdc-header-cell.actions{text-align:right;max-width:64px;width:64px}.mat-mdc-cell:nth-last-child(2),.mat-mdc-header-cell:nth-last-child(2),.mat-mdc-footer-cell:nth-last-child(2){text-align:right;max-width:180px;width:180px}mat-cell:last-of-type,mat-header-cell:last-of-type,mat-footer-cell:last-of-type{text-align:right;padding-right:8px!important}rolatech-property-manage-index{--rt-property-view-items-per-row: 1}@media(min-width:600px){rolatech-property-manage-index{--rt-property-view-items-per-row: 2}}@media(min-width:768px){rolatech-property-manage-index{--rt-property-view-items-per-row: 3}}@media(min-width:1280px){rolatech-property-manage-index{--rt-property-view-items-per-row: 3}}@media(min-width:1536px){rolatech-property-manage-index{--rt-property-view-items-per-row: 4}}@media(min-width:1920px){rolatech-property-manage-index{--rt-property-view-items-per-row: 5}}\n"] }]
+                        PropertyManageItemSkeleton,
+                    ], encapsulation: ViewEncapsulation.None, template: "<rolatech-toolbar title=\"Properties\"> </rolatech-toolbar>\n@if (isLoading) {\n  <div class=\"bg-[--rt-rasised-background] h-full\">\n    <!-- <rolatech-property-manage-filter></rolatech-property-manage-filter> -->\n    <div class=\"flex flex-row flex-wrap p-3 gap-3\">\n      @for (row of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; track row) {\n        <rolatech-property-manage-item-skeleton></rolatech-property-manage-item-skeleton>\n      }\n    </div>\n  </div>\n} @else {\n  <div class=\"bg-[--rt-rasised-background] h-full\">\n    <div class=\"flex flex-wrap p-3 gap-3\">\n      @for (item of properties; track $index) {\n        <rolatech-property-manage-item\n          list\n          [property]=\"item\"\n          routerLink=\"./properties/{{ item.id }}\"\n        ></rolatech-property-manage-item>\n      }\n    </div>\n  </div>\n\n  <!-- <mat-paginator\n    #paginator\n    [length]=\"length\"\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"pageEvent = find($event)\"\n    hidePageSize\n    showFirstLastButtons\n  >\n  </mat-paginator> -->\n}\n", styles: ["mat-form-field{width:100%}table{width:100%}td.mat-column-actions{text-align:right;max-width:64px;font-size:.8rem;padding:0 8px}.mat-mdc-header-cell.actions{text-align:right;max-width:64px;width:64px}.mat-mdc-cell:nth-last-child(2),.mat-mdc-header-cell:nth-last-child(2),.mat-mdc-footer-cell:nth-last-child(2){text-align:right;max-width:180px;width:180px}mat-cell:last-of-type,mat-header-cell:last-of-type,mat-footer-cell:last-of-type{text-align:right;padding-right:8px!important}rolatech-property-manage-index{display:flex;flex-direction:column;--rt-property-view-items-per-row: 1;--rt-property-view-item-margin: 0px}@media(min-width:600px){rolatech-property-manage-index{--rt-property-view-items-per-row: 2;--rt-property-view-item-margin: 6px}}@media(min-width:768px){rolatech-property-manage-index{--rt-property-view-items-per-row: 3;--rt-property-view-item-margin: 8px}}@media(min-width:1280px){rolatech-property-manage-index{--rt-property-view-items-per-row: 3;--rt-property-view-item-margin: 8px}}@media(min-width:1536px){rolatech-property-manage-index{--rt-property-view-items-per-row: 4;--rt-property-view-item-margin: 9px}}@media(min-width:1920px){rolatech-property-manage-index{--rt-property-view-items-per-row: 5;--rt-property-view-item-margin: 9px}}\n"] }]
         }], propDecorators: { hasClass: [{
                 type: HostBinding,
                 args: ['class.rolatech-property-manage-index']
@@ -2831,7 +2857,7 @@ const propertyRoutes = [
         children: [
             {
                 path: '',
-                loadComponent: () => import('./rolatech-angular-property-property-index.component-BAqTr-ZQ.mjs').then((x) => x.PropertyIndexComponent),
+                loadComponent: () => import('./rolatech-angular-property-property-index.component-Cm9kerTY.mjs').then((x) => x.PropertyIndexComponent),
             },
         ],
     },
@@ -3006,7 +3032,7 @@ class PropertyManageIndexComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyManageIndexComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", 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=\"bg-[--rt-rasised-background] h-full\">\n    <!-- <rolatech-property-manage-filter></rolatech-property-manage-filter> -->\n    <div class=\"flex flex-wrap px-2\">\n      @for (row of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; track row) {\n        <rolatech-property-manage-item-skeleton></rolatech-property-manage-item-skeleton>\n      }\n    </div>\n  </div>\n} @else {\n  <div class=\"bg-[--rt-rasised-background] h-full\">\n    <!-- <rolatech-property-manage-filter></rolatech-property-manage-filter> -->\n    <div class=\"flex flex-wrap px-2\">\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: PropertyManageItemComponent, selector: "rolatech-property-manage-item", inputs: ["property", "thumbnail", "list"] }, { kind: "component", type: SearchBar, selector: "rolatech-search-bar", inputs: ["show"], outputs: ["showChange", "search", "close"] }, { kind: "component", type: PropertyManageItemSkeleton, selector: "rolatech-property-manage-item-skeleton", inputs: ["loading", "list"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PropertyManageIndexComponent, decorators: [{
             type: Component,
@@ -3018,10 +3044,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                         MatMenuModule,
                         MatPaginatorModule,
                         ToolbarComponent,
-                        SpinnerComponent,
                         PropertyManageItemComponent,
                         SearchBar,
-                    ], encapsulation: ViewEncapsulation.None, 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"] }]
+                        PropertyManageItemSkeleton,
+                    ], encapsulation: ViewEncapsulation.None, 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=\"bg-[--rt-rasised-background] h-full\">\n    <!-- <rolatech-property-manage-filter></rolatech-property-manage-filter> -->\n    <div class=\"flex flex-wrap px-2\">\n      @for (row of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; track row) {\n        <rolatech-property-manage-item-skeleton></rolatech-property-manage-item-skeleton>\n      }\n    </div>\n  </div>\n} @else {\n  <div class=\"bg-[--rt-rasised-background] h-full\">\n    <!-- <rolatech-property-manage-filter></rolatech-property-manage-filter> -->\n    <div class=\"flex flex-wrap px-2\">\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"] }]
         }], propDecorators: { hasClass: [{
                 type: HostBinding,
                 args: ['class.rolatech-property-manage-index']
@@ -4754,7 +4780,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
 const propertyManageViewingsRoutes = [
     {
         path: '',
-        loadComponent: () => import('./rolatech-angular-property-property-manage-viewings-index.component-B3ax0bl7.mjs').then((x) => x.PropertyManageViewingsIndexComponent),
+        loadComponent: () => import('./rolatech-angular-property-property-manage-viewings-index.component-B18t09BQ.mjs').then((x) => x.PropertyManageViewingsIndexComponent),
     },
     {
         path: ':id',
@@ -4780,11 +4806,11 @@ class LettingManageItem {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: LettingManageItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", 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=\"\">{{ letting().price | price }}</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 }, { kind: "pipe", type: PricePipe, name: "price" }], encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [ThumbnailComponent]] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", 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.length > 0 ? letting().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\">{{ letting().title }}</div>\n  </div>\n  <div class=\"flex-1\"></div>\n  <div class=\"\">{{ letting().price | price }}</div>\n</div>\n", styles: ["rolatech-letting-manage-item{--rt-letting-view-item-margin: 16px;margin-left:calc(var(--rt-letting-view-item-margin) / 2);margin-right:calc(var(--rt-letting-view-item-margin) / 2);margin-bottom:var(--rt-letting-view-item-margin);width:calc(100% / var(--rt-letting-view-items-per-row) - var(--rt-letting-view-item-margin))}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 }, { kind: "pipe", type: PricePipe, name: "price" }], encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [ThumbnailComponent]] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: LettingManageItem, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-letting-manage-item', imports: [CommonModule, ThumbnailComponent, ImagePlaceholderComponent, MatButtonModule, MatMenuModule, PricePipe], 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=\"\">{{ letting().price | price }}</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, PricePipe], 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.length > 0 ? letting().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\">{{ letting().title }}</div>\n  </div>\n  <div class=\"flex-1\"></div>\n  <div class=\"\">{{ letting().price | price }}</div>\n</div>\n", styles: ["rolatech-letting-manage-item{--rt-letting-view-item-margin: 16px;margin-left:calc(var(--rt-letting-view-item-margin) / 2);margin-right:calc(var(--rt-letting-view-item-margin) / 2);margin-bottom:var(--rt-letting-view-item-margin);width:calc(100% / var(--rt-letting-view-items-per-row) - var(--rt-letting-view-item-margin))}rolatech-letting-manage-item[list]{--rt-letting-view-items-per-row: 1}\n"] }]
         }], ctorParameters: () => [], propDecorators: { hasClass: [{
                 type: HostBinding,
                 args: ['class.rolatech-letting-manage-item']
@@ -4864,19 +4890,19 @@ class LettingManageIndex {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: LettingManageIndex, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: LettingManageIndex, isStandalone: true, selector: "rolatech-letting-manage-index", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: LettingManageIndex, isStandalone: true, selector: "rolatech-letting-manage-index", ngImport: i0, template: "<rolatech-toolbar title=\"Lettings\"> </rolatech-toolbar>\n@if (loading) {\n<div class=\"bg-[--rt-rasised-background] h-full\">\n  <!-- <rolatech-property-manage-filter></rolatech-property-manage-filter> -->\n  <div class=\"flex flex-wrap px-2\">\n    @for (row of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; track row) {\n    <rolatech-property-manage-item-skeleton></rolatech-property-manage-item-skeleton>\n    }\n  </div>\n</div>\n} @else {\n<div class=\"bg-[--rt-rasised-background] h-full\">\n  <div class=\"flex flex-wrap px-2\">\n    @for (item of lettings(); track $index) {\n    <rolatech-letting-manage-item [letting]=\"item\" routerLink=\"./{{ item.id }}\"></rolatech-letting-manage-item>\n    }\n  </div>\n</div>\n}\n<mat-paginator\n  #paginator\n  [length]=\"length\"\n  [pageSize]=\"pageSize\"\n  [pageIndex]=\"pageIndex()\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  (page)=\"onPage($event)\"\n  hidePageSize\n  showFirstLastButtons\n>\n</mat-paginator>\n", styles: ["rolatech-letting-manage-index{display:flex;flex-direction:column;--rt-letting-view-items-per-row: 1;--rt-property-view-items-per-row: 1}@media(min-width:600px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 2;--rt-property-view-items-per-row: 2}}@media(min-width:768px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 3;--rt-property-view-items-per-row: 3}}@media(min-width:1280px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 3;--rt-property-view-items-per-row: 3}}@media(min-width:1536px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 4;--rt-property-view-items-per-row: 4}}@media(min-width:1920px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 5;--rt-property-view-items-per-row: 5}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: LettingManageItem, selector: "rolatech-letting-manage-item", inputs: ["letting", "thumbnail", "list"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$6.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: PropertyManageItemSkeleton, selector: "rolatech-property-manage-item-skeleton", inputs: ["loading", "list"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: LettingManageIndex, decorators: [{
             type: Component,
             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"] }]
+                        PropertyManageItemSkeleton,
+                    ], encapsulation: ViewEncapsulation.None, template: "<rolatech-toolbar title=\"Lettings\"> </rolatech-toolbar>\n@if (loading) {\n<div class=\"bg-[--rt-rasised-background] h-full\">\n  <!-- <rolatech-property-manage-filter></rolatech-property-manage-filter> -->\n  <div class=\"flex flex-wrap px-2\">\n    @for (row of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; track row) {\n    <rolatech-property-manage-item-skeleton></rolatech-property-manage-item-skeleton>\n    }\n  </div>\n</div>\n} @else {\n<div class=\"bg-[--rt-rasised-background] h-full\">\n  <div class=\"flex flex-wrap px-2\">\n    @for (item of lettings(); track $index) {\n    <rolatech-letting-manage-item [letting]=\"item\" routerLink=\"./{{ item.id }}\"></rolatech-letting-manage-item>\n    }\n  </div>\n</div>\n}\n<mat-paginator\n  #paginator\n  [length]=\"length\"\n  [pageSize]=\"pageSize\"\n  [pageIndex]=\"pageIndex()\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  (page)=\"onPage($event)\"\n  hidePageSize\n  showFirstLastButtons\n>\n</mat-paginator>\n", styles: ["rolatech-letting-manage-index{display:flex;flex-direction:column;--rt-letting-view-items-per-row: 1;--rt-property-view-items-per-row: 1}@media(min-width:600px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 2;--rt-property-view-items-per-row: 2}}@media(min-width:768px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 3;--rt-property-view-items-per-row: 3}}@media(min-width:1280px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 3;--rt-property-view-items-per-row: 3}}@media(min-width:1536px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 4;--rt-property-view-items-per-row: 4}}@media(min-width:1920px){rolatech-letting-manage-index{--rt-letting-view-items-per-row: 5;--rt-property-view-items-per-row: 5}}\n"] }]
         }] });
 
 class LettingActions {
@@ -5833,5 +5859,5 @@ const propertyManageOverviewRoutes = [
  * Generated bundle index. Do not edit.
  */
 
-export { PropertyOfferType as A, PropertyOfferStatus as B, ResidencyStatus as C, PropertyApplicantType as D, EmploymentStatus as E, AdverseCreditStatus as F, BedroomRange as G, PriceRange as H, 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, propertyAgentOverviewRoutes as j, propertyManageOverviewRoutes as k, lettingManageRoutes as l, PropertyActionsComponent as m, PropertyItemComponent as n, PropertyPricingComponent as o, propertyReviewRoutes as p, PropertyPriceType as q, PropertyVideoProvider as r, PropertyStatus as s, tenantManageRoutes as t, PropertyType as u, PropertyInventoryStatus as v, PropertyScope as w, PropertyViewingStatus as x, PropertyViewerCategory as y, PropertyOfferTimelineStatus as z };
-//# sourceMappingURL=rolatech-angular-property-rolatech-angular-property-vYwCrQfp.mjs.map
+export { PropertyOfferTimelineStatus as A, PropertyOfferType as B, PropertyOfferStatus as C, ResidencyStatus as D, EmploymentStatus as E, PropertyApplicantType as F, AdverseCreditStatus as G, BedroomRange as H, PriceRange as I, Market as M, PropertyUtil as P, RentFrequency as R, ViewingTime as V, PropertyViewType as a, PropertyManageItemSkeleton as b, PropertyViewingItemComponent as c, propertyManageOffersRoutes as d, propertyRoutes as e, featureManageRoutes as f, propertyManageRoutes as g, propertyManageViewingsRoutes as h, propertyAgentViewingRoutes as i, propertyAgentOfferRoutes as j, propertyAgentOverviewRoutes as k, lettingManageRoutes as l, propertyManageOverviewRoutes as m, PropertyActionsComponent as n, PropertyItemComponent as o, propertyReviewRoutes as p, PropertyPricingComponent as q, PropertyPriceType as r, PropertyVideoProvider as s, tenantManageRoutes as t, PropertyStatus as u, PropertyType as v, PropertyInventoryStatus as w, PropertyScope as x, PropertyViewingStatus as y, PropertyViewerCategory as z };
+//# sourceMappingURL=rolatech-angular-property-rolatech-angular-property-WeijIFtF.mjs.map