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

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

@@ -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, 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';
@@ -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";
@@ -1240,22 +1240,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 +1289,26 @@ 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 items-center text-sm\">\n    @for (item of highlights(); track item) {\n    <div class=\"flex items-center mr-2\">\n      <mat-icon>check</mat-icon>\n      <span>{{ item.text }}</span>\n    </div>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyHighlights, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-highlights', imports: [MatIcon], template: "<div class=\"\">\n  <div class=\"text-2xl font-bold py-3\" i18n>Highlights</div>\n  <div class=\"flex flex-col flex-wrap items-center text-sm\">\n    @for (item of highlights(); track item) {\n    <div class=\"flex items-center mr-2\">\n      <mat-icon>check</mat-icon>\n      <span>{{ item.text }}</span>\n    </div>\n    }\n  </div>\n</div>\n" }]
+        }] });
+
+class PropertyEpc {
+    epc = input.required(...(ngDevMode ? [{ debugName: "epc" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyEpc, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.0", type: PropertyEpc, isStandalone: true, selector: "rolatech-property-epc", inputs: { epc: { classPropertyName: "epc", publicName: "epc", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"\">\n  <div class=\"text-2xl font-bold py-3\" i18n>EPC</div>\n  <div class=\"flex flex-col flex-wrap items-center text-sm\">\n    <div>{{epc().name}}</div>\n    <div>{{epc().score}}</div>\n  </div>\n</div>\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyEpc, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-property-epc', imports: [], template: "<div class=\"\">\n  <div class=\"text-2xl font-bold py-3\" i18n>EPC</div>\n  <div class=\"flex flex-col flex-wrap items-center text-sm\">\n    <div>{{epc().name}}</div>\n    <div>{{epc().score}}</div>\n  </div>\n</div>\n" }]
+        }] });
+
 class PropertyDetailsComponent extends BaseComponent {
     authService = inject(AuthService);
     authUserService = inject(AuthUserService);
@@ -1303,6 +1323,8 @@ class PropertyDetailsComponent extends BaseComponent {
     selectedOption;
     variants = [];
     features = [];
+    highlights = [];
+    epc;
     selectedVariant;
     variantOption = signal(undefined, ...(ngDevMode ? [{ debugName: "variantOption" }] : []));
     variantOptionChanged = computed(() => {
@@ -1320,6 +1342,8 @@ class PropertyDetailsComponent extends BaseComponent {
     ngOnInit() {
         this.getProperty();
         this.findFeatures();
+        this.findHighlights();
+        this.getEpc();
     }
     getProperty() {
         this.propertyService.get(this.id).subscribe({
@@ -1356,13 +1380,26 @@ class PropertyDetailsComponent extends BaseComponent {
         });
     }
     findFeatures() {
-        console.log(this.id);
         this.propertyService.findFeatures(this.id).subscribe({
             next: (res) => {
                 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;
+            }
+        });
+    }
     wishListCheck() {
         this.propertyService.wishListCheck(this.id).subscribe({
             next: (res) => {
@@ -1441,7 +1478,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          <rolatech-property-features [features]=\"features\"></rolatech-property-features>\n          <rolatech-property-highlights [highlights]=\"highlights\"></rolatech-property-highlights>\n          <rolatech-property-epc [epc]=\"epc\"></rolatech-property-epc>\n          <rolatech-property-location [location]=\"property.location\"></rolatech-property-location>\n          @if (property.videos) {\n            @for (item of property.videos; track $index) {\n              <rolatech-property-video [video]=\"item\"></rolatech-property-video>\n            }\n          }\n          <div class=\"flex flex-col\">\n            <div class=\"text-2xl font-bold pt-3\" i18n>Sections</div>\n            @for (section of property.sections; track $index) {\n              <rolatech-property-section [section]=\"section\"></rolatech-property-section>\n            }\n            <rolatech-comments [itemId]=\"property.id\"></rolatech-comments>\n          </div>\n        </div>\n        <div class=\"w-full md:w-1/3\">\n          <rolatech-property-agent-renderer\n            [name]=\"fullname\"\n            [avatar]=\"user?.avatar\"\n            [username]=\"username\"\n          ></rolatech-property-agent-renderer>\n          <rolatech-property-pricing (wish)=\"onWish($event)\" [property]=\"property\"></rolatech-property-pricing>\n          <rolatech-property-actions\n            [property]=\"property\"\n            (offer)=\"onOffer($event)\"\n            (deposit)=\"onOffer($event)\"\n            (requestViewing)=\"onRequestViewing($event)\"\n          >\n            @if (user) {\n              <rolatech-property-action-contact [email]=\"user.email\" [phone]=\"user.phone\"></rolatech-property-action-contact>\n            }\n          </rolatech-property-actions>\n        </div>\n      </div>\n    </div>\n  </rolatech-container>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: PropertyInfoComponent, selector: "rolatech-property-info", inputs: ["property", "inWishList"], outputs: ["wish"] }, { kind: "component", type: PropertyMediaComponent, selector: "rolatech-property-media", inputs: ["media", "min"] }, { kind: "component", type: PropertyPricingComponent, selector: "rolatech-property-pricing", inputs: ["property", "price"] }, { kind: "component", type: PropertySectionComponent, selector: "rolatech-property-section", inputs: ["section", "user", "username"] }, { kind: "component", type: PropertyActionsComponent, selector: "rolatech-property-actions", inputs: ["property"], outputs: ["requestViewing", "offer", "deposit"] }, { kind: "component", type: CommentsComponent, selector: "rolatech-comments", inputs: ["itemId"] }, { kind: "component", type: PropertyAgentRenderer, selector: "rolatech-property-agent-renderer", inputs: ["name", "avatar", "username", "subtitle"] }, { kind: "component", type: PropertyLocationComponent, selector: "rolatech-property-location", inputs: ["location"] }, { kind: "component", type: PropertyFeaturesComponent, selector: "rolatech-property-features", inputs: ["features"] }, { kind: "component", type: PropertyVideoComponent, selector: "rolatech-property-video", inputs: ["video"] }, { kind: "component", type: PropertyActionContactComponent, selector: "rolatech-property-action-contact", inputs: ["email", "phone"], outputs: ["callAgent", "emailAgent"] }, { kind: "component", type: PropertyHighlights, selector: "rolatech-property-highlights", inputs: ["highlights"] }, { kind: "component", type: PropertyEpc, selector: "rolatech-property-epc", inputs: ["epc"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyDetailsComponent, decorators: [{
             type: Component,
@@ -1458,9 +1495,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          <rolatech-property-features [features]=\"features\"></rolatech-property-features>\n          <rolatech-property-highlights [highlights]=\"highlights\"></rolatech-property-highlights>\n          <rolatech-property-epc [epc]=\"epc\"></rolatech-property-epc>\n          <rolatech-property-location [location]=\"property.location\"></rolatech-property-location>\n          @if (property.videos) {\n            @for (item of property.videos; track $index) {\n              <rolatech-property-video [video]=\"item\"></rolatech-property-video>\n            }\n          }\n          <div class=\"flex flex-col\">\n            <div class=\"text-2xl font-bold pt-3\" i18n>Sections</div>\n            @for (section of property.sections; track $index) {\n              <rolatech-property-section [section]=\"section\"></rolatech-property-section>\n            }\n            <rolatech-comments [itemId]=\"property.id\"></rolatech-comments>\n          </div>\n        </div>\n        <div class=\"w-full md:w-1/3\">\n          <rolatech-property-agent-renderer\n            [name]=\"fullname\"\n            [avatar]=\"user?.avatar\"\n            [username]=\"username\"\n          ></rolatech-property-agent-renderer>\n          <rolatech-property-pricing (wish)=\"onWish($event)\" [property]=\"property\"></rolatech-property-pricing>\n          <rolatech-property-actions\n            [property]=\"property\"\n            (offer)=\"onOffer($event)\"\n            (deposit)=\"onOffer($event)\"\n            (requestViewing)=\"onRequestViewing($event)\"\n          >\n            @if (user) {\n              <rolatech-property-action-contact [email]=\"user.email\" [phone]=\"user.phone\"></rolatech-property-action-contact>\n            }\n          </rolatech-property-actions>\n        </div>\n      </div>\n    </div>\n  </rolatech-container>\n}\n" }]
         }], ctorParameters: () => [] });
 
 const MY_FORMATS$5 = {
@@ -2270,7 +2309,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-Bg9L4p2Z.mjs').then((x) => x.PropertyIndexComponent),
             },
         ],
     },
@@ -2339,6 +2378,7 @@ class PropertyManageIndexComponent {
     dialog = inject(MatDialog);
     snackBar = inject(MatSnackBar);
     propertyService = inject(PropertyService);
+    propertySearchService = inject(PropertySearchService);
     isLoading = false;
     isSearch = false;
     properties = [];
@@ -2492,11 +2532,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 +3109,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);
@@ -3334,9 +3373,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 +3382,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 +3526,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 +3656,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 +3669,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 +3709,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 +3737,52 @@ 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: PropertyManageVideoComponent, decorators: [{
+            type: Component,
+            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 {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: PropertyManageEpc, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.0", type: PropertyManageEpc, isStandalone: true, selector: "rolatech-property-manage-epc", ngImport: i0, template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"EPC\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <div></div>\n</rolatech-property-manage-content>\n", styles: [""], dependencies: [{ kind: "component", type: PropertyManageContentComponent, selector: "rolatech-property-manage-content" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }] });
 }
-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: PropertyManageEpc, 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-epc', imports: [PropertyManageContentComponent, ToolbarComponent], template: "<rolatech-property-manage-content>\n  <rolatech-toolbar title=\"EPC\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <div></div>\n</rolatech-property-manage-content>\n" }]
+        }] });
+
+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 +3807,8 @@ const propertyManageRoutes = [
                 component: PropertyManageMediaComponent,
             },
             {
-                path: 'video-tour',
-                component: PropertyManageVideoTourComponent,
+                path: 'videos',
+                component: PropertyManageVideoComponent,
             },
             {
                 path: 'sections',
@@ -3582,6 +3822,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 +3948,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-UsM6RfhW.mjs').then((x) => x.PropertyManageViewingsIndexComponent),
     },
     {
         path: ':id',
@@ -3942,7 +4194,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 +4210,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 +4561,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, PropertyViewingItemComponent as P, ResidencyStatus as R, ViewingTime as V, propertyManageOffersRoutes as a, propertyRoutes as b, propertyManageRoutes as c, propertyManageViewingsRoutes as d, PropertyActionsComponent as e, featureManageRoutes as f, PropertyItemComponent as g, PropertyPricingComponent as h, PropertyPriceType as i, PropertyVideoProvider as j, PropertyStatus as k, lettingManageRoutes as l, PropertyType as m, PropertyInventoryStatus as n, PropertyScope as o, propertyReviewRoutes as p, PropertyViewingStatus as q, PropertyViewerCategory as r, PropertyOfferTimelineStatus as s, tenantManageRoutes as t, PropertyOfferType as u, PropertyOfferStatus as v, PropertyApplicantType as w };
+//# sourceMappingURL=rolatech-angular-property-rolatech-angular-property-CQG71H-d.mjs.map