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

package/fesm2022/{rolatech-angular-property-rolatech-angular-property-B4w7sAFv.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,11 +10,11 @@ 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, VideoUpload } from '@rolatech/angular-components';
-import { PropertyService, FeatureService } from '@rolatech/angular-services';
+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';
-import { FixedPipe, AngularCommonModule, OptionsFormatPipe, APP_CONFIG, DecimalDirective } from '@rolatech/angular-common';
+import { FixedPipe, AngularCommonModule, OptionsFormatPipe, APP_CONFIG, DecimalDirective, DurationPipe } from '@rolatech/angular-common';
 import * as i2 from '@angular/material/icon';
 import { MatIconModule, MatIcon } from '@angular/material/icon';
 import { MatDialog } from '@angular/material/dialog';
@@ -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';
@@ -61,13 +61,13 @@ var PropertyPriceType;
     PropertyPriceType["PARTIAL"] = "\u652F\u4ED8\u5B9A\u91D1";
     PropertyPriceType["VARIED"] = "\u591A\u53D8\u7684";
 })(PropertyPriceType || (PropertyPriceType = {}));
-var PropertyVideoTourType;
-(function (PropertyVideoTourType) {
-    PropertyVideoTourType["YOUTUBE"] = "Youtube";
-    PropertyVideoTourType["S3"] = "AWS S3";
-    PropertyVideoTourType["LOCAL"] = "Local server";
-    PropertyVideoTourType["COS"] = "COS";
-})(PropertyVideoTourType || (PropertyVideoTourType = {}));
+var PropertyVideoProvider;
+(function (PropertyVideoProvider) {
+    PropertyVideoProvider["YOUTUBE"] = "YOUTUBE";
+    PropertyVideoProvider["S3"] = "AWS S3";
+    PropertyVideoProvider["LOCAL"] = "Local server";
+    PropertyVideoProvider["COS"] = "COS";
+})(PropertyVideoProvider || (PropertyVideoProvider = {}));
 var PropertyStatus;
 (function (PropertyStatus) {
     PropertyStatus[PropertyStatus["DRAFT"] = 'Draft'] = "DRAFT";
@@ -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 {
@@ -1240,22 +1235,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImpor
             args: [{ selector: 'rolatech-property-section', imports: [CommonModule, ThumbnailComponent], encapsulation: ViewEncapsulation.None, template: "@if (section(); as section) {\n  <div>\n    @if (section.title) {\n      <div class=\"py-3 flex items-center gap-3\">\n        <span class=\"h-4 w-1 bg-[--rt-brand-color] inline-block\"></span>\n        <span class=\"text-lg font-medium py-1\"> {{ section.title }}</span>\n      </div>\n    }\n    @if (section.description) {\n      <div>\n        {{ section.description }}\n      </div>\n    }\n    @if (section.media) {\n      <div class=\"w-80%\">\n        @for (item of section.media; track item) {\n          <div class=\"py-3\">\n            <rolatech-thumbnail\n              [src]=\"item.url\"\n              size=\"small\"\n              mode=\"full\"\n              [width]=\"item.width\"\n              [height]=\"item.height\"\n            ></rolatech-thumbnail>\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n" }]
         }] });
 
-class PropertyVideoTourComponent {
+class PropertyVideoComponent {
     sanitizer = inject(DomSanitizer);
-    videoTour = input.required(...(ngDevMode ? [{ debugName: "videoTour" }] : []));
+    video = input.required(...(ngDevMode ? [{ debugName: "video" }] : []));
     videoUrl = computed(() => {
-        const match = this.videoTour().url.match(/(?:youtu\.be\/|youtube\.com\/watch\?v=)([\w-]+)/);
+        const match = this.video().url.match(/(?:youtu\.be\/|youtube\.com\/watch\?v=)([\w-]+)/);
         if (match && match[1]) {
             return this.sanitizer.bypassSecurityTrustResourceUrl(`https://www.youtube.com/embed/${match[1]}`);
         }
         return null; // Not a valid YouTube URL
     }, ...(ngDevMode ? [{ debugName: "videoUrl" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyVideoTourComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.0", type: PropertyVideoTourComponent, isStandalone: true, selector: "rolatech-property-video-tour", inputs: { videoTour: { classPropertyName: "videoTour", publicName: "videoTour", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"\">\n  <div class=\"text-2xl font-bold py-4\" i18n>Video tour</div>\n  <iframe [src]=\"videoUrl()\" frameborder=\"0\" allowfullscreen class=\"w-full aspect-video\"></iframe>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.0", type: PropertyVideoComponent, isStandalone: true, selector: "rolatech-property-video", inputs: { video: { classPropertyName: "video", publicName: "video", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"\">\n  <div class=\"text-2xl font-bold py-4\" i18n>Videos</div>\n  <iframe [src]=\"videoUrl()\" frameborder=\"0\" allowfullscreen class=\"w-full aspect-video\"></iframe>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyVideoTourComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyVideoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-property-video-tour', imports: [CommonModule], template: "<div class=\"\">\n  <div class=\"text-2xl font-bold py-4\" i18n>Video tour</div>\n  <iframe [src]=\"videoUrl()\" frameborder=\"0\" allowfullscreen class=\"w-full aspect-video\"></iframe>\n</div>\n" }]
+            args: [{ selector: 'rolatech-property-video', imports: [CommonModule], template: "<div class=\"\">\n  <div class=\"text-2xl font-bold py-4\" i18n>Videos</div>\n  <iframe [src]=\"videoUrl()\" frameborder=\"0\" allowfullscreen class=\"w-full aspect-video\"></iframe>\n</div>\n" }]
         }] });
 
 class PropertyActionContactComponent {
@@ -1289,6 +1284,153 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImpor
             args: [{ selector: 'rolatech-property-agent-renderer', imports: [AngularCommonModule, MatIconModule], template: "<div class=\"flex flex-col\">\n  <div class=\"flex flex-row items-center py-3\">\n    <div class=\"flex mr-3 gap-2 items-center\">\n      @if (avatar()) {\n      <div class=\"cursor-pointer\" [routerLink]=\"['/', '@' + username()]\">\n        <img [src]=\"avatar()\" class=\"w-14 h-14 rounded-full\" alt />\n      </div>\n      } @else {\n      <div class=\"w-14 h-14 rounded-full bg-[--rt-brand-color]\"></div>\n      }\n      <div class=\"flex flex-col\">\n        <div class=\"flex items-center text-lg font-bold cursor-pointer\">\n          <a [routerLink]=\"['/', '@' + username()]\">\n            <span>{{ name() }}</span>\n          </a>\n          <mat-icon class=\"verified-icon\">verified</mat-icon>\n        </div>\n        <div class=\"text-lg font-bold text-[--rt-brand-color]\">{{ subtitle() }}</div>\n      </div>\n    </div>\n  </div>\n  <div class=\"text-sm opacity-70\">This listing is verified and managed by an Primecase agent</div>\n</div>\n" }]
         }] });
 
+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\">\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', 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=\"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: [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 {
     authService = inject(AuthService);
     authUserService = inject(AuthUserService);
@@ -1303,6 +1445,8 @@ class PropertyDetailsComponent extends BaseComponent {
     selectedOption;
     variants = [];
     features = [];
+    highlights = [];
+    epc;
     selectedVariant;
     variantOption = signal(undefined, ...(ngDevMode ? [{ debugName: "variantOption" }] : []));
     variantOptionChanged = computed(() => {
@@ -1320,6 +1464,8 @@ class PropertyDetailsComponent extends BaseComponent {
     ngOnInit() {
         this.getProperty();
         this.findFeatures();
+        this.findHighlights();
+        this.getEpc();
     }
     getProperty() {
         this.propertyService.get(this.id).subscribe({
@@ -1356,10 +1502,23 @@ class PropertyDetailsComponent extends BaseComponent {
         });
     }
     findFeatures() {
-        console.log(this.id);
         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 || [];
+            }
+        });
+    }
+    getEpc() {
+        this.propertyService.getEpc(this.id).subscribe({
+            next: (res) => {
+                this.epc = res.data;
             }
         });
     }
@@ -1441,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-location [location]=\"property.location\"></rolatech-property-location>\n          @if (property.videoTours) {\n            @for (item of property.videoTours; track $index) {\n              <rolatech-property-video-tour [videoTour]=\"item\"></rolatech-property-video-tour>\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: PropertyVideoTourComponent, selector: "rolatech-property-video-tour", inputs: ["videoTour"] }, { kind: "component", type: PropertyActionContactComponent, selector: "rolatech-property-action-contact", inputs: ["email", "phone"], outputs: ["callAgent", "emailAgent"] }] });
+    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,
@@ -1458,9 +1617,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImpor
                         PropertyAgentRenderer,
                         PropertyLocationComponent,
                         PropertyFeaturesComponent,
-                        PropertyVideoTourComponent,
+                        PropertyVideoComponent,
                         PropertyActionContactComponent,
-                    ], template: "@if (property) {\n  <rolatech-container>\n    <div class=\"flex flex-col w-full\">\n      <div class=\"py-3\">\n        <rolatech-property-media [media]=\"property.media\"></rolatech-property-media>\n      </div>\n      <div class=\"flex flex-col md:flex-row gap-3 w-full\">\n        <div class=\"w-full md:w-2/3\">\n          <rolatech-property-info [property]=\"property\" (wish)=\"onWish($event)\" [inWishList]=\"inWishList\">\n          </rolatech-property-info>\n          <!-- <rolatech-property-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-location [location]=\"property.location\"></rolatech-property-location>\n          @if (property.videoTours) {\n            @for (item of property.videoTours; track $index) {\n              <rolatech-property-video-tour [videoTour]=\"item\"></rolatech-property-video-tour>\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" }]
+                        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\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 = {
@@ -2270,7 +2431,7 @@ const propertyRoutes = [
         children: [
             {
                 path: '',
-                loadComponent: () => import('./rolatech-angular-property-property-index.component-Birv1xyB.mjs').then((x) => x.PropertyIndexComponent),
+                loadComponent: () => import('./rolatech-angular-property-property-index.component-CbbxIQ8w.mjs').then((x) => x.PropertyIndexComponent),
             },
         ],
     },
@@ -2339,6 +2500,7 @@ class PropertyManageIndexComponent {
     dialog = inject(MatDialog);
     snackBar = inject(MatSnackBar);
     propertyService = inject(PropertyService);
+    propertySearchService = inject(PropertySearchService);
     isLoading = false;
     isSearch = false;
     properties = [];
@@ -2492,11 +2654,11 @@ class PropertyManageLayoutComponent extends BaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyManageLayoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.0", type: PropertyManageLayoutComponent, isStandalone: true, selector: "rolatech-property-manage-layout", usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col md:flex-row m-auto\">\n  <div\n    class=\"min-w-[256px] px-3 md:px-0 flex flex-row md:flex-col md:h-full items-center md:items-start h-16 overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n  >\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-1\" i18n>Property</div>\n      <a routerLink=\"./info\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Basic info</a>\n      <a routerLink=\"./media\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Media</a>\n      <a routerLink=\"./video-tour\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Video tour</a>\n      <a routerLink=\"./sections\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Details</a>\n      <a routerLink=\"./location\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Location</a>\n      <a routerLink=\"./features\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Features</a>\n      <!-- <a routerLink=\"./amenities\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Amenities</a> -->\n      <!-- <a routerLink=\"./tags\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Tags</a> -->\n      <!-- <a routerLink=\"./options\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Options</a> -->\n    </div>\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\" i18n>Settings</div>\n      <!-- <a routerLink=\"./variants\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Variants</a> -->\n      <a routerLink=\"./schedule\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Schedule</a>\n      <a routerLink=\"./pricing\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Pricing</a>\n    </div>\n    <!-- <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\" i18n>Others</div>\n    </div> -->\n    @if (property) {\n      @if (property.status.toString() === 'DRAFT') {\n        <div class=\"md:mt-6 md:ml-2 flex items-center\">\n          <button mat-flat-button (click)=\"submit()\" i18n>Submit for review</button>\n        </div>\n      }\n      @if (property.status.toString() === 'PENDING') {\n        <div class=\"md:mt-6 md:ml-2 flex items-center\">\n          <button mat-flat-button disabled i18n>Pending</button>\n        </div>\n      }\n      @if (property.status.toString() === 'APPROVED') {\n        <div class=\"md:mt-6 md:ml-2 flex items-center\">\n          <button mat-flat-button (click)=\"publish()\" i18n>Publish</button>\n        </div>\n      }\n    }\n  </div>\n  <div class=\"w-full\">\n    <router-outlet></router-outlet>\n  </div>\n</div>\n", styles: [".manage-active{background-color:var(--rt-10-percent-layer, rgba(0, 0, 0, .05));box-shadow:4px 0 var(--rt-base-background-inverse, #000) inset;font-weight:600}@media (max-width: 768px){.manage-active{box-shadow:inset 0 -4px 0 0 var(--rt-base-background-inverse, #000)}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$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: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.0", type: PropertyManageLayoutComponent, isStandalone: true, selector: "rolatech-property-manage-layout", usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col md:flex-row m-auto\">\n  <div\n    class=\"min-w-[256px] px-3 md:px-0 flex flex-row md:flex-col md:h-full items-center md:items-start h-16 overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n  >\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-1\" i18n>Property</div>\n      <a routerLink=\"./info\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Basic info</a>\n      <a routerLink=\"./media\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Media</a>\n      <a routerLink=\"./videos\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Videos</a>\n      <a routerLink=\"./sections\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Details</a>\n      <a routerLink=\"./location\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Location</a>\n      <a routerLink=\"./features\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Features</a>\n      <a routerLink=\"./highlights\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Highlights</a>\n      <a routerLink=\"./epc\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>EPC</a>\n      <a routerLink=\"./translation\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Translation</a>\n      <!-- <a routerLink=\"./amenities\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Amenities</a> -->\n      <!-- <a routerLink=\"./tags\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Tags</a> -->\n      <!-- <a routerLink=\"./options\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Options</a> -->\n    </div>\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\" i18n>Settings</div>\n      <!-- <a routerLink=\"./variants\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Variants</a> -->\n      <a routerLink=\"./schedule\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Schedule</a>\n      <a routerLink=\"./pricing\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Pricing</a>\n    </div>\n    <!-- <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\" i18n>Others</div>\n    </div> -->\n    @if (property) {\n      @if (property.status.toString() === 'DRAFT') {\n        <div class=\"md:mt-6 md:ml-2 flex items-center\">\n          <button mat-flat-button (click)=\"submit()\" i18n>Submit for review</button>\n        </div>\n      }\n      @if (property.status.toString() === 'PENDING') {\n        <div class=\"md:mt-6 md:ml-2 flex items-center\">\n          <button mat-flat-button disabled i18n>Pending</button>\n        </div>\n      }\n      @if (property.status.toString() === 'APPROVED') {\n        <div class=\"md:mt-6 md:ml-2 flex items-center\">\n          <button mat-flat-button (click)=\"publish()\" i18n>Publish</button>\n        </div>\n      }\n    }\n  </div>\n  <div class=\"w-full\">\n    <router-outlet></router-outlet>\n  </div>\n</div>\n", styles: [".manage-active{background-color:var(--rt-10-percent-layer, rgba(0, 0, 0, .05));box-shadow:4px 0 var(--rt-base-background-inverse, #000) inset;font-weight:600}@media (max-width: 768px){.manage-active{box-shadow:inset 0 -4px 0 0 var(--rt-base-background-inverse, #000)}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$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: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyManageLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-property-manage-layout', imports: [RouterLink, RouterLinkActive, MatButtonModule, RouterOutlet], encapsulation: ViewEncapsulation.None, template: "<div class=\"flex flex-col md:flex-row m-auto\">\n  <div\n    class=\"min-w-[256px] px-3 md:px-0 flex flex-row md:flex-col md:h-full items-center md:items-start h-16 overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n  >\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-1\" i18n>Property</div>\n      <a routerLink=\"./info\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Basic info</a>\n      <a routerLink=\"./media\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Media</a>\n      <a routerLink=\"./video-tour\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Video tour</a>\n      <a routerLink=\"./sections\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Details</a>\n      <a routerLink=\"./location\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Location</a>\n      <a routerLink=\"./features\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Features</a>\n      <!-- <a routerLink=\"./amenities\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Amenities</a> -->\n      <!-- <a routerLink=\"./tags\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Tags</a> -->\n      <!-- <a routerLink=\"./options\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Options</a> -->\n    </div>\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\" i18n>Settings</div>\n      <!-- <a routerLink=\"./variants\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Variants</a> -->\n      <a routerLink=\"./schedule\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Schedule</a>\n      <a routerLink=\"./pricing\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Pricing</a>\n    </div>\n    <!-- <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\" i18n>Others</div>\n    </div> -->\n    @if (property) {\n      @if (property.status.toString() === 'DRAFT') {\n        <div class=\"md:mt-6 md:ml-2 flex items-center\">\n          <button mat-flat-button (click)=\"submit()\" i18n>Submit for review</button>\n        </div>\n      }\n      @if (property.status.toString() === 'PENDING') {\n        <div class=\"md:mt-6 md:ml-2 flex items-center\">\n          <button mat-flat-button disabled i18n>Pending</button>\n        </div>\n      }\n      @if (property.status.toString() === 'APPROVED') {\n        <div class=\"md:mt-6 md:ml-2 flex items-center\">\n          <button mat-flat-button (click)=\"publish()\" i18n>Publish</button>\n        </div>\n      }\n    }\n  </div>\n  <div class=\"w-full\">\n    <router-outlet></router-outlet>\n  </div>\n</div>\n", styles: [".manage-active{background-color:var(--rt-10-percent-layer, rgba(0, 0, 0, .05));box-shadow:4px 0 var(--rt-base-background-inverse, #000) inset;font-weight:600}@media (max-width: 768px){.manage-active{box-shadow:inset 0 -4px 0 0 var(--rt-base-background-inverse, #000)}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"] }]
+            args: [{ selector: 'rolatech-property-manage-layout', imports: [RouterLink, RouterLinkActive, MatButtonModule, RouterOutlet], encapsulation: ViewEncapsulation.None, template: "<div class=\"flex flex-col md:flex-row m-auto\">\n  <div\n    class=\"min-w-[256px] px-3 md:px-0 flex flex-row md:flex-col md:h-full items-center md:items-start h-16 overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n  >\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-1\" i18n>Property</div>\n      <a routerLink=\"./info\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Basic info</a>\n      <a routerLink=\"./media\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Media</a>\n      <a routerLink=\"./videos\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Videos</a>\n      <a routerLink=\"./sections\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Details</a>\n      <a routerLink=\"./location\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Location</a>\n      <a routerLink=\"./features\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Features</a>\n      <a routerLink=\"./highlights\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Highlights</a>\n      <a routerLink=\"./epc\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>EPC</a>\n      <a routerLink=\"./translation\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Translation</a>\n      <!-- <a routerLink=\"./amenities\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Amenities</a> -->\n      <!-- <a routerLink=\"./tags\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Tags</a> -->\n      <!-- <a routerLink=\"./options\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Options</a> -->\n    </div>\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\" i18n>Settings</div>\n      <!-- <a routerLink=\"./variants\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Variants</a> -->\n      <a routerLink=\"./schedule\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Schedule</a>\n      <a routerLink=\"./pricing\" routerLinkActive=\"manage-active\" class=\"p-2\" i18n>Pricing</a>\n    </div>\n    <!-- <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\" i18n>Others</div>\n    </div> -->\n    @if (property) {\n      @if (property.status.toString() === 'DRAFT') {\n        <div class=\"md:mt-6 md:ml-2 flex items-center\">\n          <button mat-flat-button (click)=\"submit()\" i18n>Submit for review</button>\n        </div>\n      }\n      @if (property.status.toString() === 'PENDING') {\n        <div class=\"md:mt-6 md:ml-2 flex items-center\">\n          <button mat-flat-button disabled i18n>Pending</button>\n        </div>\n      }\n      @if (property.status.toString() === 'APPROVED') {\n        <div class=\"md:mt-6 md:ml-2 flex items-center\">\n          <button mat-flat-button (click)=\"publish()\" i18n>Publish</button>\n        </div>\n      }\n    }\n  </div>\n  <div class=\"w-full\">\n    <router-outlet></router-outlet>\n  </div>\n</div>\n", styles: [".manage-active{background-color:var(--rt-10-percent-layer, rgba(0, 0, 0, .05));box-shadow:4px 0 var(--rt-base-background-inverse, #000) inset;font-weight:600}@media (max-width: 768px){.manage-active{box-shadow:inset 0 -4px 0 0 var(--rt-base-background-inverse, #000)}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"] }]
         }] });
 
 class PropertyManageContentComponent {
@@ -3069,7 +3231,6 @@ class PropertyManageFeaturesComponent extends BaseComponent {
             features: this.featureService.find({}),
             options: this.propertyService.findFeatures(this.id),
         }).subscribe(({ features, options }) => {
-            console.log(options);
             this.features = features.data;
             if (options.data) {
                 this.selected = this.convertToBinding(options.data);
@@ -3167,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();
         }
     }
@@ -3334,9 +3494,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImpor
                 args: ['autocompleteInput', { static: false }]
             }] } });
 
-class PropertyVideoTourAddComponent {
-    videoUrl = '';
-    videoId = '';
+class PropertyVideoYoutubeAddComponent {
+    url = '';
     output = output();
     getYouTubeVideoId(url) {
         const regex = /(?:youtube\.com\/(?:watch\?v=|embed\/|v\/|shorts\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
@@ -3344,40 +3503,141 @@ class PropertyVideoTourAddComponent {
         return match ? match[1] : null;
     }
     ngDoCheck() {
-        this.videoId = this.getYouTubeVideoId(this.videoUrl);
-        this.output.emit(this.videoId);
+        this.output.emit(this.url);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyVideoTourAddComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.0", type: PropertyVideoTourAddComponent, isStandalone: true, selector: "rolatech-property-video-tour-add", outputs: { output: "output" }, ngImport: i0, template: "<mat-form-field appearance=\"fill\">\n  <mat-label>Youtube Video URL</mat-label>\n  <input matInput placeholder=\"Youtube Video URL\" type=\"text\" [(ngModel)]=\"videoUrl\" i18n />\n</mat-form-field>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: 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: 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: 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyVideoYoutubeAddComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.0", type: PropertyVideoYoutubeAddComponent, isStandalone: true, selector: "rolatech-property-video-youtube-add", outputs: { output: "output" }, ngImport: i0, template: "<mat-form-field appearance=\"fill\">\n  <mat-label>Youtube Video URL</mat-label>\n  <input matInput placeholder=\"Youtube Video URL\" type=\"text\" [(ngModel)]=\"url\" i18n />\n</mat-form-field>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: 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: 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: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyVideoTourAddComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyVideoYoutubeAddComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-property-video-tour-add', imports: [CommonModule, MatFormFieldModule, MatInputModule, FormsModule], template: "<mat-form-field appearance=\"fill\">\n  <mat-label>Youtube Video URL</mat-label>\n  <input matInput placeholder=\"Youtube Video URL\" type=\"text\" [(ngModel)]=\"videoUrl\" i18n />\n</mat-form-field>\n", styles: ["mat-form-field{width:100%}\n"] }]
+            args: [{ selector: 'rolatech-property-video-youtube-add', imports: [CommonModule, MatFormFieldModule, MatInputModule, FormsModule], template: "<mat-form-field appearance=\"fill\">\n  <mat-label>Youtube Video URL</mat-label>\n  <input matInput placeholder=\"Youtube Video URL\" type=\"text\" [(ngModel)]=\"url\" i18n />\n</mat-form-field>\n", styles: ["mat-form-field{width:100%}\n"] }]
         }] });
 
-class PropertyManageVideoTourComponent extends BaseComponent {
-    propertyService = inject(PropertyService);
+class SafeUrlPipe {
     sanitizer = inject(DomSanitizer);
-    propertyVideoTour;
+    transform(url) {
+        if (!url) {
+            return null;
+        }
+        // If you want to allow in [href], [src], [poster], [srcdoc], etc.
+        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: SafeUrlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.0", ngImport: i0, type: SafeUrlPipe, isStandalone: true, name: "safeUrl" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: SafeUrlPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'safeUrl',
+                    standalone: true
+                }]
+        }] });
+
+class PropertyVideoItem {
+    platformId = inject(PLATFORM_ID);
+    el = inject(ElementRef);
+    dialogService = inject(DialogService);
+    myVideo = viewChild('video', ...(ngDevMode ? [{ debugName: "myVideo" }] : []));
+    progress = input(0, ...(ngDevMode ? [{ debugName: "progress" }] : []));
+    video = input.required(...(ngDevMode ? [{ debugName: "video" }] : []));
+    actions = input(true, ...(ngDevMode ? [{ debugName: "actions" }] : []));
+    hasUnsaved = input(false, ...(ngDevMode ? [{ debugName: "hasUnsaved" }] : []));
+    editId = model(...(ngDevMode ? [undefined, { debugName: "editId" }] : []));
+    save = output();
+    cancel = output();
+    delete = output();
+    edit = output();
+    upload = output();
+    editTitle = false;
+    editing = false;
+    onSave(video) {
+        this.editTitle = false;
+        this.editId.set(null);
+        this.save.emit(video);
+    }
+    onCancel(video) {
+        this.editTitle = false;
+        this.editId.set(null);
+        this.cancel.emit(video);
+    }
+    onDelete(video) {
+        this.delete.emit(video);
+    }
+    onEdit(video) {
+        this.editId.set(video.id);
+        this.editTitle = true;
+        this.edit.emit(video);
+    }
+    onMediaEdit(video) {
+        this.editId.set(video.id);
+        this.editing = true;
+    }
+    onUpload(id, data) {
+        this.video().uploading = true;
+        this.upload.emit({ id, data });
+    }
+    onLoadedMetadata(event) {
+        if (this.video().duration) {
+            return;
+        }
+        const videoElement = event.target;
+        this.video().duration = videoElement.duration;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyVideoItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.0", type: PropertyVideoItem, isStandalone: true, selector: "rolatech-property-video-item", inputs: { progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, video: { classPropertyName: "video", publicName: "video", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, hasUnsaved: { classPropertyName: "hasUnsaved", publicName: "hasUnsaved", isSignal: true, isRequired: false, transformFunction: null }, editId: { classPropertyName: "editId", publicName: "editId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editId: "editIdChange", save: "save", cancel: "cancel", delete: "delete", edit: "edit", upload: "upload" }, viewQueries: [{ propertyName: "myVideo", first: true, predicate: ["video"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex flex-col grow p-2\">\n  @if (!editTitle) {\n  <div class=\"w-full flex gap-3 p-3 items-center\">\n    <span>{{ video().title }}</span>\n    <button mat-icon-button (click)=\"onEdit(video()); $event.stopPropagation()\" class=\"max-w-8 max-h-8 !p-1\">\n      <mat-icon>edit</mat-icon>\n    </button>\n    <button mat-icon-button (click)=\"onDelete(video()); $event.stopPropagation()\" class=\"max-w-8 max-h-8 !p-1\">\n      <mat-icon>delete</mat-icon>\n    </button>\n  </div>\n  } @else {\n  <div class=\"flex flex-col justify-between items-center\">\n    <rolatech-input [(title)]=\"video().title\" placeholder=\"Title\"></rolatech-input>\n    <div class=\"w-full flex flex-row justify-end p-3 gap-3\">\n      <button mat-button class=\"max-h-8\" (click)=\"onCancel(video())\" i18n>Cancel</button>\n      <button mat-flat-button class=\"max-h-8\" (click)=\"onSave(video())\" i18n>Save</button>\n    </div>\n  </div>\n  }\n\n  <div>\n    @if (video().url) {\n    <div class=\"flex flex-col p-2 gap-3\">\n      <div class=\"bg-black h-fit\">\n        <video\n          controls\n          #videoContainer\n          [src]=\"video().url\"\n          class=\"w-full aspect-video\"\n          (loadedmetadata)=\"onLoadedMetadata($event)\"\n          [poster]=\"video().thumbnail\"\n        >\n          <!-- <source [src]=\"video().url\" type=\"video/mp4\" /> -->\n        </video>\n      </div>\n      <div class=\"flex flex-col justify-between w-full\">\n        <div class=\"flex justify-between items-center w-full\">\n          @if (video().uploading) {\n          <div>\n            <span> {{ video().progress }}%</span>\n          </div>\n          }\n        </div>\n        <div class=\"flex justify-between items-center\">\n          <div>\n            <span>{{ video().duration | duration }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n    @if (video().uploading) {\n    <div class=\"p-2\">\n      <mat-progress-bar mode=\"determinate\" [value]=\"video().progress\"> </mat-progress-bar>\n    </div>\n    } } @else {\n    <div class=\"px-3\">\n      <input\n        class=\"ud-sr-only\"\n        type=\"file\"\n        accept=\".avi,.mpg,.mpeg,.flv,.mov,.m2v,.m4v,.mp4,.rm,.ram,.vob,.ogv,.webm,.wmv\"\n        (change)=\"onUpload(video().id, $event)\"\n        #fileInput\n      />\n      <div class=\"flex justify-between items-center\">\n        <div i18n>No videos</div>\n        <button mat-flat-button class=\"max-h-8\" (click)=\"fileInput.click()\" i18n>Upload</button>\n      </div>\n    </div>\n    }\n  </div>\n  @if (!hasUnsaved) {\n  <ng-content></ng-content>\n  }\n</div>\n", styles: [".ud-sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i8.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: InputComponent, selector: "rolatech-input", inputs: ["title", "placeholder"], outputs: ["titleChange"] }, { kind: "pipe", type: DurationPipe, name: "duration" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyVideoItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-video-item', imports: [
+                        MatIconModule,
+                        AngularCommonModule,
+                        FormsModule,
+                        MatButtonModule,
+                        MatDividerModule,
+                        AngularComponentsModule,
+                        DurationPipe,
+                        InputComponent
+                    ], template: "<div class=\"flex flex-col grow p-2\">\n  @if (!editTitle) {\n  <div class=\"w-full flex gap-3 p-3 items-center\">\n    <span>{{ video().title }}</span>\n    <button mat-icon-button (click)=\"onEdit(video()); $event.stopPropagation()\" class=\"max-w-8 max-h-8 !p-1\">\n      <mat-icon>edit</mat-icon>\n    </button>\n    <button mat-icon-button (click)=\"onDelete(video()); $event.stopPropagation()\" class=\"max-w-8 max-h-8 !p-1\">\n      <mat-icon>delete</mat-icon>\n    </button>\n  </div>\n  } @else {\n  <div class=\"flex flex-col justify-between items-center\">\n    <rolatech-input [(title)]=\"video().title\" placeholder=\"Title\"></rolatech-input>\n    <div class=\"w-full flex flex-row justify-end p-3 gap-3\">\n      <button mat-button class=\"max-h-8\" (click)=\"onCancel(video())\" i18n>Cancel</button>\n      <button mat-flat-button class=\"max-h-8\" (click)=\"onSave(video())\" i18n>Save</button>\n    </div>\n  </div>\n  }\n\n  <div>\n    @if (video().url) {\n    <div class=\"flex flex-col p-2 gap-3\">\n      <div class=\"bg-black h-fit\">\n        <video\n          controls\n          #videoContainer\n          [src]=\"video().url\"\n          class=\"w-full aspect-video\"\n          (loadedmetadata)=\"onLoadedMetadata($event)\"\n          [poster]=\"video().thumbnail\"\n        >\n          <!-- <source [src]=\"video().url\" type=\"video/mp4\" /> -->\n        </video>\n      </div>\n      <div class=\"flex flex-col justify-between w-full\">\n        <div class=\"flex justify-between items-center w-full\">\n          @if (video().uploading) {\n          <div>\n            <span> {{ video().progress }}%</span>\n          </div>\n          }\n        </div>\n        <div class=\"flex justify-between items-center\">\n          <div>\n            <span>{{ video().duration | duration }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n    @if (video().uploading) {\n    <div class=\"p-2\">\n      <mat-progress-bar mode=\"determinate\" [value]=\"video().progress\"> </mat-progress-bar>\n    </div>\n    } } @else {\n    <div class=\"px-3\">\n      <input\n        class=\"ud-sr-only\"\n        type=\"file\"\n        accept=\".avi,.mpg,.mpeg,.flv,.mov,.m2v,.m4v,.mp4,.rm,.ram,.vob,.ogv,.webm,.wmv\"\n        (change)=\"onUpload(video().id, $event)\"\n        #fileInput\n      />\n      <div class=\"flex justify-between items-center\">\n        <div i18n>No videos</div>\n        <button mat-flat-button class=\"max-h-8\" (click)=\"fileInput.click()\" i18n>Upload</button>\n      </div>\n    </div>\n    }\n  </div>\n  @if (!hasUnsaved) {\n  <ng-content></ng-content>\n  }\n</div>\n", styles: [".ud-sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}\n"] }]
+        }] });
+
+class PropertyManageVideoComponent extends BaseComponent {
+    propertyService = inject(PropertyService);
+    tabIndex = signal(0, ...(ngDevMode ? [{ debugName: "tabIndex" }] : []));
+    videos = [];
     data;
     iframeVisible = false;
     iframeLoaded = false;
-    safeURL = this.sanitizer.bypassSecurityTrustResourceUrl('');
     thumbnailUrl;
-    type = PropertyVideoTourType;
+    provider = PropertyVideoProvider;
     chunkSize = 5 * 1024 * 1024; // 切片大小
+    selectProvider = '';
+    videoEditId = '';
+    get youtubeVideos() {
+        return this.videos.filter(v => v.provider === PropertyVideoProvider.YOUTUBE);
+    }
+    get cosVideos() {
+        return this.videos.filter(v => v.provider === PropertyVideoProvider.COS);
+    }
+    constructor() {
+        super();
+        effect(() => {
+            const index = this.tabIndex();
+            if (index === 0) {
+                this.selectProvider = 'YOUTUBE';
+            }
+            if (index === 1) {
+                this.selectProvider = 'COS';
+            }
+        });
+    }
     ngOnInit() {
         this.id = this.route.parent?.snapshot.paramMap.get('id');
-        this.getVideoTour();
+        this.getVideos();
     }
-    getVideoTour() {
-        this.propertyService.getVideoTour(this.id).subscribe({
+    getVideos() {
+        this.propertyService.getVideos(this.id).subscribe({
             next: (res) => {
-                this.propertyVideoTour = res.data;
-                // this.safeURL = this.sanitizer.bypassSecurityTrustResourceUrl(
-                //   `https://www.youtube.com/embed/${this.propertyVideoTour.videoId}`,
-                // );
-                // this.thumbnailUrl = `https://i.ytimg.com/vi/${this.propertyVideoTour.videoId}/hqdefault.jpg`;
+                this.videos = Array.isArray(res.data) ? res.data : [];
             },
         });
     }
@@ -3387,68 +3647,129 @@ class PropertyManageVideoTourComponent extends BaseComponent {
     onIframeLoad() {
         this.iframeLoaded = true;
     }
-    addVideoTour() {
-        const features = {
-            title: 'Add video tour',
+    addYoutubeUrl() {
+        const options = {
+            title: 'Add Youtube url',
             cancelText: 'Cancel',
             confirmText: 'Confirm',
             data: {
-                videoUrl: '',
+                url: '',
             },
-            component: PropertyVideoTourAddComponent,
+            component: PropertyVideoYoutubeAddComponent,
         };
-        this.dialogService.open(features);
+        this.dialogService.open(options);
         this.dialogService.confirmed().subscribe({
             next: (res) => {
                 if (res) {
                     const data = {
-                        videoId: res,
+                        url: res,
+                        title: 'Youtube',
+                        provider: PropertyVideoProvider.YOUTUBE
                     };
-                    this.propertyService.addVideoTour(this.id, data).subscribe({
+                    this.propertyService.addVideo(this.id, data).subscribe({
                         next: (res) => {
-                            this.propertyVideoTour = res.data;
-                            this.snackBarService.open('Video tour added');
+                            this.videos.push(res.data);
+                            this.snackBarService.open('Video added');
                         },
                     });
                 }
             },
         });
     }
-    updateVideoTour() {
-        const features = {
-            title: 'Update video tour',
+    updateYoutubeUrl(video) {
+        const options = {
+            title: 'Update Youtube url',
             cancelText: 'Cancel',
             confirmText: 'Confirm',
             data: {
-                videoId: '',
+                url: video?.url || '',
             },
-            component: PropertyVideoTourAddComponent,
+            component: PropertyVideoYoutubeAddComponent,
         };
-        this.dialogService.open(features);
+        this.dialogService.open(options);
         this.dialogService.confirmed().subscribe({
             next: (res) => {
                 if (res) {
                     const data = {
-                        videoId: res,
+                        url: res,
+                        title: video.title
                     };
-                    this.propertyService.addVideoTour(this.id, data).subscribe({
+                    this.propertyService.updateVideo(this.id, video.id, data).subscribe({
                         next: (res) => {
-                            this.propertyVideoTour = res.data;
-                            this.snackBarService.open('Update successfully');
+                            video.url = res.data.url;
+                            // Force reload
+                            this.iframeLoaded = false;
+                            this.snackBarService.open('Youtube url updated');
+                        },
+                    });
+                }
+            },
+        });
+    }
+    toYoutubeEmbed(urlOrId) {
+        const m = urlOrId.match(/(?:v=|\/embed\/|\.be\/)([A-Za-z0-9_-]{6,})/);
+        const id = m ? m[1] : urlOrId;
+        return `https://www.youtube-nocookie.com/embed/${id}`;
+    }
+    addCOSVideo() {
+        const video = {
+            provider: PropertyVideoProvider.COS
+        };
+        this.propertyService.addVideo(this.id, video).subscribe({
+            next: (res) => {
+                this.videoEditId = res.data.id;
+                this.videos.push(res.data);
+            },
+        });
+    }
+    onCOSVideoSave(event) {
+        const { id, title, url } = event;
+        const data = {
+            title, url
+        };
+        this.propertyService.updateVideo(this.id, id, data).subscribe({
+            next: (res) => {
+                this.snackBarService.open('Youtube url updated');
+            },
+        });
+    }
+    onCOSVideoDelete(video, event) {
+        if (!video.id) {
+            return;
+        }
+        const options = {
+            title: 'Confirm delete',
+            message: 'Are you sure?',
+            cancelText: 'Cancel',
+            confirmText: 'Ok',
+        };
+        this.dialogService.open(options);
+        this.dialogService.confirmed().subscribe({
+            next: (res) => {
+                if (res) {
+                    this.propertyService.deleteVideo(this.id, video.id).subscribe({
+                        next: res => {
+                            this.videos = this.videos.filter(v => v.id !== video.id);
+                            this.snackBarService.open("Video deleted");
+                        },
+                        error: (error) => {
+                            this.snackBarService.open(error.message);
                         },
                     });
                 }
             },
         });
     }
-    onUploadToCOS(event) {
+    onVideoEdit(event) { }
+    onMediaDelete(video, event) { }
+    onCOSVideoUpload(video, event) {
         const file = event.data.target.files[0];
         if (!file) {
             return;
         }
-        const item = {
-            url: URL.createObjectURL(file),
-        };
+        video.url = URL.createObjectURL(file);
+        video.progress = 0;
+        video.uploading = true;
         const reader = new FileReader();
         if (reader.readyState === FileReader.EMPTY) {
             reader.onload = async (e) => {
@@ -3456,10 +3777,10 @@ class PropertyManageVideoTourComponent extends BaseComponent {
                 crypto.subtle.digest('SHA-256', fileBuffer).then((res) => {
                     const hashArray = Array.from(new Uint8Array(res));
                     const hashHex = hashArray.map((byte) => byte.toString(16).padStart(2, '0')).join('');
-                    const data = { hash: hashHex, filename: file.name, fileType: file.type };
-                    this.propertyService.uploadVideoTourInit(this.id, data).subscribe({
+                    const data = { hash: hashHex, filename: file.name, fileType: file.type, type: 'COS' };
+                    this.propertyService.uploadVideosInit(this.id, data).subscribe({
                         next: (res) => {
-                            this.uploadPart(null, res.data.uploadId, file);
+                            this.uploadPart(video, res.data.uploadId, file);
                         },
                         error: (e) => { },
                     });
@@ -3469,34 +3790,33 @@ class PropertyManageVideoTourComponent extends BaseComponent {
             reader.readAsArrayBuffer(file);
         }
     }
-    uploadPart(lecture, uploadId, file) {
+    uploadPart(video, uploadId, file) {
         let uploadedCount = 0;
         const fileChunkList = this.createFileChunk(file);
         const numberOfChunks = fileChunkList.length;
         from(fileChunkList)
-            .pipe(concatMap((val, index) => this.uploadFile(lecture, val.file, index, uploadId)), take(numberOfChunks))
+            .pipe(concatMap((val, index) => this.uploadFile(video, val.file, index, uploadId)), take(numberOfChunks))
             .subscribe((res) => {
             uploadedCount++;
             const p = ((uploadedCount / numberOfChunks) * 100).toFixed(0);
-            lecture.item.progress = parseFloat(p);
+            video.progress = parseFloat(p);
             if (uploadedCount === numberOfChunks) {
-                this.completePartUpload(lecture, { uploadId });
+                this.completePartUpload(video, { uploadId });
             }
         });
     }
-    completePartUpload(lecture, data) {
-        data.duration = lecture.item.duration;
-        this.propertyService.completePartUpload(lecture.id, data).subscribe({
+    completePartUpload(video, data) {
+        data.duration = video.duration;
+        this.propertyService.completePartUpload(video.id || '', data).subscribe({
             next: (res) => {
-                lecture.isUploading = false;
-                lecture.item.id = res.data.id;
+                video.uploading = false;
             },
             error: (e) => {
                 this.snackBarService.open('Upload failed: ' + e.message);
             },
         });
     }
-    uploadFile(lecture, file, index, uploadId) {
+    uploadFile(property, file, index, uploadId) {
         const reader = new FileReader();
         return new Observable((observer) => {
             reader.readAsArrayBuffer(file);
@@ -3510,7 +3830,8 @@ class PropertyManageVideoTourComponent extends BaseComponent {
                     formData.append('uploadId', uploadId);
                     formData.append('number', index + 1);
                     formData.append('hash', hashHex);
-                    this.propertyService.uploadVideoTourPartsToProperty(lecture.id, formData).subscribe({
+                    formData.append('type', 'COS');
+                    this.propertyService.uploadVideosPartsToProperty(property.id, formData).subscribe({
                         next: (res) => {
                             observer.next(res);
                             observer.complete();
@@ -3537,12 +3858,91 @@ class PropertyManageVideoTourComponent extends BaseComponent {
         }
         return fileChunkList;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyManageVideoTourComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.0", type: PropertyManageVideoTourComponent, isStandalone: true, selector: "rolatech-property-manage-video-tour", usesInheritance: true, ngImport: i0, template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Video tour\" class=\"hidden md:block\" divider> </rolatech-toolbar>\n  <!-- <rolatech-property-video-tour-item [property]=\"\"></rolatech-property-video-tour-item> -->\n  <div class=\"flex flex-col\">\n    <div>\n      <div>Youtube</div>\n      <div></div>\n    </div>\n    <div>\n      <div>COS</div>\n      <div></div>\n    </div>\n  </div>\n  <rolatech-video-upload (upload)=\"onUploadToCOS($event)\"></rolatech-video-upload>\n  @for (item of propertyVideoTour; track $index) {\n    <div>{{ type[item.type] === 'Youtube' }}</div>\n    @if (type[item.type] === 'Youtube') {\n      <div class=\"relative w-full aspect-video\">\n        @if (!iframeLoaded) {\n          <div class=\"absolute inset-0 flex items-center justify-center bg-black/10\">\n            <span>Loading...</span>\n          </div>\n        }\n        <iframe [src]=\"safeURL\" frameborder=\"0\" allowfullscreen class=\"w-full h-full\" (load)=\"iframeLoaded = true\"></iframe>\n      </div>\n      <button mat-flat-button (click)=\"updateVideoTour()\" class=\"mt-3\">Update video tour</button>\n    }\n    @if (type[item.type] === 'COS') {}\n  }\n  <!-- @if (propertyVideoTour) {\n\n  } @else {\n    <button mat-flat-button (click)=\"addVideoTour()\">Add video tour</button>\n  } -->\n</rolatech-property-manage-content>\n", styles: [""], dependencies: [{ kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: PropertyManageContentComponent, selector: "rolatech-property-manage-content" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$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: VideoUpload, selector: "rolatech-video-upload", inputs: ["item", "uploading", "editing", "progress", "editId", "hasUnsaved"], outputs: ["uploadingChange", "editingChange", "mediaEdit", "thumbnailUpload", "upload", "deleteMedia", "editIdChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyManageVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.0", type: PropertyManageVideoComponent, isStandalone: true, selector: "rolatech-property-manage-video", usesInheritance: true, ngImport: i0, template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Videos\" class=\"hidden md:block\" divider> </rolatech-toolbar>\n  <rolatech-tabs [(select)]=\"tabIndex\">\n    <rolatech-tab label=\"Youtube\"></rolatech-tab>\n    <rolatech-tab label=\"COS\"></rolatech-tab>\n  </rolatech-tabs>\n  <div class=\"py-2\">\n    @if (tabIndex() === 0) {\n      @if (youtubeVideos.length > 0 && youtubeVideos[0].url) {\n        <div class=\"relative w-full aspect-video\">\n          @if (!iframeLoaded) {\n            <div class=\"absolute inset-0 flex items-center justify-center bg-black/10 border bg-white\">\n              <span>Loading...</span>\n            </div>\n          }\n          <iframe\n            [src]=\"toYoutubeEmbed(youtubeVideos[0].url) | safeUrl\"\n            frameborder=\"0\"\n            allowfullscreen\n            class=\"w-full h-full\"\n            (load)=\"iframeLoaded = true\"\n          ></iframe>\n        </div>\n        <button mat-flat-button (click)=\"updateYoutubeUrl(youtubeVideos[0])\" class=\"mt-3\">Update Youtube url</button>\n      } @else {\n        <button mat-flat-button (click)=\"addYoutubeUrl()\" class=\"mt-3\">Add Youtube url</button>\n      }\n    }\n    @if (tabIndex() === 1) {\n      @for (video of cosVideos; track $index) {\n        <rolatech-property-video-item\n          [video]=\"video\"\n          (save)=\"onCOSVideoSave($event)\"\n          (delete)=\"onCOSVideoDelete(video, $event)\"\n          (edit)=\"onVideoEdit($event)\"\n          (upload)=\"onCOSVideoUpload(video, $event)\"\n          [editId]=\"videoEditId\"\n        ></rolatech-property-video-item>\n      }\n\n      <div class=\"p-3\">\n        <button mat-flat-button class=\"max-h-8\" (click)=\"addCOSVideo()\">\n          <mat-icon>add</mat-icon>\n          <span>Add video</span>\n        </button>\n      </div>\n      <!-- <rolatech-video-upload (upload)=\"onMediaUploadInit($event)\"></rolatech-video-upload> -->\n    }\n  </div>\n</rolatech-property-manage-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: PropertyManageContentComponent, selector: "rolatech-property-manage-content" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$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: TabsComponent, selector: "rolatech-tabs", inputs: ["select", "loading"], outputs: ["selectChange"] }, { kind: "component", type: TabComponent, selector: "rolatech-tab", inputs: ["label"] }, { kind: "component", type: PropertyVideoItem, selector: "rolatech-property-video-item", inputs: ["progress", "video", "actions", "hasUnsaved", "editId"], outputs: ["editIdChange", "save", "cancel", "delete", "edit", "upload"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SafeUrlPipe, name: "safeUrl" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyManageVideoTourComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyManageVideoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-property-manage-video-tour', imports: [ToolbarComponent, PropertyManageContentComponent, MatButtonModule, VideoUpload], template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Video tour\" class=\"hidden md:block\" divider> </rolatech-toolbar>\n  <!-- <rolatech-property-video-tour-item [property]=\"\"></rolatech-property-video-tour-item> -->\n  <div class=\"flex flex-col\">\n    <div>\n      <div>Youtube</div>\n      <div></div>\n    </div>\n    <div>\n      <div>COS</div>\n      <div></div>\n    </div>\n  </div>\n  <rolatech-video-upload (upload)=\"onUploadToCOS($event)\"></rolatech-video-upload>\n  @for (item of propertyVideoTour; track $index) {\n    <div>{{ type[item.type] === 'Youtube' }}</div>\n    @if (type[item.type] === 'Youtube') {\n      <div class=\"relative w-full aspect-video\">\n        @if (!iframeLoaded) {\n          <div class=\"absolute inset-0 flex items-center justify-center bg-black/10\">\n            <span>Loading...</span>\n          </div>\n        }\n        <iframe [src]=\"safeURL\" frameborder=\"0\" allowfullscreen class=\"w-full h-full\" (load)=\"iframeLoaded = true\"></iframe>\n      </div>\n      <button mat-flat-button (click)=\"updateVideoTour()\" class=\"mt-3\">Update video tour</button>\n    }\n    @if (type[item.type] === 'COS') {}\n  }\n  <!-- @if (propertyVideoTour) {\n\n  } @else {\n    <button mat-flat-button (click)=\"addVideoTour()\">Add video tour</button>\n  } -->\n</rolatech-property-manage-content>\n" }]
+            args: [{ selector: 'rolatech-property-manage-video', imports: [CommonModule, ToolbarComponent, PropertyManageContentComponent, MatButtonModule, TabsComponent, TabComponent, SafeUrlPipe, PropertyVideoItem, MatIcon], template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"Videos\" class=\"hidden md:block\" divider> </rolatech-toolbar>\n  <rolatech-tabs [(select)]=\"tabIndex\">\n    <rolatech-tab label=\"Youtube\"></rolatech-tab>\n    <rolatech-tab label=\"COS\"></rolatech-tab>\n  </rolatech-tabs>\n  <div class=\"py-2\">\n    @if (tabIndex() === 0) {\n      @if (youtubeVideos.length > 0 && youtubeVideos[0].url) {\n        <div class=\"relative w-full aspect-video\">\n          @if (!iframeLoaded) {\n            <div class=\"absolute inset-0 flex items-center justify-center bg-black/10 border bg-white\">\n              <span>Loading...</span>\n            </div>\n          }\n          <iframe\n            [src]=\"toYoutubeEmbed(youtubeVideos[0].url) | safeUrl\"\n            frameborder=\"0\"\n            allowfullscreen\n            class=\"w-full h-full\"\n            (load)=\"iframeLoaded = true\"\n          ></iframe>\n        </div>\n        <button mat-flat-button (click)=\"updateYoutubeUrl(youtubeVideos[0])\" class=\"mt-3\">Update Youtube url</button>\n      } @else {\n        <button mat-flat-button (click)=\"addYoutubeUrl()\" class=\"mt-3\">Add Youtube url</button>\n      }\n    }\n    @if (tabIndex() === 1) {\n      @for (video of cosVideos; track $index) {\n        <rolatech-property-video-item\n          [video]=\"video\"\n          (save)=\"onCOSVideoSave($event)\"\n          (delete)=\"onCOSVideoDelete(video, $event)\"\n          (edit)=\"onVideoEdit($event)\"\n          (upload)=\"onCOSVideoUpload(video, $event)\"\n          [editId]=\"videoEditId\"\n        ></rolatech-property-video-item>\n      }\n\n      <div class=\"p-3\">\n        <button mat-flat-button class=\"max-h-8\" (click)=\"addCOSVideo()\">\n          <mat-icon>add</mat-icon>\n          <span>Add video</span>\n        </button>\n      </div>\n      <!-- <rolatech-video-upload (upload)=\"onMediaUploadInit($event)\"></rolatech-video-upload> -->\n    }\n  </div>\n</rolatech-property-manage-content>\n" }]
+        }], ctorParameters: () => [] });
+
+class PropertyManageHighlights extends BaseComponent {
+    propertyService = inject(PropertyService);
+    highlights = [];
+    ngOnInit() {
+        this.id = this.route.parent?.snapshot.paramMap.get('id');
+        this.find();
+    }
+    find() {
+        this.propertyService.getHighlights(this.id).subscribe({
+            next: (res) => {
+                this.highlights = res.data;
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyManageHighlights, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.0", type: PropertyManageHighlights, isStandalone: true, selector: "rolatech-property-manage-highlights", usesInheritance: true, ngImport: i0, 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", 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyManageHighlights, decorators: [{
+            type: Component,
+            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 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, 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 {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyManageTranslation, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.0", type: PropertyManageTranslation, isStandalone: true, selector: "rolatech-property-manage-translation", ngImport: i0, template: "<p>property-manage-translation works!</p>\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyManageTranslation, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-manage-translation', imports: [], template: "<p>property-manage-translation works!</p>\n" }]
         }] });
 
 const propertyManageRoutes = [
@@ -3567,8 +3967,8 @@ const propertyManageRoutes = [
                 component: PropertyManageMediaComponent,
             },
             {
-                path: 'video-tour',
-                component: PropertyManageVideoTourComponent,
+                path: 'videos',
+                component: PropertyManageVideoComponent,
             },
             {
                 path: 'sections',
@@ -3582,6 +3982,18 @@ const propertyManageRoutes = [
                 path: 'features',
                 component: PropertyManageFeaturesComponent,
             },
+            {
+                path: 'highlights',
+                component: PropertyManageHighlights,
+            },
+            {
+                path: 'epc',
+                component: PropertyManageEpc,
+            },
+            {
+                path: 'translation',
+                component: PropertyManageTranslation,
+            },
             // {
             //   path: 'amenities',
             //   component: PropertyManageAmenitiesComponent,
@@ -3696,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-gVG8HPPp.mjs').then((x) => x.PropertyManageViewingsIndexComponent),
+        loadComponent: () => import('./rolatech-angular-property-property-manage-viewings-index.component-Bk02i8QS.mjs').then((x) => x.PropertyManageViewingsIndexComponent),
     },
     {
         path: ':id',
@@ -3942,7 +4354,7 @@ class LettingManageDetail extends BaseComponent {
         // const updatedCriteria = matchingVariant ? updateCriteriaFromVariant(matchingVariant) : [];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: LettingManageDetail, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.0", type: LettingManageDetail, isStandalone: true, selector: "rolatech-letting-manage-detail", usesInheritance: true, ngImport: i0, template: "@if (property) {\n<rolatech-container>\n  <div class=\"flex flex-col w-full\">\n    <div class=\"py-3\">\n      <rolatech-property-media [media]=\"property.media\"></rolatech-property-media>\n    </div>\n    <div class=\"flex flex-col md:flex-row gap-3 w-full\">\n      <div class=\"w-full md:w-2/3\">\n        <rolatech-property-info [property]=\"property\" (wish)=\"onWish($event)\" [inWishList]=\"inWishList\">\n        </rolatech-property-info>\n        <rolatech-property-agent-renderer\n          [name]=\"fullname\"\n          [avatar]=\"user?.avatar\"\n          [username]=\"username\"\n        ></rolatech-property-agent-renderer>\n        <rolatech-property-features [features]=\"property.features\"></rolatech-property-features>\n        <rolatech-property-location [location]=\"property.location\"></rolatech-property-location>\n        @if (property.videoTours) {\n        <rolatech-property-video-tour [videoTour]=\"property.videoTours[0]\"></rolatech-property-video-tour>\n        }\n        <div class=\"flex flex-col\">\n          <div class=\"text-2xl font-bold pt-3\" i18n>Sections</div>\n          @for (section of property.sections; track $index) {\n          <rolatech-property-section [section]=\"section\"></rolatech-property-section>\n          }\n        </div>\n      </div>\n      <div class=\"w-full h-fit md:w-1/3 rounded-md border shadow p-3\">\n        <rolatech-property-agent-renderer\n          [name]=\"fullname\"\n          [avatar]=\"user?.avatar\"\n          [username]=\"username\"\n          subtitle=\"PrimeCase Agent\"\n        ></rolatech-property-agent-renderer>\n        <rolatech-property-pricing (wish)=\"onWish($event)\" [property]=\"property\"></rolatech-property-pricing>\n        <rolatech-letting-actions\n          [letting]=\"property\"\n          (offer)=\"onOffer($event)\"\n          (deposit)=\"onOffer($event)\"\n          (requestViewing)=\"onRequestViewing($event)\"\n        >\n          @if (user) {\n          <rolatech-letting-action-contact [phone]=\"user.phone\"></rolatech-letting-action-contact>\n          }\n        </rolatech-letting-actions>\n      </div>\n    </div>\n  </div>\n</rolatech-container>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: PropertyInfoComponent, selector: "rolatech-property-info", inputs: ["property", "inWishList"], outputs: ["wish"] }, { kind: "component", type: PropertyMediaComponent, selector: "rolatech-property-media", inputs: ["media", "min"] }, { kind: "component", type: PropertyPricingComponent, selector: "rolatech-property-pricing", inputs: ["property", "price"] }, { kind: "component", type: PropertySectionComponent, selector: "rolatech-property-section", inputs: ["section", "user", "username"] }, { kind: "component", type: LettingActions, selector: "rolatech-letting-actions", inputs: ["letting"], outputs: ["requestViewing", "offer", "deposit"] }, { kind: "component", type: LettingActionContact, selector: "rolatech-letting-action-contact", inputs: ["phone"], outputs: ["callAgent", "emailAgent"] }, { kind: "component", type: PropertyLocationComponent, selector: "rolatech-property-location", inputs: ["location"] }, { kind: "component", type: PropertyFeaturesComponent, selector: "rolatech-property-features", inputs: ["features"] }, { kind: "component", type: PropertyVideoTourComponent, selector: "rolatech-property-video-tour", inputs: ["videoTour"] }, { kind: "component", type: PropertyAgentRenderer, selector: "rolatech-property-agent-renderer", inputs: ["name", "avatar", "username", "subtitle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.0", type: LettingManageDetail, isStandalone: true, selector: "rolatech-letting-manage-detail", usesInheritance: true, ngImport: i0, template: "@if (property) {\n<rolatech-container>\n  <div class=\"flex flex-col w-full\">\n    <div class=\"py-3\">\n      <rolatech-property-media [media]=\"property.media\"></rolatech-property-media>\n    </div>\n    <div class=\"flex flex-col md:flex-row gap-3 w-full\">\n      <div class=\"w-full md:w-2/3\">\n        <rolatech-property-info [property]=\"property\" (wish)=\"onWish($event)\" [inWishList]=\"inWishList\">\n        </rolatech-property-info>\n        <rolatech-property-agent-renderer\n          [name]=\"fullname\"\n          [avatar]=\"user?.avatar\"\n          [username]=\"username\"\n        ></rolatech-property-agent-renderer>\n        <rolatech-property-features [features]=\"property.features\"></rolatech-property-features>\n        <rolatech-property-location [location]=\"property.location\"></rolatech-property-location>\n        @if (property.videos) {\n        <rolatech-property-video [video]=\"property.videos[0]\"></rolatech-property-video>\n        }\n        <div class=\"flex flex-col\">\n          <div class=\"text-2xl font-bold pt-3\" i18n>Sections</div>\n          @for (section of property.sections; track $index) {\n          <rolatech-property-section [section]=\"section\"></rolatech-property-section>\n          }\n        </div>\n      </div>\n      <div class=\"w-full h-fit md:w-1/3 rounded-md border shadow p-3\">\n        <rolatech-property-agent-renderer\n          [name]=\"fullname\"\n          [avatar]=\"user?.avatar\"\n          [username]=\"username\"\n          subtitle=\"PrimeCase Agent\"\n        ></rolatech-property-agent-renderer>\n        <rolatech-property-pricing (wish)=\"onWish($event)\" [property]=\"property\"></rolatech-property-pricing>\n        <rolatech-letting-actions\n          [letting]=\"property\"\n          (offer)=\"onOffer($event)\"\n          (deposit)=\"onOffer($event)\"\n          (requestViewing)=\"onRequestViewing($event)\"\n        >\n          @if (user) {\n          <rolatech-letting-action-contact [phone]=\"user.phone\"></rolatech-letting-action-contact>\n          }\n        </rolatech-letting-actions>\n      </div>\n    </div>\n  </div>\n</rolatech-container>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: PropertyInfoComponent, selector: "rolatech-property-info", inputs: ["property", "inWishList"], outputs: ["wish"] }, { kind: "component", type: PropertyMediaComponent, selector: "rolatech-property-media", inputs: ["media", "min"] }, { kind: "component", type: PropertyPricingComponent, selector: "rolatech-property-pricing", inputs: ["property", "price"] }, { kind: "component", type: PropertySectionComponent, selector: "rolatech-property-section", inputs: ["section", "user", "username"] }, { kind: "component", type: LettingActions, selector: "rolatech-letting-actions", inputs: ["letting"], outputs: ["requestViewing", "offer", "deposit"] }, { kind: "component", type: LettingActionContact, selector: "rolatech-letting-action-contact", inputs: ["phone"], outputs: ["callAgent", "emailAgent"] }, { kind: "component", type: PropertyLocationComponent, selector: "rolatech-property-location", inputs: ["location"] }, { kind: "component", type: PropertyFeaturesComponent, selector: "rolatech-property-features", inputs: ["features"] }, { kind: "component", type: PropertyVideoComponent, selector: "rolatech-property-video", inputs: ["video"] }, { kind: "component", type: PropertyAgentRenderer, selector: "rolatech-property-agent-renderer", inputs: ["name", "avatar", "username", "subtitle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: LettingManageDetail, decorators: [{
             type: Component,
@@ -3958,9 +4370,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImpor
                         LettingActionContact,
                         PropertyLocationComponent,
                         PropertyFeaturesComponent,
-                        PropertyVideoTourComponent,
+                        PropertyVideoComponent,
                         PropertyAgentRenderer
-                    ], template: "@if (property) {\n<rolatech-container>\n  <div class=\"flex flex-col w-full\">\n    <div class=\"py-3\">\n      <rolatech-property-media [media]=\"property.media\"></rolatech-property-media>\n    </div>\n    <div class=\"flex flex-col md:flex-row gap-3 w-full\">\n      <div class=\"w-full md:w-2/3\">\n        <rolatech-property-info [property]=\"property\" (wish)=\"onWish($event)\" [inWishList]=\"inWishList\">\n        </rolatech-property-info>\n        <rolatech-property-agent-renderer\n          [name]=\"fullname\"\n          [avatar]=\"user?.avatar\"\n          [username]=\"username\"\n        ></rolatech-property-agent-renderer>\n        <rolatech-property-features [features]=\"property.features\"></rolatech-property-features>\n        <rolatech-property-location [location]=\"property.location\"></rolatech-property-location>\n        @if (property.videoTours) {\n        <rolatech-property-video-tour [videoTour]=\"property.videoTours[0]\"></rolatech-property-video-tour>\n        }\n        <div class=\"flex flex-col\">\n          <div class=\"text-2xl font-bold pt-3\" i18n>Sections</div>\n          @for (section of property.sections; track $index) {\n          <rolatech-property-section [section]=\"section\"></rolatech-property-section>\n          }\n        </div>\n      </div>\n      <div class=\"w-full h-fit md:w-1/3 rounded-md border shadow p-3\">\n        <rolatech-property-agent-renderer\n          [name]=\"fullname\"\n          [avatar]=\"user?.avatar\"\n          [username]=\"username\"\n          subtitle=\"PrimeCase Agent\"\n        ></rolatech-property-agent-renderer>\n        <rolatech-property-pricing (wish)=\"onWish($event)\" [property]=\"property\"></rolatech-property-pricing>\n        <rolatech-letting-actions\n          [letting]=\"property\"\n          (offer)=\"onOffer($event)\"\n          (deposit)=\"onOffer($event)\"\n          (requestViewing)=\"onRequestViewing($event)\"\n        >\n          @if (user) {\n          <rolatech-letting-action-contact [phone]=\"user.phone\"></rolatech-letting-action-contact>\n          }\n        </rolatech-letting-actions>\n      </div>\n    </div>\n  </div>\n</rolatech-container>\n}\n" }]
+                    ], template: "@if (property) {\n<rolatech-container>\n  <div class=\"flex flex-col w-full\">\n    <div class=\"py-3\">\n      <rolatech-property-media [media]=\"property.media\"></rolatech-property-media>\n    </div>\n    <div class=\"flex flex-col md:flex-row gap-3 w-full\">\n      <div class=\"w-full md:w-2/3\">\n        <rolatech-property-info [property]=\"property\" (wish)=\"onWish($event)\" [inWishList]=\"inWishList\">\n        </rolatech-property-info>\n        <rolatech-property-agent-renderer\n          [name]=\"fullname\"\n          [avatar]=\"user?.avatar\"\n          [username]=\"username\"\n        ></rolatech-property-agent-renderer>\n        <rolatech-property-features [features]=\"property.features\"></rolatech-property-features>\n        <rolatech-property-location [location]=\"property.location\"></rolatech-property-location>\n        @if (property.videos) {\n        <rolatech-property-video [video]=\"property.videos[0]\"></rolatech-property-video>\n        }\n        <div class=\"flex flex-col\">\n          <div class=\"text-2xl font-bold pt-3\" i18n>Sections</div>\n          @for (section of property.sections; track $index) {\n          <rolatech-property-section [section]=\"section\"></rolatech-property-section>\n          }\n        </div>\n      </div>\n      <div class=\"w-full h-fit md:w-1/3 rounded-md border shadow p-3\">\n        <rolatech-property-agent-renderer\n          [name]=\"fullname\"\n          [avatar]=\"user?.avatar\"\n          [username]=\"username\"\n          subtitle=\"PrimeCase Agent\"\n        ></rolatech-property-agent-renderer>\n        <rolatech-property-pricing (wish)=\"onWish($event)\" [property]=\"property\"></rolatech-property-pricing>\n        <rolatech-letting-actions\n          [letting]=\"property\"\n          (offer)=\"onOffer($event)\"\n          (deposit)=\"onOffer($event)\"\n          (requestViewing)=\"onRequestViewing($event)\"\n        >\n          @if (user) {\n          <rolatech-letting-action-contact [phone]=\"user.phone\"></rolatech-letting-action-contact>\n          }\n        </rolatech-letting-actions>\n      </div>\n    </div>\n  </div>\n</rolatech-container>\n}\n" }]
         }], ctorParameters: () => [] });
 
 const MY_FORMATS$1 = {
@@ -4309,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, PropertyVideoTourType 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-B4w7sAFv.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