@rolatech/angular-property 20.0.2-beta.3 → 20.0.3

package/fesm2022/{rolatech-angular-property-rolatech-angular-property-CQG71H-d.mjs → rolatech-angular-property-rolatech-angular-property-nGHNbG8j.mjs}

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, booleanAttribute, effect, HostBinding, ViewEncapsulation, Component, viewChild, PLATFORM_ID, output, computed, model, signal, Pipe, ViewChild } from '@angular/core';
+import { inject, ElementRef, input, booleanAttribute, effect, HostBinding, ViewEncapsulation, Component, viewChild, PLATFORM_ID, output, computed, EventEmitter, Injectable, signal, Pipe, model, ViewChild } from '@angular/core';
 import * as i1$4 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i4 from '@angular/material/menu';
@@ -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, Router, ActivatedRoute, RouterLinkActive, RouterOutlet } from '@angular/router';
-import { ThumbnailComponent, ImagePlaceholderComponent, ToolbarComponent, SpinnerComponent, ImagePreviewDialogComponent, BaseComponent, AcceptDialogComponent, RejectDialogComponent, RichLabelComponent, AngularComponentsModule, ConfirmationDialogComponent, TabsComponent, TabComponent, EmptyComponent, ContainerComponent, ListComponent, MediaListComponent, MediaListItemComponent, InputComponent } from '@rolatech/angular-components';
+import { ThumbnailComponent, ImagePlaceholderComponent, ToolbarComponent, SpinnerComponent, ImagePreviewDialogComponent, BaseComponent, AcceptDialogComponent, RejectDialogComponent, RichLabelComponent, AngularComponentsModule, ConfirmationDialogComponent, TabsComponent, TabComponent, EmptyComponent, ContainerComponent, SearchBar, ListComponent, MediaListComponent, MediaListItemComponent, InputComponent } from '@rolatech/angular-components';
 import { PropertyService, FeatureService, PropertySearchService, DialogService } from '@rolatech/angular-services';
 import * as i1 from '@angular/common';
 import { CommonModule, NgClass, isPlatformBrowser, ViewportScroller, KeyValuePipe, Location } from '@angular/common';
@@ -38,9 +38,6 @@ import { MatOptionModule, MAT_DATE_LOCALE, DateAdapter, MAT_DATE_FORMATS } from
 import _, { findIndex, findLastIndex, first, remove } from 'lodash';
 import * as i2$1 from '@angular/material/divider';
 import { MatDividerModule, MatDivider } from '@angular/material/divider';
-import * as i7 from '@angular/material/datepicker';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { trigger, state, transition, style, animate } from '@angular/animations';
 import { CommentsComponent } from '@rolatech/angular-comment';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i4$1 from '@angular/cdk/text-field';
@@ -48,8 +45,11 @@ import { TextFieldModule } from '@angular/cdk/text-field';
 import * as i7$1 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
 import { MomentDateAdapter } from '@angular/material-moment-adapter';
+import * as i7 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i3$1 from '@angular/material/progress-spinner';
 import { MatProgressSpinner, MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { trigger, state, transition, style, animate } from '@angular/animations';
 import * as i8 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import * as i1$6 from '@angular/material/checkbox';
@@ -1067,83 +1067,78 @@ const propertyManageOffersRoutes = [
     },
 ];
 
-class PropertyFilterComponent {
-    towns = ['London'];
-    filter = model(false, ...(ngDevMode ? [{ debugName: "filter" }] : []));
-    minDate = new Date();
-    propertyFilterIconComponent = defer(() => import('./rolatech-angular-property-property-filter-icon.component-CO2B-Na5.mjs').then((m) => m.PropertyFilterIconComponent));
-    searchOptions = {
-        town: '',
-        startDate: '',
-        endDate: '',
-    };
-    reset() { }
-    search() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.0", type: PropertyFilterComponent, isStandalone: true, selector: "rolatech-property-filter", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filter: "filterChange" }, ngImport: i0, template: "<!-- <div class=\"p-3\">\n  <div class=\"bg-white p-3 flex items-center justify-between rounded-md\">\n    <div class=\"flex items-center\">\n      <mat-form-field subscriptSizing=\"dynamic\">\n        <mat-select #select=\"matSelect\" placeholder=\"Town\" i18n-placeholder [(ngModel)]=\"searchOptions.town\">\n          @for (Town of towns; track Town) {\n            <mat-option [value]=\"Town\">\n              {{ Town }}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div class=\"flex gap-3\">\n      <a mat-stroked-button class=\"w-[128px]\" (click)=\"reset()\" i18n>Reset</a>\n      <ng-container *ngComponentOutlet=\"propertyFilterIconComponent | async\"></ng-container>\n      <a mat-flat-button class=\"w-full\" (click)=\"search()\" i18n>Search</a>\n    </div>\n  </div>\n</div> -->\n<div\n  [ngClass]=\"filter() ? 'transition-height duration-500 ease-in-out' : 'md:h-14 h-0 transition-height duration-500 ease-in-out'\"\n>\n  <div\n    class=\"min-w-[256px] md:min-w-[320px] h-full m-3 flex flex-row md:flex-col md:h-full items-center md:items-start shadow-inner shadow-light-400 md:shadow-none overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n  >\n    <div class=\"w-full h-full\">\n      <div class=\"flex flex-col md:flex-row h-in justify-center items-center gap-3\">\n        <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n          <mat-select #select=\"matSelect\" placeholder=\"Town\" [(ngModel)]=\"searchOptions.city\">\n            @for (town of towns; track town) {\n              <mat-option [value]=\"town\">\n                {{ town }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n          <input\n            matInput\n            placeholder=\"Available\"\n            [matDatepicker]=\"startDatePicker\"\n            [min]=\"minDate\"\n            (focus)=\"startDatePicker.open()\"\n            name=\"available\"\n            [(ngModel)]=\"searchOptions.available\"\n            (dateInput)=\"searchOptions.available = $event.value.format('YYYY-MM-DD')\"\n            readonly\n          />\n          <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n          <mat-datepicker #startDatePicker></mat-datepicker>\n        </mat-form-field>\n        <div class=\"flex w-full gap-3\">\n          <a mat-stroked-button class=\"w-[128px]\" (click)=\"reset()\">Reset</a>\n          <ng-container *ngComponentOutlet=\"propertyFilterIconComponent | async\"></ng-container>\n          <a mat-flat-button class=\"w-full\" (click)=\"search()\">Search</a>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { 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: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], animations: [
-            trigger('filter', [
-                state('collapsed', style({ height: '0px', minHeight: '0' })),
-                state('expanded', style({ height: '*' })),
-                transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
-            ]),
-        ] });
+var PropertyViewType;
+(function (PropertyViewType) {
+    PropertyViewType[PropertyViewType["GRID"] = 0] = "GRID";
+    PropertyViewType[PropertyViewType["LIST"] = 1] = "LIST";
+})(PropertyViewType || (PropertyViewType = {}));
+class PropertyUtil {
+    viewEvent = new EventEmitter();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyUtil, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyUtil, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyFilterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rolatech-property-filter', imports: [
-                        CommonModule,
-                        MatButtonModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        MatSelectModule,
-                        MatOptionModule,
-                        FormsModule,
-                        MatDatepickerModule,
-                    ], animations: [
-                        trigger('filter', [
-                            state('collapsed', style({ height: '0px', minHeight: '0' })),
-                            state('expanded', style({ height: '*' })),
-                            transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
-                        ]),
-                    ], template: "<!-- <div class=\"p-3\">\n  <div class=\"bg-white p-3 flex items-center justify-between rounded-md\">\n    <div class=\"flex items-center\">\n      <mat-form-field subscriptSizing=\"dynamic\">\n        <mat-select #select=\"matSelect\" placeholder=\"Town\" i18n-placeholder [(ngModel)]=\"searchOptions.town\">\n          @for (Town of towns; track Town) {\n            <mat-option [value]=\"Town\">\n              {{ Town }}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div class=\"flex gap-3\">\n      <a mat-stroked-button class=\"w-[128px]\" (click)=\"reset()\" i18n>Reset</a>\n      <ng-container *ngComponentOutlet=\"propertyFilterIconComponent | async\"></ng-container>\n      <a mat-flat-button class=\"w-full\" (click)=\"search()\" i18n>Search</a>\n    </div>\n  </div>\n</div> -->\n<div\n  [ngClass]=\"filter() ? 'transition-height duration-500 ease-in-out' : 'md:h-14 h-0 transition-height duration-500 ease-in-out'\"\n>\n  <div\n    class=\"min-w-[256px] md:min-w-[320px] h-full m-3 flex flex-row md:flex-col md:h-full items-center md:items-start shadow-inner shadow-light-400 md:shadow-none overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n  >\n    <div class=\"w-full h-full\">\n      <div class=\"flex flex-col md:flex-row h-in justify-center items-center gap-3\">\n        <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n          <mat-select #select=\"matSelect\" placeholder=\"Town\" [(ngModel)]=\"searchOptions.city\">\n            @for (town of towns; track town) {\n              <mat-option [value]=\"town\">\n                {{ town }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n          <input\n            matInput\n            placeholder=\"Available\"\n            [matDatepicker]=\"startDatePicker\"\n            [min]=\"minDate\"\n            (focus)=\"startDatePicker.open()\"\n            name=\"available\"\n            [(ngModel)]=\"searchOptions.available\"\n            (dateInput)=\"searchOptions.available = $event.value.format('YYYY-MM-DD')\"\n            readonly\n          />\n          <mat-datepicker-toggle matIconPrefix [for]=\"startDatePicker\"></mat-datepicker-toggle>\n          <mat-datepicker #startDatePicker></mat-datepicker>\n        </mat-form-field>\n        <div class=\"flex w-full gap-3\">\n          <a mat-stroked-button class=\"w-[128px]\" (click)=\"reset()\">Reset</a>\n          <ng-container *ngComponentOutlet=\"propertyFilterIconComponent | async\"></ng-container>\n          <a mat-flat-button class=\"w-full\" (click)=\"search()\">Search</a>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["mat-form-field{width:100%}\n"] }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyUtil, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
         }] });
 
 class PropertyLayoutComponent extends BaseComponent {
     propertyService = inject(PropertyService);
+    util = inject(PropertyUtil);
+    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    model = {};
+    gridView = true;
+    searchBar = viewChild('searchBar', ...(ngDevMode ? [{ debugName: "searchBar" }] : []));
     selectIndex = 0;
     filter = false;
+    propertyFilterIconComponent = defer(() => import('./rolatech-angular-property-property-filter-icon.component-_P3G8E-x.mjs').then((m) => m.PropertyFilterIconComponent));
     ngOnInit() {
-        this.findCategories();
-    }
-    findCategories() {
-        // this.categoryService.find({}, false).subscribe({
-        //   next: (res: any) => {
-        //     this.categories = res.data;
-        //   },
-        // });
-    }
-    loadPropertyByCategoryIndex(index) {
-        // this.selectIndex = index;
-        // const id = this.categories[index].id;
-        // if (index === 0) {
-        //   this.router.navigate([`./`]);
-        //   // this.propertyService.find({}).subscribe({
-        //   //   next: res => {
-        //   //   }
-        //   // })
-        // } else {
-        //   this.router.navigate([`../categories/${id}`], {
-        //     relativeTo: this.route,
-        //   });
-        // }
     }
-    nextCategory() { }
+    toggleSearch() {
+        this.open.update(v => !v);
+    }
+    onCloseSearch() {
+        // this.open.set(false);
+        // this.router.navigate([], { queryParams: {}, queryParamsHandling: 'merge' });
+        this.router.navigate(["/properties"]);
+    }
+    toggleView() {
+        if (this.gridView) {
+            this.gridView = false;
+            this.util.viewEvent.emit(PropertyViewType.LIST);
+        }
+        else {
+            this.gridView = true;
+            this.util.viewEvent.emit(PropertyViewType.GRID);
+        }
+    }
+    onSearch(event) {
+        const qp = Object.fromEntries(Object.entries(event).filter(([_, v]) => v !== undefined && v !== null && !(Array.isArray(v) && v.length === 0) && v !== ''));
+        this.router.navigate([], {
+            queryParams: qp,
+            queryParamsHandling: 'merge', // keep other params like sort, etc.
+        });
+    }
+    searchByText(event) {
+        this.router.navigate([], {
+            queryParams: { q: event, page: 1, limit: 15 },
+            queryParamsHandling: 'merge', // keep other params like sort, etc.
+        });
+    }
+    onReset(event) {
+        this.router.navigate([], {
+            queryParams: {}, // empty
+            // omit queryParamsHandling so it REPLACES (not merges) → clears everything
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyLayoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.0", type: PropertyLayoutComponent, isStandalone: true, selector: "rolatech-property-layout", usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  <div class=\"flex flex-col min-w-[320px] max-w-[1280px] m-auto\">\n    <rolatech-property-filter [(filter)]=\"filter\"></rolatech-property-filter>\n    <div class=\"flex justify-between items-center\">\n      <div class=\"p-3 text-2xl font-medium\" i18n>Properties</div>\n      <button mat-button class=\"md:invisible\" (click)=\"filter = !filter\">\n        <mat-icon>tune</mat-icon>\n        <span>Filter</span>\n      </button>\n    </div>\n    <div class=\"w-full\">\n      <router-outlet></router-outlet>\n    </div>\n  </div>\n</rolatech-container>\n", styles: [".property-layout-active{border-radius:var(--rt-rounded-base, 8px);background-color:var(-rt-base-background, #fff);color:var(--rt-brand-color, #000)}@media (max-width: 768px){.property-layout-active{background-color:var(--rt-text-primary, #000);color:var(--rt-text-primary-inverse, #000)}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: AngularComponentsModule }, { 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: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: PropertyFilterComponent, selector: "rolatech-property-filter", inputs: ["filter"], outputs: ["filterChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.0", type: PropertyLayoutComponent, isStandalone: true, selector: "rolatech-property-layout", viewQueries: [{ propertyName: "searchBar", first: true, predicate: ["searchBar"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  <div class=\"flex flex-col min-w-[320px] max-w-[1280px] m-auto\">\n    <div class=\"flex justify-between items-center h-16\">\n      <div class=\"flex justify-between items-center w-full\">\n        <div class=\"p-3 text-2xl font-medium\" i18n>Properties</div>\n        <div class=\"flex flex-row\">\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          <ng-container *ngComponentOutlet=\"propertyFilterIconComponent | async\"></ng-container>\n        </div>\n      </div>\n    </div>\n    <rolatech-search-bar\n      [(show)]=\"open\"\n      #searchBar\n      (search)=\"searchByText($event)\"\n      (close)=\"onCloseSearch()\"\n    ></rolatech-search-bar>\n    <div class=\"w-full\">\n      <router-outlet></router-outlet>\n    </div>\n  </div>\n</rolatech-container>\n", styles: [".property-layout-active{border-radius:var(--rt-rounded-base, 8px);background-color:var(-rt-base-background, #fff);color:var(--rt-brand-color, #000)}@media (max-width: 768px){.property-layout-active{background-color:var(--rt-text-primary, #000);color:var(--rt-text-primary-inverse, #000)}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: SearchBar, selector: "rolatech-search-bar", inputs: ["show"], outputs: ["showChange", "search", "close"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-property-layout', imports: [AngularCommonModule, AngularComponentsModule, ContainerComponent, PropertyFilterComponent], template: "<rolatech-container>\n  <div class=\"flex flex-col min-w-[320px] max-w-[1280px] m-auto\">\n    <rolatech-property-filter [(filter)]=\"filter\"></rolatech-property-filter>\n    <div class=\"flex justify-between items-center\">\n      <div class=\"p-3 text-2xl font-medium\" i18n>Properties</div>\n      <button mat-button class=\"md:invisible\" (click)=\"filter = !filter\">\n        <mat-icon>tune</mat-icon>\n        <span>Filter</span>\n      </button>\n    </div>\n    <div class=\"w-full\">\n      <router-outlet></router-outlet>\n    </div>\n  </div>\n</rolatech-container>\n", styles: [".property-layout-active{border-radius:var(--rt-rounded-base, 8px);background-color:var(-rt-base-background, #fff);color:var(--rt-brand-color, #000)}@media (max-width: 768px){.property-layout-active{background-color:var(--rt-text-primary, #000);color:var(--rt-text-primary-inverse, #000)}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"] }]
+            args: [{ selector: 'rolatech-property-layout', imports: [AngularCommonModule, AngularComponentsModule, ContainerComponent, SearchBar], template: "<rolatech-container>\n  <div class=\"flex flex-col min-w-[320px] max-w-[1280px] m-auto\">\n    <div class=\"flex justify-between items-center h-16\">\n      <div class=\"flex justify-between items-center w-full\">\n        <div class=\"p-3 text-2xl font-medium\" i18n>Properties</div>\n        <div class=\"flex flex-row\">\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          <ng-container *ngComponentOutlet=\"propertyFilterIconComponent | async\"></ng-container>\n        </div>\n      </div>\n    </div>\n    <rolatech-search-bar\n      [(show)]=\"open\"\n      #searchBar\n      (search)=\"searchByText($event)\"\n      (close)=\"onCloseSearch()\"\n    ></rolatech-search-bar>\n    <div class=\"w-full\">\n      <router-outlet></router-outlet>\n    </div>\n  </div>\n</rolatech-container>\n", styles: [".property-layout-active{border-radius:var(--rt-rounded-base, 8px);background-color:var(-rt-base-background, #fff);color:var(--rt-brand-color, #000)}@media (max-width: 768px){.property-layout-active{background-color:var(--rt-text-primary, #000);color:var(--rt-text-primary-inverse, #000)}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"] }]
         }] });
 
 class PropertyActionsComponent {
@@ -1292,21 +1287,148 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImpor
 class PropertyHighlights {
     highlights = input.required(...(ngDevMode ? [{ debugName: "highlights" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyHighlights, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.0", type: PropertyHighlights, isStandalone: true, selector: "rolatech-property-highlights", inputs: { highlights: { classPropertyName: "highlights", publicName: "highlights", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"\">\n  <div class=\"text-2xl font-bold py-3\" i18n>Highlights</div>\n  <div class=\"flex flex-col flex-wrap items-center text-sm\">\n    @for (item of highlights(); track item) {\n    <div class=\"flex items-center mr-2\">\n      <mat-icon>check</mat-icon>\n      <span>{{ item.text }}</span>\n    </div>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.0", type: PropertyHighlights, isStandalone: true, selector: "rolatech-property-highlights", inputs: { highlights: { classPropertyName: "highlights", publicName: "highlights", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"\">\n  <div class=\"text-2xl font-bold py-3\" i18n>Highlights</div>\n  <div class=\"flex flex-col flex-wrap\">\n    @for (item of highlights(); track $index) {\n    <div class=\"flex items-center py-1\">\n      <!-- <mat-icon>check</mat-icon> -->\n      <span>{{ item }}</span>\n    </div>\n    }\n  </div>\n</div>\n", styles: [""] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyHighlights, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-property-highlights', imports: [MatIcon], template: "<div class=\"\">\n  <div class=\"text-2xl font-bold py-3\" i18n>Highlights</div>\n  <div class=\"flex flex-col flex-wrap items-center text-sm\">\n    @for (item of highlights(); track item) {\n    <div class=\"flex items-center mr-2\">\n      <mat-icon>check</mat-icon>\n      <span>{{ item.text }}</span>\n    </div>\n    }\n  </div>\n</div>\n" }]
+            args: [{ selector: 'rolatech-property-highlights', template: "<div class=\"\">\n  <div class=\"text-2xl font-bold py-3\" i18n>Highlights</div>\n  <div class=\"flex flex-col flex-wrap\">\n    @for (item of highlights(); track $index) {\n    <div class=\"flex items-center py-1\">\n      <!-- <mat-icon>check</mat-icon> -->\n      <span>{{ item }}</span>\n    </div>\n    }\n  </div>\n</div>\n" }]
+        }] });
+
+const BANDS = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
+const RANGES = {
+    A: '(92+)', B: '(81-91)', C: '(69-80)', D: '(55-68)',
+    E: '(39-54)', F: '(21-38)', G: '(1-20)',
+};
+const COLORS = {
+    A: '#0E9F6E', // green
+    B: '#10B981',
+    C: '#84CC16',
+    D: '#F59E0B',
+    E: '#F97316',
+    F: '#FB7185',
+    G: '#DC2626'
+};
+function bandFromScore(s) {
+    const v = s ?? 0;
+    if (v >= 92)
+        return 'A';
+    if (v >= 81)
+        return 'B';
+    if (v >= 69)
+        return 'C';
+    if (v >= 55)
+        return 'D';
+    if (v >= 39)
+        return 'E';
+    if (v >= 21)
+        return 'F';
+    return 'G';
+}
+class EpcChart {
+    // --- inputs (signals) ---
+    currentScore = input(null, ...(ngDevMode ? [{ debugName: "currentScore" }] : [])); // 1..100
+    potentialScore = input(null, ...(ngDevMode ? [{ debugName: "potentialScore" }] : [])); // 1..100
+    showCaptions = input(true, ...(ngDevMode ? [{ debugName: "showCaptions" }] : []));
+    // --- layout ---
+    width = 920;
+    leftPadding = 24;
+    headerY = 40;
+    rangeColW = 90;
+    gapY = 10;
+    topY = 110; // top of first row area
+    rowH = 48; // height of each wedge row
+    rows = 7;
+    // wedge geometry
+    wedgeMaxW = 420; // width of 'A' row
+    wedgeMinW = 220;
+    wedgeDelta = 44; // decrement per row
+    cut = 24; // right slant depth
+    // arrow columns
+    arrowW = 104;
+    arrowH = 44;
+    colGap = 130;
+    wedgeAreaRight = this.leftPadding + this.rangeColW + 12 + this.wedgeMaxW + 20;
+    currentColX = this.wedgeAreaRight + 80;
+    potentialColX = this.currentColX + this.colGap;
+    // captions
+    topCaptionY = this.topY - 22;
+    get bottomCaptionY() { return this.topY + this.rows * (this.rowH + this.gapY) + 22; }
+    // overall height
+    get height() {
+        return this.bottomCaptionY + 56;
+    }
+    // expose constants to template
+    bands = BANDS;
+    RANGES = RANGES;
+    COLORS = COLORS;
+    get rangeX() { return this.leftPadding; }
+    get maxW() { return this.wedgeMinW + 6 * this.wedgeDelta; } // width of G (widest)
+    // helpers
+    wedgeX(i) { return this.leftPadding + this.rangeColW + 12; }
+    // private wedgeW(i: number) { return this.wedgeMaxW - (i * this.wedgeDelta); }
+    wedgeW(i) {
+        // A..G => 0..6 → widths increase downward
+        return this.wedgeMinW + i * this.wedgeDelta;
+    }
+    rowY(i) { return this.topY + i * (this.rowH + this.gapY); }
+    wedgePoints1(i) {
+        const x = this.wedgeX(i), y = this.rowY(i), w = this.wedgeW(i), h = this.rowH, c = this.cut;
+        // rectangle with right chevron tip
+        // (x,y) → (x+w-c,y) → (x+w,y+h/2) → (x+w-c,y+h) → (x,y+h)
+        return `${x},${y} ${x + w - c},${y} ${x + w},${y + h / 2} ${x + w - c},${y + h} ${x},${y + h}`;
+    }
+    wedgePoints(i) {
+        const x = this.wedgeX(i), y = this.rowY(i), w = this.wedgeW(i), h = this.rowH;
+        // rectangle: (x,y) → (x+w,y) → (x+w,y+h) → (x,y+h)
+        return `${x},${y} ${x + w},${y} ${x + w},${y + h} ${x},${y + h}`;
+    }
+    wedgeLetterX(i) {
+        // place on the trailing (right) end of wedge, just before chevron tip
+        return this.wedgeX(i) + this.wedgeW(i) - this.cut - 10;
+    }
+    // arrow badge (left-pointing)
+    arrowPoints() {
+        const w = this.arrowW, h = this.arrowH, tip = 18; // tip depth
+        // (w,0) → (tip,0) → (0,h/2) → (tip,h) → (w,h) → close
+        return `${w},0 ${tip},0 0,${h / 2} ${tip},${h} ${w},${h}`;
+    }
+    // vertical placement: center the arrow in the band row for the given score
+    arrowY(score) {
+        const b = bandFromScore(score);
+        const rowIndex = this.bands.indexOf(b);
+        const y = this.rowY(rowIndex) + (this.rowH - this.arrowH) / 2;
+        return Math.max(y, this.topY); // safety
+    }
+    clampScore(s) { return Math.max(1, Math.min(100, Math.round(s))); }
+    // add below COLORS, bandFromScore...
+    colorForBand(b) { return COLORS[b]; }
+    colorForScore(s) { return this.colorForBand(bandFromScore(s)); }
+    // simple contrast so numbers stay readable
+    textColorForBand(b) {
+        const hex = this.colorForBand(b).replace('#', '');
+        const r = parseInt(hex.slice(0, 2), 16);
+        const g = parseInt(hex.slice(2, 4), 16);
+        const bl = parseInt(hex.slice(4, 6), 16);
+        const yiq = (r * 299 + g * 587 + bl * 114) / 1000;
+        return yiq >= 170 ? '#111' : '#fff'; // light bg → dark text, else white
+    }
+    textColorForScore(s) { return this.textColorForBand(bandFromScore(s)); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: EpcChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.0", type: EpcChart, isStandalone: true, selector: "rolatech-epc-chart", inputs: { currentScore: { classPropertyName: "currentScore", publicName: "currentScore", isSignal: true, isRequired: false, transformFunction: null }, potentialScore: { classPropertyName: "potentialScore", publicName: "potentialScore", isSignal: true, isRequired: false, transformFunction: null }, showCaptions: { classPropertyName: "showCaptions", publicName: "showCaptions", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "w-full" }, ngImport: i0, template: "<svg [attr.viewBox]=\"'0 0 ' + width + ' ' + height\" class=\"w-full h-auto\">\n  <!-- outer border -->\n  <rect x=\"8\" y=\"8\" [attr.width]=\"width-16\" [attr.height]=\"height-16\" fill=\"none\" stroke=\"#111\" stroke-width=\"2\" />\n\n  <!-- header row -->\n  <text [attr.x]=\"leftPadding\" [attr.y]=\"headerY\" font-weight=\"700\" font-size=\"16\">Energy Rating</text>\n  <text [attr.x]=\"currentColX + arrowW/2\" [attr.y]=\"headerY\" text-anchor=\"middle\" font-weight=\"700\" font-size=\"16\">\n    Current\n  </text>\n  <text [attr.x]=\"potentialColX + arrowW/2\" [attr.y]=\"headerY\" text-anchor=\"middle\" font-weight=\"700\" font-size=\"16\">\n    Potential\n  </text>\n  <line x1=\"8\" [attr.y1]=\"headerY+10\" [attr.x2]=\"width-8\" [attr.y2]=\"headerY+10\" stroke=\"#111\" stroke-width=\"2\" />\n\n  <!-- top/bottom captions -->\n  @if (showCaptions()) {\n  <text [attr.x]=\"leftPadding\" [attr.y]=\"topCaptionY\" fill=\"#9CA3AF\" font-size=\"20\">\n    very energy efficient - lower running costs\n  </text>\n  <text [attr.x]=\"leftPadding\" [attr.y]=\"bottomCaptionY\" fill=\"#9CA3AF\" font-size=\"20\">\n    not energy efficient - higher running costs\n  </text>\n  }\n\n  <!-- Wedges (A..G) -->\n  @for (b of bands; track b; let i = $index) {\n  <!-- range text column -->\n  <text [attr.x]=\"rangeX\" [attr.y]=\"rowY(i) + rowH/2 + 5\" fill=\"#6B7280\" font-size=\"16\">{{ RANGES[b] }}</text>\n\n  <!-- colored wedge -->\n  <polygon [attr.points]=\"wedgePoints(i)\" [attr.fill]=\"COLORS[b]\" stroke=\"none\" />\n\n  <!-- band letter -->\n  <text\n    [attr.x]=\"wedgeLetterX(i)\"\n    [attr.y]=\"rowY(i) + rowH/2 + 8\"\n    fill=\"white\"\n    font-size=\"28\"\n    font-weight=\"700\"\n    text-anchor=\"end\"\n  >\n    {{ b }}\n  </text>\n  }\n\n  <!-- Current arrow badge -->\n  @if (currentScore() !== null) {\n  <g [attr.transform]=\"'translate(' + currentColX + ',' + arrowY(currentScore()!) + ')'\">\n    <polygon [attr.points]=\"arrowPoints()\" [attr.fill]=\"colorForScore(currentScore()!)\"></polygon>\n    <text\n      [attr.x]=\"arrowW/2 + 6\"\n      [attr.y]=\"arrowH/2 + 9\"\n      text-anchor=\"middle\"\n      font-size=\"24\"\n      font-weight=\"800\"\n      [attr.fill]=\"textColorForScore(currentScore()!)\"\n    >\n      {{ clampScore(currentScore()!) }}\n    </text>\n    <!-- underline (optional) -->\n    <rect\n      [attr.x]=\"arrowW/2 - 12\"\n      [attr.y]=\"arrowH/2 + 12\"\n      width=\"36\"\n      height=\"3\"\n      [attr.fill]=\"textColorForScore(currentScore()!)\"\n      opacity=\"0.8\"\n    />\n  </g>\n  }\n\n  <!-- Potential arrow badge -->\n  @if (potentialScore() !== null) {\n  <g [attr.transform]=\"'translate(' + potentialColX + ',' + arrowY(potentialScore()!) + ')'\">\n    <polygon [attr.points]=\"arrowPoints()\" [attr.fill]=\"colorForScore(potentialScore()!)\"></polygon>\n    <text\n      [attr.x]=\"arrowW/2 + 6\"\n      [attr.y]=\"arrowH/2 + 9\"\n      text-anchor=\"middle\"\n      font-size=\"24\"\n      font-weight=\"800\"\n      [attr.fill]=\"textColorForScore(potentialScore()!)\"\n    >\n      {{ clampScore(potentialScore()!) }}\n    </text>\n  </g>\n  }\n</svg>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: EpcChart, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-epc-chart', imports: [CommonModule], host: { class: 'w-full' }, template: "<svg [attr.viewBox]=\"'0 0 ' + width + ' ' + height\" class=\"w-full h-auto\">\n  <!-- outer border -->\n  <rect x=\"8\" y=\"8\" [attr.width]=\"width-16\" [attr.height]=\"height-16\" fill=\"none\" stroke=\"#111\" stroke-width=\"2\" />\n\n  <!-- header row -->\n  <text [attr.x]=\"leftPadding\" [attr.y]=\"headerY\" font-weight=\"700\" font-size=\"16\">Energy Rating</text>\n  <text [attr.x]=\"currentColX + arrowW/2\" [attr.y]=\"headerY\" text-anchor=\"middle\" font-weight=\"700\" font-size=\"16\">\n    Current\n  </text>\n  <text [attr.x]=\"potentialColX + arrowW/2\" [attr.y]=\"headerY\" text-anchor=\"middle\" font-weight=\"700\" font-size=\"16\">\n    Potential\n  </text>\n  <line x1=\"8\" [attr.y1]=\"headerY+10\" [attr.x2]=\"width-8\" [attr.y2]=\"headerY+10\" stroke=\"#111\" stroke-width=\"2\" />\n\n  <!-- top/bottom captions -->\n  @if (showCaptions()) {\n  <text [attr.x]=\"leftPadding\" [attr.y]=\"topCaptionY\" fill=\"#9CA3AF\" font-size=\"20\">\n    very energy efficient - lower running costs\n  </text>\n  <text [attr.x]=\"leftPadding\" [attr.y]=\"bottomCaptionY\" fill=\"#9CA3AF\" font-size=\"20\">\n    not energy efficient - higher running costs\n  </text>\n  }\n\n  <!-- Wedges (A..G) -->\n  @for (b of bands; track b; let i = $index) {\n  <!-- range text column -->\n  <text [attr.x]=\"rangeX\" [attr.y]=\"rowY(i) + rowH/2 + 5\" fill=\"#6B7280\" font-size=\"16\">{{ RANGES[b] }}</text>\n\n  <!-- colored wedge -->\n  <polygon [attr.points]=\"wedgePoints(i)\" [attr.fill]=\"COLORS[b]\" stroke=\"none\" />\n\n  <!-- band letter -->\n  <text\n    [attr.x]=\"wedgeLetterX(i)\"\n    [attr.y]=\"rowY(i) + rowH/2 + 8\"\n    fill=\"white\"\n    font-size=\"28\"\n    font-weight=\"700\"\n    text-anchor=\"end\"\n  >\n    {{ b }}\n  </text>\n  }\n\n  <!-- Current arrow badge -->\n  @if (currentScore() !== null) {\n  <g [attr.transform]=\"'translate(' + currentColX + ',' + arrowY(currentScore()!) + ')'\">\n    <polygon [attr.points]=\"arrowPoints()\" [attr.fill]=\"colorForScore(currentScore()!)\"></polygon>\n    <text\n      [attr.x]=\"arrowW/2 + 6\"\n      [attr.y]=\"arrowH/2 + 9\"\n      text-anchor=\"middle\"\n      font-size=\"24\"\n      font-weight=\"800\"\n      [attr.fill]=\"textColorForScore(currentScore()!)\"\n    >\n      {{ clampScore(currentScore()!) }}\n    </text>\n    <!-- underline (optional) -->\n    <rect\n      [attr.x]=\"arrowW/2 - 12\"\n      [attr.y]=\"arrowH/2 + 12\"\n      width=\"36\"\n      height=\"3\"\n      [attr.fill]=\"textColorForScore(currentScore()!)\"\n      opacity=\"0.8\"\n    />\n  </g>\n  }\n\n  <!-- Potential arrow badge -->\n  @if (potentialScore() !== null) {\n  <g [attr.transform]=\"'translate(' + potentialColX + ',' + arrowY(potentialScore()!) + ')'\">\n    <polygon [attr.points]=\"arrowPoints()\" [attr.fill]=\"colorForScore(potentialScore()!)\"></polygon>\n    <text\n      [attr.x]=\"arrowW/2 + 6\"\n      [attr.y]=\"arrowH/2 + 9\"\n      text-anchor=\"middle\"\n      font-size=\"24\"\n      font-weight=\"800\"\n      [attr.fill]=\"textColorForScore(potentialScore()!)\"\n    >\n      {{ clampScore(potentialScore()!) }}\n    </text>\n  </g>\n  }\n</svg>\n" }]
         }] });
 
 class PropertyEpc {
     epc = input.required(...(ngDevMode ? [{ debugName: "epc" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyEpc, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.0", type: PropertyEpc, isStandalone: true, selector: "rolatech-property-epc", inputs: { epc: { classPropertyName: "epc", publicName: "epc", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"\">\n  <div class=\"text-2xl font-bold py-3\" i18n>EPC</div>\n  <div class=\"flex flex-col flex-wrap items-center text-sm\">\n    <div>{{epc().name}}</div>\n    <div>{{epc().score}}</div>\n  </div>\n</div>\n", styles: [""] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.0", type: PropertyEpc, isStandalone: true, selector: "rolatech-property-epc", inputs: { epc: { classPropertyName: "epc", publicName: "epc", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"w-full\">\n  <div class=\"text-2xl font-bold py-3\" i18n>EPC</div>\n  <div class=\"flex flex-row items-center font-thin text-sm\">\n    <rolatech-epc-chart\n      [currentScore]=\"epc().currentScore\"\n      [potentialScore]=\"epc().potentialScore\"\n      [showCaptions]=\"true\"\n    ></rolatech-epc-chart>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: EpcChart, selector: "rolatech-epc-chart", inputs: ["currentScore", "potentialScore", "showCaptions"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyEpc, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-property-epc', imports: [], template: "<div class=\"\">\n  <div class=\"text-2xl font-bold py-3\" i18n>EPC</div>\n  <div class=\"flex flex-col flex-wrap items-center text-sm\">\n    <div>{{epc().name}}</div>\n    <div>{{epc().score}}</div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'rolatech-property-epc', imports: [EpcChart], template: "<div class=\"w-full\">\n  <div class=\"text-2xl font-bold py-3\" i18n>EPC</div>\n  <div class=\"flex flex-row items-center font-thin text-sm\">\n    <rolatech-epc-chart\n      [currentScore]=\"epc().currentScore\"\n      [potentialScore]=\"epc().potentialScore\"\n      [showCaptions]=\"true\"\n    ></rolatech-epc-chart>\n  </div>\n</div>\n" }]
         }] });
 
 class PropertyDetailsComponent extends BaseComponent {
@@ -1382,14 +1504,14 @@ class PropertyDetailsComponent extends BaseComponent {
     findFeatures() {
         this.propertyService.findFeatures(this.id).subscribe({
             next: (res) => {
-                this.features = res.data;
+                this.features = res.data || [];
             }
         });
     }
     findHighlights() {
         this.propertyService.getHighlights(this.id).subscribe({
             next: (res) => {
-                this.highlights = res.data;
+                this.highlights = res.data || [];
             }
         });
     }
@@ -1478,7 +1600,7 @@ class PropertyDetailsComponent extends BaseComponent {
         // const updatedCriteria = matchingVariant ? updateCriteriaFromVariant(matchingVariant) : [];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.0", type: PropertyDetailsComponent, isStandalone: true, selector: "rolatech-property-details", usesInheritance: true, ngImport: i0, template: "@if (property) {\n  <rolatech-container>\n    <div class=\"flex flex-col w-full\">\n      <div class=\"py-3\">\n        <rolatech-property-media [media]=\"property.media\"></rolatech-property-media>\n      </div>\n      <div class=\"flex flex-col md:flex-row gap-3 w-full\">\n        <div class=\"w-full md:w-2/3\">\n          <rolatech-property-info [property]=\"property\" (wish)=\"onWish($event)\" [inWishList]=\"inWishList\">\n          </rolatech-property-info>\n          <!-- <rolatech-property-agent-renderer\n            [name]=\"fullname\"\n            [avatar]=\"user?.avatar\"\n            [username]=\"username\"\n          ></rolatech-property-agent-renderer> -->\n          <mat-divider></mat-divider>\n          <rolatech-property-features [features]=\"features\"></rolatech-property-features>\n          <rolatech-property-highlights [highlights]=\"highlights\"></rolatech-property-highlights>\n          <rolatech-property-epc [epc]=\"epc\"></rolatech-property-epc>\n          <rolatech-property-location [location]=\"property.location\"></rolatech-property-location>\n          @if (property.videos) {\n            @for (item of property.videos; track $index) {\n              <rolatech-property-video [video]=\"item\"></rolatech-property-video>\n            }\n          }\n          <div class=\"flex flex-col\">\n            <div class=\"text-2xl font-bold pt-3\" i18n>Sections</div>\n            @for (section of property.sections; track $index) {\n              <rolatech-property-section [section]=\"section\"></rolatech-property-section>\n            }\n            <rolatech-comments [itemId]=\"property.id\"></rolatech-comments>\n          </div>\n        </div>\n        <div class=\"w-full md:w-1/3\">\n          <rolatech-property-agent-renderer\n            [name]=\"fullname\"\n            [avatar]=\"user?.avatar\"\n            [username]=\"username\"\n          ></rolatech-property-agent-renderer>\n          <rolatech-property-pricing (wish)=\"onWish($event)\" [property]=\"property\"></rolatech-property-pricing>\n          <rolatech-property-actions\n            [property]=\"property\"\n            (offer)=\"onOffer($event)\"\n            (deposit)=\"onOffer($event)\"\n            (requestViewing)=\"onRequestViewing($event)\"\n          >\n            @if (user) {\n              <rolatech-property-action-contact [email]=\"user.email\" [phone]=\"user.phone\"></rolatech-property-action-contact>\n            }\n          </rolatech-property-actions>\n        </div>\n      </div>\n    </div>\n  </rolatech-container>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: PropertyInfoComponent, selector: "rolatech-property-info", inputs: ["property", "inWishList"], outputs: ["wish"] }, { kind: "component", type: PropertyMediaComponent, selector: "rolatech-property-media", inputs: ["media", "min"] }, { kind: "component", type: PropertyPricingComponent, selector: "rolatech-property-pricing", inputs: ["property", "price"] }, { kind: "component", type: PropertySectionComponent, selector: "rolatech-property-section", inputs: ["section", "user", "username"] }, { kind: "component", type: PropertyActionsComponent, selector: "rolatech-property-actions", inputs: ["property"], outputs: ["requestViewing", "offer", "deposit"] }, { kind: "component", type: CommentsComponent, selector: "rolatech-comments", inputs: ["itemId"] }, { kind: "component", type: PropertyAgentRenderer, selector: "rolatech-property-agent-renderer", inputs: ["name", "avatar", "username", "subtitle"] }, { kind: "component", type: PropertyLocationComponent, selector: "rolatech-property-location", inputs: ["location"] }, { kind: "component", type: PropertyFeaturesComponent, selector: "rolatech-property-features", inputs: ["features"] }, { kind: "component", type: PropertyVideoComponent, selector: "rolatech-property-video", inputs: ["video"] }, { kind: "component", type: PropertyActionContactComponent, selector: "rolatech-property-action-contact", inputs: ["email", "phone"], outputs: ["callAgent", "emailAgent"] }, { kind: "component", type: PropertyHighlights, selector: "rolatech-property-highlights", inputs: ["highlights"] }, { kind: "component", type: PropertyEpc, selector: "rolatech-property-epc", inputs: ["epc"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.0", type: PropertyDetailsComponent, isStandalone: true, selector: "rolatech-property-details", usesInheritance: true, ngImport: i0, template: "@if (property) {\n  <rolatech-container>\n    <div class=\"flex flex-col w-full\">\n      <div class=\"py-3\">\n        <rolatech-property-media [media]=\"property.media\"></rolatech-property-media>\n      </div>\n      <div class=\"flex flex-col md:flex-row gap-3 w-full\">\n        <div class=\"w-full md:w-2/3\">\n          <rolatech-property-info [property]=\"property\" (wish)=\"onWish($event)\" [inWishList]=\"inWishList\">\n          </rolatech-property-info>\n          <!-- <rolatech-property-agent-renderer\n            [name]=\"fullname\"\n            [avatar]=\"user?.avatar\"\n            [username]=\"username\"\n          ></rolatech-property-agent-renderer> -->\n          <mat-divider></mat-divider>\n\n          @if (features.length > 0) {\n            <rolatech-property-features [features]=\"features\"></rolatech-property-features>\n          }\n          @if (highlights.length > 0) {\n            <rolatech-property-highlights [highlights]=\"highlights\"></rolatech-property-highlights>\n          }\n          <!-- <rolatech-property-epc [epc]=\"epc\"></rolatech-property-epc> -->\n          <rolatech-property-location [location]=\"property.location\"></rolatech-property-location>\n          @if (property.videos) {\n            @for (item of property.videos; track $index) {\n              <rolatech-property-video [video]=\"item\"></rolatech-property-video>\n            }\n          }\n          @if (epc && epc.currentScore) {\n            <rolatech-property-epc [epc]=\"epc\"></rolatech-property-epc>\n          }\n          <div class=\"flex flex-col\">\n            <div class=\"text-2xl font-bold pt-3\" i18n>Sections</div>\n            @for (section of property.sections; track $index) {\n              <rolatech-property-section [section]=\"section\"></rolatech-property-section>\n            }\n            <rolatech-comments [itemId]=\"property.id\"></rolatech-comments>\n          </div>\n        </div>\n        <div class=\"w-full md:w-1/3\">\n          <rolatech-property-agent-renderer\n            [name]=\"fullname\"\n            [avatar]=\"user?.avatar\"\n            [username]=\"username\"\n          ></rolatech-property-agent-renderer>\n          <rolatech-property-pricing (wish)=\"onWish($event)\" [property]=\"property\"></rolatech-property-pricing>\n          <rolatech-property-actions\n            [property]=\"property\"\n            (offer)=\"onOffer($event)\"\n            (deposit)=\"onOffer($event)\"\n            (requestViewing)=\"onRequestViewing($event)\"\n          >\n            @if (user) {\n              <rolatech-property-action-contact [email]=\"user.email\" [phone]=\"user.phone\"></rolatech-property-action-contact>\n            }\n          </rolatech-property-actions>\n        </div>\n      </div>\n    </div>\n  </rolatech-container>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: PropertyInfoComponent, selector: "rolatech-property-info", inputs: ["property", "inWishList"], outputs: ["wish"] }, { kind: "component", type: PropertyMediaComponent, selector: "rolatech-property-media", inputs: ["media", "min"] }, { kind: "component", type: PropertyPricingComponent, selector: "rolatech-property-pricing", inputs: ["property", "price"] }, { kind: "component", type: PropertySectionComponent, selector: "rolatech-property-section", inputs: ["section", "user", "username"] }, { kind: "component", type: PropertyActionsComponent, selector: "rolatech-property-actions", inputs: ["property"], outputs: ["requestViewing", "offer", "deposit"] }, { kind: "component", type: CommentsComponent, selector: "rolatech-comments", inputs: ["itemId"] }, { kind: "component", type: PropertyAgentRenderer, selector: "rolatech-property-agent-renderer", inputs: ["name", "avatar", "username", "subtitle"] }, { kind: "component", type: PropertyLocationComponent, selector: "rolatech-property-location", inputs: ["location"] }, { kind: "component", type: PropertyFeaturesComponent, selector: "rolatech-property-features", inputs: ["features"] }, { kind: "component", type: PropertyVideoComponent, selector: "rolatech-property-video", inputs: ["video"] }, { kind: "component", type: PropertyActionContactComponent, selector: "rolatech-property-action-contact", inputs: ["email", "phone"], outputs: ["callAgent", "emailAgent"] }, { kind: "component", type: PropertyHighlights, selector: "rolatech-property-highlights", inputs: ["highlights"] }, { kind: "component", type: PropertyEpc, selector: "rolatech-property-epc", inputs: ["epc"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyDetailsComponent, decorators: [{
             type: Component,
@@ -1498,8 +1620,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImpor
                         PropertyVideoComponent,
                         PropertyActionContactComponent,
                         PropertyHighlights,
-                        PropertyEpc
-                    ], template: "@if (property) {\n  <rolatech-container>\n    <div class=\"flex flex-col w-full\">\n      <div class=\"py-3\">\n        <rolatech-property-media [media]=\"property.media\"></rolatech-property-media>\n      </div>\n      <div class=\"flex flex-col md:flex-row gap-3 w-full\">\n        <div class=\"w-full md:w-2/3\">\n          <rolatech-property-info [property]=\"property\" (wish)=\"onWish($event)\" [inWishList]=\"inWishList\">\n          </rolatech-property-info>\n          <!-- <rolatech-property-agent-renderer\n            [name]=\"fullname\"\n            [avatar]=\"user?.avatar\"\n            [username]=\"username\"\n          ></rolatech-property-agent-renderer> -->\n          <mat-divider></mat-divider>\n          <rolatech-property-features [features]=\"features\"></rolatech-property-features>\n          <rolatech-property-highlights [highlights]=\"highlights\"></rolatech-property-highlights>\n          <rolatech-property-epc [epc]=\"epc\"></rolatech-property-epc>\n          <rolatech-property-location [location]=\"property.location\"></rolatech-property-location>\n          @if (property.videos) {\n            @for (item of property.videos; track $index) {\n              <rolatech-property-video [video]=\"item\"></rolatech-property-video>\n            }\n          }\n          <div class=\"flex flex-col\">\n            <div class=\"text-2xl font-bold pt-3\" i18n>Sections</div>\n            @for (section of property.sections; track $index) {\n              <rolatech-property-section [section]=\"section\"></rolatech-property-section>\n            }\n            <rolatech-comments [itemId]=\"property.id\"></rolatech-comments>\n          </div>\n        </div>\n        <div class=\"w-full md:w-1/3\">\n          <rolatech-property-agent-renderer\n            [name]=\"fullname\"\n            [avatar]=\"user?.avatar\"\n            [username]=\"username\"\n          ></rolatech-property-agent-renderer>\n          <rolatech-property-pricing (wish)=\"onWish($event)\" [property]=\"property\"></rolatech-property-pricing>\n          <rolatech-property-actions\n            [property]=\"property\"\n            (offer)=\"onOffer($event)\"\n            (deposit)=\"onOffer($event)\"\n            (requestViewing)=\"onRequestViewing($event)\"\n          >\n            @if (user) {\n              <rolatech-property-action-contact [email]=\"user.email\" [phone]=\"user.phone\"></rolatech-property-action-contact>\n            }\n          </rolatech-property-actions>\n        </div>\n      </div>\n    </div>\n  </rolatech-container>\n}\n" }]
+                        PropertyEpc,
+                    ], template: "@if (property) {\n  <rolatech-container>\n    <div class=\"flex flex-col w-full\">\n      <div class=\"py-3\">\n        <rolatech-property-media [media]=\"property.media\"></rolatech-property-media>\n      </div>\n      <div class=\"flex flex-col md:flex-row gap-3 w-full\">\n        <div class=\"w-full md:w-2/3\">\n          <rolatech-property-info [property]=\"property\" (wish)=\"onWish($event)\" [inWishList]=\"inWishList\">\n          </rolatech-property-info>\n          <!-- <rolatech-property-agent-renderer\n            [name]=\"fullname\"\n            [avatar]=\"user?.avatar\"\n            [username]=\"username\"\n          ></rolatech-property-agent-renderer> -->\n          <mat-divider></mat-divider>\n\n          @if (features.length > 0) {\n            <rolatech-property-features [features]=\"features\"></rolatech-property-features>\n          }\n          @if (highlights.length > 0) {\n            <rolatech-property-highlights [highlights]=\"highlights\"></rolatech-property-highlights>\n          }\n          <!-- <rolatech-property-epc [epc]=\"epc\"></rolatech-property-epc> -->\n          <rolatech-property-location [location]=\"property.location\"></rolatech-property-location>\n          @if (property.videos) {\n            @for (item of property.videos; track $index) {\n              <rolatech-property-video [video]=\"item\"></rolatech-property-video>\n            }\n          }\n          @if (epc && epc.currentScore) {\n            <rolatech-property-epc [epc]=\"epc\"></rolatech-property-epc>\n          }\n          <div class=\"flex flex-col\">\n            <div class=\"text-2xl font-bold pt-3\" i18n>Sections</div>\n            @for (section of property.sections; track $index) {\n              <rolatech-property-section [section]=\"section\"></rolatech-property-section>\n            }\n            <rolatech-comments [itemId]=\"property.id\"></rolatech-comments>\n          </div>\n        </div>\n        <div class=\"w-full md:w-1/3\">\n          <rolatech-property-agent-renderer\n            [name]=\"fullname\"\n            [avatar]=\"user?.avatar\"\n            [username]=\"username\"\n          ></rolatech-property-agent-renderer>\n          <rolatech-property-pricing (wish)=\"onWish($event)\" [property]=\"property\"></rolatech-property-pricing>\n          <rolatech-property-actions\n            [property]=\"property\"\n            (offer)=\"onOffer($event)\"\n            (deposit)=\"onOffer($event)\"\n            (requestViewing)=\"onRequestViewing($event)\"\n          >\n            @if (user) {\n              <rolatech-property-action-contact [email]=\"user.email\" [phone]=\"user.phone\"></rolatech-property-action-contact>\n            }\n          </rolatech-property-actions>\n        </div>\n      </div>\n    </div>\n  </rolatech-container>\n}\n" }]
         }], ctorParameters: () => [] });
 
 const MY_FORMATS$5 = {
@@ -2309,7 +2431,7 @@ const propertyRoutes = [
         children: [
             {
                 path: '',
-                loadComponent: () => import('./rolatech-angular-property-property-index.component-Bg9L4p2Z.mjs').then((x) => x.PropertyIndexComponent),
+                loadComponent: () => import('./rolatech-angular-property-property-index.component-CbbxIQ8w.mjs').then((x) => x.PropertyIndexComponent),
             },
         ],
     },
@@ -3206,13 +3328,12 @@ class PropertyManageLocationComponent extends BaseComponent {
         longitude: '',
         latitude: '',
     }, ...(ngDevMode ? [{ debugName: "location" }] : []));
-    platformId = inject(PLATFORM_ID);
     placeAutocompleteElement;
     autocompleteInput;
     ngOnInit() {
         this.id = this.route.parent?.snapshot.paramMap.get('id');
         this.find();
-        if (isPlatformBrowser(this.platformId)) {
+        if (this.isBrowser) {
             // this.autocompleteService = new google.maps.places.AutocompleteService();
         }
     }
@@ -3767,13 +3888,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImpor
             args: [{ selector: 'rolatech-property-manage-highlights', imports: [PropertyManageContentComponent, ToolbarComponent], template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Highlights\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <div>\n    @for (item of highlights; track $index) {\n    <div class=\"font-bold p-1\">{{item}}</div>\n    }\n  </div>\n</rolatech-property-manage-content>\n" }]
         }] });
 
-class PropertyManageEpc {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyManageEpc, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.0", type: PropertyManageEpc, isStandalone: true, selector: "rolatech-property-manage-epc", ngImport: i0, template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"EPC\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <div></div>\n</rolatech-property-manage-content>\n", styles: [""], dependencies: [{ kind: "component", type: PropertyManageContentComponent, selector: "rolatech-property-manage-content" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }] });
+class PropertyManageEpc extends BaseComponent {
+    propertyService = inject(PropertyService);
+    currentRating = '';
+    potentialRating = '';
+    currentScore = 0;
+    potentialScore = 0;
+    ngOnInit() {
+        this.id = this.route.parent?.snapshot.paramMap.get('id');
+        this.get();
+    }
+    get() {
+        this.propertyService.getEpc(this.id).subscribe({
+            next: (res) => {
+                this.currentScore = res.data.currentScore || 0;
+                this.potentialScore = res.data.potentialScore || 0;
+            }
+        });
+    }
+    add() {
+        const data = {
+            currentScore: this.currentScore,
+            potentialScore: this.potentialScore
+        };
+        this.propertyService.addEpc(this.id, data).subscribe({
+            next: res => {
+                this.snackBarService.open("EPC Added");
+            }
+        });
+    }
+    update() {
+        const data = {
+            currentScore: this.currentScore,
+            potentialScore: this.potentialScore
+        };
+        this.propertyService.updateEpc(this.id, data).subscribe({
+            next: res => {
+                this.snackBarService.open("EPC Updated");
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyManageEpc, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.0", type: PropertyManageEpc, isStandalone: true, selector: "rolatech-property-manage-epc", usesInheritance: true, ngImport: i0, template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"EPC\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <div class=\"w-full md:max-w-[70%]\">\n    <div class=\"p-2\">\n      <mat-form-field appearance=\"fill\">\n        <mat-label>Current Score</mat-label>\n        <input matInput [(ngModel)]=\"currentScore\" placeholder=\"Current Score\" />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <mat-label>Potential Score</mat-label>\n        <input matInput [(ngModel)]=\"potentialScore\" placeholder=\"Potential Score\" />\n      </mat-form-field>\n      <button mat-flat-button (click)=\"add()\">Save</button>\n    </div>\n    <div>\n      <div class=\"font-bold text-lg p-2\">Domestic EPC</div>\n      <rolatech-epc-chart\n        [currentScore]=\"currentScore\"\n        [potentialScore]=\"potentialScore\"\n        [showCaptions]=\"true\"\n      ></rolatech-epc-chart>\n    </div>\n  </div>\n</rolatech-property-manage-content>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: PropertyManageContentComponent, selector: "rolatech-property-manage-content" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: EpcChart, selector: "rolatech-epc-chart", inputs: ["currentScore", "potentialScore", "showCaptions"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyManageEpc, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-property-manage-epc', imports: [PropertyManageContentComponent, ToolbarComponent], template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"EPC\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <div></div>\n</rolatech-property-manage-content>\n" }]
+            args: [{ selector: 'rolatech-property-manage-epc', imports: [PropertyManageContentComponent, ToolbarComponent, EpcChart, MatFormFieldModule, FormsModule, MatInputModule, MatButtonModule], template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"EPC\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <div class=\"w-full md:max-w-[70%]\">\n    <div class=\"p-2\">\n      <mat-form-field appearance=\"fill\">\n        <mat-label>Current Score</mat-label>\n        <input matInput [(ngModel)]=\"currentScore\" placeholder=\"Current Score\" />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <mat-label>Potential Score</mat-label>\n        <input matInput [(ngModel)]=\"potentialScore\" placeholder=\"Potential Score\" />\n      </mat-form-field>\n      <button mat-flat-button (click)=\"add()\">Save</button>\n    </div>\n    <div>\n      <div class=\"font-bold text-lg p-2\">Domestic EPC</div>\n      <rolatech-epc-chart\n        [currentScore]=\"currentScore\"\n        [potentialScore]=\"potentialScore\"\n        [showCaptions]=\"true\"\n      ></rolatech-epc-chart>\n    </div>\n  </div>\n</rolatech-property-manage-content>\n", styles: ["mat-form-field{width:100%}\n"] }]
         }] });
 
 class PropertyManageTranslation {
@@ -3948,7 +4108,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImpor
 const propertyManageViewingsRoutes = [
     {
         path: '',
-        loadComponent: () => import('./rolatech-angular-property-property-manage-viewings-index.component-UsM6RfhW.mjs').then((x) => x.PropertyManageViewingsIndexComponent),
+        loadComponent: () => import('./rolatech-angular-property-property-manage-viewings-index.component-Bk02i8QS.mjs').then((x) => x.PropertyManageViewingsIndexComponent),
     },
     {
         path: ':id',
@@ -4561,5 +4721,5 @@ const tenantManageRoutes = [
  * Generated bundle index. Do not edit.
  */
 
-export { AdverseCreditStatus as A, EmploymentStatus as E, PropertyViewingItemComponent as P, ResidencyStatus as R, ViewingTime as V, propertyManageOffersRoutes as a, propertyRoutes as b, propertyManageRoutes as c, propertyManageViewingsRoutes as d, PropertyActionsComponent as e, featureManageRoutes as f, PropertyItemComponent as g, PropertyPricingComponent as h, PropertyPriceType as i, PropertyVideoProvider as j, PropertyStatus as k, lettingManageRoutes as l, PropertyType as m, PropertyInventoryStatus as n, PropertyScope as o, propertyReviewRoutes as p, PropertyViewingStatus as q, PropertyViewerCategory as r, PropertyOfferTimelineStatus as s, tenantManageRoutes as t, PropertyOfferType as u, PropertyOfferStatus as v, PropertyApplicantType as w };
-//# sourceMappingURL=rolatech-angular-property-rolatech-angular-property-CQG71H-d.mjs.map
+export { AdverseCreditStatus as A, EmploymentStatus as E, PropertyUtil as P, ResidencyStatus 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, PropertyActionsComponent as h, PropertyItemComponent as i, PropertyPricingComponent as j, PropertyPriceType as k, lettingManageRoutes as l, PropertyVideoProvider as m, PropertyStatus as n, PropertyType as o, propertyReviewRoutes as p, PropertyInventoryStatus as q, PropertyScope as r, PropertyViewingStatus as s, tenantManageRoutes as t, PropertyViewerCategory as u, PropertyOfferTimelineStatus as v, PropertyOfferType as w, PropertyOfferStatus as x, PropertyApplicantType as y };
+//# sourceMappingURL=rolatech-angular-property-rolatech-angular-property-nGHNbG8j.mjs.map